连通块的应用

1. 回流与重绘1）回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。2）重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属...

Vue 和 React 都实现了异步更新策略，虽然实现的方式不尽相同，但都达到了减少 DOM 操作、避免过度渲染的目的一. 前置知识：Event Loop 中的“渲染时机”1. Micro-Task 与 Macro-Task事件循环中的异步队列有两种：macro（宏任务）队列和 micro（微任务）队列。常见的 macro-task 比如： setTimeout、setInterva...

1. DOM 为什么这么慢因为收了“过路费”把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》JS 引擎和渲染引擎（浏览器内核）是独立实现的。当我们用 JS 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”。这个“跨界交流”的实现并不简单，它依赖了桥接接口作为“桥梁”（如下图）。我们每操作一次...

1. 浏览器的内核浏览器内核可以分成两部分：渲染引擎（Layout Engine 或者 Rendering Engine）和 JS 引擎。早期渲染引擎和 JS 引擎并没有十分明确的区分，但随着 JS 引擎越来越独立，内核也成了渲染引擎的代称（下文将沿用这种叫法）。渲染引擎又包括了 HTML 解释器、CSS 解释器、布局、网络、存储、图形、音视频、图片解码器等等零部件。目前市面上常见的浏览器内...

不同业务场景下的图片方案选型时下应用较为广泛的 Web 图片格式有 JPEG/JPG、PNG、WebP、Base64、SVG 等，这些格式都是很有故事的，值得我们好好研究一把。此外，老生常谈的雪碧图（CSS Sprites）至今也仍在一线的前端应用中发光发热，我们也会有所提及。前置知识：二进制位数与色彩的关系在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不...

本地存储——从 Cookie 到 Web Storage、IndexDB随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp”——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。故事的开始：从 Cookie 说起Cookie 的本职工作并非本地存储，而是“维持状态”。在 Web 开发的早期，人们亟需解决的一个问题就是...

浏览器缓存机制Memory CacheService Worker CacheHTTP CachePush Cache1. HTTP缓存机制HTTP缓存分为强缓存和协商缓存强缓存强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的，强缓存中，当请求再次发出时，浏览器会根据其中的 expires 和 cache-control 判断...

文章目录1 函数防抖（debounce）2 函数节流（throttle）3 两者异同点1 函数防抖（debounce）简单地说，就是当一个动作连续触发时，只执行最后一次应用场景：1）高频率的提交事件实现方式函数防抖在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则清除之前的定时器，重新设置定时器。function debounce(func, d...