页面加载优化的各种手段

摘要:有研究表明,人对于一个页面从打开到显示的忍耐时间是200ms,如果打开的时间过长,很多人都会对这个页面失去耐心。
很多时候打开一个页面我们最希望页面的内容立刻就呈现出来,当然这是最理想的状态,但由于带宽、系统或者网站的原因,大多数情况下一个页面不可能立刻就呈现所有的内容。即使不能立刻看到所有的页面内容,退一步来说,起码点击打开一个页面后,还是希望页面能出现一个大概的轮廓,而不是一片空白以为网络断了。
有研究表明,人对于一个页面从打开到显示的忍耐时间是200ms,如果打开的时间过长,很多人都会对这个页面失去耐心。所以作为一个开发者,我们有必要想方设法提高页面加载的速度,对页面加载做一些优化。
下面以我的网站朗度云wolfbe.com为例子,介绍在优化过程中所有到的各种手段。

1、静态化页面
研究表明,在相同带宽、相同的服务器资源情况下,静态的页面显示的速度会比动态页面显示的速度要快,因为静态页面不用经过后端服务器的解析,可以直接返回。而且现在很多的浏览器会把静态的页面当作一种资源,在本地缓存起来,即在同一浏览器多次打开同一个页面,有可能显示的是浏览器本地的副本。

2、异步加载图片
图片的加载是一个费带宽和费时间的过程,如果在页面中使用<img src="....jpg">这种方式来加载图片,很可能因为图片加载慢而阻塞页面其它资源的加载,从而导致页面显示慢。我们可以通过使用js来控制图片的加载时间,让所有的图片等到页面元素加载完成后再加载。如果你不会写这样的js,现在很多这样的js插件可以实现异步加载图片的效果,朗度云使用了jquery的一个延时异步加载图片的插件,jquery.lazyload.min.js,有需要的可以参考一下。

3、所有的js文件放在页面最后
为什么把js放在页面的最后就可以优化页面显示的速度呢?其实,因为加载js的过程也是解析执行js的过程,解析js也是一个比较耗时的工作,如果把js放在页面的最后,可以保证在页面元素加载完毕才去执行js的代码,这样执行js前页面已经展示出来了,而不会因为执行js而阻塞页面的展示,不会出现空白页面的情况。

4、压缩加载的资源
请求一个页面时,其实不单单是请求这个页面的html代码,还有css、js、图片等资源。压缩css、js、图片可以减少资源占用的带宽,可以提高这些资源的加载速度,从而提高页面的展示速度。朗度云网就把所有的css、js文件都做了压缩,从而减少这些文件的大小,压缩这些文件还有另外一个好处,这样其他人即使拿到这些代码也不那么容易读懂,可以在一定程度上保护自己的代码;里面用到的图片也尽可能使用一些软件做了压缩,尽量不使用大的图片资源。

5、使用CDN
当然使用CDN需要向CDN厂商交一定的费用,不过CDN可以大幅提升静态资源的获取速度,因为它可以把静态资源放在CDN部署的各个地方,从离请求方最近的服务器返回资源,同时可以针对性地对资源做缓存,从而提高响应的速度。

6、不同的资源使用不同的域名
比如对于css使用res1.wolfbe.com,对于js使用res2.wolfbe.com。使用多个域名的好处是什么呢?一个域名请求相当于一条与服务器的通道,多个域名相当于用多条通道同时与服务器交流,这样可以最大限度地并行加载资源,提高资源的加载速度,从而加快页面的展示速度。朗度云对于css使用的是static.wolfbe.com,对于图片使用了res.image.wolfbe.com,原理也是为了并行加载资源。


版权说明:如无特殊说明,文章均为本站原创,如需转载请注明出处

本文标题:页面加载优化的各种手段

本文地址:http://www.wolfbe.com/detail/201609/350.html

本文标签: 页面优化 js css

相关文章

感谢您的支持,朗度云将继续前行

扫码打赏,金额随意

温馨提醒:打赏一旦完成,金额无法退还,请谨慎操作!

扫二维码 我要反馈 回到顶部