渲染、重绘、重排技巧

前端

一、渲染引擎

浏览器的重头戏在于渲染引擎，很多页面的兼容性问题的根源也在于此。

1.简述

1.渲染引擎的作用：将从服务器返回的HTML、XML、Images等资源经过CSS样式化进行渲染并且呈现给最终用户
2.渲染引擎的分类：

1）gecko：火狐浏览器
2）webkit(KHTML)：safari、chrome
3）Trident(又称MSHTML):IE
4)Presto:opera

2.基本渲染过程

1.渲染引擎首先解析HTML文档，转换为一颗DOM树
2.解析CSS样式（不管是内联还是外联），渲染出用于渲染DOM树的渲染树，渲染树包括颜色、尺寸等属性
3.对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
4.遍历渲染树并用UI后端层将每个节点绘制出来

为了提高用户体验，渲染引擎不会等所有HTML都被解析完才创建并布局渲染树，它会在从网络层获取文档内容的同时把接收到的局部内容先展示出来

二、浏览器如何渲染文本

1.渲染文本的步骤：

浏览器接受来自Web服务器的网页数据后，第一步把它解码成可以阅读的文本（先根据一定机制确定字体），然后将文本、字体等参数一起交给具体的排版引擎，生成字形和位置

2.书写CSS字体的规则：

1.首先确定字体元素的字体风格，比如是衬线字体还是非衬线字体
2.确定了风格之后，先选择西文字体，优先把平台独特的、在该平台下效果更好的字体写上，比如 Mac OS X 下有 Helvetica 也有 Arial，但 Helvetica (可能) 效果更好，Windows 下则一般只有 Arial，那么写 Helvetica, Arial 就比 Arial, Helvetica 或者只有 Arial 更好；
3.然后列出中文字体，原则相同，多个平台共有的字体应该尽量放在后边，独有的字体放在前面，还需要照顾到 Mac OS X/Linux 下一般用户习惯用(细)黑体作为默认字体，Windows 下习惯以宋体作为默认字体的情况，比如 STXihei, SimSun 这样的写法比较常见，如果写作 SimSun, STXihei，但 Mac OS X 上装了 SimSun 效果就不会太好看。

三、重绘（repaint）、重排（reflow）

1.重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、背景色等属性。浏览器会根据元素的新属性重新绘制元素，使元素呈现新的外观。重绘不会带来新的布局，重绘不一定会引起重排。
2.重排：渲染树重新计算。重排一定会带来重绘。一个元素的重排通常带来一系列的反应，甚至会触发整个文档的重绘和重排，性能代价是高昂的。
3.重排触发操作：
1）DOM元素的几何属性的变化（尺寸、位置等）
2）DOM树的结构变化（节点的增减、移动）
3）获取某些属性（offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth），所以多次使用这些值时应该进行缓存
4）调整浏览器窗口的大小等
4.减少重排的方法：
1）将多次改变样式属性的操作合并成一次操作
2）将需要多次重排的元素position属性设为absolute或者fixed，这样元素就脱离了文档流，它的变化不会影响其他元素
3）由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。
4）在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。

四、浏览器加载和渲染HTML的顺序

浏览器都是从上到下对HTML文件进行下载和渲染，下载和渲染同时进行。当出现标签嵌入文件（JS脚本、CSS样式表），浏览器会启用单独连接进行下载，并且在下载后进行解析，解析过程中停止页面所有往下元素的下载，阻塞加载。

HTML页面加载和解析流程：

1.用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2.浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
3.浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
4.浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
5.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
6.浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；
Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
7.终于等到了＜/html＞的到来，浏览器泪流满面……等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；
浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

五、CSS的效率和浏览器渲染的速度

浏览器如何读取你的CSS选择器有一个很重要的原则，那就是它们从右到左读取。这意味这像 ul > li a[title="home"]这样的选择器，a[title="home"] 将是最先被读取的。

1.选择器效率：ID效率最高，通配符效率最低
2.不用标签修饰ID或者class：ul#main-navigation {} 或者li.first{}
3.后代选择器是最糟糕的：html body ul li a {}