【干货】十分钟读懂浏览器渲染流程
在之前写过的一篇《"天龙八步"细说浏览器输入URL后发生了什么》一文中,和大家分享了从在浏览器中输入网址URL到最终页面展示的整个过程。部分读者向我反馈对于最后的浏览器渲染布局这块不是很清晰,所以本文就浏览器渲染流程单独开篇讲解,希望大家都能有新的收获。 浏览器主要组件结构 (浏览器主要组件) 渲染引擎——webkit和Gecko Firefox使用Geoko——Mozilla自主研发的渲染引擎。 Safari和Chrome都使用webkit。Webkit是一款开源渲染引擎,它本来是为linux平台研发的,后来由Apple移植到Mac及Windows上。 本文我主要以webkit渲染引擎来讲解,尽管webkit和Gecko使用的术语稍有不同,他们的主要流程基本相同。 (webkit渲染引擎流程) 关键渲染路径 关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源,然后解析、构建树、渲染布局、绘制,最后呈现给客户能看到的界面这整个过程。 所以浏览器的渲染过程主要包括以下几步: 解析HTML生成DOM树。 解析CSS生成CSSOM规则树。 将DOM树与CSS...