2. 程式人生 > >瀏覽器的解析和執行過程

瀏覽器的解析和執行過程

阿新 • • 發佈：2017-05-13
們的 由於 繼續 動畫 table 就會 內嵌 cnblogs 內嵌腳本

當瀏覽器獲得一個html文件時，會“自上而下”加載，並在加載過程中進行解析渲染。 解析： 1. 瀏覽器會將HTML解析成一個DOM樹（display:none,visibility:hidden）。DOM 樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好後才會去構建當前節點的下一個兄弟節點。 2. 將CSS解析成 CSS Rule Tree 。 3. 根據DOM樹和CSSOM來構造 Rendering Tree( visibility:hidden )。 4.有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關系。下一步Layout 5.再下一步就是繪制，即遍歷render樹，並使用UI後端層繪制每個節點。 過程是這樣的： 技術分享 技術分享

技術分享

技術分享 上述這個過程是逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，並不會等到所有的html都解析完成之後再去構建和布局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容。（這段話是《how browsers work》裏面講的，讓我茅塞頓開） 幾個概念： （1）Reflow（回流）：瀏覽器要花時間去渲染，當它發現了某個部分發生了變化影響了布局，那就需要倒回去重新渲染。 （2）Repaint（重繪）：如果只是改變了某個元素的背景顏色，文字顏色等，不影響元素周圍或內部布局的屬性，將只會引起瀏覽器的repaint，重畫某一部分。 Reflow要比Repaint更花費時間，也就更影響性能。所以在寫代碼的時候，要盡量避免過多的Reflow。

reflow的原因
： （1）頁面初始化的時候； （2）操作DOM時； （3）某些元素的尺寸變了； （4）如果 CSS 的屬性發生變化了。 減少 reflow/repaint 　（1）不要一條一條地修改 DOM 的樣式。與其這樣，還不如預先定義好 css 的 class，然後修改 DOM 的 className。 　（2）不要把 DOM 結點的屬性值放在一個循環裏當成循環裏的變量。 　（3）為動畫的 HTML 元件使用 fixed 或 absoult 的 position，那麽修改他們的 CSS 是不會 reflow 的。 　（4）千萬不要使用 table 布局。因為可能很小的一個小改動會造成整個 table 的重新布局。 編寫CSS時應該註意：
CSS選擇符是從右到左進行匹配的。從右到左！所以，#nav li 我們以為這是一條很簡單的規則，秒秒鐘就能匹配到想要的元素，但是，但是，但是，是從右往左匹配啊，所以，會去找所有的li，然後再去確定它的父元素是不是#nav。，因此，寫css的時候需要註意： 關於script標簽的位置 現在，我們大都會將script標簽放在body結束標簽之前，那原因是什麽呢？我今天也做了一個測試。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>測試js代碼位置</title>
  6. <script type="text/javascript">
  7. var item = document.getElementById("item");
  8. cosole.log(item);
  9. </script>
  11. </head>
  12. <body>
  13. <div id="item" width="100px" height="100px">
  14. 你好
  15. </div>
  17. </body>
  18. </html>
js 的加載特點： （1）載入後馬上執行，哪怕瀏覽器還在渲染html （2）執行時會阻塞頁面後續的內容（包括頁面的渲染、其它資源的下載）。原因：因為瀏覽器需要一個穩定的DOM樹結構，而JS中很有可能有 代碼直接改變了DOM樹結構，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，瀏覽器為了防止出現JS修 改DOM樹，需要重新構建DOM樹的情況，所以 就會阻塞其他的下載和呈現。所以，js　死循環執行不完的話，頁面也就別想呈現了； 減少 JavaScript 對性能的影響的方法： 將所有的script標簽放到頁面底部，也就是body閉合標簽之前，這能確保在腳本執行前頁面已經完成了DOM樹渲染。 盡可能地合並腳本。頁面中的script標簽越少，加載也就越快，響應也越迅速。無論是外鏈腳本還是內嵌腳本都是如此。 采用無阻塞下載 JavaScript 腳本的方法： （1）使用script標簽的 defer 屬性； （2）使用動態創建的script元素來下載並執行代碼； 所以，總結一下，一個瀏覽器完整的加載順序：

1. 用戶輸入網址（假設是個 HTML 頁面，並且是第一次訪問），瀏覽器拿到 HTML 文件準備解析成Dom tree；

2. 瀏覽器開始載入 HTML 代碼，發現 <head> 標簽內有一個 <link> 標簽引用外部 CSS 文件；

3. 瀏覽器又發出 CSS 文件的請求，服務器返回這個 CSS 文件, 準備解析成CSS tree；

4. 瀏覽器繼續載入 HTML 中 <body> 部分的代碼，並且 CSS 文件已經拿到手了，可以layout；

5. 瀏覽器在代碼中發現一個 <img> 標簽引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼；

6. 服務器返回圖片文件，由於圖片占用了一定面積，影響了後面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼；

7. 瀏覽器發現了一個包含一行 JavaScript 代碼的 <script> 標簽，趕快運行它；

8. JavaScript 腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個 <div>（style.display=”none”）。杯具啊，突然就少了這麽一個元素，瀏覽器不得不重新渲染這部分代碼；

9. 終於等到了 </html> 的到來，瀏覽器淚流滿面……

10. 等等，還沒完，用戶點了一下界面中的“換膚”按鈕，JavaScript 讓瀏覽器換了一下 <link> 標簽的 CSS 路徑；

11. 瀏覽器召集了在座的各位 <div><span><ul><li> 們，“大夥兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務器請求了新的CSS文件，重新渲染頁面。 瀏覽器每天就這麽來來回回跑著，要知道不同的人寫出來的 HTML 和 CSS 代碼質量參差不齊，說不定哪天跑著跑著就掛掉了。好在這個世界還有這麽一群人——頁面重構工程師，平時挺不起眼，也就幫視覺設計師們切切圖啊改改字，其實背地裏還是幹了不少實事的。

瀏覽器的解析和執行過程

相關推薦

瀏覽器的解析和執行過程

們的 由於 繼續 動畫 table 就會 內嵌 cnblogs 內嵌腳本 當瀏覽器獲得一個html文件時，會“自上而下”加載，並在加載過程中進行解析渲染。 解析： 1. 瀏覽器會將HTML解析成一個DOM樹（display:none,visibility:hidden）。

通過chrome偵錯程式測試瞭解瀏覽器解析和渲染HTML的過程

1.基礎知識：瞭解chrome的Timeline工具 僅僅是通過理論知識，很難記住和理解瀏覽器解析html的原則，因此我動手做了些小實驗。而做這個實驗，不得不用到一個工具：chrome的Timeline工具。 這個工具真的很強大，Timeline工具欄

第112天：javascript中函數預解析和執行階段

col 對象 全部 內存空間 div 實現 undefined 私有 分解 關於javascript中的函數： 　　1、預解析：把所有的函數定義提前，所有的變量聲明提前，變量的賦值不提前 　　2、執行 ：從上到下執行，但有例外(setTimeout,setInterval,

js解析與執行過程

js解析與執行過程分為全域性與區域性 1：全域性，預處理階段===>執行階段 2.區域性(函式)，預處理階段===>執行階段  全域性：預處理  全域性的詞法環境===window{ a：undefined b：對函式的一個引用  

SparkShuffle的分類和執行過程的一些總結

什麼是Spark Shuffle? reduceByKey會將上一個RDD中的每一個key對應的所有value聚合成一個value，然後生成一個新的RDD，元素型別是<key,value>對的形式，這樣每一個key對應一個聚合起來的value。 在聚合之前，相同的key可能在

Java編譯程式和執行過程詳解

java整個編譯以及執行的過程相當繁瑣，我就舉一個簡單的例子說明： 編譯原理簡單過程：詞法分析 --> 語法分析 --> 語義分析和中間程式碼生成 --> 優化 --> 目的碼生成 Java程式從原始檔建立到程式執行要經過兩大步驟： 1、Java檔案會由

【FPN車輛目標檢測】資料集獲取以及Windows7+TensorFlow+Faster-RCNN+FPN程式碼環境配置和執行過程實測

PS 最近在學目標檢測想用最新的FPN網路，剛好看到這篇部落格https://blog.csdn.net/Angela_qin/article/details/80944604嘗試把它復現，說的小白一點。 1.資料集獲取 博主只說是車輛目標檢測沒將資料集在哪裡獲取。我在程式碼中發現E:/st

MyBatis的解析和執行原理

MyBatis的執行可分為兩大部分，第一部分是讀取配置檔案快取到Configuration物件，用來建立SqlSessionFactory，第二部分是SqlSession的執行過程。 先匯入原始碼，不然你不知道方法之間是怎麼呼叫。 一構建SqlSessionFactory

Quartz 2.2 的實現原理和執行過程

一、Quartz 的幾個概念類 這幾個概念類，是我們呼叫Quartz任務排程的基礎。瞭解清楚之後，我們再來看一下如何去啟動和關閉一個Quartz排程程式。 1、org.quartz.Job 它是一個抽象介面，表示一個工作，也就是我們要執行的具體內容，他只

js的解析與執行過程

1:預處理階段 當輸入如下程式碼時候 var a = 1; function crli(){ alert(a); } crli()//1 結果為 1 當改變下面程式碼時候 var a = 1; function crli(){

mybatis原理解析---SqlSession執行過程(上)

sqlSession代表與資料庫的一次會話,在這次會話中可以多次執行查詢等sql操作。從前面可以看到SqlSession物件是從SqlSessionFactory物件中獲得的。sqlSession本身就定義了一系列的update select delete in

圖解mapreduce原理和執行過程

說明： 下面的圖來自南京大學計算機系黃宜華老師開設的mapreduce課程的課件，這裡稍作整理和 總結。 本文旨在對接觸了mapreduce之後，但是對mapreduce的工作流程仍不是很清楚的人員，當然包括博主自己，希望與大家一起學習。 mapreduce的原理

程式的編譯和執行過程

程式的編譯 組成一個程式的每個原始檔通過編譯過程目的碼（objiect code）。 每個目標檔案由連結器（linker）捆綁在一起，形成一個單一而完整的可執行程式。 連結器同時也會引入標準C函式庫

SparkSQL學習- SparkSQL編譯和執行過程

Unresolved Logical Plan Spark使用Antlr將SQL/DataFrame 編譯為一顆Unresolved Logical Plan(抽象語法樹AST)，樹上的節點不帶有資料型別等資訊。SparkSqlAstBuilder類與此相關。 R

【Mybatis學習】Mybatis的解析和執行簡要介紹

Mybatis執行原理簡要分析 1.SqlSessionFactory的構建 SqlsessionFactory主要用來建立SqlSession，為了構建SqlsessionFactory，需要提供配置檔案以及相關引數。 構建主要分為2步： 解析配置檔案並生成Config

class檔案的（解析）執行過程

(1)  jvm可以理解為一個由c++所編寫的記憶體容器：包含了載入器，編譯器等。當然了，我當時最困惑的就是class是怎麼被執行的 java中的物件模型：OOP-Klass模型 OOP：普通物件指標， Kcass：java類在c++中的對等體 Kclass想jvm提供的功

MyBatis的解析和執行原理---學習筆記（三）

官方文件執行分兩大部分1.讀取配置檔案，快取到Configuration物件中，用來建立SqlSessionFactory2.SqlSession執行過程動態代理：JDK反射機制和CGLIB代理。用於為Mapper產生代理類，執行相關方法。反射呼叫的最大好處是配置性大大提高，

JS的解析與執行過程—(全局預處理階段)

調用 ont err col 過程 預處理 報錯 彈出 error: 問題：有如下代碼 1 var a = 1; 2 function pop() { 3 alert(a); 4 var a = 5; 5 } 6 pop();//執行結果，彈

JS的解析與執行過程—全局預處理階段之命名沖突的處理策略

bsp env 函數表 nvi body 相同 class pre 優先級 有如下代碼： 1 <body> 2 <script> 3 alert(f); 4 5 fun

小師妹學JVM之:JVM的架構和執行過程

[toc] # 簡介 JVM也叫Java Virtual Machine，它是java程式執行的基礎，負責將java bytecode轉換成為適合在各個不同作業系統中執行的機器程式碼並執行。今天我們和小師妹一起走進java的核心JVM，領略java在設計上的哲學。 # JVM是一種標準 小師妹:F師兄