浏览器页面生命周期序列如何工作? [英] How does browser page lifecycle sequence work?

问题描述

是否要创建有关浏览器工作方式的演示文稿，有人知道何时请求浏览器URL会发生的确切生命周期顺序吗?

Would like to create a presentation on how the browser work, does anybody know the exact lifecycle sequence which happen whenever a browser URL is requested?

从服务器收到响应后，按照以下步骤将执行哪些步骤:

1. 渲染-CSS过滤器应用程序，webkit等...
2. JavaScript-加载并运行
3. CSS应用程序
4. DOM构建/何时编写DOM以及如何编写?
5. 饼干
6. 其他与网络相关的活动等

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

-- not quiet sure if this is even the right order...

在所有浏览器中都是一样的，还是不同的浏览器具有不同的生命周期?

注意-答案写得很好，详细说明了Ced的以下步骤.我真正要寻找的是 关键渲染路径" -其他好的答案可以很好地说明该过程的一般阶段.

Note - a well written answer with details explaining each step by Ced below. what I was actually looking for was "Critical Rendering Path" - the general stages of the process are well explained by other good answers.

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

Thank God, and good job everyone!

推荐答案

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

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

The point 1., 3. and 4. can be resumed as such:

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

---

这里是幕后发生的事情的分类.

---

Here is a break down of what happens behind the scene.

1.构造DOM对象.

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

The first step is creating the DOM. Indeed what you receive from the network are bytes and the browser use the so called DOM tree. Therefor it needs to convert those bytes into the DOM tree.

1. 您以字节为单位接收页面.您的浏览器将其转换为文本.
2. 文本将转换为节点.
3. 节点转换为对象"
4. 树的构造，称为DOM TREE.

您可以检查开发者工具以查看需要多少时间.

You can check the developer tool to see how much time it takes.

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

Here we can see it took 4.938ms.

此过程完成后，浏览器将具有页面的完整内容，但是要能够呈现浏览器，必须等待CSS对象模型(也称为CSSOM事件)，该事件将告诉浏览器元素呈现时应该看起来像.

When this process is finished the browser will have the full content of the page, but to be able to render the browser has to wait for the CSS Object Model, also known as CSSOM event, which will tell the browser how the elements should look like when rendered.

2.处理CSS

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

For the css it's the same as above, the browser needs to convert those file into the CSSOM:

css也是树形结构.的确，如果您将字体大小放在父元素上，则子元素将继承它.

The css is also a tree structure. Indeed if you put a font-size to the parent element then the children will inherit it.

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

That's called recalculate style in the developer tool

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

CSS is one of the most important elements of the critical rendering path, because the browser blocks page rendering until it receives and processes all the css files in your page, CSS is render blocking

3.渲染树

CSSOM和DOM组合在一起进行显示.

CSSOM AND DOM are combined for display.

4.布局

所有内容都必须以像素为单位进行计算.因此，当您说元素的宽度为50％时，幕后的浏览器会将其转换为像素:

Everything has to be calculated in pixels. So when you say an element has a width of 50%, the browser behind the scene transform that in pixels:

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

Every time an update to the render tree is made, or the size of the viewport changes, the browser has to run layout again.

5.绘画

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

The step is converting all this into pixels on screen. This is the paint step.

JavaScript

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

For the JavaScript lifecycle you can find info here.

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

The gist of it is that the event you most likely care about is DOMContentLoaded. This is when the DOM is ready.

当浏览器最初加载HTML并遇到一个 <script>...</script>在文本中，它无法继续构建DOM.它 必须立即执行脚本.因此，仅可能发生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.

外部脚本(带有src)也会使DOM构建暂停，而 脚本正在加载和执行.因此，DOM Content Loaded等待 外部脚本.

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在哪里?

Beside that, where is JavaScript in all this ?

在重画之间正在执行它.但是，它正在阻塞.浏览器将等待JavaScript完成后才能重新绘制页面.这意味着，如果您希望页面具有良好的响应(很多fps)，则JS必须相对便宜.

Well it's being executed between the repaints. However it is blocking. The browser will wait for JavaScript to be done before repainting the page. That means that if you want your page to have good response (lots of fps), then the JS has to be relatively inexpensive.

饼干

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

When receiving an HTTP request, a server can send a Set-Cookie header with the response. The cookie is usually stored by the browser and, afterwards, the cookie value is sent along with every request made to the same server as the content of a Cookie HTTP header. Additionally, an expiration delay can be specified as well as restrictions to a specific domain and path, limiting how long and to which site the cookie is sent to.

对于网络而言，这超出了浏览器生命周期的范围，这是您要提出的问题.这也是我不太熟悉的东西，但是您可以在此处上阅读有关TCP的内容.您可能感兴趣的是握手.

For the networking stuff, this is beyond the scope of browser lifecycle, which your question is about. This is also something I'm not well versed in but you can read about TCP here . What you might be interested in is the handshake.

来源:

• 关键渲染路径

关键渲染路径

Cookies

js生命周期

tcp

http

这篇关于浏览器页面生命周期序列如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！