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

Question

想要创建一个关于浏览器如何工作的演示文稿,是否有人知道每当请求浏览器URL时发生的确切生命周期序列？

在从服务器收到响应后,会发生以下步骤:

1. 渲染 - CSS过滤器应用程序,webkit等...
2. Javascript - 加载并运行
3. CSS应用程序
4. DOM构建/在哪个点上编写DOM以及如何编写？
5. 饼干
6. 其他网络相关活动等

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

在所有浏览器中是否相同或不同的浏览器有不同的生命周期？

注意 - 一个写得很好的答案,详细解释了下面Ced的每一步.我实际上正在寻找的是"关键渲染路径" - 这个过程的一般阶段很好地解释了其他好的答案.

感谢上帝,大家好!

Answer 1

你在谈论的是关键渲染路径.

第1,3和4点可以恢复如下:

1. 文档对象模型(DOM)的构建
2. 构建CSS对象模型(CSSOM)
3. 渲染树的构造
4. 布局
5. 涂料.

这是对场景背后发生的事情的分解.

1.构造DOM对象.

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

1. 您以字节的形式收到该页面.您的浏览器会将其转换为文本.
2. 文本转换为节点.
3. 节点转换为"对象"
4. 构建树,称为DOM TREE.

您可以查看开发人员工具以查看需要多长时间.

在这里我们可以看到它花了4.938ms.

当这个过程完成后,浏览器将拥有页面的完整内容,但是为了能够呈现浏览器必须等待CSS对象模型,也称为CSSOM事件,它将告诉浏览器元素应该如何渲染时

2.处理CSS

对于css,它与上面相同,浏览器需要将这些文件转换为CSSOM:

css也是树结构.实际上,如果你将一个font-size放在父元素上,那么孩子们将继承它.

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

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

3.渲染树

CSSOM和DOM组合显示.

4.布局

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

每次更新渲染树或更改视口大小时,浏览器都必须再次运行布局.

5.Paint

该步骤将所有这些转换为屏幕上的像素.这是油漆步骤.

使用Javascript

对于JavaScript生命周期,您可以在此处找到信息.

它的要点是你最可能关心的事件是DOMContentLoaded.这是DOM准备好的时候.

当浏览器最初加载HTML并<script>...</script>在文本中遇到时 ,它无法继续构建DOM.它必须立即执行脚本.因此,DOM Content Loaded可能仅在执行所有此类脚本后发生.

在脚本加载和执行时,外部脚本(使用src)也会使DOM构建暂停.因此DOM Content Loaded也会等待外部脚本.

唯一的例外是具有async和defer属性的外部脚本.它们告诉浏览器继续处理而不等待脚本.因此,用户可以在脚本完成加载之前查看页面,这有利于提高性能.

除此之外,所有这些中的JavaScript在哪里？

好吧,它正在重绘之间执行.然而它是封锁的.浏览器将在重新绘制页面之前等待JavaScript完成.这意味着如果你希望你的页面有很好的响应(很多fps),那么JS必须相对便宜.

饼干

当收到HTTP请求时,服务器可以发送带响应的Set-Cookie标头.cookie通常由浏览器存储,然后,cookie值与每个对Cookie HTTP头的内容发送到同一服务器的请求一起发送.此外,可以指定到期延迟以及对特定域和路径的限制,从而限制cookie发送到的站点的长度和位置.

对于网络内容,这超出了浏览器生命周期的范围,您的问题就在于此.这也是我不太熟悉的东西,但你可以在这里阅读TCP .您可能感兴趣的是握手.

资料来源:

• 关键渲染路径

• 关键渲染路径

• 饼干

• js生命周期

• TCP

• HTTP

Answer 2

您可以找到关于此主题的许多解释,但我想以下是了解浏览器如何呈现网页的最简单的解释.

1. 您在首选浏览器中的地址栏中键入URL.
2. 浏览器解析URL以查找协议,主机,端口和路径,并形成HTTP请求(很可能是协议).
3. 要到达主机,首先需要将人类可读主机转换为IP号码,并通过在主机上进行DNS查找来实现此目的
4. 然后需要在指定的端口(通常是端口80)上从用户的计算机向该IP号打开一个套接字
5. 连接打开时,HTTP请求将发送到主机
6. 主机将请求转发到配置为侦听指定端口的服务器软件(通常是Apache)
7. 服务器检查请求(通常只是路径),并启动处理请求所需的服务器插件(对应于您使用的服务器语言,PHP,Java,.NET,Python？)
8. 插件可以访问完整请求,并开始准备HTTP响应.
9. 为了构建响应,(最有可能)访问数据库.基于请求的路径(或数据)中的参数进行数据库搜索
10. 来自数据库的数据以及插件决定添加的其他信息被组合成一长串文本(可能是HTML).
11. 该插件将该数据与一些元数据(以HTTP头的形式)相结合,并将HTTP响应发送回浏览器.
12. 浏览器接收响应,并在响应中解析HTML(概率被破坏的概率为95%).
13. DOM树是由破碎的HTML构建的,并且对HTML源中找到的每个新资源(通常是图像,样式表和JavaScript文件)向服务器发出新请求.返回步骤3并重复每个资源.
14. 解析样式表,并将每个样式中的呈现信息附加到DOM树中的匹配节点.
15. 解析并执行Javascript,移动DOM节点并相应地更新样式信息.
16. 浏览器根据DOM树和每个节点的样式信息在屏幕上呈现页面,您将在屏幕上看到该页面.

资源