读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. Javascript
  3. 正文

浏览器渲染原理

2021年01月06日 26点热度 0人点赞 0条评论

浏览器的内核分成两个部分,一个渲染引擎,另一个是JS引擎。不同的浏览器的渲染引擎不同(不同的浏览的内核不同)。

浏览器工作的流程:

1)浏览器解析内容:

HTML/SVG/XHTML,解析这三种文件会生成一个DOM Tree(DOM 树)

CSS,解析CSS,产生了CSS规则树

JavaScript脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree。

2)解析结束后,浏览器引擎则通过DOM Tree 和CSS Rule Tree来构建Rendering Tree。

Rendering Tree 不等同于DOM树,比如display:none的内容就不必要放在Rendering Tree中。

CSS的RuleTree则是为了完成匹配并且把CSS Rule附加Rendering Tree上的DOM节点(element)

计算每个element的位置,这就是布局了(Layout)

3)通过调用操作系统的Native GUI的API绘制

构建DOM

浏览器会将HTML文件转换为DOM树,可以细分为:

字节数据 =>  字符串  =>  Token => Node => DOM

浏览器从磁盘或者网络读取HTML的原始字节,根据文件的指定编码(UTF-8)原始字节转化为字符串。(在网络中传输的内容是0和1的字节数据,当浏览器接收到这些字节数据后,会转为为字符串,也就是代码)

把字符串转为Token,比如 、< body>。Token会标识处当前的Token是“文本”或是“开始标签”等这个信息

生成节点对象并且构建DOM,构建DOM和转换Token一起进行,也就是生成一个Token就立刻消耗Token取创建出节点对象。(带有结束标签的Token不会创建节点对象)

构建CSSOM

DOM会捕获页面内容,而浏览器还需要知道页面的内容是如何展示的,这就要构建CSSOM了,与构建DOM的过程类似。浏览器会确定每一个节点的样式是什么,而且这个过程是消耗资源的,因为样式是可以随意设置个某个节点的,也是可以通过继承得到,所以浏览器需要递归CSSOM树,再确定具体元素的具体样式。

CSS匹配HTML元素是一个复杂而且涉及到性能,所以DOM树要小,css尽量使用ID和class。在页面布局中需要分成模块,减少过渡层叠。

Rendering Tree(渲染树)

在生成DOM和CSSOM后,则需要将合成渲染树。但是渲染树并不包括所有的节点和样式信息。只包含需要显示的节点和样式,比如一个节点的样式为display:none,就不需要显示在渲染树中了。

布局与绘制

在浏览器生成渲染树后,会根据渲染树来进行布局(回流)。这个阶段浏览器需要弄清节点在页面中的准确位置和大小。

布局输出的一个‘盒模型’,它准确的捕获元素在视口内的位置和尺寸。布局结束后,浏览器会立即触发Paint Setup 和 Paint 事件,把渲染树转换成为屏幕上的像素。

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: CSS
最后更新:2021年01月06日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
阅读 随笔 hook 闲谈 git react taro redux Echarts node flutter 悦读 Nginx 小程序 CSS mysql vue canvas JavaScript
推荐文章
  1. JavaScript设计模式-行为设计模式
  2. css水平垂直居中的几种方式
  3. dart的List类
  4. HTML+css3实现字体3D效果
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号