今天我们聊聊前端性能该如何优化。性能优化的目的主要也是为了给用户更好的体验，那怎样用户体验才会好呢？那就是网页加载速度快，最好是能够点击就能迅速加载一个网页，用户不需要等待，也就是做到秒开（当然秒开也是相对意义上的概念）。网页要想加载速度快，我个人的理解主要是从四个方面解决：减少网络请求数量、减小单个请求大小、处理请求加载的顺序、缓存。

一、减少网络请求数量

请求个数无疑是影响加载速度的关键之一，当然可以并发下载多个文件来解决一部分问题，但浏览器一般有并发的限制（可以通过不同域名解决部分问题），同时每个请求建立连接也需要时间，dns解析也需要时间，所以做到尽量减少网络请求个数。

• 1、多个js合并为1个js文件，css同理。
• 2、使用雪碧图
• 3、使用iconfont代替小图片
• 4、部分资源内联处理

二、减小单个请求大小

文件大小也是加载速度的重要因素，下载一个20k的文件肯定比200k的文件要快，同时在网络不稳定的情况下，加载速度的差距会更加明显。

• 1、压缩和混淆js
• 2、压缩css和html
• 3、开启gzip压缩
• 4、压缩图片
• 5、不同的屏幕尺寸使用不同大小的图片
• 6、去除重复代码

三、处理请求加载的顺序

处理请求加载顺序本质上对性能的提升帮助不是很大，但是给用户带来的体验是不一样的，比如先加载出了简单的html界面样式，再处理交互等内容和等待所有样式交互内容下载完再展示给用户，前者的用户体验明显更好。

• 1、css前置、js后置
• 2、列表图片或多图片使用lazyload
• 3、按需加载js

四、缓存

缓存可以解决用户第二次访问的加载性能问题，在有缓存的情况下，页面加载的速度会提升很多。当然这边也涉及到了很多问题，比如缓存时间、缓存过期、缓存过期、缓存失败、甚至有些文件是否应该缓存等等。这可以单独写一篇文章，这么就不过多的写了。

• 1、last-modified和etag
• 2、localstorage缓存
• 3、application cache

其他优化方式

比如说使用cdn、减少cookie、减少404请求等等就不赘述了，很多文章也有介绍，可以参考其他文章。

写到最后

最后还想说的一点是性能优化需要看场景，把握好一个度。比如减少网络请求个数就一定是正确的吗？我把100个js打包成一个js，文件数量明显大了很多，这样违背了第二个优化方向。再比如使用雪碧图、每次更新一个小图片就需要重新下载整张雪碧图，这也是一种资源的浪费。所以优化的时候尽可能的针对使用场景和项目本身的情况进行优化。性能优化没有”银弹”，但永无止境。

本文转载自网络