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


Posted in HTML / CSS onMay 07, 2023

浏览器是多进程的,有浏览器主进程,网络进程,渲染进程,插件进程等,在将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消息生成页面,并显示到显示器上
 
HTML / CSS 相关文章推荐
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 #HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 #HTML / CSS
使用CSS实现百叶窗效果示例代码
使用CSS实现按钮边缘跑马灯动画
使用CSS实现音波加载效果
table不让td文字溢出操作方法
Dec 24 #HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 #HTML / CSS
You might like
php Smarty模板生成html文档的方法
2010/04/12 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
用javascript操作xml
2006/11/04 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
JavaScript字符串对象
2017/01/14 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
JavaScript实现百度搜索框效果
2020/03/26 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
python绘制双柱形图代码实例
2017/12/14 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
英国探险旅游专家:Explore
2018/12/20 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
师范生实习的个人自我鉴定
2013/10/20 职场文书
医学专业毕业生推荐信
2013/11/14 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL