浏览器运行原理

最新推荐文章于 2024-08-29 14:26:44 发布

林中白虎

最新推荐文章于 2024-08-29 14:26:44 发布

阅读量66

点赞数

分类专栏： HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/qq_33003143/article/details/129106965

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

浏览器运行原理

1、浏览器引擎说明

浏览器引擎内核：

Trident 引擎：Internet Explorer
Webkit 引擎：Chrome（28 版本后基于 blink，blink 是 webkit 的一个分支）和 Safari
Gecko 引擎：Firefox

浏览器内核组成部分：渲染引擎 + JS 引擎

2、渲染引擎工作流程

浏览器请求到内容后开始准备解析 DOM 树
浏览器开始解析 DOM 树（DOM Tree）和样式规则树（Style Rule Tree）
遇到 JS 代码的时候会操作 DOM API 和 CSS DOM API 来操作 DOM 树和样式规则树
当 JS 解析完成后会通过 DOM 树和样式规则树生产渲染树
渲染树组织好后浏览器会根据渲染树进行页面的布局渲染和绘制页面

在这里插入图片描述

3、CSS 渲染规则

CSS 渲染的规则是从上到下，从右到左进行解析渲染。

例如：.main h4 a { font-size: 14px; }

浏览器在解析解析的时候会先从 a 开始，顺的 a 的父级标签向上找到 h4 标签后在顺着父级标签找到.main 的标签。就是在遍历时候找到匹配的数据就会存入到样式规程树中，直到 html 根级节点后就会继续执行下一条样式规则。

4、CSS 选择器权值

权值，代表着优先级，权值越大，优先级越高。同种类型的选择器权值相同，后定义的选择器会覆盖先定义的选择器。

important 最高
内联： 1000
ID： 100
Class：10
Tag： 1

注：组合使用，权值会叠加。

5、页面渲染与执行过程

具体实例代码：

<html>
  <body>
    <link href="example.css" rel="stylesheet">
    <div>Hi here</div>
    <script>
      document.write('<script src="other.js"></script>')
    </script>
    <div>Hi again</div>
    <script src="last.js"></script>
  </body>
</html>

解析器遇到了 example.css，并将它从网络中下载下来。下载样式表的过程是耗时的，但是解析器并没有被阻塞，继续往下解析
解析器遇到<script>标签，但是由于样式文件下载未完成，阻塞了该脚本的执行（上面已指出）。解析器（构建 DOM 树和 CSS 规则树）被阻塞住，不能继续往下解析
因为渲染树是 DOM 树和 CSS 规则树来构造，所以此时，渲染树的构建也被阻塞
渲染树是绘制触发条件之一，因此 Hi there!也就不能被绘制（painting->display）到页面中
接下来，一旦 example.css 下载完成，内联的脚本执行完了之后，解析器开始执行遇到的<script>`标签，并查到 src 属性中的 other.js 文件，立即被阻塞，开始下载 other.js
因为解析器被阻塞，触发了绘制条件，浏览器就会收到绘制的请求，“Hi，here”就会显示在页面上
other.js 加载完成了之后，解析器继续向下解析，遇到 last.js 之后又被阻塞
因为解析器再次被阻塞，又形成了 “绘制” 条件，因此绘制 DOM 树的内容，即，“Hi，again”就会显示在页面上
last.js 加载完成，并且被执行