让你的网页访问更快的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

三、最后

以上算是近期研究的记录,欢迎大家补充。

![image.png](https://upload-images.jianshu.io/upload_images/8179604-1050a6d2280fec43.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


Coding in the rain, coding anywhere, coding my life.

懂一些前端,懂一些后端,是程序猿,也是产品狗,关注大数据、关注人工智能、关注一切有意思的东西。

我是raincoding,喜欢就关注我吧。


你可能感兴趣的:(让你的网页访问更快的N种方式,前端必须掌握)