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?
想要创建一个关于浏览器如何工作的演示，有人知道当浏览器URL被请求时发生的确切的生命周期序列吗?
What are the steps which happen after a response is received from the server in terms of :
从服务器收到响应后的步骤如下:
- Rendering - CSS filters application, webkit etc...
- 渲染- CSS过滤器应用，webkit等…
- Javascript - Loading and running
- Javascript -加载和运行
- CSS Application
- CSS应用程序
- DOM Construction / at which point is the DOM written and how?
- DOM构建/在哪个点编写DOM以及如何编写?
- Cookies
- 饼干
- Other network related activities etc.
- 其他网络相关活动等。
-- not quiet sure if this is even the right order...
——不确定这是不是正确的顺序……
is it the same in all browsers or different browsers have different lifecycles?
在所有的浏览器或不同的浏览器中，它的生命周期是相同的吗?
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!
感谢上帝，祝大家工作顺利!
5 个解决方案
#1
21
What you are talking about is the Critical Rendering Path.
您所讨论的是关键的呈现路径。
The point 1., 3. and 4. can be resumed as such:
1点。3。和4。可以这样恢复:
- Construction of Document Object Model(DOM)
- 文档对象模型(DOM)的构建
- Construction of CSS object model(CSSOM)
- CSS对象模型的构建
- Construction of Render Tree
- 建设呈现树
- Layout
- 布局
- Paint.
- 油漆。
Here is a break down of what happens behind the scene.
这是对幕后发生的事情的一个分析。
1. Constructing the DOM object.
1。构建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.
第一步是创建DOM。实际上，您从网络接收的是字节，浏览器使用所谓的DOM树。因此，它需要将这些字节转换为DOM树。
- You receive the page as bytes. Your browser converts it to text.
- 您以字节的形式接收页面。浏览器将其转换为文本。
- Text is converted to nodes.
- 文本被转换为节点。
- nodes are converted to "objects"
- 节点被转换为“对象”
- Construction of the tree, called the DOM TREE.
- 树的结构，称为DOM树。
You can check the developer tool to see how much time it takes.
您可以检查developer工具，看看需要多少时间。
Here we can see it took 4.938ms.
这里我们可以看到它花了4.938毫秒。
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.
当这个过程完成后，浏览器将会有完整的页面内容，但是为了能够呈现浏览器必须等待CSS对象模型，也称为csenevent，它会告诉浏览器在呈现的时候元素应该是什么样的。
2. Handling the CSS
2。处理CSS
For the css it's the same as above, the browser needs to convert those file into the CSSOM:
对于css，和上面一样，浏览器需要将这些文件转换为c信号:
The css is also a tree structure. Indeed if you put a font-size to the parent element then the children will inherit it.
css也是一个树结构。实际上，如果您向父元素添加一个字体大小，那么子元素将继承它。
That's called recalculate style in the developer tool
这在开发工具中称为recalculate风格。
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
CSS是关键呈现路径中最重要的元素之一，因为浏览器会阻止页面呈现，直到它接收并处理页面中的所有CSS文件，CSS就是呈现阻塞
3. Render tree
3所示。渲染树
CSSOM AND DOM are combined for display.
西森和DOM结合显示。
4. Layout
4所示。布局
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:
一切都必须以像素计算。所以当你说一个元素的宽度是50%时，场景后面的浏览器会把它转换成像素:
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.Paint
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.
对于JavaScript生命周期，您可以在这里找到信息。
The gist of it is that the event you most likely care about is DOMContentLoaded. This is when the DOM is ready.
其要点是，您最关心的事件是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.当浏览器最初装载HTML并遇到一个
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.
外部脚本(使用src)还可以在脚本加载和执行时暂停DOM构建。因此，加载的DOM内容也等待外部脚本。
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.
唯一的例外是带有异步和延迟属性的外部脚本。它们告诉浏览器继续处理，而不必等待脚本。因此，用户可以在脚本加载完成之前看到页面，这有利于性能。
Beside that, where is JavaScript in all this ?
除此之外，在所有这些中JavaScript在哪里?
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.
它在重画之间被执行。然而它是阻塞。浏览器将等待JavaScript完成后再重新绘制页面。这意味着，如果您希望您的页面具有良好的响应(许多fps)，那么JS必须相对便宜。
Cookies
饼干
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.
当接收到HTTP请求时，服务器可以发送带有响应的Set-Cookie头。cookie通常是由浏览器存储的，之后，cookie的值就会被发送到与cookie HTTP头的内容相同的服务器上。此外，可以指定过期延迟以及对特定域和路径的限制，从而限制发送cookie的时间和位置。
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.
对于网络内容，这超出了浏览器生命周期的范围，您的问题是。这也是我不太熟悉的内容，但是您可以在这里阅读TCP。你可能会对握手感兴趣。
Sources:
来源:
-
关键的渲染路径
-
关键的渲染路径
-
饼干
-
js生命周期
-
tcp
-
http
#2
14
You can find many explanations on this topic, but I guess following is the easiest explanation to understand how browser(s) renders a web page.
您可以找到关于这个主题的许多解释，但是我想下面是理解浏览器如何呈现web页面的最简单的解释。
- You type an URL into address bar in your preferred browser.
- 在首选浏览器中键入地址栏的URL。
- The browser parses the URL to find the protocol, host, port, and path and it forms a HTTP request (that was most likely the protocol).
- 浏览器解析URL来查找协议、主机、端口和路径，并形成一个HTTP请求(很可能是协议)。
- To reach the host, it first needs to translate the human readable host into an IP number, and it does this by doing a DNS lookup on the host
- 要到达主机，它首先需要将人类可读的主机转换为IP号，并通过在主机上执行DNS查找来实现这一点
- Then a socket needs to be opened from the user’s computer to that IP number, on the port specified (most often port 80)
- 然后，需要在指定的端口(通常是端口80)上，从用户的计算机打开一个套接字到该IP号码
- When a connection is open, the HTTP request is sent to the host
- 当连接打开时，HTTP请求被发送到主机
- The host forwards the request to the server software (most often Apache) configured to listen on the specified port
- 主机将请求转发给配置为监听指定端口的服务器软件(通常是Apache)
- The server inspects the request (most often only the path), and launches the server plugin needed to handle the request (corresponding to the server language you use, PHP, Java, .NET, Python?)
- 服务器检查请求(通常只检查路径)，并启动处理请求所需的服务器插件(对应于您使用的服务器语言PHP、Java、.NET、Python?)
- The plugin gets access to the full request, and starts to prepare a HTTP response.
- 插件可以访问完整的请求，并开始准备HTTP响应。
- To construct the response a database is (most likely) accessed. A database search is made, based on parameters in the path (or data) of the request
- 要构造访问数据库(最有可能)的响应。根据请求路径(或数据)中的参数进行数据库搜索
- Data from the database, together with other information the plugin decides to add, is combined into a long string of text (probably HTML).
- 来自数据库的数据，以及插件决定添加的其他信息，被组合成一长串文本(可能是HTML)。
- The plugin combines that data with some meta data (in the form of HTTP headers), and sends the HTTP response back to the browser.
- 插件将这些数据与一些元数据(以HTTP头的形式)结合起来，并将HTTP响应发送回浏览器。
- The browser receives the response, and parses the HTML (which with 95% probability is broken) in the response.
- 浏览器接收响应，并解析响应中的HTML(有95%的概率被破坏)。
- A DOM tree is built out of the broken HTML and new requests are made to the server for each new resource that is found in the HTML source (typically images, style sheets, and JavaScript files). Go back to step 3 and repeat for each resource.
- DOM树是由损坏的HTML构建的，对于HTML源文件(通常是图像、样式表和JavaScript文件)中的每个新资源，都会向服务器发出新的请求。回到步骤3，对每个资源进行重复。
- Stylesheets are parsed, and the rendering information in each gets attached to the matching node in the DOM tree.
- 解析样式表，并将每个样式表中的呈现信息附加到DOM树中的匹配节点。
- Javascript is parsed and executed, and DOM nodes are moved and style information is updated accordingly.
- 解析并执行Javascript，移动DOM节点并相应地更新样式信息。
- The browser renders the page on the screen according to the DOM tree and the style information for each node and you see the page on the screen.
- 浏览器根据DOM树和每个节点的样式信息在屏幕上呈现页面，您可以在屏幕上看到页面。
源
#3
4
I'd like to suggest the following for anyone who would like to watch what happens, it's a cheap answer but it might be useful to explain how the browser retrieves it's cascade of files to construct the contents of a URL (in this case an html).
我想为任何想要观察所发生的事情的人提供以下建议，这是一个廉价的答案，但是解释浏览器如何检索它的文件级联来构造URL的内容(在本例中是html)可能是有用的。
- Browse to a page you want to use to demonstrate in Chrome (or use this page for a fairly complex example)
- 浏览到想要在Chrome中演示的页面(或者使用这个页面进行比较复杂的示例)
- Open the console (Ctrl + Shift + i)
- 打开控制台(Ctrl + Shift + i)
- Select "Network" from the options
- 从选项中选择“网络”。
- Hit F5
- 按F5
Play with the settings. You should also look at the timeline created in the Performance tab
玩的设置。您还应该查看在Performance选项卡中创建的时间轴
- Select "Performance" from the options
- 从选项中选择“Performance”
- Hit F5
- 按F5
It may be useful here to throttle back the performance, so you can watch it in real time (slow) if that's something you want to demonstrate.
在这里节流性能可能是有用的，所以如果您想要演示的话，您可以实时地(缓慢地)观看它。
The important thing is (using an HTML page as an example), the order of rendering/applying css/running javascript, depends on where it appears in the DOM. It's possible to execute a script at any point after it's loaded, subject to the required resources being available. Css could be part of the HTML document (inline) or it might be coming from a very busy server and take 10-20 seconds before it can be applied. Hope this is of some help -R
重要的是(以HTML页面为例)，呈现/应用css/运行javascript的顺序取决于它在DOM中出现的位置。在加载脚本之后，可以在任何时间执行脚本，但必须考虑到可用的资源。Css可能是HTML文档的一部分(内联)，或者它可能来自一个非常繁忙的服务器，在应用程序之前需要10-20秒。希望这对你有帮助
#4
1
- The answer to all most of your questions "What happens when we search Google".
- 你的大部分问题的答案是“当我们搜索谷歌时会发生什么”。
- The browser renders HTML to the page by following html syntax standard. Remember that browsers are very forgiving and there is such thing as invalid HTML.
- 浏览器通过遵循HTML语法标准将HTML呈现到页面。请记住，浏览器是非常宽容的，有一些东西是无效的HTML。
- Css is applied to the page by following css grammar.
- Css通过遵循Css语法应用于页面。
- All browsers have to implement js according to ECMA Script standards.
- 所有浏览器都必须按照ECMA脚本标准实现js。
Some other useful resources:
其他一些有用的资源:
-
Firefox 3D tilt plugin help visualise webpages and how they are rendering content in different layers.
Firefox 3D tilt插件可以让网页可视化，以及在不同层中呈现内容。
-
Chrome's performance tab a good visualisation of what happens during a page load and how the dom tree is constructed. It helps in identifying the bottlenecks in the render process.
Chrome的性能标签很好地显示了页面加载过程中发生了什么，以及dom树是如何构建的。它有助于识别呈现过程中的瓶颈。
-
You can see a lot of backend functionality of your browser like the cached HTML content, cached images, dns cache, open ports etc. by opening chrome://net-internals/.
通过打开chrome:// /net-internals/，您可以看到浏览器的许多后端功能，如缓存的HTML内容、缓存的图像、dns缓存、打开的端口等。
#5
1
I fear that you mean when the browser URL is requested by the user, because you mention the other activity, which can be a great many things.
我担心您的意思是当浏览器URL被用户请求时，因为您提到了其他活动，这可以是很多东西。
After retrieving the initial document that can contain user content, markup, even images:
检索包含用户内容、标记甚至图像的初始文档后:
- linked and embedded resources (CSS, images) are requested via extra HTTP requests.
- 链接和嵌入的资源(CSS，图像)通过额外的HTTP请求被请求。
- JS could trigger additional (a)synchronous requests to retrieve or store assets, data, etc. (XML, JSON, ...)
- JS可以触发额外的(a)同步请求来检索或存储资产、数据等(XML、JSON、…)
- Additional sockets can be opened to transer all kinds of (binary) data back and forth.
- 可以打开其他套接字来来回传输各种(二进制)数据。
- Local storage (cookies, indexedDB, browser cache, ..) can be used to re-use data for subsequent requests
- 本地存储(cookie、indexedDB、浏览器缓存等)可用于为后续请求重用数据
- Through many
APIs the page can use the client's hardware (camera, GPS, microphone, speakers, joystick, filesystem, etc.) - 通过许多api，页面可以使用客户端的硬件(摄像机、GPS、麦克风、扬声器、操纵杆、文件系统等)。
- All kinds of client side plugins can be invoked: PDF reader, Flash/Silverlight, Citrix connections, E-mail client
- 可以调用各种客户端插件:PDF阅读器、Flash/Silverlight、Citrix连接、电子邮件客户端
- The page may communicatie bilateral with other instances of the same page
- 页面可以与同一页面的其他实例进行双边通信
There are many many flowcharts, for like authentication, SSL, CORS, etc. While Ced's answer is very detailed (+1 !), it is only the tip of the iceberg. Perhaps you should KISS it for the sake of the presentation audience, your choice.
有许多流程图，例如身份验证、SSL、CORS等。尽管Ced的答案非常详细(+1 !)，但这只是冰山一角。也许你应该为了你的听众，你的选择而亲吻它。
#1
21
What you are talking about is the Critical Rendering Path.
您所讨论的是关键的呈现路径。
The point 1., 3. and 4. can be resumed as such:
1点。3。和4。可以这样恢复:
- Construction of Document Object Model(DOM)
- 文档对象模型(DOM)的构建
- Construction of CSS object model(CSSOM)
- CSS对象模型的构建
- Construction of Render Tree
- 建设呈现树
- Layout
- 布局
- Paint.
- 油漆。
Here is a break down of what happens behind the scene.
这是对幕后发生的事情的一个分析。
1. Constructing the DOM object.
1。构建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.
第一步是创建DOM。实际上，您从网络接收的是字节，浏览器使用所谓的DOM树。因此，它需要将这些字节转换为DOM树。
- You receive the page as bytes. Your browser converts it to text.
- 您以字节的形式接收页面。浏览器将其转换为文本。
- Text is converted to nodes.
- 文本被转换为节点。
- nodes are converted to "objects"
- 节点被转换为“对象”
- Construction of the tree, called the DOM TREE.
- 树的结构，称为DOM树。
You can check the developer tool to see how much time it takes.
您可以检查developer工具，看看需要多少时间。
Here we can see it took 4.938ms.
这里我们可以看到它花了4.938毫秒。
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.
当这个过程完成后，浏览器将会有完整的页面内容，但是为了能够呈现浏览器必须等待CSS对象模型，也称为csenevent，它会告诉浏览器在呈现的时候元素应该是什么样的。
2. Handling the CSS
2。处理CSS
For the css it's the same as above, the browser needs to convert those file into the CSSOM:
对于css，和上面一样，浏览器需要将这些文件转换为c信号:
The css is also a tree structure. Indeed if you put a font-size to the parent element then the children will inherit it.
css也是一个树结构。实际上，如果您向父元素添加一个字体大小，那么子元素将继承它。
That's called recalculate style in the developer tool
这在开发工具中称为recalculate风格。
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
CSS是关键呈现路径中最重要的元素之一，因为浏览器会阻止页面呈现，直到它接收并处理页面中的所有CSS文件，CSS就是呈现阻塞
3. Render tree
3所示。渲染树
CSSOM AND DOM are combined for display.
西森和DOM结合显示。
4. Layout
4所示。布局
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:
一切都必须以像素计算。所以当你说一个元素的宽度是50%时，场景后面的浏览器会把它转换成像素:
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.Paint
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.
对于JavaScript生命周期，您可以在这里找到信息。
The gist of it is that the event you most likely care about is DOMContentLoaded. This is when the DOM is ready.
其要点是，您最关心的事件是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.当浏览器最初装载HTML并遇到一个
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.
外部脚本(使用src)还可以在脚本加载和执行时暂停DOM构建。因此，加载的DOM内容也等待外部脚本。
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.
唯一的例外是带有异步和延迟属性的外部脚本。它们告诉浏览器继续处理，而不必等待脚本。因此，用户可以在脚本加载完成之前看到页面，这有利于性能。
Beside that, where is JavaScript in all this ?
除此之外，在所有这些中JavaScript在哪里?
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.
它在重画之间被执行。然而它是阻塞。浏览器将等待JavaScript完成后再重新绘制页面。这意味着，如果您希望您的页面具有良好的响应(许多fps)，那么JS必须相对便宜。
Cookies
饼干
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.
当接收到HTTP请求时，服务器可以发送带有响应的Set-Cookie头。cookie通常是由浏览器存储的，之后，cookie的值就会被发送到与cookie HTTP头的内容相同的服务器上。此外，可以指定过期延迟以及对特定域和路径的限制，从而限制发送cookie的时间和位置。
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.
对于网络内容，这超出了浏览器生命周期的范围，您的问题是。这也是我不太熟悉的内容，但是您可以在这里阅读TCP。你可能会对握手感兴趣。
Sources:
来源:
-
关键的渲染路径
-
关键的渲染路径
-
饼干
-
js生命周期
-
tcp
-
http
#2
14
You can find many explanations on this topic, but I guess following is the easiest explanation to understand how browser(s) renders a web page.
您可以找到关于这个主题的许多解释，但是我想下面是理解浏览器如何呈现web页面的最简单的解释。
- You type an URL into address bar in your preferred browser.
- 在首选浏览器中键入地址栏的URL。
- The browser parses the URL to find the protocol, host, port, and path and it forms a HTTP request (that was most likely the protocol).
- 浏览器解析URL来查找协议、主机、端口和路径，并形成一个HTTP请求(很可能是协议)。
- To reach the host, it first needs to translate the human readable host into an IP number, and it does this by doing a DNS lookup on the host
- 要到达主机，它首先需要将人类可读的主机转换为IP号，并通过在主机上执行DNS查找来实现这一点
- Then a socket needs to be opened from the user’s computer to that IP number, on the port specified (most often port 80)
- 然后，需要在指定的端口(通常是端口80)上，从用户的计算机打开一个套接字到该IP号码
- When a connection is open, the HTTP request is sent to the host
- 当连接打开时，HTTP请求被发送到主机
- The host forwards the request to the server software (most often Apache) configured to listen on the specified port
- 主机将请求转发给配置为监听指定端口的服务器软件(通常是Apache)
- The server inspects the request (most often only the path), and launches the server plugin needed to handle the request (corresponding to the server language you use, PHP, Java, .NET, Python?)
- 服务器检查请求(通常只检查路径)，并启动处理请求所需的服务器插件(对应于您使用的服务器语言PHP、Java、.NET、Python?)
- The plugin gets access to the full request, and starts to prepare a HTTP response.
- 插件可以访问完整的请求，并开始准备HTTP响应。
- To construct the response a database is (most likely) accessed. A database search is made, based on parameters in the path (or data) of the request
- 要构造访问数据库(最有可能)的响应。根据请求路径(或数据)中的参数进行数据库搜索
- Data from the database, together with other information the plugin decides to add, is combined into a long string of text (probably HTML).
- 来自数据库的数据，以及插件决定添加的其他信息，被组合成一长串文本(可能是HTML)。
- The plugin combines that data with some meta data (in the form of HTTP headers), and sends the HTTP response back to the browser.
- 插件将这些数据与一些元数据(以HTTP头的形式)结合起来，并将HTTP响应发送回浏览器。
- The browser receives the response, and parses the HTML (which with 95% probability is broken) in the response.
- 浏览器接收响应，并解析响应中的HTML(有95%的概率被破坏)。
- A DOM tree is built out of the broken HTML and new requests are made to the server for each new resource that is found in the HTML source (typically images, style sheets, and JavaScript files). Go back to step 3 and repeat for each resource.
- DOM树是由损坏的HTML构建的，对于HTML源文件(通常是图像、样式表和JavaScript文件)中的每个新资源，都会向服务器发出新的请求。回到步骤3，对每个资源进行重复。
- Stylesheets are parsed, and the rendering information in each gets attached to the matching node in the DOM tree.
- 解析样式表，并将每个样式表中的呈现信息附加到DOM树中的匹配节点。
- Javascript is parsed and executed, and DOM nodes are moved and style information is updated accordingly.
- 解析并执行Javascript，移动DOM节点并相应地更新样式信息。
- The browser renders the page on the screen according to the DOM tree and the style information for each node and you see the page on the screen.
- 浏览器根据DOM树和每个节点的样式信息在屏幕上呈现页面，您可以在屏幕上看到页面。
源
#3
4
I'd like to suggest the following for anyone who would like to watch what happens, it's a cheap answer but it might be useful to explain how the browser retrieves it's cascade of files to construct the contents of a URL (in this case an html).
我想为任何想要观察所发生的事情的人提供以下建议，这是一个廉价的答案，但是解释浏览器如何检索它的文件级联来构造URL的内容(在本例中是html)可能是有用的。
- Browse to a page you want to use to demonstrate in Chrome (or use this page for a fairly complex example)
- 浏览到想要在Chrome中演示的页面(或者使用这个页面进行比较复杂的示例)
- Open the console (Ctrl + Shift + i)
- 打开控制台(Ctrl + Shift + i)
- Select "Network" from the options
- 从选项中选择“网络”。
- Hit F5
- 按F5
Play with the settings. You should also look at the timeline created in the Performance tab
玩的设置。您还应该查看在Performance选项卡中创建的时间轴
- Select "Performance" from the options
- 从选项中选择“Performance”
- Hit F5
- 按F5
It may be useful here to throttle back the performance, so you can watch it in real time (slow) if that's something you want to demonstrate.
在这里节流性能可能是有用的，所以如果您想要演示的话，您可以实时地(缓慢地)观看它。
The important thing is (using an HTML page as an example), the order of rendering/applying css/running javascript, depends on where it appears in the DOM. It's possible to execute a script at any point after it's loaded, subject to the required resources being available. Css could be part of the HTML document (inline) or it might be coming from a very busy server and take 10-20 seconds before it can be applied. Hope this is of some help -R
重要的是(以HTML页面为例)，呈现/应用css/运行javascript的顺序取决于它在DOM中出现的位置。在加载脚本之后，可以在任何时间执行脚本，但必须考虑到可用的资源。Css可能是HTML文档的一部分(内联)，或者它可能来自一个非常繁忙的服务器，在应用程序之前需要10-20秒。希望这对你有帮助
#4
1
- The answer to all most of your questions "What happens when we search Google".
- 你的大部分问题的答案是“当我们搜索谷歌时会发生什么”。
- The browser renders HTML to the page by following html syntax standard. Remember that browsers are very forgiving and there is such thing as invalid HTML.
- 浏览器通过遵循HTML语法标准将HTML呈现到页面。请记住，浏览器是非常宽容的，有一些东西是无效的HTML。
- Css is applied to the page by following css grammar.
- Css通过遵循Css语法应用于页面。
- All browsers have to implement js according to ECMA Script standards.
- 所有浏览器都必须按照ECMA脚本标准实现js。
Some other useful resources:
其他一些有用的资源:
-
Firefox 3D tilt plugin help visualise webpages and how they are rendering content in different layers.
Firefox 3D tilt插件可以让网页可视化，以及在不同层中呈现内容。
-
Chrome's performance tab a good visualisation of what happens during a page load and how the dom tree is constructed. It helps in identifying the bottlenecks in the render process.
Chrome的性能标签很好地显示了页面加载过程中发生了什么，以及dom树是如何构建的。它有助于识别呈现过程中的瓶颈。
-
You can see a lot of backend functionality of your browser like the cached HTML content, cached images, dns cache, open ports etc. by opening chrome://net-internals/.
通过打开chrome:// /net-internals/，您可以看到浏览器的许多后端功能，如缓存的HTML内容、缓存的图像、dns缓存、打开的端口等。
#5
1
I fear that you mean when the browser URL is requested by the user, because you mention the other activity, which can be a great many things.
我担心您的意思是当浏览器URL被用户请求时，因为您提到了其他活动，这可以是很多东西。
After retrieving the initial document that can contain user content, markup, even images:
检索包含用户内容、标记甚至图像的初始文档后:
- linked and embedded resources (CSS, images) are requested via extra HTTP requests.
- 链接和嵌入的资源(CSS，图像)通过额外的HTTP请求被请求。
- JS could trigger additional (a)synchronous requests to retrieve or store assets, data, etc. (XML, JSON, ...)
- JS可以触发额外的(a)同步请求来检索或存储资产、数据等(XML、JSON、…)
- Additional sockets can be opened to transer all kinds of (binary) data back and forth.
- 可以打开其他套接字来来回传输各种(二进制)数据。
- Local storage (cookies, indexedDB, browser cache, ..) can be used to re-use data for subsequent requests
- 本地存储(cookie、indexedDB、浏览器缓存等)可用于为后续请求重用数据
- Through many
APIs the page can use the client's hardware (camera, GPS, microphone, speakers, joystick, filesystem, etc.) - 通过许多api，页面可以使用客户端的硬件(摄像机、GPS、麦克风、扬声器、操纵杆、文件系统等)。
- All kinds of client side plugins can be invoked: PDF reader, Flash/Silverlight, Citrix connections, E-mail client
- 可以调用各种客户端插件:PDF阅读器、Flash/Silverlight、Citrix连接、电子邮件客户端
- The page may communicatie bilateral with other instances of the same page
- 页面可以与同一页面的其他实例进行双边通信
There are many many flowcharts, for like authentication, SSL, CORS, etc. While Ced's answer is very detailed (+1 !), it is only the tip of the iceberg. Perhaps you should KISS it for the sake of the presentation audience, your choice.
有许多流程图，例如身份验证、SSL、CORS等。尽管Ced的答案非常详细(+1 !)，但这只是冰山一角。也许你应该为了你的听众，你的选择而亲吻它。