转自：webkit渲染引擎

图片说明

关键渲染路径

关键渲染路径是指浏览器从最初接受请求来的html、css、js等资源，然后解析、构造树、渲染布局、绘制，最后呈现给客户能看到的界面的整个过程。

浏览器请求、加载、渲染一个页面的耗时任务：
1、DNS解析查询
2、TCP/IP连接
3、http请求和响应
4、服务器响应
5、客户端渲染---浏览器渲染

浏览器渲染：

1、解析html生成dom树
2、解析css生成cssdom规则树
3、将dom树和cssom规则树合并在一起生成渲染树
4、遍历渲染树开始布局，计算每个节点的位置大小信息
5、将渲染树的每个节点绘制到屏幕
（如果cssdom和dom被修改的话，以上的过程需要重复执行）

构建dom树

图片说明
图片说明

构建cssdom规则树

将每个css文件都被解析成一个stylesheet对象，每个对象都包含style rules，style rules也叫cssom
图片说明

阻塞渲染

当HTML解析器（HTML Parser）遇到script标记阻塞时，解析器虽然会停止构建 DOM，但仍会执行JavaScript脚本的资源直至脚本执行完再开始构建DOM；如果JavaScript脚本还操作了CSS，而正好这个CSSOM还没有下载和构建，这时就存在阻塞的资源，浏览器会延迟JavaScript脚本执行，直至完成其CSSOM的下载和构建再执行。
一、遵循下面两个原则
CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源
JavaScript 置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建

二、使用媒体类型(media type)和媒体查询(media query)

<link href="vue.css" rel="stylesheet" media="print"> //设置了媒体类型，会加载但不会阻塞
<link href="vue.css" rel="stylesheet" media="(min-width: 30em) and (orientation: landscape)">//提供了媒体查询，会在符合条件时阻塞渲染

三、使用defer或者async(这2个属性只对设置了scr属性的外部脚本有效，对内联脚本（没有设置src属性的script）无效)

<script src="vue.js" defer></script>

defer的script将会并发异步的去下载对应的外部脚本文件(可能从本地缓存中获取)
vue.js下载完成后不会马上执行，要等到HTML解析完成后，按脚本出现的顺序依次执行，这个过程中多个脚本之间是顺序执行
(即延迟执行引入的js脚本)

<script src="vue.js" async></script>

//async的script将会并发异步的去下载对应的外部脚本文件（可能从本地缓存中获取），
vue.js下载完成后，渲染引擎中断渲染，执行这个脚本以后，再继续渲染，这个过程中多个脚本按下载完成的时间的先后顺序依次执行

构建渲染树

dom tree和cssom attach的过程，每个dom节点都有一个attach方法
样式计算是个很复杂的问题。DOM中的每个节点可以对应样式表中的多个元素，样式表包括了所有样式：浏览器默认样式表，自定义样式表，inline样式元素，HTML可视化属性如：width=100
注：display等于none的不会被显示在渲染树里，但是visibility等于hidden的元素是会显示在渲染树里的