早在五年前,Google 就提出了 1s 完成终端页面的首屏渲染的标准。
常见的优化网络请求的方法有:DNS Lookup,减少重定向,避免 JS、CSS 阻塞,并行请求,代码压缩,缓存,按需加载,前端模块化…
虽然相较于网络方面的优化,前端渲染的优化显得杯水车薪,而且随着浏览器和硬件性能的增长,再加上主流前端框架(react、vue、angular)的已经帮我们解决了大多数的性能问题,但是前端渲染性能优化依然值得学习,除去网络方面的消耗,留给前端渲染的时间已经不多了。本文主要学习前端渲染相关的问题。
display:none
隐藏的标签,还有用 JS 动态添加的元素等。display:none
的节点,还有 head 节点),因为这些节点不会用于呈现,而且不会影响呈现的节点,所以就不会包含到 render tree 中。注意 visibility:hidden
隐藏的元素还是会包含到 render tree 中的,因为 visibility:hidden
会影响布局(layout),会占有空间。根据 CSS2 的标准,render tree 中的每个节点都称为 Box (Box dimensions),理解页面元素为一个具有填充、边距、边框和位置的盒子。总结为下图:
图片来自 浏览器渲染页面过程与页面优化
在此过程中,前端工程师主要的敌人为:
在回流的时候,浏览器会使 render tree 中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。因此回流必将引起重绘,而重绘不一定会引起回流。
Reflow 的成本比 Repaint 高得多的多。DOM Tree 里的每个结点都会有 reflow 方法,一个结点的 reflow 很有可能导致子结点,甚至父点以及同级结点的 reflow。
F12 打开控制台 -> DevTools -> Show console drawer -> Rendering -> 勾选 Paint flashing。
当一个元素的外观的可见性 visibility 发生改变的时候,但是不影响布局。类似的例子包括:outline, visibility, background color。
var s = document.body.style
s.padding = "2px" // 回流+重绘
s.border = "1px solid red" // 回流+重绘
s.color = "blue" // 重绘
s.backgroundColor = "#ccc" // 重绘
s.fontSize = "14px" // 再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!')) // 回流+重绘
如果向上述代码中那样,浏览器不停地回流+重绘,很可能性能开销非常大,实际上浏览器会优化这些操作,将所有引起回流和重绘的操作放入一个队列中,等待队列达到一定的数量或者时间间隔,就 flush 这个队列,一次性处理所有的回流和重绘。
虽然有浏览器优化,但是当我们向浏览器请求一些 style 信息的时候,浏览器为了确保我们能拿到精确的值,就会提前 flush 队列。
// bad
var newWidth = ele.offsetWidth + 10
ele.style.width = newWidth + 'px'
var newHeight = ele.offsetHeight + 10
ele.style.height = newHeight + 'px'
// good 读写分离,批量操作
var newWidth = ele.offsetWidth + 10 // read
var newHeight = ele.offsetHeight + 10 // read
ele.style.width = newWidth + 'px' // write
ele.style.height = newHeight + 'px' // write
className 只要赋值,就一定出现一次 rendering 计算;classList 的 add 和 remove,浏览器会进行样式名是否存在的判断,以减少重复的 rendering。
ele.className += 'something'
ele.classList.add('something')
ele.classList.remove('something')
// bad
for (let i = 0; i < 10; i++) {
el.style.left = el.offsetLeft + 5 + 'px'
el.style.top = el.offsetTop + 5 + 'px'
}
// good
let left = el.offsetLeft
let top = el.offsetTop
for (let i = 0; i < 10; i++) {
left += 5
top += 5
}
el.style.left = left + 'px'
el.style.top = left + 'px'
display: none
,完成后再将其显示出来,这样只会触发一次回流和重绘。假如需要在下面的 html 中添加两个 li 节点:
<ul id="">
</ul>
使用 JavaScript:
let ul = document.getElementByTagName('ul')
let man = document.createElement('li')
man.innerHTML = 'man'
ul.appendChild(li)
let woman = document.createElement('li')
woman.innerHTML = 'woman'
ul.appendChild(woman)
上述代码会发生两次回流,假如使用 display: none
的方案,虽然能够减少回流次数,但是会发生一次闪烁,这时候使用 DocumentFragment 的优势就体现出来了。
DocumentFragment 有两大特点:
let fragment = document.createDocumentFragment()
let man = document.createElement('li')
let woman = document.createElement('li')
man.innerHTML = 'man'
woman.innerHTML = 'woman'
fragment.appendChild(man)
fragment.appendChild(woman)
document.body.appendChild(spanNode)
可见 DocumentFragment 是一个孤儿节点,没爹就能出生,但是在需要它的时候,它又无私地把孩子奉献给文档树,然后自己默默离开。是不是有点像《银翼杀手2049》?