haoxiugong

摘要： 基于 Vue 3.4+（runtime-core） 一、组件更新链路 响应式数据变化 ↓ 触发 effect（scheduler） ↓ 组件 render 函数重新执行 ↓ 生成新的 VNode Tree ↓ patch(oldVNode, newVNode) ↓ 精确更新真实 DOM 虚拟 DOM 阅读全文

摘要： 下文基于最新 Chromium 架构（2024–2025）+ WHATWG 事件循环规范。 现代浏览器进程模型（Chromium Site Isolation 架构） ​现代浏览器是多进程架构，每个 Render Process （渲染进程）中有多个线程（主线程、合成线程、raster（光珊化） 线 阅读全文

摘要： 现在 AI 对话发展迅速，而这个功能主要就是基于 SSE，因此我们面试时，SSE 会有很高的频率被问到，这里简单聊一聊 SSE。 概念与适用场景 什么是 SSE？SSE（Server-Sent Events）是浏览器端通过 EventSource 与服务端建立的一条长期单向连接（HTTP），服务端可 阅读全文

摘要： Gulp 是一个基于流（Stream）的构建工具，用于自动化前端开发中的常见任务（如文件压缩、编译、自动化测试等）。它的设计理念是将任务流程处理成数据流，通过管道（Pipeline）处理数据，以达到自动化构建的目的。 现在对 gulp 的使用已经很少了，但是有些面试官在面试的时候还是会问，因此单独写 阅读全文

摘要： 概念 ​Rollup 是一个 ES 模块打包器（bundler）​，擅长把多个 ESModule 打包成一个或多个 bundle，目标常是库（library）或前端应用的生产构建。 核心理念是 ​基于 ES Module 的静态分析​：Rollup 能更精准做 tree-shaking（删除未使用导 阅读全文

摘要： 面试官经常问我们性能优化，但我们每次都是想到什么回答什么，要么回答不到面试官的点上，要么太紧张好多都想不起来，这篇文章我从需要性能优化的根因——页面加载慢来告诉你性能优化应该从哪些方面考虑。 1. 网络问题 网络主要就是三个方面：资源太多、网络带宽延迟高、DNS 解析时间长。 1.1 资源请求过多 阅读全文

摘要： 基本概念 ​Loader​：对单个资源（文件）做转换的函数（把一个文件从一种内容转换为另一种内容），在 module 层面运行。 ​Plugin​：在整个构建过程的生命周期里插入钩子逻辑（修改编译器、生成资源、注入行为等），在 compiler/compilation 层面运行。 概念说明 Load 阅读全文

摘要： 性能优化方案 优化分类： 优化打包后的结果（分包、减小包体积、CDN 服务器） ==> 更重要 优化打包速度（exclude、cache-loader） 代码分割（Code Splitting） 一、主要目的 ​减少首屏加载体积​：避免一次性加载全部代码 ​利用浏览器缓存​：第三方库（如 React 阅读全文

摘要： 这是我们前端最常见的两种攻击手段，也是面试中最常考的前端攻击。这篇文章我用最精炼、最优雅，也是面试官最喜欢的回答方式来讲解下 XSS 和 CSRF。 一、XSS（跨站脚本） 原理 攻击者把 恶意脚本 注入到受信任页面并被浏览器执行，脚本 利用页面的信任上下文（Cookies、localStorage 阅读全文

摘要： 常用配置项——Mode 默认值是 production（什么都不设置的情况下）；可选值有：'none' | 'development' | 'production'。 development：会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 developme 阅读全文