浏览器渲染页面的过程

1、渲染引擎

　　浏览器的核心部分是渲染引擎，也称为浏览器的内核，负责对网页语法（如HTML、CSS、JavaScript等）的解释并显示网页。Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome使用webkit内核。

2、webkit引擎渲染流程

　　1.渲染引擎首先经过网络得到所请求文档的内容；

　　2.解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

注意：这个过程是逐步完成的，为了更好的用户体验，渲染引擎尽量早的将内容呈现到屏幕上，并不会等到全部的html都解析完成以后再去构建和布局渲染树。它是解析一部份内容就显示一部份内容，同时，可能还在经过网络下载其他内容。

3、HTML页面加载和解析流程
　　1. 用户输入网址（假设是个html页面，而且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 
　　2. 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件； 
　　3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件； 
　　4. 浏览器继续载入html中＜body＞部分的代码，而且CSS文件已经拿到手了，能够开始渲染页面了； 
　　5. 浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； 
　　6. 服务器返回图片文件，因为图片占用了必定面积，影响了后面段落的排布，所以浏览器须要回过头来从新渲染这部分代码； 
　　7. 浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它； 
　　8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。忽然少了这么一个元素，浏览器不得不从新渲染这部分代码； 
　　9. 终于等到了＜/html＞的到来，浏览器泪流满面…… 

4、须要注意的问题

1.渲染阻塞

当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树。须要注意的是，DOM树的生成过程当中会被CSS和JS文件的下载执行阻塞。
当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成下载执行，而后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建。因此，css和js文件的引入位置很重要。

　　第一：CSS 资源位于 head 标签内优先引入。
　　第二：将全部的script标签放到页面底部，也就是body闭合标签以前，这能确保在脚本执行前页面已经完成了DOM树渲染。且JavaScript 应尽可能少影响 DOM 的构建。

2.重排与重绘（reflow与repaint）

在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。根据渲染树布局，计算CSS样式，即每一个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：重排与重绘。

　　重排：意味着元件的几何尺寸变了，须要从新验证并计算渲染树。是渲染树的一部分或所有发生了变化。

　　重绘：屏幕的一部分重画，不影响总体布局，好比某个CSS的背景色变了，但元素的几何尺寸和位置不变。

尽可能减小重排与重绘。重排要比重绘更花费时间，也就更影响性能。因此在写代码的时候，要尽可能避免过多的重排。

　　引发重排的状况

　　（1）页面初始化时； 
　　（2）操做DOM时； 
　　（3）某些元素的尺寸改变； 
　　（4）CSS 的属性发生变化。

　　减小重排/重绘

　　（1）不要一个个的修改 DOM 的样式。应经过 class 来修改。 
　　（2）为动画的 HTML 元素使用 position: absoult，那么修改它的 CSS 是不会重排的。 
　　（3）尽可能不要使用 table 布局。可能很小的一个改动会形成整个 table 的重排。

3.减小DNS查询（DNS-Domain Name Server 域名服务器）

　　(1) 合并并压缩js；

　　(2) 合并并压缩css；

　　(3) 合并并压缩图片；

4.编写css时注意

Css选择器是从右到左进行匹配的。例如.a li{}，找到全部的li，再去肯定它的上级元素是否是.a。

　　(1) Dom深度尽可能少，选择器层级尽可能少；

　　(2) 减小inline javascript、css的数量；

　　(3) 避免后代选择器，尽可能使用子选择器。子选择器(.a>b{})的几率要大于后代选择器（.a b{}）。

　　(4) 避免使用通配符。例如.a *{}，首先匹配通配符(页面上的全部元素)，而后向上寻找.a，这样的性能消耗可想而知。