我本身碰到的前端面試題

1、網站前端網頁性能優化原則（雅虎14條軍規）

       1. 減小HTTP請求次數 

       2. 使用CDN(Content Delivery Network，內容分發網絡) 

       3. 增長Expires Header 

       4. 壓縮頁面元素(Accept-Encoding: gzip,deflate.) 

       5. 把樣式表(css)放在頭上 

       6. 把腳本文件(js)放在底部 

       7. 避免CSS表達式 

       8. 把JavaScript和CSS放到外部文件中 

       9. 減小DNS查詢次數 

       10. 最小化JavaScript代碼(#JSMin和YUI Compressor) 

       11. 避免重定向 

       12. 刪除重複的腳本文件 

       13. 配置ETags 

       14. 緩存Ajax

       部份內容儘管老是默認使用在項目裏，或者瀏覽器自帶，但真回答起來就記不住了，就是這麼坑~

2、點擊穿透原理及解決

www.cnblogs.com/shytong/p/5…

www.cnblogs.com/camille666/…

移動端項目作得很是少，沒有碰到過點擊穿透的問題，一臉懵逼。也不知道我查到的是否是面試官想要的答案，總之，又漲姿式了。

點擊穿透事件實際上是tap的事件穿透，它是zepto的一個bug，主要出如今移動端。

<div class="container">
    <div id="underLayer">底層元素</div>
    <div id="popupLayer">
        <div class="layer-title">彈出層</div>
        <div class="layer-action">
            <button class="btn" id="closePopup">關閉</button>
        </div>
    </div>
</div>
<div id="bgMask"></div><script src="zepto.js"></script>
<script>
    $('#closePopup').on('tap', function(e){
        $('#popupLayer').hide();
        $('#bgMask').hide();
    });

    $('#underLayer').on('click', function(){
        alert('underLayer clicked');
    });
</script>

複製代碼

表現：當頁面與它上層彈窗都綁定了點擊事件，其中彈窗綁定 tap 事件，頁面綁定 click 事件，觸發彈窗的tap事件時彈窗隱藏，頁面的click事件會觸發。

原理：移動端的click事件能夠拆解爲：touchstart -> touchmove -> touchend -> click。瀏覽器在 touchend 以後會等待約 300ms ，若是沒有 tap 行爲，則觸發 click 事件。 而瀏覽器等待約 300ms 的緣由是，判斷用戶是不是雙擊（double tap）行爲，雙擊過程當中就不適合觸發 click 事件了。 由此能夠看出 click 事件觸發表明一輪觸摸事件的結束。click事件觸發時，彈窗遮罩已經消失。

處理：一、只用touch事件 二、延遲（彈窗遮罩）消失事件 三、fastclick 四、只用click事件 五、pointer-events（比較麻煩且有缺陷，不建議使用）六、觸摸結束 touchend 事件觸發時，preventDefault()  （部分瀏覽器不支持）七、禁止頁面縮放 （經過設置meta標籤，能夠禁止頁面縮放，部分瀏覽器再也不須要等待 300ms，致使點擊穿透。點擊事件仍然會觸發，但相對較快，因此 click 事件從某種意義上來講能夠取代點擊事件， 而代價是犧牲少數用戶（click 事件觸發仍然較慢）的體驗。）

3、我最頭疼的面試問題，想知道你們的答案

你作過的項目中，碰到的難點講一講，它難在哪裏，你是怎麼解決的，用了哪些技術，原理是什麼？

你作過的項目中，有哪塊讓你印象深入/最滿意/是亮點，你是怎麼實現的？

（項目中實在沒有能夠稱道的難點或亮點，我該怎麼回答？）