回流为什么会对性能产生印象
站长
· 阅读数 12
简介
当我们更改与布局相关的属性（例如元素的width、height或 margin）时，会发生布局重新计算导致“回流”
例如，可能希望具有从网格视图切换到列表视图的功能。在这种情况下，触发回流对于功能至关重要。
不太理想的情况可能是通过可能加载缓慢的 JavaScript 添加到页面的广告。该 JavaScript 可能会调整插入广告的元素大小，从而导致用户访问期间每个页面加载时发生回流。这种类型的重排可能会以多种方式对用户体验产生负面影响，例如中断阅读流程和延迟其他交互。
当我们更改与布局相关的属性时，我们会触发像素管道。这是浏览器渲染引擎执行的一系列步骤，以在屏幕上显示实际的变化。
像素管道涉及几个步骤：
- 布局（回流）： 浏览器重新计算受布局相关属性更改影响的元素的几何形状。此计算确定元素在浏览器窗口中的位置。
- 绘制： 布局重新计算后，浏览器渲染每个元素的视觉特征，如颜色、边框和阴影。
- 合成： 浏览器然后将绘制的图层组合起来以生成在屏幕上显示的最终图像。
回流可能会对 CPU 造成沉重负担，因为它们涉及复杂的算法来处理 CSS 规则并确定页面布局内的元素对齐和约束。
回流的因素
CPU 可以被视为计算机的“大脑”，它能够按顺序或单个线程处理指令。回流的问题是由以下几个因素引起的：
- CPU 必须解释并执行 CSS 规则来确定页面上元素的几何形状。这可能是一项繁重的操作，需要复杂的计算和逻辑评估。
- CPU 可以处理多个任务，但一次只能专注于一项任务。在回流期间，其他重要操作（例如用户输入处理和脚本执行）可能会延迟，这可能会导致延迟。
- 由于页面通常嵌套得很深，因此单个布局更改可能会导致级联重新计算和更新，从而给 CPU 带来额外负担。
- 虽然级别较低，但 CPU 必须经常访问和更改内存以进行计算以及更新渲染树和绘画。低效的内存访问可能会导致缓存未命中和内存检索速度变慢，从而进一步减慢渲染过程。
那么，为什么回流会对性能产生负面影响呢？
回流需要大量 CPU 资源来运行计算和更新渲染树。此过程会降低整体速度和用户体验。
由于 CPU 可能会因这些任务而不堪重负，因此其处理用户交互和脚本执行等其他任务的能力会下降，从而导致渲染速度变慢并降低响应能力。
无法处理其他任务可能会导致明显的延迟、布局变化和页面无响应，这直接影响用户与网站的交互方式。此类问题不利于用户体验，并影响关键指标。
点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。
往期热门精彩推荐
面试相关热门推荐
实战开发相关推荐
移动端相关推荐
Git 相关推荐