前端面試題

時間 2019-11-16

標籤端面試題简体版

原文原文鏈接

HTML類
一、html嚴格模式（標準模式）和怪異模式（混雜模式）
（1），標準模式指瀏覽器按照W3C標準解析執行代碼，怪異模式是瀏覽器用本身的方式解析執行代碼，由於不一樣瀏覽器的解析執行方式不同，因此稱爲怪異模式。
（2），<!DOCTYPE>聲明位於最前面，決定瀏覽器解析時使用聲明模式，DTD聲明定義了標準文檔的類型，會使瀏覽器使用標準模式解析網頁，忽略DTD,將使網頁進入怪異模式。javascript

二、對語義化的理解
1. 去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構
2. 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
3. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
4. 便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。css

三、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?
1. <!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。
2. 嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。
3. 在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
4. DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。html

四、Doctype文檔類型
1. 該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
2. HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
3. XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
4. Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。前端

五、HTML與XHTML——兩者的區別有哪些
1. 全部的標記都必需要有一個相應的結束標記
2. 全部標籤的元素和屬性的名字都必須使用小寫
3. 全部的 XML 標記都必須合理嵌套
4. 全部的屬性必須用引號「」括起來
5. 把全部 < 和 & 特殊符號用編碼表示
6. 給全部屬性賦一個值
7. 不要在註釋內容中使用「–」
8. 圖片必須有說明文字html5

六、html常見兼容性問題？
1. png24位的圖片在iE6瀏覽器上出現背景
解決方案：作成PNG8，也能夠引用一段腳本處理.
2. 瀏覽器默認的margin和padding不一樣
解決方案：加一個全局的 *{margin:0;padding:0;} 來統一。
3. IE6雙邊距bug：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。
#box{ float:left; width:10px; margin:0 0 0 10px;}
這種狀況之下IE會產生20px的距離
解決方案：在float的標籤樣式控制中加入 _display:inline; 將其轉化爲行內屬性。( _ 這個符號只有ie6會識別)
4. 漸進識別的方式，從整體中逐漸排除局部。
首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。
接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。
5.IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用 getAttribute() 獲取自定義屬性；Firefox下,只能使用getAttribute()獲取自定義屬性
解決方法：統一經過getAttribute()獲取自定義屬性
6. IE下，event對象有 x、y 屬性，可是沒有 pageX、pageY屬性; Firefox下，event對象有 pageX、pageY 屬性，可是沒有 x、y 屬性
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。
7. Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示
解決方法：可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決
8. 超連接訪問事後 hover 樣式就不出現了，被點擊訪問過的超連接樣式不在具備 hover 和 active 了
解決方法：改變CSS屬性的排列順序 L-V-H-A
9. 怪異模式問題：漏寫 DTD 聲明，Firefox 仍然會按照標準模式來解析網頁，但在 IE 中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫 DTD 聲明的好習慣。如今可使用[html5](http://www.w3.org/TR/html5/single-page.html) 推薦的寫法：<!DOCTYPE html>
10. 上下margin重合問題：ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。
解決方法：養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
11. ie6對png圖片格式支持很差
解決方案：引用一段腳本處理java

七、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
新特性：
HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
1. 拖拽釋放(Drag and drop) API
2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）
3. 音頻、視頻API(audio,video)
4. 畫布(Canvas) API
5. 地理(Geolocation) API
6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
7. sessionStorage 的數據在瀏覽器關閉後自動刪除
8. 表單控件，calendar、date、time、email、url、search
9. 新的技術webworker, websocket, Geolocationcss3

移除的元素：
1. 純表現的元素：basefont，big，center，font, s，strike，tt，u；
2. 對可用性產生負面影響的元素：frame，frameset，noframes；web

支持HTML5新標籤：
1. IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式（固然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：
<!–[if lt IE 9]>
<script> src=」http://html5shiv.googlecode.com/svn/trunk/html5.js」</script>
<![endif]–>
如何區分：
DOCTYPE聲明新增的結構元素、功能元素ajax

八、如何對網站的文件和資源進行優化？
1. 文件合併
2. 文件最小化/文件壓縮
3. 使用 CDN 託管
4. 緩存的使用（多個域名來提供緩存）
5. 其餘json

九、三種減小請求時間的方法
1. 優化圖片
2. 圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
3. 優化CSS（壓縮合並css，如 margin-top, margin-left…)
4. 網址後加斜槓（如www.campr.com/目錄，會判斷這個目錄是什麼文件類型，或者是目錄。）
5. 標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了）
6. 減小http請求（合併文件，合併圖片）
7. CSS精靈
8. 將JS代碼寫在body後面

十、性能優化的方法
1. 減小http請求次數：CSS Sprites, JS、CSS 源碼壓縮、圖片大小控制合適；網頁 Gzip，CDN 託管，data 緩存，圖片服務器
2. 前端模板 JS + 數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存 AJAX 請求結果，每次操做本地變量，不用請求，減小請求次數
3. 用 innerHTML 代替 DOM 操做，減小 DOM 操做次數，優化 javascript 性能
4. 當須要設置的樣式不少時設置 className 而不是直接操做 style
5. 少用全局變量、緩存DOM節點查找的結果。減小 IO 讀取操做
6. 避免使用 CSS Expression（css表達式)又稱 Dynamic properties(動態屬性)
7. 圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳

十一、http狀態碼有那些？分別表明是什麼意思？
1. 100-199 用於指定客戶端應相應的某些動做
2. 200-299 用於表示請求成功
3. 300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息
4. 400-499 用於指出客戶端的錯誤
400：語義有誤，當前請求沒法被服務器理解
401：當前請求須要用戶驗證
403：服務器已經理解請求，可是拒絕執行它
5. 500-599 用於支持服務器錯誤
503：服務不可用

十二、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
分爲4個步驟：
1. 當發送一個 URL 請求時，無論這個 URL 是 Web 頁面的 URL 仍是 Web 頁面上每一個資源的 URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程 DNS 服務器上啓動一個 DNS 查詢。這能使瀏覽器得到請求對應的 IP 地址。
2. 瀏覽器與遠程 Web 服務器經過 TCP 三次握手協商來創建一個 TCP/IP 鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
3. 一旦 TCP/IP 鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送 HTTP 的 GET 請求。遠程服務器找到資源並使用 HTTP 響應返回該資源，值爲 200 的 HTTP 響應狀態表示一個正確的響應。
4. 此時，Web 服務器提供資源服務，客戶端開始下載資源。
請求返回後，便進入了咱們關注的前端模塊
簡單來講，瀏覽器會解析 HTML 生成 DOM Tree，其次會根據 CSS 生成 CSS Rule Tree，而 javascript 又能夠根據 DOM API 操做 DOM
CSS類
一、overflow:scroll;與overflow:auto;
相同：
都用於產生滾動條
區別：
參數是scroll時候，必會出現滾動條。
參數是auto時候，子元素內容大於父元素時出現滾動條

二、display:none;與visibility:hidden;
相同：
都能隱藏對應的元素，但隱藏的內容均可以用js獲取
區別：
（1）display:none;會讓元素從渲染樹中消失，渲染的時候不佔據任何空間；visibility:hidden;不會讓元素從渲染樹中消失，渲染的時候仍然佔據空間，只是內容不可見。
（2）display:none;改變了dom的結構，因此產生了reflow（迴流，迴流會引發重繪），而visibility:hidden;沒有改變dom結構，只產生repaint（重繪）。
（3）display:none;是非繼承屬性，子孫節點消失是因爲元素從渲染樹中消失形成，經過設置display:inline-block|block;均不能讓子孫節點顯示；visibility:hidden;是繼承屬性，子孫節點消失是因爲繼承了hidden，經過設置visibility:visible;，可讓子孫節點顯示。
（4）讀屏器不會讀取display:none;的元素內容，而會讀取visibility:hidden;的元素內容。

三、border:0;與border:none;
相同：
邊框不顯示
區別：
border:0; 被解析爲 border-width:0; 表示邊框寬度爲0。
border:none; 被解析爲 border-style:none; 表示邊框樣式無。
（1）性能差別
在標準瀏覽器中，
border:0;瀏覽器對border-width進行渲染，佔用內存。
border:none;瀏覽器不進行渲染，不佔用內存。
所以border:0;比border:none;多渲染了一個border-width:0;也就是說border:none;的性能要比border:0;高。
（2）瀏覽器兼容
IE7不支持border:none;
爲了少渲染border-width:0，和不佔用內存，這裏咱們寫一個兼容全部瀏覽器的最優寫法：
border：0 none；前面的0是針對ie6和ie7的兼容，後面的none是針對標準瀏覽器的。
tips：請始終把border-style屬性聲明到border-color屬性以前，元素必須在改變顏色以前得到邊框。

四、IE(6)盒子模型與標準盒子模型
相同：
都包括 margin、border、padding、content（按照盒模型的圖，我理解爲這裏的content指咱們css裏設置的width和height，而下面的width和height指內容的默認寬高）
區別：
標準盒子模型＝ margin + border + padding + content （content = width | height）
IE盒子模型＝ margin + content （content = border + padding + width | height）

五、僞元素與僞類
相同：
都用於給某些選擇器添加特殊的效果
區別：
僞類的效果能夠經過添加一個實際的類來達到，而僞元素的效果則須要經過添加一個實際的元素才能達到，這也是爲何他們一個稱爲僞類，一個稱爲僞元素的緣由。
下面羅列寫常見的僞類與僞元素——
僞類種類：
僞類
:active
僞元素種類：
僞元素
tips：
CSS3要求對僞元素使用兩個冒號以便與僞類進行區別。但由於兼容性的問題，因此如今大部分仍是統一的單冒號，可是拋開兼容性的問題，咱們在書寫時應該儘量養成好習慣，區分二者。

六、link和@import的區別
(1) link屬於HTML標籤，而@import是CSS提供的;
(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;
(4) link方式的樣式的權重高於@import的權重.（沒有權重區別）

七、absolute和fixed的同異
A：共同點：
1.改變行內元素的呈現方式，display被置爲block；
2.讓元素脫離普通流，不佔據空間；
3.默認會覆蓋到非定位元素上

B不一樣點：
absolute的」根元素「是能夠設置的，而fixed的」根元素「固定爲瀏覽器窗口。
當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。

八、display 的值的做用：
1.block 象塊類型元素同樣顯示。
2.inline 缺省值。象行內元素類型同樣顯示。
3.inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
4.list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

九、position 的值的定位區別：
1.absolute 生成絕對定位的元素，相對於 static 定位之外的第一個祖先元素進行定位。
2.fixed 生成絕對定位的元素，相對於瀏覽器窗口進行定位（老IE不支持）。
3.relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
4.static 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right z-index 聲明）。
5.inherit 規定從父元素繼承 position 屬性的值。

十、css3有哪些新特性
1. CSS3實現圓角（border-radius），陰影（box-shadow），
2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
4. 增長了更多的CSS選擇器多背景 rgba
5. 在CSS3中惟一引入的僞元素是 ::selection.
6. 媒體查詢，多欄佈局
7. border-image

十一、爲何要初始化樣式
1.由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的
2.沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
3.初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

十二、什麼是css精靈，以及css精靈的使用
CSS Sprites 就是把網頁中一些背景圖片整合到一張圖片文件中，
利用「background-image」，」background-repeat」，」background-position」進行背景定位，
background-position 能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，
由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。
對於將來而言，就不須要這樣作了，由於有了 http2。

1三、解釋下浮動和它的工做原理？清除浮動的技巧
浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1. 使用空標籤清除浮動。
這種方法是在全部浮動標籤後面添加一個空標籤定義css clear:both. 弊端就是增長了無心義標籤。

2. 使用overflow。
給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。

3. 使用after僞對象清除浮動。
該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

1四、浮動元素引發的問題和解決方法
浮動元素引發的問題：
1. 父元素的高度沒法被撐開，影響與父元素同級的元素
2. 與浮動元素同級的非浮動元素會跟隨其後
3. 若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構
解決方法：
使用 CSS 中的 clear:both; 屬性來清除元素的浮動可解決二、3問題，對於問題1，添加以下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: 「.」;display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
1. 額外標籤法，<div style=」clear:both;」></div>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）
2. 使用after僞元素
#parent:after{
content:」.」;
height:0;
visibility:hidden;
display:block;
clear:both;
}
3. 浮動外部元素
4. 設置 overflow 爲 hidden 或者 auto

1五、IE8如下瀏覽器的盒模型有何不一樣
IE8如下瀏覽器的盒模型中定義的元素的寬高包括內邊距和邊框

JS類
一、obj.offsetHeight與obj.style.height $(obj).height()與$(obj).css(‘height’)
相同：
均可以獲取obj的高度
區別：
（1）obj.offsetHeight能夠獲取外部、內嵌和內聯中定義的高，而obj.style.height只能獲取內聯中定義的高；
（2）obj.offsetHeight返回的是一個數值，而obj.style.height返回的是一個字符串，單位是「px」；
（3）obj.offsetHeight是隻讀，而obj.style.height是可讀寫；
（4）若是沒有爲元素設置高度，obj.offsetHeight會根據內容獲取高度值，而obj.style.height會返回undefind或 (空字符串)；
（5）$(obj).height()返回的是一個數值，而$(obj).css(‘height’)返回的是一個字符串，單位是「px」。
tips：
與其餘三個$(obj).height()、$(obj).css(‘height’)、obj.style.height不一樣的是，obj.offsetHeight的高度就是height+padding，其餘則不把padding計入高度。

二、null和undefined的區別
null是一個表示」無」的對象，轉爲數值時爲0
undefined是一個表示」無」的原始值，轉爲數值時爲NaN
當聲明的變量還未被初始化時，變量的默認值爲undefined
null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象
undefined表示「缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：
1. 變量被聲明瞭，但沒有賦值時，就等於 undefined
2. 調用函數時，應該提供的參數沒有提供，該參數等於 undefined
3. 對象沒有賦值的屬性，該屬性的值爲 undefined
4. 函數沒有返回值時，默認返回 undefined
null表示「沒有對象」，即該處不該該有值。典型用法是：
1. 做爲函數的參數，表示該函數的參數不是對象
2. 做爲對象原型鏈的終點

三、new操做符具體幹了什麼呢?
1. 建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型
2. 屬性和方法被加入到 this 引用的對象中
3. 新建立的對象由 this 所引用，而且最後隱式的返回 this

四、對JSON 的瞭解？
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小。
{「age」:」12″, 「name」:」back」}

五、js延遲加載的方式有哪些？
1. defer和async
2. 動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）
3. 按需異步載入js

六、如何解決跨域問題?
1. jsonp（jsonp 的原理是動態插入 script 標籤）
2. document.domain + iframe
3. window.name、window.postMessage
4. 服務器上設置代理頁面

七、documen.write和 innerHTML 的區別
document.write 只能同步執行，若是在window.onload以前執行則在文檔流中繪製內容，若是在window.onload以後則會重繪整個頁面（以前內容被沖刷掉）
innerHTML 則是繪製某個元素內的內容，沒有這個限制

八、哪些操做會形成內存泄漏？
內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象）（引用計數），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。
1. setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
2. 閉包
3. 控制檯日誌
4. 循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

九、javascript對象的幾種建立方式
1. 工廠模式
2. 構造函數模式
3. 原型模式
4. 混合構造函數和原型模式
5. 動態原型模式
6. 寄生構造函數模式
7. 穩妥構造函數模式

十、javascript繼承的 6 種方法
1. 原型鏈繼承
2. 借用構造函數繼承
3. 組合繼承(原型+借用構造)
4. 原型式繼承
5. 寄生式繼承
6. 寄生組合式繼承

十一、ajax 的過程是怎樣的
1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象
2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
3. 設置響應HTTP請求狀態變化的函數
4. 發送HTTP請求
5. 獲取異步調用返回的數據
6. 使用JavaScript和DOM實現局部刷新

十二、什麼是「use strict」; ? 使用它的好處和壞處分別是什麼？
ECMAscript 5添加了第二種運行模式：」嚴格模式」（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。

設立」嚴格模式」的目的，主要有如下幾個：
1. 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
2. 消除代碼運行的一些不安全之處，保證代碼運行的安全；
3. 提升編譯器效率，增長運行速度；
4. 爲將來新版本的Javascript作好鋪墊。
注：通過測試 IE6,7,8,9 均不支持嚴格模式。

缺點：
如今網站的 JS 都會進行壓縮，一些文件用了嚴格模式，而另外一些沒有。這時這些原本是嚴格模式的文件，被 merge 後，這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。