杜江的博客

前端 AI 面试主要考什么？ 重点不是训练大模型，而是如何把 AI 能力稳定、安全、低延迟地集成进前端产品。 高频方向包括流式响应、聊天 UI、RAG、工具调用、Agent、多模态、安全、成本和可观测性。 前端工程师需要懂大模型到什么程度？ 需要理解模型输入输出、上下文窗口、token、流式返回、工具调用和结构化输出。 不一定要会训练模型，但要能把模型能力变成可靠的用户体验。 LLM 应用和传统前端应用最大的区别是什么？ 传统应用输出相对确定，LLM 应用输出具有概率性和不确定性。 因此前端要额外处理加载过程、流式状态、错误兜底、结果校验和安全边界。 前端接入 AI 的常见架构是什么？ 浏览器不直接调用模型密钥，而是请求自己的后端或边缘函数。 后端负责鉴权、拼 prompt、调用模型、处理工具、做审计和返回流式结果。 为什么不建议前端直连大模型 API？ API Key 会暴露在浏览器里，任何用户都能提取并滥用。 业务规则、权限校验、限流、日志和安全过滤也不应该放在纯前端。 AI 应用里的 token 是什么？ token 是模型处理文本的基本单位，可以理解为...

2026 年 CSS 面试重点有哪些？ 重点不只是盒模型、居中和 BFC，还包括现代布局、容器查询、级联层、:has()、CSS 嵌套、@scope、动画性能和工程治理。 面试更看重你能不能解释“为什么这样写更稳”，以及如何处理复杂项目里的样式冲突、性能和兼容性。 CSS 的核心能力是什么？ CSS 负责描述页面表现，包括布局、排版、颜色、动画、响应式和视觉状态。 现代 CSS 已经从“写样式”扩展到组件作用域、设计系统、主题变量和交互状态管理。 CSS 级联由哪些因素决定？ 主要由来源、重要性、级联层、选择器优先级、作用域距离和源码顺序共同决定。 不要只背“id 大于 class”，现代 CSS 还要理解 @layer 和 @scope。 CSS 优先级怎么计算？ 通常按内联样式、ID、类/属性/伪类、标签/伪元素来比较。 同级优先级相同时，后声明的规则覆盖先声明的规则。 !important 为什么要少用？ 它会提高声明重要性，让后续覆盖变困难。 大型项目中滥用 !important 会让样式系统失控，应优先用层级、作用域和结构解...

前端工程化主要解决什么问题？ 它解决的是项目从开发、构建、测试、发布到监控的全流程效率和质量问题。 核心目标是让团队在规模变大后仍然能稳定交付、快速迭代、可回滚、可追踪。 2026 年前端工程化面试重点有哪些？ 高频方向包括 Vite、Webpack、构建性能、产物优化、Monorepo、CI/CD、灰度发布、微前端和包管理。 面试更看重“为什么这么做”和“线上问题如何定位”，而不只是背配置项。 Vite 的核心思想是什么？ 开发阶段利用浏览器原生 ESM 按需加载源码，避免每次启动都打完整包。 生产阶段仍会进行打包、压缩、Tree Shaking 和资源切分，保证线上加载效率。 Vite 为什么启动快？ 它不需要先把整个项目 bundle 完再启动服务，而是先启动 dev server。 源码模块在浏览器请求时才转换，依赖则提前预构建并缓存。 Vite 开发环境和生产环境为什么不是同一套机制？ 开发环境追求启动快、热更新快，所以基于 ESM 按需转换。 生产环境追求资源体积、缓存命中和加载性能，所以仍需要打包优化。 Vite 的依赖预构建是什么？ ...

Vue3 相比 Vue2 最大的变化是什么？ 响应式从 Object.defineProperty 改为基于 Proxy，对象新增、删除属性也能被追踪。 新增 Composition API，更适合复杂逻辑复用和大型项目组织。 编译器、运行时、Tree-shaking、TypeScript 支持都有明显提升。 Vue3 还引入了 Fragment、Teleport、Suspense、多个根节点等能力。 Vue3 为什么使用 Proxy 做响应式？ Proxy 可以代理整个对象，不需要像 Vue2 那样递归劫持每个属性。 它能监听属性新增、删除、in、ownKeys 等操作。 对数组下标和 length 的处理也更自然。 缺点是无法兼容 IE11。 Vue3 响应式的基本流程是什么？ 读取响应式数据时，通过 track 收集当前副作用函数。 修改响应式数据时，通过 trigger 找到依赖并触发更新。 组件渲染本质上也是一个响应式副作用。 依赖收集依赖“读取”，没有读取过的数据变化不会触发当前组件更新。 reactive 和 ref 有什么区别？ reactive 通常...

React 是什么？ React 是一个用于构建用户界面的 JavaScript 库，核心是组件化、声明式 UI 和状态驱动视图。 React 只关心视图层，本身不强制路由、请求、状态管理方案。 它适合把复杂页面拆成多个可复用组件，再通过数据变化驱动页面更新。 React 的核心思想有哪些？ 组件化：把页面拆成独立组件，降低维护成本。 声明式：描述 UI 的最终状态，不直接命令式操作 DOM。 单向数据流：父组件通过 props 向下传递数据，子组件通过回调通知父组件。 状态驱动视图：state 或 props 变化后，React 重新计算 UI。 React 和 Vue 的区别？ React 更偏函数和 JSX 表达能力，Vue 更偏模板和渐进式框架体验。 React 官方生态相对克制，路由、状态、请求多由社区方案组合。 Vue 提供更多内置约定，比如模板语法、指令、SFC、响应式系统等。 面试时不要说谁更好，重点说团队技术栈、项目复杂度和生态选择。 JSX 是什么？ JSX 是 JavaScript 的语法扩展，可以在 JS 中写类似 HTML 的结构。 JSX ...

环境搭建安装node.js 下载地址: https://nodejs.org/en/ 选择一个10以上的版本即可 安装成功后，输入node -v出现版本号就算安装成功了 安装git bash 下载地址: https://git-scm.com/downloads 安装成功后，在空白处右键出现gitbash就算安装成功了 安装完之后，注册用户名和邮箱在控制台输入:git config –global user.name dj49846917git config –global user.email 821084785@qq.com 安装hexo 输入命令: npm install -g hexo-cli进行全局安装 安装成功后，输入hexo -v出现版本号就算安装成功了 创建项目 输入命令：hexo init blog 创建github仓库 新建一个github项目，命名为: dj49846917.github.io 创建ssh，便于推送github时不再重复输入账号密码 在控制台输入：ssh-keygen -t rsa -C 821084785@qq....

butterfly的安装与下载稳定版在你的根目录里： git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 使用主题修改修改根路径下的_config.yml，把主題改為butterfly theme: butterfly 如果你沒有 pug 以及 stylus 的渲染器，請下載安裝： npm install hexo-renderer-pug hexo-renderer-stylus –save or yarn add hexo-renderer-pug hexo-renderer-stylus 使用音乐 输入命令：cnpm install –save hexo-tag-aplayer 在根路径的_config.yml中修改aplayer: meting: true 在你需要引入音乐的页面，---aplayer: true---{% meting "60198" "netease" "...

mac安装nvm 删除已安装的node环境和全局node模块 // 删除全局 node_modules 目录sudo rm -rf /usr/local/lib/node_modules // 删除 nodesudo rm /usr/local/bin/node // 删除全局 node 模块注册的软链cd /usr/local/bin && ls -l | grep "../lib/node_modules/" | awk '{print $9}'| xargs rm 安装nvm 打开终端输入：git clone https://github.com/nvm-sh/nvm.git 再进入 nvm目录中执行install.sh 等待执行完成 输入：cd nvm （进入nvm目录） 再输入：./install.sh （等待执行成功） 配置.bash_profile 进入bash_profilecd ~open ~/.bash_profile 复制以下配置信息并保存expo...

搭建ant-design-pro工程 创建myapp的ant-design-pro工程, 选择ant-design-pro => typescript => simplenpx create-umi myappnpm installnpm run start 在ant-desin-pro中集成bpmnjs 安装bpmnjs及其相关的包npm install --save bpmn-js@10.3.0 bpmn-js-properties-panel@1.11.2 camunda-bpmn-moddle@7.0.1 初始化配置 详细请看这里

记录阿里低代码框架lowcode-engine的学习之路框架相关文档 文档地址：https://lowcode-engine.cn/docV2/intro 开发环境搭建在windows中安装WSL 打开WSL官网：https://docs.microsoft.com/zh-cn/windows/wsl/install 使用手动安装WSL 启用适用于 Linux 的 Windows 子系统 以管理员身份打开 PowerShell（开始菜单右键=>Windows PowerShell<管理员>），并执行命令:dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart 检查运行WSL2的要求 若要更新到 WSL 2，需要运行 Windows 10。 对于 x64 系统：版本 1903 或更高版本，采用内部版本 18362 或更高版本。 对于 ARM64 系统：版本 2004 或更高版本，采用内部版本 19041 或...