Open utterances-bot opened 2 years ago
步骤详细解释 第一步:渲染引擎开始解析html,根据标签构建DOM节点 第二步:根据css样式构建渲染树,包括元素的大小、颜色,隐藏的元素不会被 构建到该树中。 第三步:根据css样式构建布局树,主要是确定元素要显示的位置。 第四步:根据前面的信息,绘制渲染树 参考链接:https://segmentfault.com/a/1190000023609412 参考图片:https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
请问如何才能按需缓存布局信息
呢
请问如何才能
按需缓存布局信息
呢
这里我们写得确实不够具体,之后会修改一下表达。
布局信息相关的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
“获取布局信息时,会导致重排。” 这句话是否有问题?
如果
console.log(element.offsetTop);
应该不会触发重排吧?
浏览器如何优化渲染? (1)将多次改变样式属性的操作合并成一次操作
(2)将需要多次重排的元素,position属性设为absolute或fixed,
这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
(3)由于display属性为none的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。
如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发2次重排。
浏览器的重排重绘 | HZFE - 剑指前端 Offer
相关问题
https://hzfe.github.io/awesome-interview/book1/browser-repain-reflow