客户端容器

JS 引擎和渲染引擎相互独立

JS引擎：V8升级，使用较多的代码直接翻译成机器码，下次直接执行

前端优化技术

1.回流、重绘是什么？

回流（reflow）和重绘（repaint）是浏览器在渲染页面时的两个关键概念。

回流指的是当 DOM 元素的尺寸、位置或内容发生变化时，浏览器需要重新计算页面布局，然后更新渲染树和视图。

重绘指的是在不影响布局的前提下，当元素的外观（例如颜色）发生变化时，浏览器会重新绘制受影响的部分。

由于回流需要重新计算页面布局，而计算布局的代价往往较高，因此回流是一项比较昂贵的操作，应该尽量避免。重绘的代价相对较小，但也应该尽可能减少。

常见的触发回流的操作包括：

• 页面首次渲染
• 浏览器窗口大小变化
• 元素尺寸或位置变化
• 元素内容变化（例如文字数量的变化）

而触发重绘的操作则包括：

• 元素颜色、背景色等外观属性的变化
• 文字内容的变化（除了文字数量的变化）

为了减少回流和重绘的次数，可以采取以下一些策略：

• 使用 CSS3 的 transform 和 opacity 属性来替代会引起回流的属性。
• 对于频繁更新的 DOM 元素，可以先将其从文档流中移除，更新完成后再重新插入。
• 使用 DocumentFragment 等技术来减少 DOM 操作。
• 避免频繁访问布局属性（例如 offsetWidth 和 offsetHeight）和计算属性（例如 getComputedStyle）。
• 在必要的情况下，可以将元素的 position 属性设置为 absolute 或 fixed，这样可以避免对其他元素布局的影响。

2.防抖和节流

防抖和节流是前端开发中常用的优化技术，用于限制事件处理函数的执行频率，提高页面性能和用户体验。

防抖（debounce）指的是在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又触发了事件，则重新计时。也就是说，当一个事件持续触发时，只有在停止触发一段时间后才会执行回调函数，从而减少了回调函数的执行次数。常用于搜索框输入，只有在用户停止输入一段时间后才触发搜索请求。

节流（throttle）指的是每隔一段时间执行一次回调函数。也就是说，当一个事件持续触发时，只有在指定时间间隔内执行一次回调函数，从而限制了回调函数的执行频率。常用于页面滚动、窗口大小变化等频繁触发的事件，以减少事件处理函数的执行次数。

实现防抖和节流的方法有很多，其中比较常见的是使用 setTimeout 函数和时间戳。使用 setTimeout 实现防抖和节流时，可以在事件触发后设置一个定时器，在定时器到期后执行回调函数；使用时间戳实现防抖和节流时，则可以记录上一次事件触发的时间戳，当两次事件触发的时间间隔超过指定时间时，执行回调函数。