一、网站前端网页性能优化原则（雅虎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
部分内容尽管总是默认使用在项目里，或者浏览器自带，但真回答起来就记不住了，就是这么坑~
二、点击穿透原理及解决
移动端项目做得非常少，没有碰到过点击穿透的问题，一脸懵逼。也不知道我查到的是不是面试官想要的答案，总之，又涨姿势了。
点击穿透事件其实是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事件触发时，弹窗遮罩已经消失。
处理：1、只用touch事件 2、延迟（弹窗遮罩）消失事件 3、fastclick 4、只用click事件 5、pointer-events（比较麻烦且有缺陷，不建议使用）6、触摸结束 touchend 事件触发时，preventDefault() （部分浏览器不支持）7、禁止页面缩放 （通过设置meta标签，可以禁止页面缩放，部分浏览器不再需要等待 300ms，导致点击穿透。点击事件仍然会触发，但相对较快，所以 click 事件从某种意义上来说可以取代点击事件， 而代价是牺牲少数用户（click 事件触发仍然较慢）的体验。）
三、我最头疼的面试问题，想知道大家的答案
你做过的项目中，碰到的难点讲一讲，它难在哪里，你是怎么解决的，用了哪些技术，原理是什么？
你做过的项目中，有哪块让你印象深刻/最满意/是亮点，你是怎么实现的？
（项目中实在没有可以称道的难点或亮点，我该怎么回答？）
转播
