【2019经典面试题解答】前端性能优化&闭包（解析和举例）

这一篇开始总结2019年春季前端面试的高频题型。会以题型+问法/考点+参考答案的形式呈现，若有错漏，但愿诸位大佬及时斧正，以正视听。

（备注：本人非应届生，这些面试题应该是针对至少一年工做经验的）

一.前端性能优化

这个问题出现频率最高，几乎每场面试都问。

问法：

• 你所知道的前端性能优化有哪些
• 你在工做中作过的性能优化
• 你这样作不会影响性能吗
• 这个有没有提升性能的写法
• 请从性能方面回答这个问题
• ……

显而易见，前端性能优化愈来愈受重视，目前各类流行技术的更新迭代也是围绕性能而进行。然而这个问题的范围太广了，我面试的时候回答得也不太好，我在网上查了不少资料，分别从如下几个方面给出参考答案：

1.减小HTTP请求（这个优化是最明显的）

1) 图片地图，容许在一个图片上关联多个URL，目标URL取决于用户单击的图片上的位置。
2) 雪碧图
3) 合并JS和CSS文件
4) 减小http请求头
5）配置多个域名和CDN加速
6）使用缓存（HTTP缓存、浏览器缓存、应用缓存）
7）优化cookie
复制代码

参考：segmentfault.com/a/119000000…

2.HTML

1）减小DOM元素数量:页面中存在大量DOM元素,会致使javascript遍历DOM的效率变慢。尤为要尽可能少用iframe，它是耗能最大的dom元素，并且会阻塞onload事件
2）使用css+div代替table布局，去掉格式化控制标签如：strong，b，i等，使用css控制
3）减小没必要要的嵌套，尽可能扁平化，由于当浏览器编译器遇到一个标签时就开始寻找它的结束标签，直到它匹配上才能显示它的内容，因此当嵌套不少时打开页面就会特别慢。
复制代码

更多更全HTML性能优化参考：www.cnblogs.com/zzhui/p/504…

3.CSS

关键字： 选择器，高消耗的样式属性，继承，层级，压缩……

www.cnblogs.com/heroljy/p/9…

baijiahao.baidu.com/s?id=160325…

tips: 在回答这两个方面的时候势必会提到 重排和重绘，你的每一个回答都有多是面试官下一个问你的问题。若是当时真的想不起，那就避开，选几个在实际工做中经常使用的回答，若是你全篇背诵那就有点假了。

3.JS

1）减小全局变量的查找。由于全局变量在做用域链的最顶端，频繁查找很耗性能。

举个栗子：
复制代码

var globalVar = 1; 
function myCallback(info){ 
    for( var i = 100000; i--;){ 
        globalVar += i; 
        //每次访问 globalVar 都须要查找到做用域链最顶端，本例中须要访问 100000 次 
    }
}
复制代码

优化：
复制代码

var globalVar = 1; 
function myCallback(info){
   var localVar = globalVar; 
   for( var i = 100000; i--;){ 
       localVar += i; 
       //访问局部变量是最快的
   } 
}
复制代码

2）慎用 with，定时器

3）优化循环

4）少操做DOM

5）字符串拼接

更多更全（我就不作搬运工了）：

www.cnblogs.com/cnblogs-jcy…

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

blog.csdn.net/lululul123/…

www.cnblogs.com/MarcoHan/p/…

4.服务器优化

1)CDN：把网站内容分散到多个、处于不一样地域位置的服务器上能够加快下载速度。
2)GZIP压缩
3)设置ETag：ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
4)提早刷新缓冲区
复制代码

5.用户体验

1）预加载，懒加载
2）浏览器缓存，应用缓存
3）细节设计（全选/反全选/自动补全……全部你能想到的）
复制代码

说明：关于前端性能优化我这里查阅和搜集的资料远远不够，我这里提到的也不全，你们自行搜集吧（哪天我搜集全了更新后会通知你们，谢谢）

附上一位阿里前端的回答：当面试官问你如何进行性能优化时，你该这么回答(一)

二.闭包

考点：

什么是闭包

闭包的做用（好处坏处，使用场景）

手写一个闭包

定义（我所认为的）： 闭包是指在函数外却可以读取函数内部变量的一种函数现象,它是链接函数内外部的桥梁。

好处: 读取函数内部的变量,而且能让变量的值始终保持在内存中，函数执行完毕后不会被释放

坏处： 常驻内存中，会增大内存的使用量，使用不当会形成内存泄露；另外js对闭包的处理速度会低于普通函数，过分使用闭包也会下降脚本性能。

解决办法： 在退出函数以前，将不使用的局部变量所有删除

使用场景/手写闭包: 白话解释:在一个func对象中,有一个/多个属性是函数类型的，函数类型们调用了该func的内部变量并return；在func外部调用了这个func的函数属性后，成功获取到了这个func的内部变量

双手端上来一个栗子：

function fn(){
    var status = '';
    return {
        Arrive:function(){
            status = '快递已签收';
        },
        Lost:function(){
            status = '快递已丢件';
        },
        getStatus:function(){
            return status;
        }
    }
}
var shunfeng = fn();
shunfeng.Arrive();
console.log(shunfeng.getStatus());//快递已签收
shunfeng.Lost();
console.log(shunfeng.getStatus());//快递已丢件
var shunfeng2 = fn();
console.log(shunfeng2.getStatus());//快递已丢件
复制代码

再一次调用fn，会发现快递的状态仍旧是'快递已丢件'而并无被初始化为空字符串，这就是闭包的实际使用场景，即：我想保留一种惟一状态，即便函数执行完毕后仍然存在。

闭包的使用智者见智，我举的例子比较初级，你们能够本身多动手试试。

好怕我误导大家，这里是阮一峰老师的闭包解读：学习Javascript闭包（Closure)

最后：

好累啊，今天先写到这里，明天会继续更新，毕竟手里还有好多题目要分享呢~

新鲜出炉面试题，欢迎移步阅读：程序媛面试之高频题型汇总(二)

若是大佬们发现有错误的地方必定要及时指出来，我会在第一时间改正，以避免误导他人，谢谢~