2019最新前端面試寶典

前端攻城小牛啊發表於2019-03-30
前端面試

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

##HTML&CSS：

對Web標準的理解、瀏覽器核心差異、相容性、hack、CSS基本功：佈局、盒子模型、選擇器優先順序及使用、HTML5、CSS3、移動端適應

2019最新前端面試寶典

JavaScript：

資料型別、物件導向、繼承、閉包、外掛、作用域、跨域、原型鏈、模組化、自定義事件、記憶體洩漏、事件機制、非同步裝載回撥、模板引擎、Nodejs、JSON、ajax等。

其他：

HTTP、安全、正則、優化、重構、響應式、移動端、團隊協作、可維護、SEO、UED、架構、職業生涯 作為一名前端工程師，無論工作年頭長短都應該必須掌握的知識點：

  • 1、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
  • 2、DOM操作 ——如何新增、移除、移動、複製、建立和查詢節點等。
  • 3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別。
  • 4、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
  • 5、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
  • 6、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8以下版本的瀏覽器中的盒模型
  • 7、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們
  • 8、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
  • 9、HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。
  • 10、JSON —— 作用、用途、設計結構。

HTML

Doctype 作用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1）、<!DOCTYPE> 宣告位於文件中的最前面，處於 標籤之前。告知瀏覽器的解析器，用什麼文件型別 規範來解析這個文件。 //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力 （2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支援的最高標準執行。 （3）、在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。 （4）、DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。

行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

（1）CSS規範規定，每個元素都有display屬性，確定該元素的型別，每個元素都有預設的display值， 比如div預設display屬性值為“block”，成為“塊級”元素；塊級元素獨佔一行。 span預設display屬性值為“inline”，是“行內”元素。 行內元素處於同一行。 （2）行內元素有：a b span img input select strong（強調的語氣） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p 等 //在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力 （3）知名的空元素：

<br> <hr> <img> <input> <link> <meta>
複製程式碼

鮮為人知的是：

<area> <base> <col> <command> <embed> <keygen> <param> <source>
<track> <wbr>
複製程式碼

link 和@import 的區別是？

（1）link屬於XHTML標籤，而@import是CSS提供的;
（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）import只在IE5以上才能識別，而link是XHTML標籤，無相容問題;
（4）link方式的樣式的權重 高於@import的權重.

複製程式碼

瀏覽器的核心分別是什麼?

IE瀏覽器的核心Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera核心原為Presto，現為Blink；

常見相容性問題？

png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成png8. 瀏覽器預設的margin和padding不同。解決方案是加一個全域性的 *{margin:0;padding:0;} 來統一。 IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。 浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化為行內屬性。( _ 這個符號只有ie6會識別) 漸進識別的方式，從總體中逐漸排除區域性。 首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

##css

1 .bb{
2    background-color:#f1ee18; /*所有識別*/
3   .background-color:#00deff\9;  /*IE6、7、8識別*/
5   +background-color:#a200ff;  /*IE6、7識別*/
6   _background-color:#1e0bd1; /*IE6識別*/
7   }
複製程式碼

1.IE下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一通過getAttribute()獲取自定義屬性.

2.IE下,event物件有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性. 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

3.Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

4.超連結訪問過後hover樣式就不出現了 被點選訪問過的超連結樣式不在具有hover和active了, 解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link { } ,a:visited { } ,a:hover { } ,a:active { } ; HTML5有哪些新特性、移除了那些元素？如何處理html5新標籤的瀏覽器相容問題？如何區分 HTML 和 Html5？

1.HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。

2.繪畫 canvas

用於媒介回放的 video 和 audio 元素 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失； sessionStorage 的資料在瀏覽器關閉後自動刪除. 語意化更好的內容元素，比如 article、footer、header、nav、section 表單控制元件，calendar、date、time、email、url、search 新的技術webworker, websocket, Geolocation

3.移除的元素

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

2019最新前端面試寶典

支援HTML5新標籤：

IE8/IE7/IE6支援通過document.createElement方法產生的標籤， 可以利用這一特性讓這些瀏覽器支援HTML5新標籤， 瀏覽器支援新標籤後，還需要新增標籤預設的樣式： 當然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架

如何區分： DOCTYPE宣告新增的結構元素\功能元素 語義化的理解？ 1.用正確的標籤做正確的事情！ 2.html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析； 3.在沒有樣式CCS情況下也以一種文件格式顯示，並且是容易閱讀的。 4.搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。 5.使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。 HTML5的離線儲存？ localStorage 長期儲存資料，瀏覽器關閉後資料不丟失； sessionStorage 資料在瀏覽器關閉後自動刪除。 HTML5中新增加的很多標籤（如：

、

相關文章