- 博客(27)
- 收藏
- 关注
RSS订阅原创 浏览器的垃圾回收机制
V8采用分代式垃圾回收机制，将堆内存分为新生代和老生代。新生代使用Scavenge算法，将内存分为From/To空间，通过复制存活对象实现回收；老生代使用标记清除和标记压缩算法，采用增量标记和并发标记优化性能。内存泄漏常见原因包括：意外创建全局变量、未清除的定时器、未释放的DOM引用以及不合理使用闭包。这些都会导致对象无法被回收，从而占用内存空间。
2025-10-17 23:00:12
249
原创 浏览器同源策略
同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。同源策略限制了从同一个源加载的文档或脚本与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。跨域问题其实就是浏览器的同源策略造成的。当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB；当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。当前域下 ajax 无法发送跨域请求。同源政策的目的主要是为了保证用户的信息安全，它。
2025-10-17 22:24:25
858
原创 浏览器渲染原理
浏览器渲染过程及优化策略 浏览器渲染过程分为构建DOM树、CSSOM树，合成渲染树后进行布局和绘制。关键优化点包括：1) JavaScript使用async/defer异步加载，避免阻塞；2) CSS采用link引入而非@import；3) 减少DOM层级和CSS选择器复杂度；4) 通过文档片段、脱离文档流等方式减少回流重绘。关键渲染路径优化需减少关键资源数量、压缩资源大小、优化加载顺序。注意script标签会阻塞DOM构建，合理使用defer/async属性可提升首屏渲染速度。预解析机制允许并行加载后续资
2025-10-17 21:55:20
862
原创 浏览器事件机制
其次，给上述的例子中每个列表项都绑定事件，在很多时候，需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的，所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的。
2025-10-17 17:46:23
1169
原创 Service Worker
ServiceWorker是一种浏览器后台线程技术，主要用于实现网页缓存功能。它通过HTTPS协议运行以确保安全，工作流程包括：注册ServiceWorker、监听install事件缓存指定文件、拦截请求时优先使用缓存。示例代码展示了注册ServiceWorker和缓存文件的基本实现，开发者可通过浏览器开发者工具检查ServiceWorker状态和缓存内容。该技术能有效提升网页加载速度，改善用户体验。
2025-10-17 16:53:04
138
原创 React-Fiber 理解
React Fiber架构通过协程机制优化渲染性能。Fiber本质上是一种控制流程的让出机制，允许渲染过程中断并将CPU执行权交还浏览器，优先处理高优先级任务。相比React V15的同步递归更新方式，Fiber架构实现了可中断的异步渲染，避免了长时间占用浏览器资源导致的卡顿问题。这种分批处理DOM更新的方式不仅提升了用户体验，还让浏览器有机会进行JIT优化和reflow修正，实现了资源分配的平衡。
2025-10-17 00:11:09
126
原创 $nextTick 原理及作用
Vue的nextTick是基于JavaScript EventLoop原理设计的异步回调队列机制。它通过Promise、MutationObserver等原生方法模拟微/宏任务，实现Vue框架内部和开发者所需的异步DOM更新处理。nextTick的核心价值在于：1)避免同步更新导致的频繁无效渲染；2)配合VirtualDOM减少性能损耗。典型应用场景包括：DOM更新后获取最新数据、created钩子中的DOM操作等。nextTick体现了Vue将JavaScript底层原理与框架需求相结合的巧妙设计，既优化
2025-10-17 00:10:35
325
原创 Vue 中 Computed 和 Watch 的区别
当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch。不支持缓存，数据变化时，就会触发相应的操作；
2025-10-17 00:09:58
222
原创 React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代？
React提供了三种主要的代码复用方式：高阶组件(HOC)、Render Props和Hooks。HOC通过包装组件实现逻辑复用，但存在prop命名冲突问题；Render Props通过函数prop共享数据，但会产生嵌套问题；Hooks是React 16.8引入的新特性，能够在函数组件中复用状态逻辑，解决了前两者的缺点，使用更直观且避免了嵌套。三者各有适用场景，但Hooks因其简洁性和强大功能成为当前推荐的代码复用方案。
2025-10-16 18:14:26
717
原创 React 组件中怎么做事件代理？它的原理是什么？
定义的事件处理器会接收到一个合成事件对象的实例，它符合W3C标准，且与原生的浏览器事件拥有同样的接口，支持冒泡机制，
2025-10-16 15:52:44
152
原创 React 与 Vue 的 diff 算法有何不同？
在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系。
2025-10-16 14:23:29
219
原创 React diff 算法的原理是什么？
摘要：diff算法通过对比新旧虚拟DOM树的差异生成补丁，以最小成本更新真实DOM。其核心策略包括：1）树比对仅对同层级节点比较；2）组件类型相同则进行树比对，否则重新渲染；3）通过key标记优化同层级子节点操作。这些策略有效提升了React的渲染性能，解释了shouldComponentUpdate等优化手段的原理。
2025-10-16 14:06:37
569
原创 虚拟DOM学习
VirtualDOM的主要优势在于性能保证和跨平台能力。它通过JS层面的计算（生成vNode+DOMDiff）代替直接DOM操作，减少重排重绘，确保基本性能下限。作为JS对象，VirtualDOM便于实现服务端渲染、跨平台应用等场景。其核心机制是比较新旧虚拟DOM树，通过diff算法精准更新必要节点，避免全量渲染。同时，抽象DOM操作为数据驱动模式，既提升了开发效率，也避免了手动DOM优化可能带来的性能问题，为团队协作提供了统一的高效方案。
2025-10-16 13:49:19
245
原创 React 学习
帮助我们将界⾯分成了各个独⽴的⼩块，每⼀个块就是组件，这些组件之间可以组合、嵌套，构成整体页⾯。⽤于构建⽤户界⾯的 JavaScript 库，只提供了 UI 层⾯的解决⽅案；遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应⽤程序更⾼效；，遵循从⾼阶组件到低阶组件的单向数据流；使⽤⼀个名为 render()，接收输⼊的数据并返回需要展示的内容。被传⼊的数据可在组件中通过。
2025-08-18 15:41:34
165
原创 Vue3 学习
在setup函数中 this 还不是组件实例，this 此时是 undefined;执行时间：在beforeCreate之前，即组件创建之前；setup是vue3的一个新配置项，值是一个函数；重写虚拟DOM的实现和tree-Shaking。开发环境中，vite无需打包，可快速的冷启动。真正的按需编译，不需要等待整个应用编译完成。移除keyCode支持v-on的修饰符。更好的支持TypeScript；provide与inject。轻量快速的热重载（HMR）ref与active。
2023-03-09 21:30:43
176
原创 vue面试题学习整理
vue 数据双向绑定原理：Vue2.0采用数据劫持结合发布者-订阅者模式的方式实现。核心就是通过方法劫持各个属性的setter和getter,在数据变动时发布消息给订阅者，触发相应的监听回调。需要Observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter。给这个对象的某个值赋值，就会触发setter，那么就能监听到数据变化。
2023-03-06 18:18:13
168
原创 URL和URI的区别？
URL是 Internet上用来描述信息资源的字符串，主要用在各种客户程序和服务器程序上，特别是著名的 Mosaic。web上可用的每种资源如HTML、文档、图像、视频片段、程序等都是由一个URI来定位的。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。@2：存有该资源的主机IP地址（有时也包括端口号）；@3：资源自身的名称，由路径表示，着重强调于资源。URL 是统一资源定位符，相当于一个人的家庭住址。@3：主机资源的具体地址，如目录和文件名等。@1：访问资源的命名机制；
2023-02-20 13:32:33
214
原创 http协议中数据请求方法：
客户端接收syn+ack包后，发送ack包，双方进入established状态。· 服务端接收并确认syn包后，发送syn+ack包，进入syn_recv状态；· 客户端发送syn(同步序列编号)请求，进入syn_send状态，等待确认；· SYN表示建立连接，FIN表示关闭连接，ACK表示响应；· 服务端-ACK，FIN-->客户端，LAST-ACK；· 服务端-ACK-->客户端，CLOSE-WAIT；· 客户端-FIN-->服务端，FIN-WAIT；· SYN表示建立连接，ACK表示响应；
2023-02-20 13:30:02
130
原创 XSS 攻击
CSRF（Cross-site request forgery），中文名称：跨站请求伪造。容易造成个人隐私泄露以及财产安全。以你的名义发送恶意请求，攻击者盗用了你的身份，· 使用token；
2023-02-20 13:28:23
110
原创 http协议中数据请求方法：
客户端接收syn+ack包后，发送ack包，双方进入established状态。· 服务端接收并确认syn包后，发送syn+ack包，进入syn_recv状态；· 客户端发送syn(同步序列编号)请求，进入syn_send状态，等待确认；· SYN表示建立连接，FIN表示关闭连接，ACK表示响应；· 服务端-ACK，FIN-->客户端，LAST-ACK；· 服务端-ACK-->客户端，CLOSE-WAIT；· 客户端-FIN-->服务端，FIN-WAIT；· SYN表示建立连接，ACK表示响应；
2023-02-20 13:27:14
298
原创 浏览器安全
文章摘要：中间人攻击(MITM)通过拦截通信数据实施攻击，防范需使用加密技术。前端安全问题包括XSS、CSRF、iframe滥用和恶意第三方库，需严格限制用户输入并验证来源。网络劫持有DNS劫持和HTTP劫持两种，防范措施包括使用HTTPS加密传输，避免运营商篡改内容。全站HTTPS是当前最有效的防劫持方案。
2023-02-20 13:26:28
112
原创 URL和URI的区别？
URL是 Internet上用来描述信息资源的字符串，主要用在各种客户程序和服务器程序上，特别是著名的 Mosaic。web上可用的每种资源如HTML、文档、图像、视频片段、程序等都是由一个URI来定位的。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。@2：存有该资源的主机IP地址（有时也包括端口号）；@3：资源自身的名称，由路径表示，着重强调于资源。URL 是统一资源定位符，相当于一个人的家庭住址。@3：主机资源的具体地址，如目录和文件名等。@1：访问资源的命名机制；
2023-02-20 13:25:21
139
原创 CSRF 攻击
CSRF攻击是一种利用用户登录状态伪造请求的网络攻击方式，攻击者通过诱导用户访问恶意链接或表单，冒充用户执行敏感操作。主要类型包括GET、POST和链接型CSRF攻击。防御措施包括：同源检测（检查Origin/Referer字段）、CSRF Token验证（服务器生成随机Token）、双重Cookie验证（比较Cookie和URL参数）以及设置Cookie的SameSite属性（限制第三方使用）。这些方法各有优缺点，需结合实际场景选择组合使用，以有效防范CSRF攻击。
2023-02-20 13:24:11
649
原创 原型 / 构造函数 / 实例
原型(prototype):一个简单的对象，用于实现对象的属性继承。可以简单的理解成对象的爹。在Firefox和Chrome中，每个JavaScript对象中都包含一个_proto_（非标准）的属性指向它爹（该对象的原型），可进行访问。所有引用类型都有一个_proto_(隐式原型)属性，属性值是一个普通的对象。所有函数都有一个prototype(原型)属性，属性值是一个普通的对象。所有引用类型的_proto_属性指向它构造函数的prototype。构造函数：可以通过。
2023-02-10 18:50:05
121
原创 关于js类的继承
特点：通过寄生方式，砍掉父类的实例属性，在调用两次父类的构造时，就不会初始化两次实例方法/属性。缺点： 之能继承父类实例的属性和方法，不能继承原型上的属性和方法。特点：可以继承实例属性/方法，也可以继承原型属性/方法。特点：基于原型链，既是父类的实例，也是子类的实例。缺点：调用了两次父类构造函数，生成了两份实例。为父类实例添加新特性，作为子类实例返回。拷贝父类元素上的属性和方法。缺点: 无法实现多继承。特点： 可以实现多继承。
2023-02-10 18:17:42
111
原创 js面试题学习整理
利用冒泡机制，将子元素的事件委托给父元素去监听（给父元素添加事件），当子元素触发事件时，事件冒泡到父级。如果希望指定的子元素才能触发事件，可以通过事件对象（event）获得事件源（target），然后通过条件判断是不是期望的子元素，如果是的话，执行事件，否则不执行事件。· 微任务：当前（当前事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务，可以理解为回调事件。· 遍历数组，调用数组的每个元素，利用回调函数对数组进行操作，本质上等同于for循环；创造promise实例后，就会立即执行。
2023-02-10 15:16:23
680
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人