网页是一个没法单独存在的东西，它须要一个载体—浏览器，不管是pc端、手机端仍是其余。因此想要使用网页基本都有一个相同的流程，在浏览器输入网址、dns解析、下载html文件、下载css文件、下载js文件等等，若是没有网络的话，网页基本上就玩完了（没法使用）。
对比一下客户端，没有这么多繁琐的流程，点击一个按钮，一个新页面就弹出了并加载本地内容（固然你要在点击时处理一堆耗时操做当我没说），没有网络也能玩，虽然只是静态的内容，至少没有网页加载时缓慢的进度条。
虽说对比起客户端，web端在加载性能这方面有一些自然的弱势，不过web端也有个巨大的优点—动态性，web端能够随时更新，而客户端就得发个版本，等待各大应用商店及苹果爸爸的审核。你说你有热更新？android可能还好，苹果嘛，就得看苹果爸爸的脸色了，说不定就给你下架了。
固然咱们也不能忘了web和原生的结合的hybrid-app了，利用二者的优点，尽可能知足性能和动态性，不过要作好这一点不太容易，须要权衡各方面的状况。最后还有咱们的react-native和weex了，没怎么实践过，只能等待真正上手的时候再说。话说react-native啥时候才到1.0版本？css
前面说了这么多，再聊聊前端性能该如何优化。性能优化的目的主要也是为了给用户更好的体验，那怎样用户体验才会好呢？那就是网页加载速度快，最好是可以点击就能迅速加载一个网页，用户不须要等待，也就是作到秒开（固然秒开也是相对意义上的概念）。网页要想加载速度快，我我的的理解主要是从四个方面解决：减小网络请求数量、减少单个请求大小、处理请求加载的顺序、缓存。html
请求个数无疑是影响加载速度的关键之一，固然能够并发下载多个文件来解决一部分问题，但浏览器通常有并发的限制（能够经过不一样域名解决部分问题），同时每一个请求创建链接也须要时间，dns解析也须要时间，因此作到尽可能减小网络请求个数。前端
文件大小也是加载速度的重要因素，下载一个20k的文件确定比200k的文件要快，同时在网络不稳定的状况下，加载速度的差距会更加明显。react
处理请求加载顺序本质上对性能的提高帮助不是很大，可是给用户带来的体验是不同的，好比先加载出了简单的html界面样式，再处理交互等内容和等待全部样式交互内容下载完再展现给用户，前者的用户体验明显更好。android
缓存能够解决用户第二次访问的加载性能问题，在有缓存的状况下，页面加载的速度会提高不少。固然这边也涉及到了不少问题，好比缓存时间、缓存过时、缓存过时、缓存失败、甚至有些文件是否应该缓存等等。这能够单独写一篇文章，这么就不过多的写了。web
好比说使用cdn、减小cookie、减小404请求等等就不赘述了，不少文章也有介绍，能够参考其余文章。react-native
最后还想说的一点是性能优化须要看场景，把握好一个度。好比减小网络请求个数就必定是正确的吗？我把100个js打包成一个js，文件数量明显大了不少，这样违背了第二个优化方向。再好比使用雪碧图、每次更新一个小图片就须要从新下载整张雪碧图，这也是一种资源的浪费。因此优化的时候尽量的针对使用场景和项目自己的状况进行优化。性能优化没有”银弹”，但永无止境。浏览器
over…缓存