前端面試題：瀏覽器如何解析HTML文件？

覽器解析HTML文件的過程是網(wǎng)頁呈現(xiàn)的關(guān)鍵步驟之一。具體介紹如下：

HTML文檔的接收和預(yù)處理

網(wǎng)絡(luò)請求處理：當(dāng)用戶輸入URL或點擊鏈接時，瀏覽器發(fā)起HTTP請求，服務(wù)器響應(yīng)并返回HTML文件。此過程中，瀏覽器需要處理DNS查詢、建立TCP連接等底層網(wǎng)絡(luò)通信操作。
預(yù)解析優(yōu)化：為了提高性能，現(xiàn)代瀏覽器在主線程解析HTML之前會啟動一個預(yù)解析線程，提前下載HTML中鏈接的外部CSS和JS文件。這一步驟確保了后續(xù)渲染過程的順暢進(jìn)行。

解析為DOM樹

詞法分析和句法分析：瀏覽器的HTML解析器通過詞法分析將HTML文本標(biāo)記轉(zhuǎn)化為符號序列，然后通過句法分析器按照HTML規(guī)范構(gòu)建出DOM樹。每個節(jié)點代表一個HTML元素，形成了多層次的樹狀結(jié)構(gòu)。
生成對象接口：生成的DOM樹是頁面元素的結(jié)構(gòu)化表示，提供了操作頁面元素的接口，如JavaScript可以通過DOM API來動態(tài)修改頁面內(nèi)容和結(jié)構(gòu)。

CSS解析與CSSOM樹構(gòu)建

CSS文件加載與解析：瀏覽器解析HTML文件中的<link>標(biāo)簽引入的外部CSS文件和<style>標(biāo)簽中的內(nèi)聯(lián)CSS，生成CSSOM樹。CSSOM樹反映了CSS樣式的層級和繼承關(guān)系。
CSS屬性計算：包括層疊、繼承等，確保每個元素對應(yīng)的樣式能夠被準(zhǔn)確計算。這些計算過程為后續(xù)的布局提供必要的樣式信息。

JavaScript加載與執(zhí)行

阻塞式加載：當(dāng)解析器遇到<script>標(biāo)簽時，它會停止HTML的解析，轉(zhuǎn)而先加載并執(zhí)行JavaScript代碼。這是因為JS可能會修改DOM結(jié)構(gòu)或CSSOM樹，從而影響已解析的部分。
異步和延遲加載：為了不影響頁面的初步渲染，可以采用async或defer屬性來異步加載JS文件，這樣可以在后臺進(jìn)行JS的加載和執(zhí)行，而不阻塞HTML解析。

渲染樹的構(gòu)建

合并DOM樹和CSSOM樹：有了DOM樹和CSSOM樹后，瀏覽器將它們組合成渲染樹，這個樹只包含顯示界面所需的DOM節(jié)點及對應(yīng)的樣式信息。
不可見元素的排除：渲染樹會忽略例如<head>、<meta>等不可見元素，只關(guān)注<body>內(nèi)的可視化內(nèi)容。

布局計算（Layout）

元素位置和尺寸確定：瀏覽器從渲染樹根節(jié)點開始，遞歸地計算每個節(jié)點的精確位置和尺寸，這個過程也被稱為“回流”或“重排”，是后續(xù)繪制的基礎(chǔ)。
布局過程的優(yōu)化：現(xiàn)代瀏覽器會盡量優(yōu)化布局過程，例如通過流式布局的方式減少重復(fù)計算，確保高效地完成布局任務(wù)。

繪制（Paint）

像素級繪制：繪制是一個將布局計算后的各元素繪制成像素點的過程。這包括文本、顏色、邊框、陰影以及替換元素的繪制。
層次化的繪制：為了高效地更新局部內(nèi)容，瀏覽器會將頁面分成若干層次（Layer），對每一層分別進(jìn)行繪制，這樣只需更新變化的部分。

因此，我們開發(fā)中要注意以下幾點：

避免過度使用全局腳本：盡量減少使用全局腳本或者將它們放在文檔底部，以減少對HTML解析的阻塞。
合理組織CSS和使用CSS預(yù)處理器：合理組織CSS文件的結(jié)構(gòu)和覆蓋規(guī)則，利用CSS預(yù)處理器進(jìn)行模塊化管理。
利用瀏覽器緩存機制：通過設(shè)置合理的緩存策略，減少重復(fù)加載相同資源，提升二次訪問的體驗。
優(yōu)化圖片和多媒體資源：適當(dāng)壓縮圖片和優(yōu)化多媒體資源的加載，減少網(wǎng)絡(luò)傳輸時間和渲染負(fù)擔(dān)。

綜上所述，瀏覽器解析HTML文件是一個復(fù)雜而高度優(yōu)化的過程，涉及從網(wǎng)絡(luò)獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發(fā)者需要深入理解這些步驟，以優(yōu)化網(wǎng)頁性能和用戶體驗。通過合理組織HTML結(jié)構(gòu)、優(yōu)化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執(zhí)行，可以顯著提升頁面加載速度和運行效率。

ss章節(jié)，本文僅列出筆者任務(wù)相對重要的知識點，且介紹上，針對重點。當(dāng)然，遺漏很正常，希望能收到你的意見。

1.盒子模型

盒子模型，個人的理解，就是一個來裝html標(biāo)簽的容器,包裝的內(nèi)容包括content+padding+border+margin。由這四個組成我們的"盒子"。

我們?nèi)粘？赡軙龅讲煌臑g覽器，元素的高寬不一致。除了可能是瀏覽器內(nèi)置的margin跟padding不同之外，也可能是IE跟w3c的盒子模型組成不同。

以下是兩種不同盒子的分類：

W3C盒子模型：可通過box-sizing: content-box來設(shè)置，他包含content+padding+border+margin。
IE盒子模型：可通過box-sizing: border-box來設(shè)置，content+margin。其中content包含border，padding

2.BFC

簡單的個人理解，block formatting context，塊級格式化上下文。產(chǎn)生了BFC的，形成了獨立容器，他的特性就是不會在布局中影響到外邊的元素。

他的特性：

1)BFC邊距會重疊。
2)BFC的內(nèi)外元素互相不影響
3)BFC不會與浮動元素發(fā)生重疊
4)BFC元素的高度計算會包括元素內(nèi)的浮動元素的高度

觸發(fā)的條件是：

1)body 根元素
2)浮動元素：float 除 none 以外的值
3)絕對定位元素：position (absolute、fixed)
4)display 為 inline-block、table-cells、flex，table-caption
5)overflow 除了 visible 以外的值 (hidden、auto、scroll)

此外，除了BFC，還有IFC、GFC、FFC的概念。我們簡單了解一下。

GFC：可簡單理解為grid布局
FFC：可簡單理解為flex布局。
IFC:內(nèi)聯(lián)格式化上下文，簡單理解為：inline-block。

水平方向上的 margin，border 和 padding在框之間得到保留。框在垂直方向上可以以不同的方式對齊：它們的頂部或底部對齊，或根據(jù)其中文字的基線對齊。包含那些框的長方形區(qū)域，會形成一行，叫做行框。inline-block的元素的內(nèi)部是一個BFC，但是它本身可以和其它inline元素一起形成IFC。

3.flex布局

flex，即彈性布局。一個由css3引入，為我們的盒子屬性帶來靈活性的一種布局方式。一旦父級采用了flex布局，里邊的子控件將收flex布局限制，部分原本的樣式（如float:left）也會失效。

基本api不做講解，不熟悉可以看看：www.ruanyifeng.com/blog/2015/0…

特別注意：flex:0 0 30%的意義：等于flex-grow=0（默認(rèn)不放大）+flex-shrink=0（不縮小）+flex-basis=30%（項目占據(jù)主軸的空間）

4.css3新特性

背景，支持RGBA透明度，一次多背景圖
支持媒體查詢
支持陰影，漸變，陰影
支持邊框圖片，border-image: url(border.png) 30 30 round
支持transform位移系列
支持過渡效果transition
支持自定義字體
引入flex/grid布局
引入多種選擇器
其他不做詳細(xì)說明，有興趣搜一下css3新特性

5.圖片格式

前端的圖片分類格式,其實是性能優(yōu)化的很大部分。選擇好圖片的類型，對前端的性能影響非常大。

而前端對圖片的精髓，一方面是對圖片大小的評估，一方面是對圖片的類型選擇。

他的大小可以這樣判斷：

比如一張200*200的圖片大小，這時候，他的像素點有40000個。每個像素有 4 個通道，所以一共有160000個字節(jié),所以，我們評估該圖片的大小大概為：160000/1024 約等于 156（KB），如果大很多，說明圖片大小有優(yōu)化控件。如果小很多，說明此時是模糊的。

6.移動端適配

列舉一下筆者所知道的適配方式：

1）媒體查詢。該方案的話，個人覺得是最佳的方案，也是常用UI庫非常喜歡的用處理方式之一。唯一不好的是：多套媒體方案，也意味多份的工作量。
2）vw/vh 利用單位vw/vh進(jìn)行布局。該方案的話，對整體的布局還是相對穩(wěn)定，但是對部分細(xì)節(jié)等處理還是不優(yōu)化。且遇到手機屏幕差異較大的話，會出現(xiàn)嚴(yán)重的視差。
3）rem 相對穩(wěn)定的方法。根據(jù)屏幕大小計算出font-size;但是只能求良好，很難求精。如果UI對一像素非常的敏感，這個方案可能是個非常糟糕的選擇。
4）類似小程序rpx。相信原生小程序開發(fā)者都用過rpx。這里其實原理有點類似rem。但是，卻不是按屏幕大小去計算，而是不同的屏幕定義了自己的標(biāo)準(zhǔn)。

7.常見兼容性

這個問題本次只列舉了幾個常見的，非全部列出。如需具體，可另查資料。

1）間距差異是否大，導(dǎo)致文本換行，或者間隔太大。原因：每個瀏覽器的margin和padding的默認(rèn)值不同。解決方案：全局文件設(shè)置統(tǒng)一默認(rèn)margin和padding。

2）圖片默認(rèn)有間距原因：因為img標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會排在一行里，但是部分瀏覽器的img標(biāo)簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學(xué)生使用負(fù)margin，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）解決方案：使用float屬性為img布局

3）較小的高度（小于10px），時，ie可能會超出高度原因：IE有一個默認(rèn)的行高的高度解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。

為min-height本身就是一個不兼容的CSS屬性

4）透明度兼容設(shè)置原因：不同瀏覽器各自透明度關(guān)鍵字不統(tǒng)一。解決方案：filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;

5）IE的hover圖片會閃爍原因：IE6的每次觸發(fā) hover 的時候都會重新加載解決方案：提前緩存文件。document.execCommand("BackgroundImageCache", false, true);

8.垂直居中

該回復(fù)只給予思路，沒有具體寫法。因為我覺得大家都應(yīng)該懂。

已知寬高：1.margin 自己算高寬　 2.定位 + margin-top + margin-left 3.定位 + margin:auto

未知寬高：1.transform 但有IE兼容的問題 2.flex 布局 3.display: table-cell

9.實現(xiàn)1px

首先你可能需要了解一下物理像素跟獨立像素的區(qū)別。

物理像素：一個物理像素是顯示器（手機屏幕）上最小的物理顯示單元，如：iPhone6上就有7501334個物理像素顆粒。獨立像素：邏輯像素，程序使用的虛擬像素。如：iPhone6上就有375677個獨立像素。

那么如何實現(xiàn)1px呢：1.利用 transfrom 的 scale 縮放來實現(xiàn) 2.利用 background 的 line-gradient 線性漸變來實現(xiàn) 3.meta viewport修改成1比0.5。這樣整個屏幕的大小縮小了0.5。4.利用box-shadow

10.三列布局

該回復(fù)只給思路

1.CSS浮動第一個float:left，第二個float:right，第三個設(shè)置margin-left和margin-right

2.絕對定位法第一個定位到left，第二個定位到right，第三個設(shè)置margin-left和margin-right

3.flex布局

11.樣式優(yōu)化

初步聊聊個人的樣式優(yōu)化方案如下：

1.避免css層級太深。有興趣了解一下css tree如何跟html tree融合成dom tree。2.首屏（特別是緩沖效果圖）可適當(dāng)使用內(nèi)聯(lián)元素。這樣有利于更快的顯示。3.異步加載CSS。非首次重要引入的css文件，不放在head里邊。這樣會引起阻塞。4.減少回流的屬性。如display:none可以考慮使用visibility 5.適當(dāng)使用GPU渲染。如tranfrom等。6.css動畫的性能，是遠(yuǎn)遠(yuǎn)的大于js動畫性能。7.利用工具壓縮，去重。

12.偽類和偽元素

偽類和偽元素的根本區(qū)別在于：它們是否創(chuàng)造了新的元素

偽類，指可以通過元素選擇器，就可以實現(xiàn)的效果，如frist-child，active等。而偽元素，是指需要通過創(chuàng)元素，才可以實現(xiàn)的效果，如first-letter,before，after等。

具體元素跟寫法有興趣，可參考：blog.csdn.net/qq_27674439…

喜歡的老鐵，加個關(guān)注！今后會分享更多的前端干貨，歡迎點贊轉(zhuǎn)發(fā)關(guān)注[比心][比心][比心]

來源 https://juejin.im/post/6867715946941775885

中1, 2, 3, 4 表示優(yōu)先級

CSS 選擇器及其優(yōu)先級

選擇器	格式	優(yōu)先級權(quán)重
!important	10000
內(nèi)聯(lián)樣式	1000
id 選擇器	#id	100
類選擇器	#classname	10
屬性選擇器	a[ref=“eee”]	10
偽類選擇器	li:last-child	10
標(biāo)簽選擇器	div	1
偽元素選擇器	li::after	1
相鄰兄弟選擇器	h1+p	0
子選擇器	ul>li	0
后代選擇器	li a	0
通配符選擇器	*	0

注意事項：

!important 聲明的樣式的優(yōu)先級最高；
如果優(yōu)先級相同，則最后出現(xiàn)的樣式生效；
繼承得到的樣式的優(yōu)先級最低；
通用選擇器（*）、子選擇器（>）和相鄰?fù)x擇器（+）并不在這四個等級中，它們的權(quán)值都為 0 ；
樣式表的來源不同時，優(yōu)先級順序為：內(nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認(rèn)樣式。

CSS 中可繼承與不可繼承屬性有哪些

可繼承：

字體系列 font-family font-weight font-size

文本系列 color text-align line-height

可見系列如 visibility

由于屬性太多，這里只列舉常見的可繼承的屬性

display 的屬性值及其作用

屬性值	作用
none	元素不顯示，并且會從文檔流中移除。
block	塊類型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示。
inline	行內(nèi)元素類型。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。
inline-block	默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。
list-item	像塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
table	此元素會作為塊級表格來顯示。
inherit	規(guī)定應(yīng)該從父元素繼承 display 屬性的值。

display 的 block、inline 和 inline-block 的區(qū)別

block：

在線咨詢

上一篇：在網(wǎng)頁開發(fā)中，我們需要掌握的常用HTML標(biāo)簽有哪些？
下一篇：uni-app使用經(jīng)驗—vue頁面和html頁面如何互相調(diào)用接口并傳參

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端面試題：瀏覽器如何解析HTML文件？

1.盒子模型

2.BFC

3.flex布局

4.css3新特性

5.圖片格式

6.移動端適配

7.常見兼容性

8.垂直居中

9.實現(xiàn)1px

10.三列布局

11.樣式優(yōu)化

12.偽類和偽元素

CSS 選擇器及其優(yōu)先級

CSS 中可繼承與不可繼承屬性有哪些

display 的屬性值及其作用

display 的 block、inline 和 inline-block 的區(qū)別

您的項目需求