前端性能优化

网页是一个无法单独存在的东西，它需要一个载体—浏览器，无论是pc端、手机端还是其他。所以想要使用网页基本都有一个相同的流程，在浏览器输入网址、dns解析、下载html文件、下载css文件、下载js文件等等，如果没有网络的话，网页基本上就玩完了（无法使用）。
对比一下客户端，没有这么多繁琐的流程，点击一个按钮，一个新页面就弹出了并加载本地内容（当然你要在点击时处理一堆耗时操作当我没说），没有网络也能玩，虽然只是静态的内容，至少没有网页加载时缓慢的进度条。
虽然说对比起客户端，web端在加载性能这方面有一些天然的弱势，不过web端也有个巨大的优势—动态性，web端可以随时更新，而客户端就得发个版本，等待各大应用商店及苹果爸爸的审核。你说你有热更新？android可能还好，苹果嘛，就得看苹果爸爸的脸色了，说不定就给你下架了。
当然我们也不能忘了web和原生的结合的hybrid-app了，利用两者的优势，尽量满足性能和动态性，不过要做好这一点不太容易，需要权衡各方面的情况。最后还有我们的react-native和weex了，没怎么实践过，只能等待真正上手的时候再说。话说react-native啥时候才到1.0版本？

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

一、减少网络请求数量

请求个数无疑是影响加载速度的关键之一，当然可以并发下载多个文件来解决一部分问题，但浏览器一般有并发的限制（可以通过不同域名解决部分问题），同时每个请求建立连接也需要时间，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，文件数量明显大了很多，这样违背了第二个优化方向。再比如使用雪碧图、每次更新一个小图片就需要重新下载整张雪碧图，这也是一种资源的浪费。所以优化的时候尽可能的针对使用场景和项目本身的情况进行优化。性能优化没有”银弹”，但永无止境。

over…