浏览器怎么解析css和html,浏览器解析html css js
如有侵權請聯系我 ！qq:1339567630
為什么要了解瀏覽器加載、解析、渲染這個過程？
好，我們先說一下，為什么要了解這些呢？如果想寫出一個最佳實踐的頁面，就要好好了解。
了解瀏覽器如何進行加載，可以在引用外部樣式文件，外部js時，將他們放到合適的位置，使瀏覽器以最快的速度將文件加載完畢。
了解瀏覽器如何進行解析，可以在構建DOM結構，組織css選擇器時，選擇最優的寫法，提高瀏覽器的解析速率。
了解瀏覽器如何進行渲染，明白渲染的過程，在設置元素屬性，編寫js文件時，可以減少”reflow“”repaint“的消耗。
正文開始
一、瀏覽器的主要功能
瀏覽器的主要功能是將用戶選擇的web資源呈現出來，它需要從服務器請求資源，并將其顯示在瀏覽器窗口中，資源的格式通常是HTML，也包括PDF、image及其他格式。用戶用URI(Uniform Resource Identifier統一資源標識符)來指定所請求資源的位置，通過DNS查詢，將網址轉換為IP地址。整個瀏覽器工作的流程，之前博客中有論述：
1、輸入網址。
2、瀏覽器查找域名的IP地址。
3. 瀏覽器給web服務器發送一個HTTP請求
4. 網站服務的永久重定向響應
5. 瀏覽器跟蹤重定向地址 現在，瀏覽器知道了要訪問的正確地址，所以它會發送另一個獲取請求。
6. 服務器“處理”請求，服務器接收到獲取請求，然后處理并返回一個響應。
7. 服務器發回一個HTML響應
8. 瀏覽器開始顯示HTML
9. 瀏覽器發送請求，以獲取嵌入在HTML中的對象。在瀏覽器顯示HTML時，它會注意到需要獲取其他地址內容的標簽。這時，瀏覽器會發送一個獲取請求來重新獲得這些文件。這些文件就包括CSS/JS/圖片等資源，這些資源的地址都要經歷一個和HTML讀取類似的過程。所以瀏覽器會在DNS中查找這些域名，發送請求，重定向等等…
那么，一個頁面，究竟是如何從我們輸入一個網址到最后完整的呈現在我們面前的呢？還需要了解一下瀏覽器是如何渲染的：
二、瀏覽器的渲染
下面是渲染引擎在取得內容之后的基本流程：
解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹
先來看個圖：
所以，瀏覽器會解析三個東西：
(1)?HTML/SVG/XHTML，解析這三種文件會產生一個 DOM Tree。
(2)?CSS，解析 CSS 會產生 CSS 規則樹。
(3)?JavaScript腳本，主要是通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree.
我今天又糾結了一上午，到底是怎么解析怎么渲染的，我的疑問在于，瀏覽器到底是先解析生成了DOM樹，然后再加載CSS JS文件進行渲染，還是在生成DOM的過程中，遇到了 link script 然后就加載CSS JS，邊加載邊渲染。我有這種疑問的原因在于，看網上的帖子，說的根本不一樣好嘛！ 比如這篇?我想說，這個寫的讓我直接懵逼，真的是直接懵逼啊，學習的過程中，總會遇到困難，但這次，讓我真的好難啊。不過正因為不懂才繼續查資料繼續學習嘛 ==！我又查了一上午，自己測試測試測試，然后覺著，我好像是明白點了。真的推薦大家去認真看《how browsers work》這篇文章，學習不懂得知識的時候，還是要從比較權威的資料看起比較好，也不要像我今天這樣，無頭蒼蠅亂查。
那么就來說一下圖中的過程，我是按照自己的理解來說，如果有誤，歡迎指正。
當瀏覽器獲得一個html文件時，會“自上而下”加載，并在加載過程中進行解析渲染。
解析：
1. 瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。
2. 將CSS解析成 CSS Rule Tree 。
3. 根據DOM樹和CSSOM來構造 Rendering Tree。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因為一些像 Header 或 display:none 的東西就沒必要放在渲染樹中了。
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的時候需要注意：
dom深度盡量淺。
減少inline javascript、css的數量。
使用現代合法的css屬性。
不要為id選擇器指定類名或是標簽，因為id可以唯一確定一個元素。
避免后代選擇符，盡量使用子選擇符。原因：子元素匹配符的概率要大于后代元素匹配符。后代選擇符;#tp p{} 子選擇符：#tp>p{}
避免使用通配符，舉一個例子，.mod .hd *{font-size:14px;} 根據匹配順序,將首先匹配通配符,也就是說先匹配出通配符,然后匹配.hd(就是要對dom樹上的所有節點進行遍歷他的父級元素),然后匹配.mod,這樣的性能耗費可想而知.
關于script標簽的位置
現在，我們大都會將script標簽放在body結束標簽之前，那原因是什么呢？我今天也做了一個測試。
測試js代碼位置var item = document.getElementById("item");
cosole.log(item);
你好
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
181
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
上述代碼中有一段js代碼，要在控制臺打印一個元素，我把script標簽放在head里，控制臺里打印出來的是null。
我又把js代碼放在body結束標簽之前，打印出來的就是div元素了
總結
以上是生活随笔為你收集整理的浏览器怎么解析css和html,浏览器解析html css js的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 北京理工大学计算机技术参考书目,2020
- 下一篇： qt android 浏览器下载安装,[