我本身碰到的前端面试题

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、我最头疼的面试问题，想知道你们的答案

你作过的项目中，碰到的难点讲一讲，它难在哪里，你是怎么解决的，用了哪些技术，原理是什么？

你作过的项目中，有哪块让你印象深入/最满意/是亮点，你是怎么实现的？

（项目中实在没有能够称道的难点或亮点，我该怎么回答？）