整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          前端面試題:瀏覽器如何解析HTML文件?

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


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

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

          解析為DOM樹

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

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

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

          JavaScript加載與執(zhí)行

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

          渲染樹的構(gòu)建

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

          布局計算(Layout)

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

          繪制(Paint)

          1. 像素級繪制:繪制是一個將布局計算后的各元素繪制成像素點的過程。這包括文本、顏色、邊框、陰影以及替換元素的繪制。
          2. 層次化的繪制:為了高效地更新局部內(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:


          主站蜘蛛池模板: 精品国产区一区二区三区在线观看| 日韩免费一区二区三区在线| 色妞AV永久一区二区国产AV| 国产一区二区中文字幕| 91久久精品无码一区二区毛片| 国产一区二区精品久久岳√| 麻豆天美国产一区在线播放| 国产综合无码一区二区三区| 福利片免费一区二区三区| 中文字幕日韩精品一区二区三区| 久久国产精品免费一区| 国产一区在线播放| 成人精品一区久久久久| 无码少妇A片一区二区三区| 国产精品免费一区二区三区四区| 午夜福利国产一区二区| 日本人真淫视频一区二区三区| 国模一区二区三区| 怡红院一区二区在线观看| 人妻少妇精品视频三区二区一区| 午夜福利一区二区三区高清视频| 国产日韩一区二区三区在线观看| 国产高清在线精品一区小说| 一区二区三区在线看| 无码人妻久久一区二区三区蜜桃 | 久久精品无码一区二区三区免费 | 动漫精品第一区二区三区| 国产精品亚洲专区一区| 国产人妖在线观看一区二区| 精品一区中文字幕| 一区二区国产在线观看| 熟女少妇丰满一区二区| 高清国产AV一区二区三区| 久久久国产精品亚洲一区| 国产精品视频一区二区猎奇| 日韩在线视频不卡一区二区三区| 国产伦精品一区二区三区在线观看| 国产亚洲福利一区二区免费看| 亚洲美女高清一区二区三区| 日本欧洲视频一区| 亚洲av无码一区二区三区人妖|