让你的网页访问更快的N种方式，前端必须掌握

思路

 

从前端的角度来说，访问时长=总大小/网速，所以要提高效率，要么减小需要传输的内容，要么提高网速。

 

对于企业内部应用来说，例如电网、电信、石油、石化等企业，很多应用在内网，可以通过提高内网带宽来提高网速。对于互联网来说，网速是不可控的，所以只能在传输内容上做文章。

 

总体上我觉得有两个思路：一是确实减小内容，二是将要加载的内容分为多次加载，也就是延迟加载。

 

一、确实减小内容

 

1、使用工具分析问题：首先你要知道你传输的内容有多大、请求多少次，利用chrome浏览器的调试工具（ff等也都有类似工具），选择网络选项卡、分析选项卡等，就可以清楚的看到，自己的网页有多少个请求，每次请求传了多少东西，花了多长时间，一共多长时间等等。然后就是从最耗时的地方下手。因为通常80%的问题只出在20%的东西身上。

 

2、系统图片：罪魁祸首一般是图片，因为js、css、html等毕竟是文本，只要你不瞎搞，一般问题不大。看看chrome的控制台，看网站下载了多少个图片，这些图片有多大。然后要做的就是压缩这些图片，减小图片的尺寸、降低图片的质量，等等。至于压缩到什么程度，这要看你自己的需求了，通常是越小越好，直到你觉得质量再低效果就无法接受了。

 

3、用户图片：上面的方法有个问题，只能搞定自己系统的图片，搞不定用户上传的图片，现在手机拍的照片动辄6-7MB，小的也有2MB以上，一个页面随便来几个就别想打开了。所以需要对用户上传的图片也进行压缩，推荐在用户上传时采用html的canvas组件进行压缩，传送门:http://www.cnblogs.com/xiao-yao/p/3608223.html，可以做到缩放图片尺寸，也可以压缩质量。看不懂的可以Q群38823977找我。

 

4、Javascript：图片问题解决了一般就差不多了。如果还达不到要求，就再进一步分析。通常来说下一个要解决的就是js。搞开发的都懒，喜欢搞一个公共页面，把可能需要的一堆js都放进去，光js就好几MB，建议不要这样搞。1）只引用自己需要的js。2）js做压缩，例如用jquery.min.js替换掉jquery.js。3）采用异步方式加载js，只有在你确实使用需要某个js的时候才加载，比如采用sea.js，传送门http://seajs.org/docs/

 

5、css sprite：又回到图片，主要针对css中用的那些小的背景图，比如你处理原型边框的小图，一般一个网站会有10-200个这样的小图，导致请求次数过多，网站变慢，这时就可以考虑把这一堆小图整合在一起，然后用css中背景图片定位的方式来显示。把200个请求变成一个请求，提高访问速度。这个技术除了加快你的访问速度，另一个好处是这些会在同一时间显示，看起来也舒畅一些。传送门：http://www.cnblogs.com/babycool/archive/2012/04/15/2450187.html

 

二、延迟加载

 

1、图片：老路子，首当其冲当然还是图片，如果你的图片已经压缩的差不多了，但是还是太大、太多，比如淘宝网，那就延迟加载这些图片。通常有两种方式，效果看淘宝即可。1）打开页面的时候，首屏内容用默认图片替代，加载后再替换。2）非首屏内容，我指的是下拉滚动条才能看到的内容，就先不加载，用户滚动时才加载。

 

2、html滚动加载，类似于微博，默认加载10条，滚动到下面才加载更多。

 

3、html5的prefetch技术。就是在你访问一个页面的时候，预判你要访问的下一个页面，于是提前加载，当你访问的时候，就会感觉瞬间加载出来了。有没有感觉很高大上，说白了就是浏览器闲着没事的时候帮你提前加载点东西。其实使用挺简单的，传送门http://www.jianshu.com/p/7f58ddfc1392

 

三、最后

 

以上算是近期研究的记录，欢迎大家补充。或者加入Q群38823977一起交流。