HZFE/awesome-interview

浏览器的重排重绘 | HZFE - 剑指前端 Offer

Opened this issue · 5 comments

utterances-bot commented

浏览器的重排重绘 | HZFE - 剑指前端 Offer

相关问题

https://hzfe.github.io/awesome-interview/book1/browser-repain-reflow

ZubinHuang commented

步骤详细解释
第一步：渲染引擎开始解析html，根据标签构建DOM节点
第二步：根据css样式构建渲染树，包括元素的大小、颜色，隐藏的元素不会被
构建到该树中。
第三步：根据css样式构建布局树，主要是确定元素要显示的位置。
第四步：根据前面的信息，绘制渲染树
参考链接：https://segmentfault.com/a/1190000023609412
参考图片：https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

  • 👍4
  • 🚀1
Sakura-pgh commented

请问如何才能按需缓存布局信息呢

  • 👍1
Akiq2016 commented

请问如何才能按需缓存布局信息呢

这里我们写得确实不够具体，之后会修改一下表达。

布局信息相关的API会触发强制reflow / layout。为了减少频繁读取布局信息相关的API，比如clientTop等。那么可以“按需缓存”，按需缓存指的是利用变量保存读取的布局信息，供多次使用。而非每次都重新调用API读取。举个不太恰当的例子意思一下

// bad
const width = elem.getBoundingClientRect().width
const height = elem.getBoundingClientRect().height
const top = elem.getBoundingClientRect().top
const left = elem.getBoundingClientRect().left

// good
const elemClientRect = elem.getBoundingClientRect()
const width = elemClientRect.width
const height = elemClientRect.height
const top = elemClientRect.top
const left = elemClientRect.left
  • 👍3
hefeng6500 commented

“获取布局信息时，会导致重排。” 这句话是否有问题？

如果

console.log(element.offsetTop);

应该不会触发重排吧？

soraly commented

浏览器如何优化渲染？
（1）将多次改变样式属性的操作合并成一次操作

（2）将需要多次重排的元素，position属性设为absolute或fixed，

这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

（3）由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。

如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。