2011-09-22 106 views
31

首先,我不感兴趣,在整个请求 - 响应过程被这个问题描述浏览器中的页面渲染过程?

What is the complete process from entering a url to the browser's address bar to get the rendered page in browser?

我想知道那张浏览器内,一旦接收到来自HTML响应作为解决服务器。问这个问题的目的是了解客户端脚本的内部细节。如果你可以在抽象概念中解释一个Web浏览器包含什么,这将是有益的。您可以将它们称为CSS引擎,JavaScript引擎等。目标是精确可视化我正在做的Web开发。

不幸的是,我没有找到任何网络资源来解决这个问题。如果有解释这些概念的资源,请原谅我。如果这个问题太详尽无法回答,您可能会指出资源(书籍等)。

+0

[webkit的源代码(http://www.webkit.org/building/checkout.html)/ [Mozilla的源代码(https://developer.mozilla.org/en/Download_Mozilla_Source_Code) – Quentin

+0

我正在寻找一些抽象描述来帮助普通Web开发人员可视化客户端脚本过程。我敢肯定,即使从头开始写mozilla也会以某种抽象的方式来想象这一点。 – pphanireddy

+0

@pphanireddy,我已经阅读了“How Browsers Work”,并想知道何时解析html并遇到

15

请仔细阅读以下步骤,并且您应该清楚了解请求生命周期以及如何呈现响应。

  1. 您在首选浏览器的地址栏中输入网址。

  2. 浏览器解析URL以查找协议,主机,端口和路径。

  3. 它形成了一个HTTP请求(这是最有可能的协议)

  4. 要到达主机,它首先需要的人类可读的主机转换成一个IP号,并通过执行DNS执行此查找主机

  5. 然后,插座需要从用户的计算机被打开到该IP数上,指定的端口上(最多端口80)

  6. 当连接断开时,HTTP请求是发送到主机主机将请求转发到服务器(通常是Apache)配置为监听指定端口

  7. 服务器检查请求(通常只有路径),并启动处理请求所需的服务器插件(对应于您使用的服务器语言, PHP,Java,.NET,Python?)

  8. 该插件获取对完整请求的访问权限,并开始准备HTTP响应。

  9. 构建响应数据库(很可能)被访问。根据请求的路径(或数据)中的参数进行数据库搜索

  10. 来自数据库的数据以及插件决定添加的其他信息被组合成一长串文本(可能是HTML )。

  11. 该插件将该数据与某些元数据(以HTTP标头的形式)相结合,并将HTTP响应发送回浏览器。

  12. 的浏览器接收到该响应,并解析在响应

  13. DOM树是建立断了的HTML

  14. 新请求是的HTML(其与95%的可能性被打破)向服务器发送在HTML源代码中找到的每个新资源(通常为图像,样式表和JavaScript文件)。

  15. 返回步骤3并重复每个资源。

  16. 样式表进行解析,并在每个所述渲染信息被附加到在DOM树中的匹配节点

  17. JavaScript是解析和执行,和DOM节点被移动和风格信息被相应地更新

  18. 浏览器根据DOM树,并为每个节点

  19. 你在屏幕上看到的页面样式信息呈现在屏幕上的页面

  20. 你感到恼火整个过程太慢了。

+1

浏览器在解析第一个HTML元素后开始渲染页面。它当然不会等待DOM树完成,对于所有外部资源的加载都要少得多。也许你可以编辑你的答案,以澄清13-18中至少有一些步骤是作为管道发生的(一次一个元素?),而不是顺序发生。 – max