这回真的明白了,回流了几次;

以下这段代码触发了几次回流?

ini 复制代码
let el = document.getElementById('app'); 
el.style.width = (el.offsetWidth + 1) + 'px'; 
el.style.width = 1 + 'px'; 



// 这段代码为什么在chorme浏览器的 performance 中只触发了一次 Layout 事件,你猜对了嘛?

首先我们得搞明白什么是回流,顺便一起了解下重绘?

回流: 也叫重排(reflow)发生在浏览器重新计算网页的某些部分的位置和几何形状时(例如在交互式站点更新后)这通常会紧更新这重绘即浏览器重新绘制网页以显示更新后的视觉效果。

重绘: 是在浏览器重新绘制网页以显示由 UI 更改引起的视觉更新时发生,例如在交互式站点上进行更新后,这通常是在重排之后发生的,重排是浏览器重新计算网页的某些部分的位置和几何形状。

嗯!!!我明白了然后呢???知道这个定义也没办法得出结论啊???

那我们在了解一下浏览器渲染的过程。

  1. 浏览器开始加载网页的HTML文档;
  2. 浏览器开始解析HTML文档,构建DOM(文档对象模型)树
  3. 同时或随后,浏览器解析Css 文件(可能包括外部css 文件、内嵌样式和行样式),构建cssom(层叠样式表对象模型)树;
  4. 将DOM树与CSSOM树合并成Render树这个树包含了要渲染的可见元素以及他们的样式信息;
  5. 浏览器进行布局计算确定每个元素的大小和位置。这个过程称为回流(Reflow),他看可能会因为DOM结构的变化、元素的尺寸的变化、或者浏览器窗口大小的变化触发。
  6. 根据布局计算的结构,浏览器绘制元素的外观,包括颜色、边框、背景等这个过程称为重绘(Repaint),它可能会因为元素样式的变化(如颜色变化)而触发,而不一定涉及布局的变化。
  7. 为了提高渲染性能,浏览器可能会将网页分成多个图层,并在这些图层上进行合层渲染。这过程称为合成(Compositing)
  8. 最后,浏览器会将渲染好的网页显示在屏幕上;

现在我们知道了 回流是计算页面的每个可见节点的位置以及大小;重绘是在浏览器上重新绘制render 树;

根据文档介绍我们知道回流会影响整个渲染树,计算复杂度高需要递归遍历所有节点。回流后还会触发后续渲染阶段重绘和合成;在许多情况下,它们相当于重新布局整个页面。开销非常大影响浏览器的渲染性能;

那么影响浏览器回流的操作有哪些?

‌操作类型‌ ‌示例‌
几何属性修改 width, height, padding, margin
布局相关属性 display, position, float
内容变化 文本增减、图片加载
窗口尺寸变化 resize 事件
获取布局属性 offsetTop, scrollHeight, getComputedStyle

这会我知道啦!3次!!!

ini 复制代码
//再看一下题目
let el = document.getElementById('app');
el.style.width = (el.offsetWidth + 1) + 'px'; 
el.style.width = 1 + 'px';

是的,看到这儿我们可能很容易就得出答案 此代码回流触发了3次

1、获取 el.offsetWidth 回流一次;

2、第一次设置 width 回流一次;

3、第二次设置 width 回流一次;

一共3次!!!;

如何验证?

那么我们该如何验证得出的答案是否正确呢?

好在 Chorme 浏览器中有 Performance这个神器,可以看到只会触发一次 Layout 事件,而Layout 即回流触发的事件;

啊!!!怎么会只有一次呢?

原来现代的浏览器自带优化机制,在短时间内多次对DOM 或样式的修改操作缓存到一个队列中,等待合适的时机(如脚本执行完毕、任务空闲时)批量处理,近触发一次回流。而遇到立即读取布局属性(如 offsetWidthclientWidth、scrollWidth)会迫使浏览器清空队列并立即回流。

这样就说的通了,为什么在preformance 中只有一条 Layout 日志;

  1. 获取 el.offsetWidth 因为浏览器清空队列本来就是空的所以不会产生回流;
  2. 第一次设置 width ;这个操作会被浏览器推进渲染队列,并不会立即执行回流;
  3. 第二次设置 width ;这个操作也会被浏览器推进渲染队列,但是后面也没有操作了所以在下一帧回流一次完成渲染;

最后我们再来看一下哪些操作可以减少回流?提升渲染性能

  1. 使用 CSS 动画代替 javaScript动画,CSS 动画利用GPU加速,在性能方面通常比JavaScript 动画更高; 使用translate3d 同样可以开启 GPU 加速;
  2. 避免频繁操作影响布局的样式属性,当需要对元素进行多次样式修改时,可以考虑修改合并一次操作。通过添加或移除 css 类一次性修改而不是逐个修改;
  3. 使用requestAnimationFrame方法调度动画帧,可以确保动画在浏览器的重绘周期内执行,从而避免不必要的回流。这种方式可确保在最佳时间点进行渲染;
  4. 使用 Document Fragment 通过这个API可以先将元素添加到文档片段中,然后再将整个文档片段一次性插入DOM。减少回流次数,有点像虚拟DOM;
  5. 让元素脱离文档流,absolute/fixed/left;

谢谢观看!!!下一篇再见!!!

相关推荐
一袋米扛几楼9844 分钟前
【JavaScript 】1. 什么是 Node.js?(JavaScript 服务器环境)
服务器·javascript·node.js
前端付杰1 小时前
第八节: 全面理解vue3: 工具函数的核心作用与使用方法
前端·javascript·vue.js
Anlici1 小时前
虚拟dom 源码分析一下
前端·javascript·前端框架
机构师1 小时前
<rust><tauri><GUI>基于tauri和rust,编写一个二维码生成器
javascript·rust
七七知享1 小时前
Web3.0 从入门到实战:一站式开发指南
javascript·安全·web安全·网络安全·web3·区块链·html5
码云之上2 小时前
一文讲明白页面导出为HTML实现原理与步骤
前端·javascript·canvas
阿芯爱编程2 小时前
大文件上传的方式
前端·javascript·面试
C_V_Better3 小时前
浏览器缓存机制:JavaScript 文件缓存导致 404 错误的解决方案
开发语言·前端·javascript·缓存
小救星小杜、3 小时前
a = b &&c 的含义
开发语言·前端·javascript
uhakadotcom3 小时前
Babylon.js:轻松打造Web 3D体验
前端·javascript·面试