導讀搜索微信公眾號了解更多：每天看世界丫，接下來我們就來聊聊關于html前端開發面試基本問題?以下內容大家不妨參考一二希望能幫到您!html前端開發面試基本問題....

搜索微信公眾號了解更多： 每天看世界丫，接下來我們就來聊聊關于html前端開發面試基本問題?以下內容大家不妨參考一二希望能幫到您!

html前端開發面試基本問題

搜索微信公眾號了解更多： 每天看世界丫

1.link 標簽定義是什么？

a.link 標簽定義文檔與外部資源的關系。link 元素是空元素，它僅包含屬性。此元素只能存在于 head 部分，不過它可出現任 何次數。

b.link 標簽中的 rel 屬性定義了當前文檔與被鏈接文檔之間的關系。

c.常見的 stylesheet 指的是定義一個外部加載的樣式表。

2. link 和 @import 的區別是什么？

（1）從屬關系區別。@import 是 CSS 提供的語法規則，只有導入樣式表的作用；link 是 html 提供的標簽，不僅可以加載 CSS 文件，還可以定義 RSS、rel 連接屬性、引入網 站圖標等。

（2）加載順序區別。加載頁面時，link 標簽引入的 CSS 被同時加載；@import 引入 的 CSS 將在頁面加載完畢后被加載。

（3）兼容性區別。@import 是 CSS2.1 才有的語法，故只可在 IE5 才能識別；link 標 簽作為 HTML 元素，不存在兼容性問題。

（4）DOM 可控性區別?？梢酝ㄟ^ JS 操作 DOM ，插入 link 標簽來改變樣式；由于 DOM 方法是基于文檔的，無法使用 @import 的方式插入樣式。

3.談談你對瀏覽器的理解？

瀏覽器的主要功能是將用戶選擇的 web 資源呈現出來，它需要從服務器請求資源，并 將其顯示在瀏覽器窗口中，資源的格式通常是 HTML，也包括 PDF、image 及其他格式。用 戶用 URI（Uniform Resource Identifier 統一資源標識符）來指定所請求資源的位置。HTML 和 CSS 規范中規定了瀏覽器解釋 html 文檔的方式，由 W3C 組織對這些規范 進行維護，W3C 是負責制定 web 標準的組織。但是瀏覽器廠商紛紛開發自己的擴展，對規范的遵循并不完善，這為 web 開發者帶來 了嚴重的兼容性問題。

簡單來說瀏覽器可以分為兩部分，shell 和 內核。其中 shell 的種類 相對比較多，內核則比較少。shell 是指瀏覽器的外殼：例如菜單，工具欄等。主要是提供 給用戶界面操作，參數設置等等。

它是調用內核來實現各種功能的。內核才是瀏覽器的核心。內核是基于標記語言顯示內容的程序或模塊。也有一些瀏覽器并不區分外殼和內核。從Mozilla 將 Gecko 獨立出來后，才有了外殼和內核的明確劃分。

4.談談你對瀏覽器內核的理解？

主要分成兩部分：渲染引擎和 JS 引擎。

渲染引擎的職責就是渲染，即在瀏覽器窗口中顯示所請求的內容。

默認情況下，渲染引 擎可以顯示 html、xml 文檔及圖片，它也可以借助插件（一種瀏覽器擴展）顯示其他類型 數據，例如使用 PDF 閱讀器插件，可以顯示 PDF 格式。

JS 引擎：解析和執行 javascript 來實現網頁的動態效果。最開始渲染引擎和 JS 引擎并 沒有區分的很明確，后來 JS 引擎越來越獨立，內核就傾向于只指渲染引擎。

5.常見的瀏覽器內核比較和區別是什么？

Trident：這種瀏覽器內核是 IE 瀏覽器用的內核，因為在早期 IE 占有大量的市場份額， 所以這種內核比較流行，以前有很多網頁也是根據這個內核的標準來編寫的，但是實際上這 個內核對真正的網頁標準支持不是很好。但是由于 IE 的高市場占有率，微軟也很長時間沒 有更新 Trident 內核，就導致了 Trident 內核和 W3C 標準脫節。還有就是 Trident 內核的 大量 Bug 等安全問題沒有得到解決，加上一些專家學者公開自己認為 IE 瀏覽器不安全的 觀點，使很多用戶開始轉向其他瀏覽器。Gecko：這是 Firefox 和 Flock 所采用的內核，這個內核的優點就是功能強大、豐富， 可以支持很多復雜網頁效果和瀏覽器擴展接口，但是代價是也顯而易見就是要消耗很多的資 源，比如內存。

Presto：Opera 曾經采用的就是 Presto 內核，Presto 內核被稱為公認的瀏覽網頁速度 最快的內核，這得益于它在開發時的天生優勢，在處理 JS 腳本等腳本語言時，會比其他的 內核快 3 倍左右，缺點就是為了達到很快的速度而丟掉了一部分網頁兼容性。

WebKit：Webkit 是 Safari 采用的內核，它的優點就是網頁瀏覽速度較快，雖然不及 Presto 但是也勝于 Gecko 和 Trident，缺點是對于網頁代碼的容錯性不高，也就是說對網頁 代碼的兼容性較低，會使一些編寫不標準的網頁無法正確顯示。WebKit 前身是 KDE 小組 的 KHTML 引擎，可以說 WebKit 是 KHTML 的一個開源的分支。

Blink：谷歌在 Chromium Blog 上發表博客，稱將與蘋果的開源瀏覽器核心 Webkit 分 道揚鑣，在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置于 Chrome 瀏覽 器之中。其實 Blink 引擎就是 Webkit 的一個分支，就像 webkit 是 KHTML 的分支一樣。Blink 引擎現在是谷歌公司與 Opera Software 共同研發，上面提到過的，Opera 棄用了自己 的 Presto 內核，加入 Google 陣營，跟隨谷歌一起研發 Blink。

6.談談瀏覽器的區別是什么？

（1） IE 瀏覽器內核：Trident 內核，也是俗稱的 IE 內核；

（2）Chrome 瀏覽器內核：統稱為 Chromium 內核或 Chrome 內核，以前是 Webkit 內核，現在是 Blink 內核；

（3） Firefox 瀏覽器內核：Gecko 內核，俗稱 Firefox 內核；

（4） Safari 瀏覽器內核：Webkit 內核；

（5） Opera 瀏覽器內核：最初是自己的 Presto 內核，后來加入谷歌大軍，從 Webkit 又到了 Blink 內核；

（6） 360 瀏覽器、獵豹瀏覽器內核：IE Chrome 雙內核；

（7） 搜狗、遨游、QQ 瀏覽器內核：Trident（兼容模式） Webkit（高速模式）；

（8） 百度瀏覽器、世界之窗內核：IE 內核；

（9） 2345 瀏覽器內核：好像以前是 IE 內核，現在也是 IE Chrome 雙內核了；

（10）UC 瀏覽器內核：這個眾口不一，UC 說是他們自己研發的 U3 內核，但好像還 是基于 Webkit 和 Trident ，還有說是基于火狐內核。

7.瀏覽器的渲染原理是什么？

（1）首先解析收到的文檔，根據文檔定義構建一棵 DOM 樹，DOM 樹是由 DOM 元 素及屬性節點組成的。

（2）然后對 CSS 進行解析，生成 CSSOM 規則樹。

（3）根據 DOM 樹和 CSSOM 規則樹構建渲染樹。渲染樹的節點被稱為渲染對象， 渲染對象是一個包含有顏色和大小等屬性的矩形，渲染對象和 DOM 元素相對應，但這種 對應關系不是一對一的，不可見的 DOM 元素不會被插入渲染樹。還有一些 DOM 元素對應 幾個可見對象，它們一般是一些具有復雜結構的元素，無法用一個矩形來描述。 （4）當渲染對象被創建并添加到樹中，它們并沒有位置和大小，所以當瀏覽器生成渲 染樹以后，就會根據渲染樹來進行布局（也可以叫做回流）。這一階段瀏覽器要做的事情是 要弄清楚各個節點在頁面中的確切位置和大小。通常這一行為也被稱為“自動重排”。

（5）布局階段結束后是繪制階段，遍歷渲染樹并調用渲染對象的 paint 方法將它們 的內容顯示在屏幕上，繪制使用 UI 基礎組件。值得注意的是，這個過程是逐步完成的，為 了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，并不會等到所有的 html 都解析完成之后再去構建和布局 render 樹。它是解析完一部分內容就顯示一部分內容，同 時，可能還在通過網絡下載其余內容。

8.渲染過程中遇到 JS 文件怎么處理？（瀏覽器解析過程）

JavaScript 的加載、解析與執行會阻塞文檔的解析，也就是說，在構建 DOM 時，HTML 解析器若遇到了 JavaScript，那么它會暫停文檔的解析，將控制權移交給 JavaScript 引擎， 等 JavaScript 引擎運行完畢，瀏覽器再從中斷的地方恢復繼續解析文檔。

也就是說，如果你想首屏渲染的越快，就越不應該在首屏就加載 JS 文件，這也是都 建議將 script 標簽放在 body 標簽底部的原因。當然在當下，并不是說 script 標簽必須放 在底部，因為你可以給 script 標簽添加 defer 或者 async 屬性。

9.async 和 defer 的作用是什么？有什么區別？

（1）腳本沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，也就是說不等 待后續載入的文檔元素，讀到就加載并執行。

（2）defer 屬性表示延遲執行引入的 JavaScript，即這段 JavaScript 加載時 HTML 并 未停止解析，這兩個過程是并行的。當整個 document 解析完畢后再執行腳本文件，在 DOMContentLoaded 事件觸發之前 完成。多個腳本按順序執行。

（3）async 屬性表示異步執行引入的 JavaScript，與 defer 的區別在于，如果已經加 載好，就會開始執行，也就是說它的執行仍然會阻塞文檔的解析，只是它的加載過程不會阻 塞。多個腳本的執行順序無法保證。

10.什么是文檔的預解析？

Webkit 和 Firefox 都做了這個優化，當執行 JavaScript 腳本時，另一個線程解析剩下 的文檔，并加載后面需要通過網絡加載的資源。這種方式可以使資源并行加載從而使整體速 度更快。需要注意的是，預解析并不改變 DOM 樹，它將這個工作留給主解析過程，自己 只解析外部資源的引用，比如外部腳本、樣式表及圖片。