浏览器页面生命周期序列如何工作？
How does browser page lifecycle sequence work?
想创建一个关于浏览器如何工作的演示文稿，有人知道每当请求浏览器 URL 时发生的确切生命周期顺序吗？
从服务器收到响应后发生的步骤是什么：
- 呈现 - CSS 过滤应用程序、webkit 等...
- Javascript - 加载和 运行
- CSS申请
- DOM构造/DOM是在什么时候写的，怎么写的？
- Cookies
- 其他网络相关活动等
-- 不确定这是否是正确的顺序...
是所有浏览器都一样还是不同的浏览器有不同的生命周期？
注意 - 一个写得很好的答案，详细解释了下面 Ced 的每个步骤。我实际上在寻找的是 "Critical Rendering Path" - 其他好的答案很好地解释了该过程的一般阶段。
感谢上帝，祝大家工作顺利！
您可以找到很多关于这个主题的解释，但我想以下是理解浏览器如何呈现网页的最简单的解释。
- 您在首选浏览器的地址栏中键入 URL。
- 浏览器解析 URL 以找到协议、主机、端口和路径并将其
形成 HTTP 请求（很可能是协议）。
- 要到达主机，它首先需要将人类可读的主机翻译成
一个 IP 号码，它通过在主机上进行 DNS 查找来实现
- 然后需要打开一个从用户计算机到该IP的套接字
数字，在指定的端口（通常是端口 80）
- 当连接打开时，HTTP 请求被发送到主机
- 主机将请求转发到配置为侦听指定端口的服务器软件（通常是 Apache）
- 服务器检查请求（大多数
通常只有路径），并启动所需的服务器插件
处理请求（对应你使用的服务器语言，
PHP、Java、.NET、Python?)
- 插件获得对完整请求的访问权限，并开始准备 HTTP 响应。
- 为了构建响应，（很可能）访问了一个数据库。根据请求路径（或数据）中的参数进行数据库搜索
- 来自数据库的数据，连同插件决定添加的其他信息，被组合成一长串文本（可能 HTML）。
- 插件将该数据与一些元数据（以 HTTP headers 的形式）结合起来，并将 HTTP 响应发送回浏览器。
- 浏览器收到响应，并解析响应中的HTML（95%概率损坏）。
- 一棵 DOM 树是从损坏的 HTML 中构建出来的，并且对在 HTML 源中找到的每个新资源（通常是图像，样式表和 Java 脚本文件）。返回步骤 3 并为每个资源重复。
- 样式表被解析，每个样式表中的呈现信息附加到 DOM 树中的匹配节点。
- Java脚本被解析并执行，DOM个节点被移动，样式信息也随之更新。
- 浏览器根据DOM树在屏幕上呈现页面
每个节点的样式信息，您会在屏幕上看到该页面。
我想向任何想观看发生的事情的人提出以下建议，这是一个廉价的答案，但它可能有助于解释浏览器如何检索它的级联文件以构建 URL（在本例中为 html）。
- 浏览到您要用于在 Chrome 中演示的页面（或使用此页面作为相当复杂的示例）
- 打开控制台 (Ctrl + Shift + i)
- Select "Network" 来自选项
- 按 F5
玩转设置。您还应该查看在“性能”选项卡中创建的时间线
- Select "Performance" 来自选项
- 按 F5
在这里降低性能可能很有用，因此如果您想演示的话，您可以实时（慢速）观看它。
重要的是（以HTML页面为例），rendering/applying css/running javascript的顺序取决于它出现在DOM。可以在脚本加载后的任何时候执行脚本，具体取决于可用的所需资源。 Css 可能是 HTML 文档的一部分（内联），或者它可能来自非常繁忙的服务器，需要 10-20 秒才能应用。希望这对您有所帮助 -R
- 大部分问题的答案 "What happens when we search Google"。
- 浏览器按照 html syntax 标准向页面呈现 HTML。请记住，浏览器非常宽容，并且存在无效 HTML 这样的事情。
- Css 应用到页面后跟随 css grammar。
- 所有浏览器都必须按照ECMA Script standards实现js。
其他一些有用的资源：
Firefox 3D tilt plugin help visualise webpages and how they are rendering content in different layers.
Chrome's performance tab 页面加载期间发生的情况以及 dom 树是如何构建的良好可视化。它有助于识别渲染过程中的瓶颈。
您可以通过打开chrome看到很多浏览器的后端功能，如缓存HTML内容、缓存图片、dns缓存、开放端口等：/ /net-internals/.
你说的是关键渲染路径。
第1点、第3点、第4点可以这样复述：
- 文档构建Object模型(DOM)
- 构建CSSobject模型（CSSOM）
- 渲染树的构建
- 布局
- 绘画。
这里是对幕后发生的事情的分解。
1.构造 DOM object.
第一步是创建 DOM。实际上，您从网络接收到的是字节，浏览器使用所谓的 DOM 树。因此它需要将这些字节转换成 DOM 树。
- 您以字节形式接收页面。您的浏览器会将其转换为文本。
- 文本转换为节点。
- 节点转换为"objects"
- 构建树，称为DOM TREE。
你可以查看开发者工具，看看需要多少时间。
在这里我们可以看到它花了 4.938 毫秒。
此过程完成后，浏览器将拥有页面的全部内容，但要能够呈现浏览器必须等待 CSS Object 模型，也称为 CSSOM 事件，它将告诉浏览器渲染时元素的外观。
2。处理 CSS
对于css同上，浏览器需要将这些文件转换成CSSOM:
css也是树结构。实际上，如果您将 font-size 放在 parent 元素上，那么 children 将继承它。
这在开发者工具中称为重新计算样式
CSS 是关键渲染路径中最重要的元素之一，因为浏览器会阻止页面渲染，直到它接收并处理页面中的所有 css 文件，CSS 渲染阻塞
3。渲染树
CSSOM AND DOM合并显示。
4.布局
一切都必须以像素为单位进行计算。所以当你说一个元素的宽度为 50% 时，浏览器在后台以像素为单位转换它：
每次对渲染树进行更新，或视口大小发生变化时，浏览器都必须重新 运行 布局。
5.Paint
步骤是将所有这些转换为屏幕上的像素。这是油漆步骤。
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 . What you might be interested in is the handshake.
来源：
想创建一个关于浏览器如何工作的演示文稿，有人知道每当请求浏览器 URL 时发生的确切生命周期顺序吗？
从服务器收到响应后发生的步骤是什么：
- 呈现 - CSS 过滤应用程序、webkit 等...
- Javascript - 加载和 运行
- CSS申请
- DOM构造/DOM是在什么时候写的，怎么写的？
- Cookies
- 其他网络相关活动等
-- 不确定这是否是正确的顺序...
是所有浏览器都一样还是不同的浏览器有不同的生命周期？
注意 - 一个写得很好的答案，详细解释了下面 Ced 的每个步骤。我实际上在寻找的是 "Critical Rendering Path" - 其他好的答案很好地解释了该过程的一般阶段。
感谢上帝，祝大家工作顺利！
您可以找到很多关于这个主题的解释，但我想以下是理解浏览器如何呈现网页的最简单的解释。
- 您在首选浏览器的地址栏中键入 URL。
- 浏览器解析 URL 以找到协议、主机、端口和路径并将其 形成 HTTP 请求（很可能是协议）。
- 要到达主机，它首先需要将人类可读的主机翻译成 一个 IP 号码，它通过在主机上进行 DNS 查找来实现
- 然后需要打开一个从用户计算机到该IP的套接字 数字，在指定的端口（通常是端口 80）
- 当连接打开时，HTTP 请求被发送到主机
- 主机将请求转发到配置为侦听指定端口的服务器软件（通常是 Apache）
- 服务器检查请求（大多数 通常只有路径），并启动所需的服务器插件 处理请求（对应你使用的服务器语言， PHP、Java、.NET、Python?)
- 插件获得对完整请求的访问权限，并开始准备 HTTP 响应。
- 为了构建响应，（很可能）访问了一个数据库。根据请求路径（或数据）中的参数进行数据库搜索
- 来自数据库的数据，连同插件决定添加的其他信息，被组合成一长串文本（可能 HTML）。
- 插件将该数据与一些元数据（以 HTTP headers 的形式）结合起来，并将 HTTP 响应发送回浏览器。
- 浏览器收到响应，并解析响应中的HTML（95%概率损坏）。
- 一棵 DOM 树是从损坏的 HTML 中构建出来的，并且对在 HTML 源中找到的每个新资源（通常是图像，样式表和 Java 脚本文件）。返回步骤 3 并为每个资源重复。
- 样式表被解析，每个样式表中的呈现信息附加到 DOM 树中的匹配节点。
- Java脚本被解析并执行，DOM个节点被移动，样式信息也随之更新。
- 浏览器根据DOM树在屏幕上呈现页面 每个节点的样式信息，您会在屏幕上看到该页面。
我想向任何想观看发生的事情的人提出以下建议，这是一个廉价的答案，但它可能有助于解释浏览器如何检索它的级联文件以构建 URL（在本例中为 html）。
- 浏览到您要用于在 Chrome 中演示的页面（或使用此页面作为相当复杂的示例）
- 打开控制台 (Ctrl + Shift + i)
- Select "Network" 来自选项
- 按 F5
玩转设置。您还应该查看在“性能”选项卡中创建的时间线
- Select "Performance" 来自选项
- 按 F5
在这里降低性能可能很有用，因此如果您想演示的话，您可以实时（慢速）观看它。
重要的是（以HTML页面为例），rendering/applying css/running javascript的顺序取决于它出现在DOM。可以在脚本加载后的任何时候执行脚本，具体取决于可用的所需资源。 Css 可能是 HTML 文档的一部分（内联），或者它可能来自非常繁忙的服务器，需要 10-20 秒才能应用。希望这对您有所帮助 -R
- 大部分问题的答案 "What happens when we search Google"。
- 浏览器按照 html syntax 标准向页面呈现 HTML。请记住，浏览器非常宽容，并且存在无效 HTML 这样的事情。
- Css 应用到页面后跟随 css grammar。
- 所有浏览器都必须按照ECMA Script standards实现js。
其他一些有用的资源：
Firefox 3D tilt plugin help visualise webpages and how they are rendering content in different layers.
Chrome's performance tab 页面加载期间发生的情况以及 dom 树是如何构建的良好可视化。它有助于识别渲染过程中的瓶颈。
您可以通过打开chrome看到很多浏览器的后端功能，如缓存HTML内容、缓存图片、dns缓存、开放端口等：/ /net-internals/.
你说的是关键渲染路径。
第1点、第3点、第4点可以这样复述：
- 文档构建Object模型(DOM)
- 构建CSSobject模型（CSSOM）
- 渲染树的构建
- 布局
- 绘画。
这里是对幕后发生的事情的分解。
1.构造 DOM object.
第一步是创建 DOM。实际上，您从网络接收到的是字节，浏览器使用所谓的 DOM 树。因此它需要将这些字节转换成 DOM 树。
- 您以字节形式接收页面。您的浏览器会将其转换为文本。
- 文本转换为节点。
- 节点转换为"objects"
- 构建树，称为DOM TREE。
你可以查看开发者工具，看看需要多少时间。
在这里我们可以看到它花了 4.938 毫秒。
此过程完成后，浏览器将拥有页面的全部内容，但要能够呈现浏览器必须等待 CSS Object 模型，也称为 CSSOM 事件，它将告诉浏览器渲染时元素的外观。
2。处理 CSS
对于css同上，浏览器需要将这些文件转换成CSSOM:
css也是树结构。实际上，如果您将 font-size 放在 parent 元素上，那么 children 将继承它。
这在开发者工具中称为重新计算样式
CSS 是关键渲染路径中最重要的元素之一，因为浏览器会阻止页面渲染，直到它接收并处理页面中的所有 css 文件，CSS 渲染阻塞
3。渲染树
CSSOM AND DOM合并显示。
4.布局
一切都必须以像素为单位进行计算。所以当你说一个元素的宽度为 50% 时，浏览器在后台以像素为单位转换它：
每次对渲染树进行更新，或视口大小发生变化时，浏览器都必须重新 运行 布局。
5.Paint
步骤是将所有这些转换为屏幕上的像素。这是油漆步骤。
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 . What you might be interested in is the handshake.
来源：