心得技巧

关注公众号 jb51net

关闭
网页制作 > 心得技巧 >

html,css,javascript是怎样变成页面的

脚本之家

浏览器是多进程的,有浏览器主进程,网络进程,渲染进程,插件进程等,在将html,css,javascript解析成一个页面的时候,就需要多个进程的分工合作。
当浏览器接受到一个请求的响应数据,并且该数据的类型(content-type)为text/html,浏览器就会知道这是一个html页面,于是网络进程就会将收到的数据交给渲染进程后,就进入了渲染阶段,也就是在这一个阶段,浏览器会根据数据生成一个新的页面。

在执行的过程中,会被分为很多个子阶段,输入的HTML经过这些子阶段,最后会输出像素,这个处理过程叫做渲染流水线,按照渲染的时间顺序,流水线可分为如下几个子阶段:

构建DOM树

网络进程交给渲染进程的字节流渲染进程是无法识别的,需要先转化为dom树,在渲染进程内部有个html解析器,就负责将字节流转化为dom树

解析器的工作过程

样式计算

样式计算的目的是为了计算dom节点中每个元素的具体样式,具体可以分为以下三个步骤:

布局阶段

布局也就是计算出dom树中可见元素的几何位置,chrome在布局阶段需要完成两个任务:创建布局树和布局计算

分层

接下来,渲染引擎需要为特定的节点生成专用的图层,并生成一颗对应的图层树。图层叠加起来就是最终的页面图像

通常情况下,并不是布局树的每个节点都包含一个图层,如果一个节点没有对应的层,那么这个节点就从属于父节点的图层。如上图中的span标签没有专属图层,那么它们就从属于它们的父节点图层。但不管怎样,最终每一个节点都会直接或者间接地从属于一个层。

满足以下条件才会被提升为单独的层

图层绘制

在完成图层树的构建之后,渲染引擎会对图层树中的每一个图层进行绘制

绘制的过程就是把一个图层的绘制拆分成很多小的绘制指令,然后再把这些指令按照顺序组成一个待绘制列表

绘制列表中的指令其实非常简单,就是让其执行一个简单的绘制操作,比如绘制粉色矩形或者黑色的线等。而绘制一个元素通常需要好几条绘制指令,因为每个元素的背景、前景、边框都需要单独的指令去绘制。所以在图层绘制阶段,输出的内容就是这些待绘制列表。

栅格化操作

绘制列表只是用来记录绘制顺序和绘制指令的列表,而实际上绘制操作是由渲染引擎中的合成线程来完成的。

当图层的绘制列表准备好之后,主线程会把该绘制列表提交(commit)给合成线程

在有些情况下,有的图层可以很大,比如有的页面你使用滚动条要滚动好久才能滚动到底部,但是通过视口,用户只能看到页面的很小一部分,所以在这种情况下,要绘制出所有图层内容的话,就会产生太大的开销,而且也没有必要。

基于这个原因,合成线程会将图层划分为图块(tile),这些图块的大小通常是256x256或者512x512

合成线程会按照视口附近的图块来优先生成位图,实际生成位图的操作是由栅格化来执行的。所谓栅格化,是指将图块转换为位图。而图块是栅格化执行的最小单位。渲染进程维护了一个栅格化的线程池,所有的图块栅格化都是在线程池内执行的,运行方式如下图所示:

通常,栅格化过程都会使用GPU来加速使用,使用GPU生成位图的过程叫做快速栅格化,或者GPU栅格化,生成的位图会保存在GPU内存中

合成和显示

一旦所有的图块都被栅格化,合成线程就会生成一个绘制图块的命令—‘DrawQuad",然后将该命令提交给浏览器进程

浏览器进程里面有一个叫viz的组件,用来接收合成线程发过来的DrawQuad命令,然后根据DrawQuad命令,将其页面内容绘制到内存中,最后再将内存显示在屏幕上。

到这里,经过这一系列的阶段,编写好的HTML、CSS、JavaScript等文件,经过浏览器就会显示出漂亮的页面了。

总结

一个完整的渲染流程大致可总结为如下