读心悦

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

浏览器渲染原理

2021年1月6日 92点热度 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年1月6日

读心悦

韦永愿的个人博客

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

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
redux 闲谈 小程序 悦读 node hook git CSS Echarts taro JavaScript react 阅读 Nginx vue 随笔 mysql flutter canvas
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
antd Table 组件列表序号自增设置 css渲染流程 2020年下半年书单 小程序自定义组件的用法 面向对象中的继承 【02】创建react应用的react元素和react组件

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号