- 博客(91)
- 收藏
- 关注
RSS订阅原创 浏览器解析HTML的过程
基于词法单元，依据 HTML 的语法规则，构建一棵解析树（也叫语法树）。在这个过程中，浏览器会将 Token 组合成节点，并按照 HTML 元素的嵌套关系构建树形结构。如果 HTML 文档引用了 CSS 样式（内联样式、外部样式表等），浏览器会解析 CSS 规则，构建 CSS 对象模型（CSSOM）树。如果页面元素的布局发生改变（如添加或删除元素、修改元素尺寸等），就会触发回流，重新进行布局计算。如果只是元素的视觉样式（如颜色、背景等）发生改变，而布局未变，就会触发重绘。
2025-07-11 08:07:22
397
原创 Vue 2的响应式原理中Object.defineProperty有什么缺陷
虽然在Vue 2中实现了响应式系统，但其缺陷促使Vue 3采用更现代的Proxy方案。在Vue 2项目中避免响应式陷阱合理使用Vue.set等API理解Vue 3的架构改进意义在需要深度性能优化时做出正确选择。
2025-06-30 08:00:02
29
原创 Vue中的.sync修饰符详解
sync修饰符是Vue提供的一种语法糖，用于简化父子组件之间的双向数据绑定，它在Vue 2.x中被广泛使用，但在Vue 3.x中其功能被整合到了v-model中。
2025-06-30 07:53:11
28
原创 聊聊React的fiber机制
拆解任务：把大订单拆成小菜品（分片）灵活调度：让厨师优先做快餐（优先级）进度管理：随时暂停/继续工作（可恢复）高效交付：所有菜品一起上桌（批量提交）💻 复杂应用的流畅性🚀 用户交互的即时响应🎮 动画效果的顺滑运行🔮 为未来功能奠定基础Fiber 不是普通更新，而是 React 向"操作系统级调度"的进化，让网页应用获得原生应用般的流畅体验！
2025-06-26 07:51:33
24
原创 AST抽象语法树通俗详解
源代码就像小说原文AST就像这本小说的详细目录结构fill:#333;color:#333;color:#333;fill:none;小说原文章节标题段落句子主语谓语宾语AST（抽象语法树）每个节点代表代码中的一个结构（变量、函数、表达式等）节点之间的关系表示代码的层级结构忽略不重要的细节（空格、注释、分号等）是什么：代码的结构化表示干什么：分析、转换、优化代码特点：结构化、可遍历、可修改作用：让机器真正"理解"代码fill:#333;color:#333;
2025-06-24 08:14:57
245
原创 详细说说浏览器是如何渲染页面的
浏览器渲染页面是一个复杂的多阶段过程，涉及HTML解析、CSS计算、布局绘制等多个关键步骤。下面我将详细剖析现代浏览器的渲染机制。
2025-06-23 08:19:00
772
原创 CSS 样式优先级规则与权重系统详解
CSS 样式优先级是决定当多条规则应用于同一个元素时，哪条规则会最终生效的规则体系。下面我将全面解析 CSS 优先级规则和权重计算方式。
2025-06-22 10:34:17
879
原创 tree- shaking的用途，原理
Tree Shaking 是现代 JavaScript 打包工具中一项关键的优化技术，它能够显著减少最终打包文件的体积。下面我将从多个维度详细解析其用途和工作原理。
2025-06-22 10:16:33
94
原创 V8的垃圾回收机制
V8 是 Chrome 和 Node.js 使用的 JavaScript 引擎，其垃圾回收(GC)机制对性能有重大影响。下面我将全面介绍 V8 的垃圾回收原理、算法和优化策略。
2025-06-22 10:09:55
51
原创 前端的瓦片化
场景推荐方案示例库长列表/表格虚拟滚动地图瓦片地图加载Leaflet.js高清图像Canvas 瓦片渲染3D 地理数据WebGL 瓦片渲染Three.js大数据可视化数据分块 + 虚拟渲染D3.js + 自定义实现通过瓦片化技术，前端应用可以高效处理海量数据和复杂视觉内容，提供流畅的用户体验。
2025-06-22 10:00:16
511
原创 Vue实例挂载过程深度解析
从实例初始化开始，经历生命周期钩子调用建立响应式系统编译模板（如果需要）创建虚拟 DOM 树将虚拟 DOM 渲染为真实 DOM最终完成挂载更合理地使用生命周期钩子优化组件性能避免常见的错误和陷阱深入理解 Vue 的响应式原理通过掌握挂载过程的细节，开发者可以编写出更高效、更健壮的 Vue 应用。
2025-06-22 06:46:57
214
原创 javascript原型、构造函数、实例、原型链之间的关系
构造函数 → 原型对象每个构造函数（如Person）都有一个prototype属性，指向其原型对象（原型对象 → 构造函数每个原型对象都有一个属性，指向创建它的构造函数（即实例 → 原型对象每个实例（如person1）的（即__proto__）指向构造函数的原型对象（原型链的终点所有原型链最终指向，其为null（即构造函数通过prototype创建原型对象。实例通过连接到原型对象。原型链通过层层嵌套的实现属性继承。理解这一关系是掌握 JavaScript 面向对象编程的基础。
2025-06-22 05:07:17
167
原创 WebWorker、SharedWorker和ServiceWorker有哪些区别？
ServiceWorker 适合提升 Web 应用可靠性，WebWorker 解决性能瓶颈，SharedWorker 用于特定跨页通信场景。三者可组合使用（如用 ServiceWorker 管理 WebWorker 的按需加载）。
2025-06-22 05:06:51
52
原创 强缓存 vs 协商缓存：浏览器缓存机制详解
两者协同工作以减少网络请求，提升页面加载速度。以下是它们的核心区别、工作流程和实际应用场景。再次请求，携带 If-Modified-Since/If-None-Match。返回资源 + Cache-Control: max-age=3600。返回资源 + Last-Modified/ETag。返回 304 (Not Modified)再次请求同一资源（在1小时内）返回 200 + 新资源。
2025-06-22 05:06:11
733
原创 vue路由的query和params有什么区别
在 Vue Router 中，query和params是两种不同的路由参数传递方式，它们在和上有显著区别。?key=value:idqueryparams/user/123params如果通过path跳转，params刷新页面时，需要确保路由配置能匹配当前路径，否则paramsqueryquery。
2025-06-20 19:27:57
123
原创 vue3 相比较于 vue2，在编译阶段有哪些改进？
docs>## 组件文档</docs>性能飞跃：通过静态提升、补丁标志等优化，减少 40% 运行时开销开发体验提升：更友好的错误提示、更好的源码映射支持体积优化：Tree-shaking 支持使最终打包体积减少 50%扩展性增强：模块化架构支持自定义编译器和插件现代化特性、CSS 变量注入等新特性这些改进使 Vue 3 在复杂应用场景下仍能保持高性能，同时提供了更灵活的开发模式。
2025-06-20 08:34:08
27
原创 前端面试题：Vue的路由守卫是什么，可以在什么场景下使用
Vue 的路由守卫（Route Guards）是 Vue Router 提供的。，允许开发者在路由跳转的不同阶段插入自定义逻辑。“Vue的路由守卫分为全局、路由独享和组件级三类。调用复用组件的beforeRouteUpdate。导航完成后触发，无修改导航能力，适合日志记录。调用失活组件的beforeRouteLeave。调用激活组件的beforeRouteEnter。调用路由配置的beforeEnter。调用，此时组件实例未创建，可通过。触发，适合防止未保存修改丢失。触发，适合全局权限控制。
2025-06-20 08:07:24
44
原创 工作中如何动态设置webpack或vite打包出来的产物的缓存机制
构建阶段所有静态资源使用分离高频变更和低频变更代码部署阶段带哈希文件 → 永久强缓存HTML文件 → 协商缓存API接口 → 按需设置短缓存运行时Service Worker精细控制API请求添加缓存头监控定期检查缓存命中率自动化验证缓存头工具链推荐Webpack:Vite: 默认优化 +Nginx: 正则匹配哈希文件CDN: 基于路径模式的缓存策略监控: Lighthouse + Web Vitals。
2025-06-14 10:11:52
82
原创 常说的前端安全涉及到哪些
攻击类型防护策略工具/技术XSS输入过滤 + CSP + 转义DOMPurify、helmet库CSRFcsrf、csurf中间件数据泄露最小化存储 + HTTPS依赖风险版本锁定 + 定期审计点击劫持核心原则零信任：永远不信任客户端输入纵深防御：多层防护机制叠加最小权限：仅授予必要访问权限通过结合技术手段和开发流程管控，才能构建真正安全的Web应用。
2025-06-14 06:38:14
929
原创 Cookie vs Token：为什么有了 Cookie 还需要 Token
（如 JWT）都是用于身份验证和会话管理的技术，但它们的设计目标、使用场景和安全性有显著差异。手动添加头：Authorization: Bearer <token>创建 Session 并存储。生成 JWT（含用户信息）返回 Token（不存库）在现代 Web 开发中，自动携带 Cookie。登录（用户名/密码）验证 Session。登录（用户名/密码）
2025-06-14 05:54:17
173
原创 浏览器Cookie 的 API 和使用详解
Cookie 是浏览器存储小型数据（通常不超过 4KB）的一种机制，主要用于会话管理、用户偏好存储和追踪。它的 API 相对简单，但涉及。（封装 Cookie 操作库）
2025-06-14 05:42:29
132
原创 聊聊浏览器的缓存，cookie和storage和indexDB
fill:#333;color:#333;color:#333;fill:none;是否简单键值复杂查询是否需要与服务器通信?Cookie数据复杂度IndexedDB需要持久化?使用 Dexie.js 简化黄金法则身份认证 →Cookie（配合 HttpOnly）用户偏好 →临时数据 →离线应用 →IndexedDB。
2025-06-14 05:27:02
299
原创 javascript为什么普通for循环的性能高于forEach
for循环性能更优的核心原因是避免了函数调用开销，且结构更简单，便于引擎优化。追求极致性能（如高频数据处理）：使用for循环或for...of（适用于迭代器对象）。日常业务逻辑：优先使用forEachmap等数组方法，提升代码简洁性。随着 JavaScript 引擎的发展，两者的性能差距可能逐渐缩小，但函数调用的本质差异决定了for循环在底层效率上仍具有天然优势。
2025-06-13 12:40:40
45
原创 vue.js是通过proxy或defineProperty来实现双向数据绑定的。那React的数据是如何绑定的呢？
机制VueReact数据变化检测自动监听（Proxy）无监听！更新触发点数据修改时自动触发必须手动调用 setState组件更新精准更新依赖该数据的组件整个组件重新执行心智模型“数据驱动”“状态快照 + 重新渲染”
2025-06-11 08:08:16
82
原创 JavaScript中的变量在内存中的具体存储形式是什么？
特性基本类型引用类型存储位置栈内存堆内存（引用在栈）内存大小固定（小）不固定（动态）传递方式值传递（复制值）引用传递（复制地址）垃圾回收条件离开作用域无引用指向对象典型示例理解变量的内存存储形式有助于编写高效、安全的代码，避免常见的内存问题（如泄漏、过度占用）。
2025-06-10 07:33:45
29
原创 try...catch可以捕获到异步代码中的错误吗
同步代码可捕获所有抛出的错误。Promise：需使用.catch()或配合。回调函数：在回调内部使用，无法跨上下文捕获。全局监听：通过捕获未处理的 Promise 错误。最佳实践对 Promise 使用.catch()或。在异步回调（如定时器、事件监听）内部添加。全局注册事件，防止错误遗漏。
2025-06-09 07:46:32
272
原创 JavaScript 内存泄漏排查指南
内存泄漏指不再需要的对象仍占用内存未被释放，长期积累会导致页面卡顿甚至崩溃。建议在开发阶段建立内存检查 Checklist。关键点：内存问题应通过。
2025-06-08 09:49:14
111
原创 js对象可以使用for...of迭代吗
普通对象默认不支持for...of，因为未实现可迭代协议。解决方案手动为对象添加方法（适用于需要自定义迭代逻辑的场景）。通过values()entries()将对象转换为数组后迭代（更常用）。注意for...in可以迭代对象的键（包括原型链上的属性），但属于枚举遍历，与for...of的迭代机制不同。
2025-06-08 09:46:22
44
原创 postMessage 解决跨域问题的机制详解
在保持跨域能力的同时，通过严格的源验证和消息过滤机制保障了安全性。实际项目中建议结合 CSP (Content Security Policy) 增强防护。是 HTML5 提供的跨文档通信 API，其解决跨域问题的核心在于。，通过安全可控的方式实现不同源窗口间的数据传递。监听 message 事件。
2025-06-08 09:45:03
151
原创 对象取值中 a.b.c.d 和 a[‘b‘][‘c‘][‘d‘] 有何区别？
特性点号表示法 (a.b.c方括号表示法 (属性名合法性必须是合法标识符可以是任意字符串动态属性名❌ 不支持✅ 支持特殊字符/空格❌ 不支持✅ 支持保留关键字❌ 可能报错✅ 支持可读性高较低（尤其嵌套层级深时）性能几乎无差异几乎无差异根据具体场景选择合适的语法，必要时结合可选链操作符（?）确保安全访问。
2025-06-08 09:38:52
31
原创 JavaScript如何检测对象是否循环引用
实际测试：递归法在 Chrome 下可处理深度 ~10,000 的对象，迭代法可处理 ~100,000。循环引用是指对象通过属性链间接引用自身的场景（如。
2025-06-08 09:25:04
39
原创 async/await原理，手写async函数
现代 JavaScript 引擎（V8/SpiderMonkey）对 Async/Await 有深度优化，性能比手动 Promise 链高约 3-5%（V8 v9.4+）调用 asyncFunc()Generator 函数。Promise 链式调用。创建主 Promise。
2025-06-08 09:19:02
71
原创 取消promise请求：AbortController
本文详解前端使用AbortController中止异步请求的方法。核心通过创建AbortController实例，利用其signal属性与fetch/axios等API结合，调用abort()即可中止请求。文章包含原生fetch中止、通用Promise封装、Axios实现及React组件中的实践方案，对比了不同中止方案的优缺点，并指出需注意内存清理、不可重启等要点。还提供了竞态请求、多请求中止等高级场景解决方案，推荐优先使用该原生API，必要时通过polyfill兼容旧浏览器。（149字）
2025-06-08 08:33:41
161
原创 深入理解 AbortController：控制异步操作的终止
AbortController：控制异步操作的终止 AbortController是现代JavaScript中用于中止异步操作的标准API，由控制器(AbortController)和信号(AbortSignal)两部分组成。核心应用包括：1)中止fetch请求，通过传递signal实现请求取消；2)处理竞态条件，如超时自动取消请求；3)组件卸载时清理未完成请求(React中特别有用)。该API还可用于WebSocket连接、定时器等其他可中断操作。高级用法包括创建可中止的异步函数和实现请求批量取消。通过监
2025-06-08 08:15:43
154
原创 做为一个老前端，说说对Promise的了解
Promise 是 JavaScript 中用于表示异步操作最终完成或失败的对象。它代表一个尚未完成但预计将来会完成的操作。始终处理错误：每个 Promise 链都应该以.catch()或 try/catch 结束保持链式扁平：避免嵌套 Promise，保持代码可读性合理使用 async/await：简化异步代码，但注意不要滥用利用静态方法等处理复杂场景考虑取消机制：长时间运行的异步操作应提供取消选项性能优化：批量处理异步操作，避免不必要的 Promise 包装。
2025-06-08 08:14:53
25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人