1. 程式人生 > >瀏覽器渲染網頁的流程

瀏覽器渲染網頁的流程

瀏覽器渲染網頁的流程(HTML CSS JS):   1.使用 HTML 建立文件物件模型(DOM) 2.使用 CSS 建立 CSS 物件模型(CSSOM) 3.基於 DOM 和 CSSOM 執行指令碼(Scripts) 4.合併 DOM 和 CSSOM 形成渲染樹(Render Tree) 5.使用渲染樹佈局(Layut)所有元素 6.渲染(Paint)所有元素   示意圖:         瀏覽器渲染網頁的流程(HTML CSS):
    第一步,用HTML分析器,分析HTML元素, 構建一顆DOM樹(標記化和樹構建)。     第二步,用CSS分析器,分析CSS檔案和元素上的inline樣式,生成頁面的樣式表。     第三步,將DOM樹和樣式表,關聯起來,構建一顆Render樹(這一過程又稱為Attachment)。每個DOM節點都有 attach方法,接受樣式資訊,返回一個render物件(又名renderer)。這些render物件最終會被構建成一顆Render樹。     第四步,有了Render樹,瀏覽器開始佈局,為每個Render樹上的節點確定一個在顯示屏上出現的精確座標。     第五步,Render樹和節點顯示座標都有了,就呼叫每個節點 paint方法,把它們繪製
出來。                                                     webkit渲染引擎工作流程           問:
資源阻塞問題:CSS載入會不會阻塞DOM樹的解析和渲染?會阻塞指令碼執行嗎?  
  1. css載入不會阻塞DOM樹的解析
  2. css載入會阻塞DOM樹的渲染
  3. css載入會阻塞後面js語句的執行、
    ps: https://www.cnblogs.com/chenjg/p/7126822.html   問:DOM樹的構建是文件載入完成開始的嗎? 構建DOM樹是一個漸進過程,為達到更好使用者體驗,渲染引擎會盡快將內容顯示在螢幕上。 它不必等到整個HTML文件解析完畢之後才開始構建render樹和佈局。   問:Render樹是DOM樹和CSSOM樹構建完畢才開始構建的嗎? 這三個過程在實際進行的時候又不是完全獨立,而是會有交叉。會造成一邊載入,一遍解析,一遍渲染的工作現象。   問:CSS解析是從左向右還是從右向左,對DOM樹而言呢? CSS的解析是從右往左逆向解析的(從DOM樹的下-上解析比上-下解析效率高), 巢狀標籤越多,解析越慢。