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

  发布时间:2023-05-01 21:18:42   作者:佚名   我要评论
浏览器是多进程的,有浏览器主进程,网络进程,渲染进程,插件进程等,在将html,css,javascript解析成一个页面的时候,就需要多个进程的分工合作

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

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

构建DOM树

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

解析器的工作过程

  • 通过分词器将字节流转化为token,token分为tag token 和文本token,tag token又分为 starttag token 和 endtag token,比如
    就是一个starttag token,
    就是一个endtag token
  • 接着需要将token解析为dom节点,并将dom节点添加到dom树中,这两个过程是同步进行的
  • html解析器维护了一个token的栈结构,该token栈主要用来计算节点之间的父子关系,在第一个阶段中生成的token会被按照顺序压入这个栈中,具体规则如下:
    • 如果压入到栈中的是StartTag Token,HTML 解析器会为该 Token 创建一个 DOM 节点,然后将该节点加入到 DOM 树中,它的父节点 就是栈中相邻的那个元素生成的节点。
    • 如果分词器解析出来是文本 Token,那么会生成一个文本节点,然后将该节点加入到 DOM 树中,文本 Token 是不需要压入到栈中,它的父节点就是当前栈顶 Token 所对应的 DOM 节点。
    • 如果分词器解析出来的是EndTag 标签,比如是 EndTag div,HTML 解析器会查看 Token 栈顶的元素是否是 StarTag div,如果是,就将 StartTag div 从栈中弹出,表示该 div 元素解析完成。

样式计算

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

  • 把css转化为浏览器能够理解的结构,可以用document.styleSheet查看

  • 转换样式表中的属性值,使其标准化

    属性标准化就是将一些属性值转化为渲染引擎容易理解的,标准化的计算值,比如一些字体的单位是em的就需要转化为px

  • 算出dom树中每个节点的具体样式

    样式计算的第一个规则就是css继承,第二个是层叠

    总之,样式计算阶段的目的是为了计算出DOM节点中每个元素的具体样式,在计算过程中需要遵守CSS的继承和层叠两个规则。这个阶段最终输出的内容是每个DOM节点的样式,并被保存在ComputedStyle的结构内。

布局阶段

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

  • 创建布局树

    在DOM树一般还会含有很多不可见的元素,比如head标签,还有使用了display:none属性的元素。所以在显示之前,我们还要额外地构建一棵只包含可见元素布局树。

    为了构建布局树,浏览器大体上完成了下面这些工作

    • 遍历DOM树中的所有可见节点,并把这些节点加到布局中;
    • 而不可见的节点会被布局树忽略掉,如head标签下面的全部内容,再比如body.p.span这个元素,因为它的属性包含 dispaly:none,所以这个元素也没有被包进布局树
  • 布局计算

    现在我们有了一棵完整的布局树。那么接下来,就要计算布局树节点的坐标位置了

分层

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

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

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

  • 第一点,拥有层叠上下文的元素会被提升为单独的一层

    页面是个二维平面,但是层叠上下文能够让HTML元素具有三维概念,这些HTML元素按照自身属性的优先级分布在垂直于这个二维平面的z轴上。你可以结合下图来直观感受下:

  • 需要剪裁的地方也会被创建为图层

    标签里面的内容超出了标签的宽度和高度,就会出现剪裁。出现这种裁剪情况的时候,渲染引擎会为文字部分单独创建一个层,如果出现滚动条,滚动条也会被提升为单独的层

图层绘制

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

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

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

栅格化操作

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

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

  • 通常一个页面可能很大,但是用户只能看到其中的一部分,我们把用户可以看到的这个部分叫做视口(viewport)。

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

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

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

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

合成和显示

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

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

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

总结

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

  • 渲染进程将HTML内容转换为能够读懂的DOM树结构。
  • 渲染引擎将CSS样式表转化为浏览器可以理解的styleSheets,计算出DOM节点的样式。
  • 创建布局树,并计算元素的布局信息。
  • 对布局树进行分层,并生成分层树。
  • 为每个图层生成绘制列表,并将其提交到合成线程。
  • 合成线程将图层分成图块,并在光栅化线程池中将图块转换成位图。
  • 合成线程发送绘制图块命令DrawQuad给浏览器进程。
  • 浏览器进程根据DrawQuad消息生成页面,并显示到显示器上

相关文章

  • web开发中的长度单位小结

    这篇文章主要介绍了web开发中的长度单位主要包括px,pt,em等,需要的朋友可以参考下
    2023-08-06
  • 网页前端开发的一些尺寸单位(px,rem单位)

    px单位是绝对单位,一般用于pc端网页开发,因为是绝对单位所以在移动端上的使用体验并不是很好,rem它是描述相对于当前根元素字体尺寸,是相对单位,它可以根据根元素的变换而
    2023-08-06
  • WEB前端优化必备js/css压缩工具YUI-compressor详解与集成用法

    压缩工具层次不穷,各有优点,选择适合的压缩工具为将来做项目开发使用是一件很重要的事情!!在这介绍YUI-compressor,需要的朋友可以参考下
    2023-06-21
  • html,css,javascript是怎样变成页面的

    浏览器是多进程的,有浏览器主进程,网络进程,渲染进程,插件进程等,在将html,css,javascript解析成一个页面的时候,就需要多个进程的分工合作
    2023-05-01
  • 常用Mime类型汇总

    本文为大家整理了常用的文件对应的MIME类型,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-25
  • postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍

    这篇文章介绍了postman中form-data、x-www-form-urlencoded、raw、binary的区别,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-12-28
  • 网页中使用Unicode字符的介绍(&#,\u等)

    国际组织制定了可以容纳世界上所有文字和符号的字符编码方案,称为Unicode,是通用字符集Universal Character Set的缩写,用以满足跨语言、跨平台进行文本转换、处理的要求
    2021-11-27
  • 前端实现字符串GBK与GB2312的编解码(小结)

    这篇文章主要介绍了前端实现字符串GBK与GB2312的编解码(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-12-02
  • 告别硬编码让你的前端表格自动计算的实例代码

    这篇文章主要介绍了告别硬编码让你的前端表格自动计算,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-27
  • 浅析Table 和 div 的简介及用法

    这篇文章主要介绍了浅析Table 和 div 的简介及用法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-25

最新评论