javascript - 浏览器页面生命周期序列如何工作？

Question

想创建一个关于浏览器如何工作的演示文稿，有人知道请求浏览器 URL 时发生的确切生命周期顺序吗？

从服务器收到响应后会发生哪些步骤:

渲染 - CSS 过滤器应用程序、webkit 等...

Javascript - 加载和运行

CSS 应用

DOM 构建/DOM 是在什么时候编写的以及如何编写的？

cookies

其他网络相关事件等

- 不确定这是否是正确的顺序......

是在所有浏览器中都相同还是不同的浏览器具有不同的生命周期？

注意 - 一个写得很好的答案，详细解释了 Ced 下面的每个步骤。我真正要找的是 “关键渲染路径” - 其他好的答案很好地解释了该过程的一般阶段。

感谢上帝，祝大家工作顺利!

Answer 1

您所说的是关键渲染路径。

第 1.、3. 和 4. 点可以这样恢复:

文档对象模型(DOM)的构建

CSS对象模型(CSSOM)的构建

渲染树搭建

布局

画。

以下是幕后发生的事情的分解。

1.构造DOM对象。

第一步是创建 DOM。实际上，您从网络收到的是字节，而浏览器使用所谓的 DOM 树。因此，它需要将这些字节转换为 DOM 树。

您以字节形式接收页面。您的浏览器会将其转换为文本。

文本被转换为节点。

节点转换为“对象”

构造树，称为DOM TREE。

您可以检查开发人员工具以查看需要多少时间。



在这里我们可以看到它花了 4.938 毫秒。

当这个过程完成时，浏览器将拥有页面的全部内容，但要能够渲染浏览器必须等待 CSS 对象模型，也称为 CSSOM 事件，它会告诉浏览器元素应该是什么样子渲染时。

2. 处理 CSS

对于 css 和上面一样，浏览器需要将这些文件转换为 CSSOM:



css也是一个树结构。实际上，如果您将 font-size 放入父元素，那么子元素将继承它。



这在开发人员工具中称为重新计算样式



CSS 是关键渲染路径中最重要的元素之一，因为浏览器会阻止页面渲染，直到它接收并处理您页面中的所有 css 文件，CSS 是渲染阻塞

3. 渲染树

CSSOM 和 DOM 结合起来展示。



4. 布局

一切都必须以像素计算。因此，当您说元素的宽度为 50% 时，场景背后的浏览器会以像素为单位进行转换:



每次对渲染树进行更新或视口(viewport)大小发生变化时，浏览器都必须再次运行布局。

5.油漆

步骤是将所有这些转换为屏幕上的像素。这是上色步骤。

Javascript

对于 JavaScript 生命周期，您可以找到信息 here .

它的要点是您最可能关心的事件是 DOMContentLoaded .这是 DOM 准备就绪的时候。

When the browser initially loads HTML and comes across a <script>...</script> in the text, it can’t continue building DOM. It must execute the script right now. So DOM Content Loaded may only happen after all such scripts are executed.

External scripts (with src) also put DOM building to pause while the script is loading and executing. So DOM Content Loaded waits for external scripts as well.

The only exception are external scripts with async and defer attributes. They tell the browser to continue processing without waiting for the scripts. So the user can see the page before scripts finish loading, good for performance.

除此之外，JavaScript 在这一切中在哪里？

好吧，它正在重绘之间执行。但是它正在阻塞。在重新绘制页面之前，浏览器将等待 JavaScript 完成。这意味着如果您希望您的页面具有良好的响应(大量 fps)，那么 JS 必须相对便宜。

cookies

当接收到 HTTP 请求时，服务器可以发送带有响应的 Set-Cookie header 。 cookie 通常由浏览器存储，然后，cookie 值与向同一服务器发出的每个请求一起发送，作为 Cookie HTTP header 的内容。此外，可以指定过期延迟以及对特定域和路径的限制，从而限制将 cookie 发送到哪个站点的时间长短。

对于网络的东西，这超出了您的问题所涉及的浏览器生命周期的范围。这也是我不太精通的东西，但你可以阅读 TCP here .您可能感兴趣的是 handshake .

资料来源:

Critical rendering path

critical rendering path

Cookies

js lifecycle

tcp

http