前端面试：性能优化

前端性能优化比较常见的一些点： 

1. 使用缓存（最重要的一点），cookie与WebStorage
2. 减少http请求
3. 文件压缩合并：html，js，css压缩。删除一些无用代码：注释
4. 图片无损压缩，安卓下可以使用webp格式图片
5. 使用字体图标，矢量图svg，雪碧图，base64
6. js文件一般放在页面底部，若放在head里一般要在script标签上加 async 或者 defer 进行异步加载
7. 懒加载，预加载
8. 服务端渲染（SSR），增强页面的呈现速度，同时能增强SEO，但页面切换不如单页应用（SPA）流畅
9. 减少dom操作，规避重绘与回流；更改css属性较多时，以类名的形式操作dom；有复杂动画的DOM，可以考虑使其脱离文档流，从而减少重绘与回流的范围
10. 事件的节流与防抖
11. 事件委托。利用事件冒泡，通过指定一个事件处理程序，来管理某一类型的所有事件。这样能减少页面消耗的内存
12. 启用DNS预解析。遇到网页中的超链接，DNS prefetching从中提取域名并将其解析为IP地址，这些工作在用户浏览网页时，使用最少的CPU和网络在后台进行解析
13. 减少不必要的 DOM 节点，DOM 树的深度越浅，浏览器解析越快

面试中我们能说出以上几点就很不错了。

 

vue开发中的内存泄露问题：

（1）监听在window/body等事件没有解绑

（2）绑在EventBus的事件没有解绑

（3）Vuex的$store watch了之后没有unwatch

（4）模块形成的闭包内部变量使用完后没有置成null

（5）使用第三方库创建，没有调用正确的销毁函数

 

文章推荐：

前端页面卡顿、也许是DOM操作惹的祸？

前端优化DNS预解析

一个Vue页面的内存泄露分析

JavaScript 启动性能瓶颈分析与解决方案