HTML页面生命周期 [英] HTML Page Life Cycle

问题描述

我试图了解HTML页面的生命周期。我在网上找不到任何好的资源。所以我在ie中打开了f12工具，并自己做了一些实验。基于这一点，我得出了一些结论，有人可以告诉我，如果我是正确的？

我的观察

1>当首先通过HTTP请求页面时，浏览器接收HTML框架。此时没有任何内容显示给用户。

2>根据HTML框架中的内容，为资源发送更多附加请求（外部JavaScript，css ，图片等）

3>浏览器等待，直到它收到脚本和css资源的HTTP状态代码。

一旦接收到css和JavaScript的HTTP状态代码，只有浏览器开始从头到尾加载文档，执行所遇到的任何嵌入式JavaScript。

5>如果顶部的嵌入式JavaScript引用底部的HTML元素，则JavaScript将失败。

6>整个文档完成加载，然后jquery事件$（document）.ready被激发。 （也就是说，如果我使用JQuery的话）

7>浏览器不会等待脚本和css之外的其他资源，因此像图片之类的资源可能会在页面之后加载显示给用户。

解决方案

你几乎是正确的。
但取决于代码（尤其是第5,6和7点）。例如，如果顶部的JS位于 $（document）.ready 内，那么它不会失败。

<其次，我宁愿Firefox F12或Chrome F12超过IE。他们非常详细和开发友好。请参阅其中的 NET 标签以进一步了解。它会显示资源被调用和加载的确切顺序，这是您主要查找的内容。

I am trying to understand the lifecycle of an HTML page. I cannot find any good resources on it online. So I opened up the f12 tool in ie and did some experiments on my own. Based on that I have drawn some conclusions, can someone please tell me if I am right?

My observation

1>When a page is requested over HTTP first the HTML skeleton is received by the browser. At this time nothing is displayed to the user.

2>Based on what is in the HTML skeleton some more additional requests are sent out for the resources (external JavaScript,css,images etc)

3>The browser waits until it receives a HTTP status code for the script and css resources.

4>Once the HTTP status code for the css and JavaScript is received, only then the browser starts loading the document top to bottom, executing whatever embedded JavaScript it encounters on the way.

5>If the embedded JavaScript on the top refers to an HTML element on the bottom, the JavaScript will fail.

6>Once the entire document finishes loading, then the jquery event $(document).ready is fired. (That is if I am using JQuery)

7>The browser does not wait for resources other than scripts and css, so resources like images could get loaded later after the page is displayed to the user.

解决方案

You pretty much got it correct. But it depends upon the code (especially point 5, 6 and 7). For example, if the JS at the top is within $(document).ready, then it will not fail.

Secondly, I would prefer Firefox F12 or Chrome F12 over IE. They are much much detailed and developer friendly. See the NET tab in them to understand further. It will show you the exact order in which the resources are called and loaded, which is what you were mainly looking for.

这篇关于HTML页面生命周期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！