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源码。这是大致的思维，具体做法可以参考：

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

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

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

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

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