从事前端工作，也有近两年时间，但对前端知识体系没有系统学习或整理。为了巩固自己的基础以及更深入学习前端的技术，博主将从零开始学前端。并将学习过程记录以及所有知识点记录在《从零开始学前端》系列帖子。
浏览器渲染HTML过程
每个浏览器有自带的渲染引擎，用来渲染内容。浏览器可以渲染html、xml或者渲染其他内容。但此处只讨论html及css的渲染过程。目前主流的几款浏览器，Firefox、Chrome和Safari基于两种渲染方式。Chrome、Safari使用webkit引擎渲染内容，而Firefox使用Geoko渲染引擎。虽然webkit和Geoko是两种不同引擎，但是基本渲染过程并无太大差异，所以一起进行讨论。
基本过程：
- 解析html
- 加载外部样式及外部脚本
- 构建dom树
- 构建render树
- 布局render树
- 绘制render树
解析html、加载外部样式及外部脚本、构建dom树
浏览器有专门的html解析器来解析html，并在解析过程中构建dom树。浏览器是以自上而下的方式解析html，link、style、script等标签会使解析过程产生阻塞，等待外部资源加载才会继续解析。
外部样式会阻塞内部脚本的执行。
外部样式与外部脚本并行加载，但外部样式会阻塞外部脚本执行。
如果外部脚本带有async属性，则外部脚本的加载与执行不受外部样式影响
如果link标签是动态创建（js生成），不管有无async属性，都不会阻塞外部脚本的加载与执行。
构建render树
在外部样式加载执行后，将css附着到对应的dom节点上，开始构建render树。render树的每一个节点即为与其相对应的DOM节点的CSS框，框的类型与DOM节点的display属性有关，block元素生成block框，inline元素生成inline框。每一个render树节点都有与之相对应的DOM节点，但DOM节点不一定有与之相对应的render树节点，比如display属性为none的DOM节点，而且render树节点在render树中的位置与他们在DOM树中的位置不一定相同，比如float与绝对定位元素。
render树的节点与dom节点的display属性有关
display为none的dom节点没有对应的render节点
float属性、position属性可能改变dom节点在render树中的位置
javascript可以操作dom以及css样式改变render树的生成
布局render树、绘制render树
render树构建完成后开始布局过程，浏览器会计算render树节点在屏幕中对应的位置。在布局完成后，浏览器将
render树绘制在屏幕的过程称为绘制。绘制完成后浏览器会呈现一张完整的网页。
css样式会阻塞图片加载
脚本不会阻塞图片加载