[翻译]Rendering a web page – step by step 网页渲染过程拆解

 

原文链接 http://friendlybit.com/css/rendering-a-web-page-step-by-step/

 

第一次尝试翻译，觉得水平差极了。见谅。发出来自勉。

从你在浏览器中输入URL， 到看到网页，这中间都发生了些什么？

 

Have you ever thought about what happens when you surf the web? It’s not as simple as it seems:

想过浏览器是如何处理我们输入的网址吗？或许没有看上去那么简单

1. You type an URL into address bar in your preferred browser.
你打开浏览器，在地址栏输入URL
2. The browser parses the URL to find the protocol, host, port, and path.
浏览器解析URL为协议，主机(host)，端口和路径
3. It forms a HTTP request (that was most likely the protocol)
并生成一个HTTP请求
4. 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
通过DNS查找服务，翻译人类语言网址为IP地址
5. Then a socket needs to be opened from the user’s computer to that IP number, on the port specified (most often port 80)
建立从用户电脑至ip地址的套接字(socket)，通过指定的端口
6. When a connection is open, the HTTP request is sent to the host
连接成功打开后，http请求被发送至主机(host)
7. The host forwards the request to the server software (most often Apache) configured to listen on the specified port
主机转发请求至监听此端口的服务器软件(如apache)
8. 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?)
服务器分析请求（通常只需分析路径），并启动对应的插件来处理请求
9. The plugin gets access to the full request, and starts to prepare a HTTP response.
插件获取访问全部请求的权限，开始准备一个HTTP响应（response）
10. 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
根据请求路径中的参数（或数据），访问并查询（通常是）数据库
11. Data from the database, together with other information the plugin decides to add, is combined into a long string of text (probably HTML).
返回的数据以及其他服务器插件认为必要的信息，组成一条长字符串
12. 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响应（response）发回给浏览器
13. The browser receives the response, and parses the HTML (which with 95% probability is broken) in the response
浏览器收到响应，并解析（95%可能失败）
14. A DOM tree is built out of the broken
HTML使用正确的HTML 构造DOM树（out of是指什么？）
15. 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.
创建新的请求从服务器获得html中需要的资源（如图片，样式表，JS文件），对每个资源重复步骤3-14
16. Stylesheets are parsed, and the rendering information in each gets attached to the matching node in the DOM tree
解析样式表，渲染信息附在对应的DOM树节点上
17. Javascript is parsed and executed, and DOM nodes are moved and style information is updated accordingly
解析并执行JS代码，根据代码移动和更新DOM节点信息
18. The browser renders the page on the screen according to the DOM tree and the style information for each node
浏览器根据DOM树和节点上的样式信息绘制页面
19. You see the page on the screen
至此你终于看到页面在屏幕上显示了
20. You get annoyed the whole process was too slow.
觉得实在是慢死了

I, too, get annoyed when the above steps take longer than one tenth of a second. But now at least I have some documentation to look at, while waiting the remaining fractions of a second before the page renders.

我也是，如果以上任意步骤耗时超过十分之一秒，我都觉得烦死了。不过我们现在至少可以一边看文档一边等。