当前位置: 秋叶网络博客 网络技术 ◊ [网站优化]Js异步加载资源减少请求

[网站优化]Js异步加载资源减少请求

作者:秋了秋 发表时间:2014年12月21日

js的功能非常强大,众所周知,网站中大部分的特效功能都可以通过js实现,没有它做不到的只有你想不到。除了附加功能之外,很少人会知道它也是优化网站的一大利器,甚至在seo中也扮演着非常重要的角色。

有的人说蜘蛛不是识别不了js里面的内容吗?正是因为它识别不了所以它可以在seo中游刃有余,网站中一些不太相关的内容可以放到js中,然后通过html调用js,原本几十行的html代码就可以瞬间缩短为一行代码,html中只放网站的主要内容,这样对增加关键词密度也有很大的帮助。

通过js调用无关内容虽然html代码简化了不少,但是它的实际请求内容是没有改变的,也即是网站的整体加载速度依旧如此,请求数也相当。那么如何减小资源请求,缩小各文件的大小,提升网站的加载速度呢?这就是异步加载的核心价值所在。

所谓异步加载就是当我们打开一个网页的时候,只是把一些必要的内容下载下来浏览,对于一些暂且对浏览无太大价值的资源延迟加载或按需加载,而本文讲述的是按需加载。网站中的一些模块的代码,比如评论的js或者评论的表情,如果全部一次性加载出来,那么首页的代码就会非常多,请求非常耗时。就拿评论的js或者评论的表情来举例吧。

wordpress的评论js可以通过php语言判断:<?php if ( is_singular() ){ ?>加载js或者评论表情<?php } ?>,这样就可以只在文章中加载js或者评论表情,而其它页面上不加载,这样就在首页或者其它页面就省了许多请求数,然而文章页并没有少请求数。所以我们可以通过js来控制,页面中先不加载评论的js或者评论的表情,当页面下载完成后,当我们点击某个东西的时候,然后在加载评论的js或者评论的表情,实现不刷新页面增加html源码。这是大致的思维,具体做法可以参考:

jQuery(document).ready(function($){ $('#rss').one('click',function() {$('#footer').append('<script src="http://www.mizuiren.com/js/commet.js"></script>')}); });

把这一段代码放在必须加载的js文档中,通过append插入代码,这段js代码的含义是:在页面中的#rss层被点击后,在页面中寻找#footer层,然后在#footer层里面插入这段代码<script src="http://www.mizuiren.com/js/commet.js"></script>,也就是调用一个js文档。只有当我们认为触发了click点击事件后才会去加载,否则是不加载的。

同样的类似效果我们也可以通过以下代码来做:

jQuery(document).ready(function($){ $('#rss').one('click',function() {$('#footer').load('http://www.mizuiren.com/wuover.php');}); });

具体的效果和作用差别不大,但又是有差别的,前面那个是在#footer中插入html代码,而后者是在#footer中加载一个文件,前面的是不会改变#footer里面的内容,而后者会清空#footer里面的内容然后再把文档内容写进去。所以后者必须要加一个空盒子备用,比如:<div id="footer"></div>。

具体效果可以看秋叶网络博客左下角的播放器,其并没有完整的播放器框架,那个箭头只是一个div层而已,当你点击它的时候,这时候才会把完整的播放器框架代码插进去,所以点击它后会会有延迟效果。再去看看文章页面,默认是没有加载评论表情的,当你点击输入框的时候,它才开始加载评论表情,所以你会看到表情一个一个地显示出来。每个表情就是一次请求,如果浏览者不打算评论的话,他也就不需要加载这些表情了。对于页面打开速度或者代码精简都起到了立竿见影的效果。

性能评分

减少了请求数,对服务器的负担也就大大折扣了,特别是当访问流量较大的时候。除了减轻服务器负担,对seo也有很大帮助,如果一个页面尺寸过于大的话,对蜘蛛的抓取会有困难,同时网站的速度对seo也是有影响的,少加载一个文件就多一次优胜的机会。上图是秋叶网络博客经过异步加载优化后的性能评分,未进行优化的时候性能评分为72%,整整提高了11%。

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/221.html
目录: 网络技术 | 标签: 网站优化, 异步加载 | 8518次阅读