前端筆試題

被要求出一份筆試題更新公司面試的筆試卷子，於是做了一份適合公司的簡單的筆試試卷。

HTML5

1. 頁面導入樣式時，使用link和@import有什麼區別？

   • link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用於加載CSS;
   • 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
   • import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
   • link支持使用js控制DOM去改變樣式，而@import不支持;

2. HTML5的存儲方案，簡要介紹他們的區別。

   • cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
   • cookie數據始終在同源的http請求中攜帶（即使不需要），會在瀏覽器和服務器間來回傳遞。
   • 存儲大小：
     
     • cookie數據大小不能超過4k。
     • sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
   • 有期時間：
     
     • localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
     • sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除；
     • cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉；

3. viewport的常見設置有哪些？

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

CSS

1. 介紹一下CSS的盒子模型。

   • IE盒模型和標準盒模型
   • 區別：IE的content部分把 border 和 padding計算了進去;

2. 簡要介紹一下css3的新特性。

   • 線性漸變（gradient）；旋轉（transform）；縮放,定位,傾斜,動畫,多背景、例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation

JS

1. js基本數據類型？
   
   • Undefined、Null、Boolean、Number、String、Symbol
2. 冒泡和捕獲的事件機制區別？如何阻止冒泡？
   
   • IE的事件流叫做事件冒泡。即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然後逐級向上傳播到較爲不具體的節點（文檔）。所有現代瀏覽器都支持事件冒泡，並且會將事件一直冒泡到window對象。
   • IE中cancelBubble的值設置爲true，其他調用stopPropagation()；
3. 瀏覽器有哪些默認事件，如何阻止默認事件？
   
   • 右鍵菜單、表單提交跳轉、a連接的跳轉
   • return false;event.preventDefault();

4. 那些操作會造成內存泄漏？

   • 閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

5. 以下執行結果是

   setTimeout(function() {
     console.log(1)
   }, 0);
   new Promise(function executor(resolve) {
     console.log(2);
     for( var i=0 ; i<10000 ; i++ ) {
       i == 9999 && resolve();
     }
     console.log(3);
   }).then(function() {
     console.log(4);
   });
   console.log(5);

   結果：2 3 5 4 1

   var a = 0, b = 0, c = 0;
   for ( var i = 1; i <= 3; i++) { 
       var i2 = i; 
       (function() {
           var i3 = i; 
           setTimeout(function() {
               a += i
               b += i2;
               c += i3; 
          }, 1);
       })();
   }
   setTimeout(function() {
       console.log(a, b, c);
   }, 100);

   結果：12 9 6

性能優化

1. 常見的性能優化方法。