常见的前端性能优化手段都有哪些？都有多大收益？

常见的前端性能优化手段都有多大收益？有啥数据可以参考吗？
经常见到各种前端性能优化的方法，比如合并JS、开启Keep Alive之类，但是这些方法到底都有多大收益呢？有哪些数据可以参考？

李彦峰 · 2018-10-12 00:06:07

优化手段用上了以后，我们还需要知道这项优化具体优化了多少，那么这时候就用到了这个工具pod4g/hiper
欢迎大家使用和star

Gordon Choi · 2018-10-12 00:06:06

要优化一个网站的加载加速，可以使用包括以下的技巧：

1. 肯定尽可能减少DNS查询的次数
2. 部署浏览器缓存
3. 启用文件压缩

现在的网站都有大量的CSS和JavaScript，所以可以对其做点事情，比如：

4. 压缩一些可压缩的CSS文件和JavaScript文件
5. 合并一些CSS文件和JavaScript文件
6. 优化CSS和JavaScript的加载顺序

遇到有多个小的图标的时候：

7. 使用CSS sprites

其实还可以在服务器端做一些优化，比如：

8. 对网站的服务器做优化
9. 升级主机

以下的小错误（看来很小事情），其实有时候也可以修复掉的：

10. 修复损坏的HTTP请求
11. 避免太频繁的重定向（甚至多次不必要的重定向）

还有外部的处理：

12. 可以通过使用CDN加速。

详细说明：
移动网站速度优化技巧 - 移动网站性能技术白皮书

测试网页加载加速的工具（一定需要有工具的帮助）：
网页加载速度测试工具 - 移动网站性能技术白皮书

李秀莲 · 2018-10-12 00:06:05

1：较少代码量（编写可复用的组件、封装高频函数），提高加载速度
2：减少http请求（精灵图、合并js css代码（打包工具可以帮我））
3：利用缓存技术304
4：像现在利用的webpack模块化打包工具（亮点功能 1：分块打包、按需加载 2：提取公共部分的代码，利用缓存 3：提取css部分的带代码，这样可以并行加载（域名拆分技术）资料显示3~5个域名最为高效）
5：压缩图片大小、GZip、keepalive

AlenQI · 2018-10-12 00:06:04

随便说一点：静态资源优化的意义，你在网速慢的情况下，感受应该是明显的。

LEWIS · 2018-10-12 00:06:03

怎么没人讲使用CDN？下面我再说几个前端性能优化的方法：

code splitting，必要时结合redis，优化首屏加载速度
尽量少操作dom
图片的懒加载
做一些缓存
提前加载一些资源
与后端进行合理配合
最后在附一个

雅虎前端优化35条规则翻译 · Issue #1 · creeperyang/blog

张帆 · 2018-10-12 00:06:02

蟹邀~
试试HTTP/2？不过，还是需要一款性能评估工具做判断。

卖萌象 · 2018-10-12 00:06:01

高性能网站开发，介绍了14种方案，虽然书有点老，但还是有用的。

toukang · 2018-10-12 00:06:00

除了上面说的工程化的合并http,gzip,keep-alive,现代移动端web中由于webview缓存失效，用户刷新304，以及频繁业务迭代造成的代码更新造成了移动端的缓存是个很值得优化的点。对此美团,百度,滴滴等互联网公司采用了LocalStorage－－对就是那个用来存本地数据的玩意～结合工程化手段替代webview本身文件缓存机制的优化。大概原理就是所有文件缓存利用js写入LocalStorage进行控制，这样即使用户刷新也不会有304请求。多页面间有模块复用的话，利用js控制可以将缓存细化到AMD模块级别，达到模块级别的共享复用，最极限的节省带宽和提高加载速度。我们的业务已经全线铺开了这套工程化方案。
具体的解决方案我在我们的专栏中发了文章，移动端性能想优化到极致的同学可以移步这里--LsLoader 移动WEB工程化缓存方案 - 美团外卖前端技术栈 - 知乎专栏. 如果有好的IDEA可以来专栏交流。

世家 · 2018-10-12 00:05:59

我来答下吧，要说错了，请留言纠正。现在前端懂性能优化，学性能优化的不多了。
前端性能优化分为两块。第一，加载优化，主要指首屏渲染。策略主要是。。。缓存，各种各样的缓存，以减少网络传输。不过这里面细节很多很多，不用记所谓的雅虎25条规则啥的，假如你知道了浏览器的工作方式了，就一切都明白了。也明白了为什么要用webpack打包，完了还要拆分，还要抽css，还要异步加载。。。不过，说句实话，首屏渲染优化的大头并不在前端。这玩意儿，需要整个产品线通力合作，而我们前端肯定不是性能最短的那块板。。。
第二，关键帧渲染优化，主要用于交互动画。这里面涉及浏览器渲染页面的流程和原理。细节也很多。主要得会用chrome devtool工具里面的performance。
所以说，要学性能优化，关键并不在于知道有那些常见的性能优化手段，而是熟知你所要优化的浏览器的渲染原理，熟用性能检测的工具。
而这些，无异chrome浏览器做的最好。。。

吴佐衍 · 2018-10-12 00:05:58

根据最近半年淘宝首页（PC）的性能优化经验，补充以下四点，有兴趣同学欢迎一起交流讨论：
1、优化前需要先确定好性能指标，同时需要建立相应的性能数据跟踪平台；有了这个你就知道各种方案实际效果如何，但是性能数据需要在上线一段时间后才会稳定。任何没有数据跟踪的性能优化都是耍流氓。
2、需要关注 HTTP/2 下的性能优化。
（1）在 HTTP/2 场景下由于支持多路复用，域名拆分不再适用，需要做域名收敛；
（2）通过 A/BTest 表明，在 HTTP/2 场景下请求合并依然是必要的。
3、根据自己的业务特点按需加载，重点关注图片的优化
4、关注最新技术，例如， Service Worker

常见的前端性能优化手段都有哪些？都有多大收益？

10 个回复

浏览过的版块