L--前端開發面試知識點(HTML相關)

時間 2019-11-10

標籤前端開發面試知識 html 相關欄目快樂工作简体版

原文原文鏈接

簡介

前端開發面試知識點大綱：javascript

　　HTML&CSS: 對web標準的理解、瀏覽器內核的差別、兼容性、hack、css基本功：佈局、盒子模型、選擇器優先級及使用、HTML五、CSS三、移動端適應。css

　　javascript：數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄露、事件機制、異步裝載回調、模板引擎、nodejs、JSON、ajaxhtml

　　其餘：HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、可維護、SEO、UED、架構、職業生涯前端

1.請你談談Cookie的弊端

cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但仍是有不少侷限性的。html5

第一：每一個特定域名下最多生成20個cookiejava

IE6或更低版本最多20個cookie
IE7和以後版本最多能夠有50個cookie。
firefox最多50個cookie
chrome和safari沒有作硬性限制

IE和opera會清理近期最少使用的cookie，firefox會隨機清理cookie。node

cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。web

IE提供了一種存儲能夠持久化用戶數據，叫作userData，從IE5.0就開始支持。每一個數據最多128k，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有處理
，那麼會一直存在。

優勢：極高的擴展性和可用性面試

經過良好的編程，控制保存在cookie中的session對象的大小。
經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。
只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
控制cookie的生命週期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

缺點：ajax

cookie數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。
安全性問題。若是cookie被人攔截，那人就能夠取得全部的session信息。即便加密也於事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。
有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼他起不到任何做用。

2.瀏覽器本地存儲

在較高的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。

html5中的web Storage包括了兩種存儲方式：sessionStorage和localStorage。

sessionStorage用於本地一個會話（session）中的數據，這些數據只有在同一個繪會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據永遠不會過時的

3.web storage和cookie的區別

web storage的概念和cookie相識，區別是他是爲了更大的容量存儲而設計的。cookie的大小是受限的，而且每次請求一個新的頁面的時候cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此以外，web storage擁有setItem，getItem，removeItem，clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。

可是cookie也是不可或缺的：cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而web storage僅僅是爲了本地存儲數據而生

瀏覽器的支持除了ie7及如下不支持外，其餘標準瀏覽器都徹底支持（ie及ff須要在web服務器裏運行），值得一提的是IE老是辦好事，例如IE6，IE7中的userData其實就是javascript本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web Storage。

localStorage和sessionStorage都具備相同的操做方法，例如setItem、getItem和removeItem等

4.說說你對語義化的理解？

1.去掉或者丟掉的時候可以讓頁面呈現出清晰的結構

2.有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重

3.方便其餘設備來解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁

4.便於團隊開發和維護，語義化更具可讀性，是下一代網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

5.Doctype做用？嚴格模式與混雜模式如何區分？他們有何意義？

1.<!DOCTYPE>聲明位於文檔的最前面，處於<html>標籤以前。告知瀏覽器以何種方式來渲染文檔。

2.嚴格模式的排版和JS運做模式是以瀏覽器支持的最高標準運行。

3.在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

4.DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

6.你知道多少種Doctype文檔類型？

該標籤可聲明三種DTD類型，分別表示嚴格版本，過分版本以及基於框架的HTML文檔。

HTML 4.01規定了三種文檔類型：Strict、Transitional以及Frameset。

XHTML 1.0規定了三種XML文檔類型：Strict、Transitional以及Frameset。

Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而Quirks（包容）模式（也就是鬆散模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

7.HTML與XHTML--兩者有什麼區別？

區別：

　　1.全部的標記都必需要有一個相應的結束標籤

　　2.說有的標籤元素和屬性的名字都必須使用小寫

　　3.全部的XML標記都必須合理嵌套

　　4.全部的屬性都必須有引號括起來

　　5.把全部的<和&特殊字符用編碼表示

　　6.給全部屬性附一個值

　　7.不要在註釋內容中使「--」

　　8.圖片必須有說明文字

8.常見兼容問題？

1.png24位的圖片在ie6瀏覽器上出現背景，解決方案是作成png8，也能夠引用一段腳本處理。

2.瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin：0;padding:0}來統一。

3.IE6雙邊距bug：塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示的margin比設置的大。

4.浮動ie產生雙倍距離（ie6雙邊距問題：在ie6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）

5.漸進識別的方式，從整體中逐漸排除局部。

　　首先，巧妙的使用"\9"這一標記，將IE瀏覽器從全部狀況中分離出來。

　　接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

.test {
    background-color: #f1ee18;   /*全部識別*/
    .background-color: #00deff\9;/*IE六、七、8識別*/ 
    +background-color: #00deff;/*IE六、7識別*/ 
    _background-color: #00deff;/*IE6識別*/ 
}

6.IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用getAttribute()獲取自定義屬性；firfox下，只能經過使用getAttribute()獲取自定義屬性。

解決方法：統一使用getAttribute()獲取自定義屬性。

9.HTML5有哪些新特性、移除了哪些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分HTML和HTML5？

HTML5如今已經不是SGML的子集，主要是關於圖像，位置，存儲，多任務等功能的增長

新特性：

　　拖拽釋放(Drag and drop) API

　　語義化更好的內容標籤(header ,nav , footer ,aside, article, section)

　　音頻、視頻API(audio, video)

　　畫布(Canvas) API

　　地理(Geolocation) API

　　本地離線存儲 localStorage 長期儲存數據，瀏覽器關閉後數據不丟失

　　sessionStorage 的數據在瀏覽器關閉以後自動刪除

　　表單控件，calender、date、time、email、url、search

　　新的技術webworker，websocket，Geolocation

移除元素：

　　純表現的元素：basefont, big, center, font, s, strike, tt, u;

　　對可用性產生負面影響的元素： frame， frameset， noframes；

支持HTML5新標籤：

　　IE6,7,8支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加默認的樣式

　　固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!-- [if lt IE 9] >
    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->

如何區分： DOCTYPE聲明\新增的結構元素\ 功能元素

10.iframe的優缺點？

優勢：

　　解決加載緩慢的第三方內容如圖標和廣告等的加載問題

　　Security sandbox

　　並行加載腳本

缺點：

　　iframe會阻塞主頁面的Onload時間

　　即便內容爲空，加載也須要時間

　　沒有語意

11.webSocket如何兼容低瀏覽器？

Adobe Flash Socket、Active HTMLFile(IE)、基於multipart編碼發送XHR、基於長輪詢的XHR

12.線程與進程的區別？

一個程序至少有一個進程，一個進程至少有一個線程。

線程的劃分尺度小於進程，使得多線程程序的併發性高。

另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大的提升了程序的運行效率。

線程在執行過程當中與進程仍是有區別的。每一個獨立的線程都有一個程序的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。

從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的區別

進程是具備必定獨立功能的程序關於某個數據集合上的一次運行活動,進程是系統進行資源分配和調度的一個獨立單位。

線程是進程的一個實體,是CPU調度和分派的基本單位,它是比進程更小的能獨立運行的基本單位.線程本身基本上不擁有系統資源,只擁有一點在運行中必不可少的資源(如程序計數器,一組寄存器和棧),

可是它可與同屬一個進程的其餘的線程共享進程所擁有的所有資源.

一個線程能夠建立和撤銷另外一個線程;同一個進程中的多個線程之間能夠併發執行.

13.你如何對網站進行優化？

1.文件合併(CSS sprites,多個js，css文件合併等)

2.文件最小化/文件壓縮

3.使用CDN託管(Content Delivery Network，即內容分發網絡)

4.緩存的使用(多個域名來提供緩存)

14.請說出三種減小頁面加載時間的方法？

1.優化圖片(gif代替png、dataUrl等)

2.圖像格式的選擇(gif:提供的顏色較少，可用在一些對顏色要求不高的地方)

3.優化CSS(壓縮合並css，如margin-top，margin-left..)

4.網站後加斜槓(如www.cnblogs.com/目錄，會判斷這個「目錄是什麼文佳類型，或者是目錄」)

5.代表高度和寬度(若是瀏覽器沒有找到這兩個參數，他須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷的調整頁面。這不但影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度參數後，即便

圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容，從而加載時間快了，瀏覽體驗也更好了。)

6.減小http請求(合併問價，合併圖片)

15.什麼是FOUC(無樣式內容閃爍)？你如何避免FOUC？

<style type="text/css" media="all">@import "../fouc.css"</style>

引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個html文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式

的，這段時間的長短跟網速，電腦速度都有關係。

解決方法：在<head>之間加入一個<link>或者<script>元素就能夠了。

相關標籤/搜索

每日一句

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