浏览器渲染笔记（一）

进程与线程

• 进程是cpu资源分配的最小单位（系统会给它分配内存）
• 进程之间相互独立，对于浏览器，每打开一个Tab页都可以认为开了一个新的进程。
• 进程拥有自己的多线程，各个线程之间相互协作完成任务。

对于浏览器，开一个新页面（进程）工作的是以下线程：

与浏览器页面渲染有关的主要是和这里的GUI引擎线程和JS引擎线程：

GUI引擎线程(后面我们说UI线程)：解析html css,进行DOM，CSSOM，RenderTree的绘制，回流，重绘的执行者，以及页面渲染都是由他来完成（难以避免的抛出一大堆概念，后面会一一解释）。

JS引擎线程：用来对js文件进行处理。上面两个线程是互斥的（请记住这句话，很重要），当有一个在进行时，另外一个将被挂起，也就是说会造成阻塞，至于谁阻塞谁，后面再说。

将数据包进行解析。解析html文件，UI线程进行DOM树的构建，此操作将确定节点的父子以及兄弟关系。当继续解析到类似的语句时将下载相应的css文件，并进行CSSOM的构建（类似DOM的东西），将确定css属性之间的级联关系。浏览器将DOM与CSSOM进行合并，构建RenderTree，所谓的渲染树。然后浏览器会根据渲染树进行名为reflow(回流)的过程，来根据浏览器页面的具体情况确定各个节点的渲染位置（该操作会遍历整个DOM和CSSOM，对性能影响很大）。接下来就是将准备好的东西渲染到屏幕上了。以上过程可以用下面这张图演示：

上面的看似很顺畅的过程，却隐去了一个重大的问题（js呢）?
接上面谈起，浏览器开始解析时碰到<link rel='stylesheet' href='../example.css'/>会开始下载css文件，同样当遇到语句时<script src='./example.js'></script>js引擎会下载并执行js文件，注意这里会引起阻塞，阻塞具体情况如下：阻断DOM的构建，应为浏览器不知道js文件会对DOM进行什么操作，也就是说JS执行会阻塞DOM构建。如果CSSOM没有就绪，那么JS将等到CSSOM准备就绪时再执行，也就是说CSSOM的构建会阻塞JS执行，其实也就是间接的在阻塞DOM的构建。
那么我们是否能对JS的执行进行操作呢，答案是：可以．
async属性<script src='./example.js' async></script>它的作用是指定相应的js文件在下载好再进行执行，也就是说这个js文件在下载过程中是不阻塞DOM构建的。
defer属性<script src='./example.js' defer></script>指定对应js文件在整个页面都解析完成后再执行，此时DOM和CSSOM都已经准备就绪。

回流（reflow）和重绘（repaint）

回流：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档。
回流的一些操作：

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
• 页面一开始渲染的时候（这肯定避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

重绘：当页面中元素样式的改变并不影响它在文档流中的位置时，浏览器会将新样式赋予给元素并重新绘制它。
回流必定重绘，重绘不一定回流。
很明显：回流的代价要比重绘高很多。在性能优化时有一点就是避免频繁造成回流。

浏览器的优化机制

现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• clientTop、clientLeft、clientWidth、clientHeight
• getComputedStyle()
• getBoundingClientRect

具体可以访问这个网站：https://gist.github.com/pauli…

以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来。

减少回流和重绘：

最小化重绘和重排：

const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';

例子中，有三个样式属性被修改了，每一个都会影响元素的几何结构，引起回流。当然，大部分现代浏览器都对其做了优化，因此，只会触发一次重排。但是如果在旧版的浏览器或者在上面代码执行的时候，有其他代码访问了布局信息(上文中的会触发回流的布局信息)，那么就会导致三次重排。

因此，我们可以合并所有的改变然后依次处理，比如我们可以采取以下的方式：
修改CSS的class

const el = document.getElementById('test');
el.className += ' active';

批量修改DOM
当我们需要对DOM对一系列修改的时候，可以通过以下步骤减少回流重绘次数：

1.使元素脱离文档流
2.对其进行多次修改
3.将元素带回到文档中。
该过程的第一步和第三步可能会引起回流，但是经过第一步之后，对DOM的所有修改都不会引起回流，因为它已经不在渲染树了。

有三种方式可以让DOM脱离文档流：

• 隐藏元素，应用修改，重新显示
• 使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档。
• 将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。

考虑我们要执行一段批量插入节点的代码：

function appendDataToElement(appendToElement, data) {
    let li;
    for (let i = 0; i < data.length; i++) {
        li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}

const ul = document.getElementById('list');
appendDataToElement(ul, data);

如果我们直接这样执行的话，由于每次循环都会插入一个新的节点，会导致浏览器回流一次。
我们可以使用这三种方式进行优化:
隐藏元素，应用修改，重新显示
这个会在展示和隐藏节点的时候，产生两次重绘:

function appendDataToElement(appendToElement, data) {
    let li;
    for (let i = 0; i < data.length; i++) {
        li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}
const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';

使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档:

const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
ul.appendChild(fragment);

将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。

const ul = document.getElementById('list');
const clone = ul.cloneNode(true);
appendDataToElement(clone, data);
ul.parentNode.replaceChild(clone, ul);

避免触发同步布局事件

文我们说过，当我们访问元素的一些属性的时候，会导致浏览器强制清空队列，进行强制同步布局。举个例子，比如说我们想将一个p标签数组的宽度赋值为一个元素的宽度，我们可能写出这样的代码：

function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + 'px';
    }
}

这段代码看上去是没有什么问题，可是其实会造成很大的性能问题。在每次循环的时候，都读取了box的一个offsetWidth属性值，然后利用它来更新p标签的width属性。这就导致了每一次循环的时候，浏览器都必须先使上一次循环中的样式更新操作生效，才能响应本次循环的样式读取操作。每一次循环都会强制浏览器刷新队列。我们可以优化为:

const width = box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
    }
}

对于复杂动画效果,使用绝对定位让其脱离文档流
对于复杂动画效果，由于会经常的引起回流重绘，因此，我们可以使用绝对定位，让它脱离文档流。否则会引起父元素以及后续元素频繁的回流。这个我们就直接上个例子。

css3硬件加速（GPU加速）

其实就是让要大量进行重绘回流的元素单独触发一个渲染层，怎样触发呢？
video元素、WebGL、Canvas、CSS3 3D、CSS滤镜、z-index大于某个相邻节点的元素都会触发新的Layer，其实我们最常用的方法，就是给某个元素加上下面的样式：

transform: translateZ(0);
backface-visibility: hidden;

具体或更多优化参考这篇文章
参考资料：
你真的了解回流和重绘吗
从一条语句说浏览器页面渲染机制