巧妙解决js内容调用导致页面加载慢的问题

 

很多内容管理系统、论坛系统都提供了js内容调用的功能。其实，采取js的方式来调用内容是最不科学的一种方法，不但影响SEO，而且会导致页面加载的时候有“卡”的现象。虽然如此，但很多时候却不得不用这种方法。于是，只好想办法解决这个“卡”的问题了。
一、现象分析
先举个例子来说明一下现象。例如：的首页为了显示论坛的内容，就采取了js调用的方式。由于论坛采用的是dvbbs的程序，这个程序在后台就提供了js首页调用的功能。在论坛后台设置好调用后，就可以把生成的js调用代码插入到网站的首页相应位置。铁路门户网目前的首页一共有三处采取了js调用的方式调用了论坛的内容。分别为：招聘信息、铁路论文、铁路资料三个区域。由于首页是静态生成的，加载起来还算比较快。但是在浏览的时候还是发现，每当页面加载到上述三个区域的时候，网页就会“卡”一下，有时候在网站系统繁忙的时候甚至会卡住不动，导致后面的静态内容显示不出来，比较影响用户体验。
二、解决方案
那么，如何解决这个问题呢？当然最直接的办法是不用js调用，改用别的方式，但这样一来，需要修改大量的程序。退其次，能否让页面的静态内容先加载完，再来处理这些js调用呢？这样的话，起码不会因为个别的js调用加载缓慢而影响整个页面的加载。答案的肯定的。于是，这里先明确一下思路：让js调用最后加载。具体做法如下：
1、在首页模板的最后面添加几个<span>，样式设置为display:none。每个<span>设置一个不同的id。如：<span style="display:none;" id="tmpjsnews"></span>
2、将首页模板中js内容调用区域的调用语句全部移到网页的最后面刚才新添加的<span>中。并将每个js内容调用区域的元素设置一个不同的id，这里假设设置id为“jsnews”，并在区域内写上“内容正在加载...”的字样。
3、在页面尾部新增加的<span>后面增加以下js语句：
<script type="text/javascript">
   document.getElementByIdx("jsnews").innerHTML=document.getElementByIdx("tmpjsnews").innerHTML;
</script>
以上语句，根据js调用的数量增加多条。其中，getElementById的id名要与前面设置的id相对应。完工。
三、原理说明
经以上修改后，页面的前部分全部变成了静态内容。原先js调用的区域全部变成了“内容正在加载...”几个简单的汉字。因此，可以很顺利地加载，不会卡。只有等到页面加载至最后面添加的几个隐藏<span>的时候，才可能会卡住，但这个时候，整个页面其他的内容都加载完毕了，因此即使卡住也影响不大。等<span>中的js调用加载完毕后，最后面增加的js语句就会自动将<span>中的内容复制到真正需要显示这些调用内容的区域，并替换掉“内容正在加载...”的字样。于是整个页面就加载完成了。