[翻譯]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.

我也是，若是以上任意步驟耗時超過十分之一秒，我都以爲煩死了。不過咱們如今至少能夠一邊看文檔一邊等。