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中新增加的很多標籤(如:

相關文章