- 博客(69)
- 收藏
- 关注
RSS订阅原创 CSS解析与主线程阻塞：深入理解浏览器的渲染阻塞机制
摘要： CSS解析会阻塞浏览器主线程，但仅影响渲染而非DOM构建。关键机制包括：1) CSSOM构建完成前阻止页面渲染（避免FOUC）；2) 阻塞后续JavaScript执行以确保样式一致性。优化策略包括：内联关键CSS、异步加载非关键资源、利用媒体查询减少阻塞。现代框架需注意CSS打包导致的阻塞问题，可通过性能API监控加载耗时。理解这些特性对前端性能优化至关重要。
2025-11-27 16:28:35
544
原创 JavaScript深入之函数组合详解
函数组合是将多个简单函数组合成一个更复杂函数的过程。组合后的函数会按照从右到左（或从左到右）的顺序依次执行这些函数。
2025-10-24 22:05:29
326
原创 JavaScript之参数按值传递
JavaScript函数参数传递机制解析：本文通过实例分析澄清了JavaScript参数传递的实质。按值传递适用于基本类型（如数字、字符串），而引用类型（如对象）采用按共享传递机制——传递的是对象引用的副本。这意味着： 修改对象属性会影响原始对象 重新赋值参数变量不会影响原始引用 函数内外打印的是各自作用域的变量 核心区别在于：按共享传递允许修改共享对象属性，但不能改变原始变量引用。这解释了为何函数内重新赋值参数后，外部变量仍保持原值。
2025-10-23 17:53:33
407
原创 Cookie、Session与Token的技术解析：从原理到实践
摘要： Cookie、Session与Token是Web身份认证的三大机制，各有适用场景。Cookie通过响应头下发数据（≤4KB），浏览器自动携带，适合记住登录状态等简单场景，但需防范CSRF/XSS攻击。Session在服务端存储敏感数据，仅向客户端返回ID，适合金融等高安全场景，但需Redis解决分布式问题。Token（如JWT）采用去中心化验证，适合单点登录和API生态，需防范泄露风险。安全防护需遵循OWASP推荐，如Cookie启用HttpOnly、Session定期更换ID等。技术选型取决于数据
2025-10-16 09:50:29
544
原创 Next.js 使用 client Hooks的几种解决方案
Next.js中在App Router架构下使用React Hooks的几种解决方案：1）直接在组件顶部添加"use client"指令；2）在父组件添加指令批量标记子组件；3）将客户端逻辑分离到单独组件；4）使用React.lazy动态导入。方案选择需权衡开发效率与性能，交互性强的页面适合直接标记为客户端组件，而复杂页面可采用逻辑分离方案。
2025-10-14 12:00:14
355
原创 理解 JavaScript 中的 this 上下文保存
摘要：JavaScript中this的指向取决于函数调用方式，在闭包和定时器等场景中容易丢失原始上下文。防抖函数示例展示了setTimeout回调中this指向变化的问题，通过提前保存this值（const context = this）并使用apply方法可保持正确上下文。实际案例验证了保存this对对象方法调用的必要性，这是处理异步回调时确保正确执行上下文的关键技术。（149字）
2025-10-13 23:42:25
413
原创 为什么在 JavaScript 中 2025/05/28 和 2025-05-28 会被解析成不同的日期？
JavaScript 日期解析存在时区陷阱：斜杠格式（2025/05/28）按本地时间解析，而连字符格式（2025-05-28）按 UTC 解析，导致 8 小时时差。这是由于历史规范冲突，ES5 将 ISO 格式视为 UTC，而浏览器实现存在差异。解决方案包括：显式指定时区（如 +08:00）、使用数字参数构造、统一处理输入格式或使用日期库（如 date-fns）。未来 Temporal API 将提供更清晰的日期时间处理方式。关键原则：绝不依赖隐式解析，生产环境必须显式声明时区，新项目优先使用日期库。
2025-08-13 10:04:30
851
原创 力扣寻找数组中心索引-性能优化思考
本文对比了两个寻找数组中心索引的JavaScript函数性能差异。虽然两个函数时间复杂度均为O(n)，空间复杂度均为O(1)，但实际测试显示第一个函数比第二个函数快47%。主要原因包括：1）第一个函数使用原生for循环而非Array.reduce()计算总和，减少了函数调用开销；2）减少临时变量rightSum的使用，优化内存访问；3）简化代码路径，移除空数组检查。测试数据表明，在处理100万长度数组时，第一个函数执行时间从15ms降至8ms，内存占用也减少4.7%。结果表明，在相同算法复杂度下，实现细节的
2025-07-01 10:41:26
368
原创 页面通信的方式 :postMessage向指定窗口发送信息
是 HTML5 引入的一个跨文档通信 API，允许不同窗口或 iframe 之间安全地发送消息。通过，你可以向指定的窗口或 iframe 发送信息，并且接收方可以通过监听message事件来接收这些信息。
2024-12-11 11:50:10
3501
原创 单元测试怎么做
Vue 项目的单元测试可以通过 Jest 和 Vue Test Utils 来完成，具体步骤包括：安装 Jest 和 Vue Test Utils。配置 Jest 和 Babel，支持 ES6 及 Vue 组件测试。编写单元测试，使用 shallowMount 或 mount 挂载 Vue 组件，并对组件的输出进行断言。运行测试，确保组件功能符合预期。可以配置 CI/CD 流程，自动运行测试，确保每次提交的代码是经过验证的。
2024-11-06 15:40:13
1286
原创 MVVM前端开发模型,怎么快速定位问题
MVVM（Model-View-ViewModel）是一种常见的前端开发架构，主要用于分离应用的逻辑和UI，提升代码的可维护性和可测试性。在MVVM中，代表数据层，代表用户界面层，而是连接两者的中介，负责处理UI和数据之间的交互。在开发中，尤其是调试和快速定位问题时，可能会遇到一些挑战。
2024-11-06 14:45:29
1068
原创 为什么说vue是双向数据流
Vue 的 双向数据绑定 是其最大的特点之一，通过 v-model 指令实现了数据和视图之间的双向同步，简化了开发流程。与传统的单向数据流模型相比，Vue 提供了一种更加直观和自动化的数据绑定机制，适用于表单、用户输入等场景。但它也带来了性能和维护上的挑战，因此在大规模应用中可能需要谨慎使用。
2024-11-06 14:36:31
1221
原创 如何暴露子组件属性方法
在 Vue.js 中，二次封装组件是指将一个或多个已有组件封装成一个新的组件，以便于复用和管理。在这种情况下，可能需要暴露子组件的方法以供父组件调用。
2024-10-21 09:45:41
634
原创 闭包导致内存泄漏是个伪命题?
内存泄漏是指程序在运行过程中，不再使用的内存空间未被回收，导致可用内存逐渐减少。意外的全局变量：忘记声明变量，导致它成为全局变量。闭包：当闭包保持对外部变量的引用时，如果不适当地管理这些引用，可能导致内存无法被回收。事件监听器：未移除的事件监听器会保持对对象的引用，导致无法释放内存。DOM引用：如果DOM元素被引用但未从页面中删除，可能会造成内存泄漏。闭包并不等于内存泄漏：闭包是JavaScript中的一个重要特性，通常是安全和有用的。
2024-10-19 20:03:24
528
原创 前端流式输出3种实现
Fetch API：适合在HTTP响应中逐步获取和处理数据流。Server-Sent Events：用于从服务器推送实时事件，简单易用。WebSockets：提供双向通信，适合需要实时交互的应用。
2024-10-19 19:58:23
8657
2
原创 js的for in 和 for of的详解
特性for...infor...of遍历对象类型对象的可枚举属性可迭代对象（数组、字符串等）结果属性名（key）属性值（value）遍历方式包括原型链上的可枚举属性仅遍历对象本身的元素不推荐用于数组（可能导致意外结果）对象使用场景遍历对象的属性遍历数组、字符串等可迭代对象。
2024-10-18 11:52:12
674
原创 JavaScript找到深层dom元素并修改的全部方法
在 JavaScript 中，找到深层标签元素并进行修改有多种方法。这些方法可以帮助我们遍历和操作 DOM 结构。以下是所有常用的方法，包括简单查找、选择器、遍历等方式，以及如何修改这些元素的属性和内容。
2024-10-12 09:12:23
625
原创 如何防止按钮重复提交
在前端开发中，防止按钮重复提交是一个常见的需求，可以避免因用户重复点击导致的多次请求发送，从而影响服务器性能或导致数据错误。
2024-10-09 16:45:04
906
原创 react卸载组件通常需要消除哪些副作用
在React中卸载组件时，妥善管理和清理副作用是非常重要的。通过在的清理函数中处理事件监听器、定时器、异步请求、订阅等，可以有效避免内存泄漏和性能问题，从而提升应用的稳定性和用户体验。useEffect。
2024-10-07 13:19:36
1045
原创 js统计字符串中每个字符出现的次数
统计字符串中每个字符出现的次数可以使用对象或 Map 来存储字符及其对应的计数。以下是几种常用的方法来实现这一功能。
2024-09-29 10:34:05
2035
原创 JavaScript之填充数组的五种方法
填充数组是一种常见的操作，尤其是当你需要初始化数组或填充默认值时。本文将介绍几种不同的方法来填充数组，每种方法都有其适用的场景和用法。
2024-09-12 17:51:22
2038
原创 JavaScript之填充字符串五种方法
在 JS开发中，填充字符串是一个常见的操作，用于在字符串的开头或结尾添加特定字符，使其达到所需的长度。本文将介绍几种实现字符串填充的方法，包括内置方法和一些手动实现的方式。
2024-09-12 17:41:38
1738
原创 JavaScript之如何优化模板字符串的性能
模板字符串在大多数场景下是非常方便和强大的，但在性能要求高的场景下，合理地优化和调整使用方式可以显著提高性能。减少复杂的模板字符串创建、避免在循环中频繁使用复杂模板、优化嵌套表达式的计算、使用更高效的字符串操作方法，以及在不需要模板字符串的情况下考虑使用普通字符串拼接，都是优化性能的有效策略。
2024-09-11 17:33:49
890
原创 JavaScript深入之Class构造及继承的底层实现原理
在 JavaScript 中，class 语法是 ES6（ECMAScript 2015）引入的，用于创建对象的模板和实现继承。尽管 class 语法提供了一种更接近其他面向对象编程语言（如 Java 和 C++）的方式来定义类和继承，但它的底层实现原理仍然基于 JavaScript 的原型链机制。下面是对 class 构造和继承底层实现原理的详细解释。
2024-09-09 22:38:14
835
原创 JavaScript 深入之浮点数精度
0.1 + 0.2 是否等于 0.3 作为一道经典的面试题，已经广外熟知，说起原因，大家能回答出这是浮点数精度问题导致，也能辩证的看待这并非是 ECMAScript 这门语言的问题，今天就是具体看一下背后的原因。
2024-09-07 23:13:31
1395
原创 为什么vite引用静态资源 new URL 更常用
总之，使用new URL处理静态资源路径可以提高代码的可靠性、可维护性，并确保在不同环境下的一致性。Vite 的构建和优化流程与new URL的使用相结合，使得资源引用更加稳健和自动化。
2024-09-05 11:53:18
948
原创 点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？
● 点击刷新按钮或者按 F5：浏览器直接对本地的缓存文件过期，但是会带上If-Modifed-Since，If-None-Match，这就意味着服务器会对文件检查新鲜度，返回结果可能是 304，也有可能是 200。● 用户按 Ctrl+F5（强制刷新）：浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200。● 地址栏回车： 浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容。
2024-09-02 17:30:34
588
原创 CSS基础 单行／多行文本溢出
普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略。实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过。理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现。可以看到，设置单行文本溢出较为简单，并且省略号显示的位置较好。需要注意的是，如果文本为一段很长的英文或者数字，则需要添加。内核的浏览器，由于移动端大多数是使用。一般文本存在英文的时候，可以设置。，作用是设置文本不换行，是。实现方式也很简单，涉及的。实现也非常简单，核心的。可以看到，上述使用了。
2024-08-29 20:34:30
2227
原创 CSS基础 什么是盒模型
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒（box）一个盒子由四个部分组成：content、padding、border、margin在css中盒模型可以分为假设一个盒子的css如下。
2024-08-28 15:34:24
971
原创 HTML5 数据 URL(data URL)是什么?
数据 URL（）是一种特殊的 URL 方案，它允许在网页或应用中嵌入数据，而不是通过外部资源进行引用。数据 URL 的格式使得你可以将数据直接嵌入 HTML、CSS 或 JavaScript 中，从而避免了需要通过额外的 HTTP 请求加载外部资源。
2024-08-27 09:17:22
1054
原创 Vue 2 项目打包优化
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。路由懒加载 & 异步组件， 不会一上来就将所有的组件都加载，而是访问到对应的路由了，才加载解析这个路由对应的所有组件。在项目的根目录会自动创建一个文件夹`dist`,dist中的文件就是打包后的文件，只需要放到服务器中即可。vue脚手架只是开发过程中，协助开发的工具，当真正开发完了 => 脚手架不参与上线。打包后，可以生成，浏览器能够直接运行的网页 => 就是需要上线的源码！脚手架: Vue CLI。
2024-08-26 19:32:26
589
原创 return 、break和continue的区别和作用
return 键字并不是专门用于跳出循环的,语句用于从函数中返回一个值并终止函数的执行。当函数遇到return语句时，它会立即停止执行，并将指定的值返回给调用该函数的地方。如果没有指定返回值，则返回undefined。
2024-08-26 10:15:11
931
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人