什么是从输入网址到浏览器的地址栏，以获得浏览器中所呈现的页面的完整过程？ [英] What is the complete process from entering a url to the browser's address bar to get the rendered page in browser?

问题描述

我想这个问题很长一段时间。这是一个大的问题，因为它几乎涵盖了与网络发展各个角落。

I'm thinking about this question for a long time. It is a big question, since it almost covers all corners related to web developing.

在我的理解，这个过程应该是这样的：

In my understanding, the process should be like:

1. 输入的URL地址栏


2. 的请求会根据您的网络配置发送到DNS服务器


3. DNS意愿的路线，你的域名的真实IP


4. 的要求（具有完整的HTTP标头）将被发送到服务器（带3的IP识别）的80端口（假设我们没有指定的其他端口）


5. 服务器将搜索监听端口并将请求转发到监听端口80的应用程序（假设这里nginx的），或到另一台服务器（当时3的服务器会像一个负载平衡器）


6. Nginx的将尝试的URL匹配它的配置，并直接充当静态页面，或调用相应的脚本INTE preTER（如PHP / Python）的或其他应用获取动态内容（与DB查询，或其它逻辑）


7. 一个HTML将被送回到浏览器与一个完整的HTTP响应头


8. 浏览器将使用其解析器解析HTML的DOM


9. 外部资源（JS / CSS /图像/闪光/视频..）将被要求的顺序的（或不？）


10. 为JS，它将被JS引擎执行


11. 对CSS，它将被CSS引擎和HTML的显示渲染将根据CSS（也按顺序或不的？）
进行调整

12. 如果有一个在DOM的iframe，然后单独同样的过程将被从步骤1-12
执行

1. enter the url to the address bar
2. a request will be sent to the DNS server based on your network configuration
3. DNS will route you to the real IP of the domain name
4. a request(with complete Http header) will be sent to the server(with 3's IP to identify)'s 80 port(suppose we don't specify another port)
5. server will search the listening ports and forward the request to the app which is listening to 80 port(let's say nginx here) or to another server(then 3's server will be like a load balancer)
6. nginx will try to match the url to its configuration and serve as an static page directly, or invoke the corresponding script intepreter(e.g PHP/Python) or other app to get the dynamic content(with DB query, or other logics)
7. a html will be sent back to browser with a complete Http response header
8. browser will parse the DOM of html using its parser
9. external resources(JS/CSS/images/flash/videos..) will be requested in sequence(or not?)
10. for JS, it will be executed by JS engine
11. for CSS, it will be rendered by CSS engine and HTML's display will be adjusted based on the CSS(also in sequence or not?)
12. if there's an iframe in the DOM, then a separate same process will be executed from step 1-12

以上是我的理解，但我不知道它是否是正确与否？多少precise？我错过了什么？

The above is my understanding, but I don't know whether it's correct or not? How much precise? Did I miss something?

如果它是正确的（或几乎是正确的），我希望：

If it's correct(or almost correct), I hope:

1. 请步骤的描述更precise你的话，或写你的脚步，如果有一个大的变化


2. 请为每一个步骤，你最熟悉了深刻的解释。


3. 每步一个答案。其他人可以补充在每个答案的评论。

我希望这个线程可以帮助所有Web开发人员有什么，我们做日常更好地理解。

And I hope this thread can help all web developers to have a better understanding about what we do everyday.

和我将根据更新的回答这个问题。

And I will update this question based on the answers.

感谢。

推荐答案

至于你说的这是一个广泛的问题，其中有可能进入非常细节上的一些主题。有什么不对您所描述的顺序的，但是你离开了很多细节。仅举几例：

As you say this is a broad question where it's possible to go into great detail on a number of topics. There's nothing wrong with the sequence you described, but you're leaving out a lot of detail. To mention a few:

• 的DNS层可以帮助客户直接根据地理位置，以帮助负载均衡和延迟最小化，并且一台服务器不同的服​​务器可以从许多不同的DNS名称的请求。


• 的浏览器可以使不同类型的请求（GET，POST，HEAD等），通常包括几个不同的页眉，包括饼干，浏览器功能，语言preferences等。


• 大多数浏览器通常为了避免下载的东西很多次，使用各种技术来确定文件的缓存版本是否有效保持高速缓存。


• 在现代网页有许多不同类型的文件（HTML，CSS，图片，JavaScript，视频，Flash，...），以及Web开发人员经常需要的浏览器之间的差异的详细知识，以保持经常之间复杂的相互作用，其每个人的工作页面

每个主题，更多的人，可以在长度进行讨论。也许是更实用请教一下你感兴趣的话题更具体的问题？

Each of these topics, and many more, could be discussed at length. Perhaps it's more practical to ask more specific questions about the topics you're interested in?

这篇关于什么是从输入网址到浏览器的地址栏，以获得浏览器中所呈现的页面的完整过程？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！