页面渲染——前端扫盲

小白入门一

举个例子：
你要吃个菜，你找到厨师说，我要尖椒肉丝。
厨师就去翻菜谱，炒给你吃。
你是浏览者
菜是你将看到的页面
厨师是浏览器
菜谱是程序员写的页面代码
炒菜的过程，就是页面渲染

小白入门二

渲染大致分为两部分，一部分是排版，一部分是绘制。排版就是根据文档流，加上浮动、定位等属性，确定各个盒子的位置还有尺寸。绘制就是将css的属性例如字体、背景色、圆角等等按照给定的方式呈现出来。各个浏览器的渲染效率不一样。

小白入门三

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

链接