前端性能优化这一方面几乎成为现在面试的必考题。性能优化的目的在于让页面加载的速度更快，用户操作响应更及时，为用户带来更好的体验。前端性能优化其实涉及到的方面有很多，
我们来一起探讨一下常见的性能优化有哪些呢？
1. 减少http请求。
这个策略是最重要的也是最有效的。页面的加载最耗时的往往不是js的加载和执行，而是每次与后端服务器建立链接、发送数据、等待响应、接收数据这一过程，也就是http的三次握手。且浏览器对同一域名下并发请求数量都是有限制的，超过就会阻塞，因此会增加用户的等待时间。
如何减少http请求？
- 资源合并压缩，并在服务端设置gzip
- 尽可能将外部的脚本和样式合并、使用css 精灵图or base64、svg
- 图片懒加载、按需加载
- 合理利用http缓存
2. 脚本执行优化
- <script>写在<body>下面或者异步方式加载脚本
来一个小插曲：你知道异步加载脚本 defer和async的区别吗？
答案：
设置了defer的脚本加载与文档的解析渲染是并行执行（异步）但是脚本的执行要在文档解析渲染完成之后，DOMContentLoaded事件调用之前完成。
设置了async的脚本加载执行与文档的解析渲染是并行执行（异步）
- css尽量避免使用@import方式引入
@import会在页面全部加载完成之后导入
- 最小化回流和重绘
避免不必要的DOM操作
合并多次对DOM和样式的修改、尽量使用css属性简写
尽量避免使用table元素，table元素的回流重绘成本要高于div
缓存layout属性值（e.g. const offsetLeft = el.offsetLeft）因为layout这些属性值需要即时计算得到，浏览器为了获取到这些值会进行回流
- 避免img标签使用空的src：<img src="" />
当img的src属性是空字符串("")的时候，浏览器会认为是一个缺省值，值的内容为当前网页的路径，会用当前路径进行再一次载入并把其内容作为图像的二进制内容并试图展示。
如果为了编程需要，希望指定一个img的src为空值，具体图片路径未来再填入，那正确的方法如下。这样可以避免网页被重复载入。
<img />
- 尽量减少闭包的使用，避免内存泄露
- js代码避免“死循环”和多层嵌套
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
