2018最新前端面試題十

這次帶給大家2018最新前端面試題，我們知道在前端工作中面試是必不可少的一部分，這次的前端面試常考問題分類整理匯總就是來幫助大家度過前端面試著一大難關。一起來看一下。

【相關推薦：前端面試題（2020）】

一、請描述cookies、sessionStorage 與localStorage 的差異。

軟體程式設計希望透過一些手段來持久化的儲存一些有用的資料。網路化編程，一般將這項任務交給了伺服器端的資料庫或是瀏覽器端的cookie。隨著HTML5的出現，web開發又有了兩種選擇：Web Storage和Web SQL Database.

WebStorage有兩種形式：LocalStorage（本機儲存）和sessionStorage（會話儲存）。這兩種方式都允許開發者使用js設定的鍵值對進行操作，在重新載入不同的頁面的時候讀出它們。這一點與cookie類似。

1:cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地保存。 Cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。

2:儲存大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。 sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

3:資料有效期限不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直保存，因此用作持久資料；cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。

4:作用域不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。

5:Web Storage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。

6:Web Storage 的 api 介面使用更方便。

二、請解釋 <script>、<script async> 和 <script defer> 的差異</strong>。 </p> <p>在html頁面中插入<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>程式碼的主要方法就是透過script標籤。其中包括兩種形式，第一種直接在script標籤之間插入js程式碼，第二種即是透過src屬性引入外部js檔案。由於解釋器在解析執行js程式碼期間會阻塞頁面其餘部分的渲染，對於存在大量js程式碼的頁面來說會導致瀏覽器出現長時間的空白和延遲，為了避免這個問題，建議把全部的js引用放在</body>標籤之前。 </p> <p>script標籤存在兩個屬性，defer和async，因此script標籤的使用分為三種情況：</p> <p>1.<script src="example.js">< /script><br>沒有defer或async屬性，瀏覽器會立即載入並執行對應的腳本。也就是說在渲染script標籤之後的文件之前，不等待後續載入的文件元素，讀到就開始載入和執行，此舉會阻塞後續文件的載入；</p> <p>2.<script async src ="example.js"></script>
有了async屬性，表示後續文件的載入和渲染與js腳本的載入和執行是並行進行的，即異步執行；

3.
有了defer屬性，載入後續文件的過程和js腳本的載入(此時僅載入不執行)是並行進行的(非同步)，js腳本的執行需要等到文件所有元素解析完成之後，DOMContentLoaded事件觸發執行之前。

三、為什麼通常建議將 CSS 放置在 之間，而將 JS