渲染的概念

链接：http://www.zhihu.com/question/20117417
来源：知乎
著作权归作者所有。

 

1、页面渲染，就是浏览器将请求返回的页面资源（HTML文本，图像，动画，视频，音频等）基于一定的规则（CSS语句，JS语句，浏览器本身的一些规则等）完成页面布局及绘制的过程。

2、你要吃个菜，你找到厨师说，我要尖椒肉丝。厨师就去翻菜谱，炒给你吃。

你是浏览者
菜是你将看到的页面
厨师是浏览器
菜谱是程序员写的页面代码
炒菜的过程，就是页面渲染。

3、浏览器这边做的工作大致分为以下几步：

（1）加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
（2）解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
（3）渲染：构建渲染树，对各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染（可以理解为“画”元素）
这几个过程不是完全孤立的，会有交叉，比如HTML加载后就会进行解析，然后拉取HTML中指定的CSS、JS等。

4、http://coolshell.cn/articles/9666.html

5、http://blog.cssforest.org/2012/02/08/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%E6%B5%85%E6%9E%90.html