01浏览器执行原理与顺序

CSL369
150 阅读8分钟

网页解析过程

一个网页URL从输入到浏览器中，到显示经历过怎么样的解析过程呢？

image-20220816190504266

页面的渲染过程

这个执行过程中，HTML解析的时候遇到了JavaScript标签，会停止解析HTML，而去下载和执行JavaScript代码；

执行流程：

  1. 首先会将html下载下来，然后浏览器内核里面有一个HTML Parser会对HTML进行解析。
  2. 随后会转化为一个 DOM Tree（DOM 树）。上面的DOM指的是JS对于DOM的操作。
  3. 那么当通过JS来操作DOM的时候，谁来执行这些代码呢？那么就是后面所说到的JS引擎。
  4. 下载CSS文件是不会影响DOM的解析的；随后CSS也会被CSS Parser进行解析，然后配合CSS的许多规则(就是我们所写的样式)。
  5. 然后DOM Tree 就会和 CSS 结合在一起。Attachment：附加。
  6. 随后结合在一起就会生成新的东西 Render Tree(渲染树)，然后通过 Layout(布局引擎，计算位置信息、大小信息)，做一些详细的布局。比如说你给一个元素固定定位到左下角，但是可能用户将浏览器缩小了，所以还是最终要通过 Layout 进行一个具体的布局，生成最终的 Render Tree
  7. 然后就需要将上面的一个个元素绘制出来。
  8. 最后在页面进行展示。

详细渲染过程

HTML

因为默认情况下服务器会给浏览器返回index.html文件，所以解析HTML是所有步骤的开始：解析HTML，会构建DOM Tree。

image-20220816193210086

生成CSS规则

在解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件：

  1. 注意：下载CSS文件是不会影响DOM的解析的；

浏览器下载完CSS文件后，就会对CSS文件进行解析，解析出对应的规则树：

  1. 我们可以称之为 CSSOM（CSS Object Model，CSS对象模型）；

image-20220816193312800

Render Tree

当有了DOM Tree和 CSSOM Tree后，就可以两个结合来构建Render Tree了

image-20220816193343946

注意一：link元素不会阻塞DOM Tree的构建过程，但是会阻塞Render Tree的构建过程。

这是因为Render Tree在构建时，需要对应的CSSOM Tree；

注意二：Render Tree和DOM Tree并不是一一对应的关系，比如对于display为none的元素，压根不会出现在render tree中；

layout和Paint

第四步是在渲染树（Render Tree）上运行布局（Layout）以计算每个节点的几何体。

  1. 渲染树会表示显示哪些节点以及其他样式，但是不表示每个节点的尺寸、位置等信息；
  2. 布局是确定呈现树中所有节点的宽度、高度和位置信息；

image-20220816193512920

第五步是将每个节点绘制（Paint）到屏幕上：

  1. 在绘制阶段，浏览器将布局阶段计算的每个frame转为屏幕上实际的像素点；
  2. 包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img）

回流和重绘

理解回流reflow：（也可以称之为重排）

  1. 第一次确定节点的大小和位置，称之为布局（layout）。
  2. 之后对节点的大小、位置修改重新计算称之为回流。

什么情况下引起回流呢？

  1. 比如DOM结构发生改变（添加新的节点或者移除节点）；
  2. 比如改变了布局（修改了width、height、padding、font-size等值）
  3. 比如窗口resize（修改了窗口的尺寸等）
  4. 比如调用getComputedStyle方法获取尺寸、位置信息；

理解重绘repaint：

  1. 第一次渲染内容称之为绘制（paint）。
  2. 之后重新渲染称之为重绘。

什么情况下会引起重绘呢？

  1. 比如修改背景色、文字颜色、边框颜色、样式等；

关系

回流一定会引起重绘，所以回流是一件很消耗性能的事情。

所以在开发中要尽量避免发生回流：

  1. 修改样式时尽量一次性修改
    • 比如通过cssText修改，比如通过添加class修改
  2. 尽量避免频繁的操作DOM
    • 我们可以在一个DocumentFragment或者父元素中 将要操作的DOM操作完成，再一次性的操作；
  3. 尽量避免通过getComputedStyle获取尺寸、位置等信 息；
  4. 对某些元素使用position的absolute或者fixed。
    • 并不是不会引起回流，而是开销相对较小，不会对 其他元素造成影响。

composite合成

绘制的过程，可以将布局后的元素绘制到多个合成图层中。这是浏览器的一种优化手段；默认情况下，标准流中的内容都是被绘制在同一个图层（Layer）中的；

而一些特殊的属性，会创建一个新的合成层（ CompositingLayer ），并且新的图层可以利用GPU来加速绘制；

  1. 因为每个合成层都是单独渲染的；

那么哪些属性可以形成新的合成层呢？常见的一些属性：

  1. 3D transforms
  2. video、canvas、iframe
  3. opacity 动画转换时；
  4. position: fixed
  5. will-change：一个实验性的属性，提前告诉浏览器元素可能发生哪些变化；
  6. animation 或 transition 设置了opacity、transform；
  7. 当我们修改了某一个图层里面的东西，他就会单独的渲染这一个图层。

验证

image-20220816212807603

分层确实可以提高性能，但是它以内存管理为代价，因此不应作为 web 性能优化策略的一部分过度使用。

script元素

我们现在已经知道了页面的渲染过程，但是JavaScript在哪里呢？

  1. 事实上，浏览器在解析HTML的过程中，遇到了script元素是不能继续构建DOM树的；
  2. 它会停止继续构建，首先下载JavaScript代码，并且执行JavaScript的脚本；
  3. 只有等到JavaScript脚本执行结束后，才会继续解析HTML，构建DOM树；

为什么要这样做呢？

  1. 这是因为JavaScript的作用之一就是操作DOM，并且可以修改DOM；
  2. 如果我们等到DOM树构建完成并且渲染再执行JavaScript，会造成严重的回流和重绘，影响页面的性能；
  3. 所以会在遇到script元素时，优先下载和执行JavaScript代码，再继续构建DOM树；

但是这个也往往会带来新的问题，特别是现代页面开发中：

  1. 在目前的开发模式中（比如Vue、React），脚本往往比HTML页面更“重”，处理时间需要更长；
  2. 所以会造成页面的解析阻塞，在脚本下载、执行完成之前，用户在界面上什么都看不到；

为了解决这个问题，script元素给我们提供了两个属性（attribute）：defer和async。

defer属性

defer 属性告诉浏览器不要等待脚本下载，而继续解析HTML，构建DOM Tree。

  1. 脚本会由浏览器来进行下载，但是不会阻塞DOM Tree的构建过程；
  2. 如果脚本提前下载好了，不会立即执行，它会等待DOM Tree构建完成，在DOMContentLoaded事件之前先执行defer中的代码；

所以DOMContentLoaded总是会等待defer中的代码先执行完成。

const divEl = document.querySelector(".box");
console.log(divEl.textContent);

<script defer src="./js/defer.js"></script>
<div class="box">xxxxx</div>

当我们给script不添加defer的时候，是获取不到元素的(null)。

// html里面DOMContentLoaded 比 defer后执行
window.addEventListener("DOMContentLoaded", () => {
  console.log("DOMContentLoaded");
});

在文档加载事件里面说过DOMContentLoaded是已经成功构建DOM树，但是还没有加载外部资源时候，回调的函数，而defer则是在这个之前执行脚本，避免大量的回流和重绘。

注意点：

  1. defer的脚本是可以保持正确的顺序执行的。
  2. 从某种角度来说，defer可以提高页面的性能，并且推荐放到head元素中；
  3. 注意：defer仅适用于外部脚本，对于script默认内容会被忽略。

async属性

async 特性与 defer 有些类似，它也能够让脚本不阻塞页面。

async是让一个脚本完全独立的：

  1. 浏览器不会因 async 脚本而阻塞（与 defer 类似）；
  2. async脚本不能保证顺序(谁先下载完先执行谁)，它是独立下载、独立运行，不会等待其他脚本；
  3. async不会能保证在DOMContentLoaded之前或者之后执行；
  4. 意思就是当下载完.js文件之后，会立即被解析并且执行的。
// 不能保证在执行async脚本的时候，DOM一定是构建完成的，所以使用需要谨慎

defer通常用于需要在文档解析后操作DOM的JavaScript代码，并且对多个script文件有顺序要求的；

async通常用于独立的脚本，对其他脚本，甚至DOM没有依赖的；

avatar
文章
阅读
粉丝