1，前言

我们开发了一个专题系统，生成了JSON的数据格式，采用JQuery动态插入HTML中，在前期的使用中，没有太大的问题，效率还可以接受，但是最近可能由于网络加之页面设计问题，我们的JS效率比较差，长达10多秒中，实在难以忍受，到底是什么原因呢？


2，分析

我观察了一下JS脚本，应该说没有太费时间的操作，采用ID的元素选择法，应该是最快的，虽然有个类选择器，但是元素很少，一般在2个左右，不至于影响效率，我注释一下，发现确实不是这个问题。


后来分析，可能是HTML外面套的INDEX.JSP的问题，加上头尾后，效率很慢，所以我们分析思路：

        2.1 把JSP分出top,bottom.jsp，采用jquery load()事件加入至页面，确实效率有所提升，但是在FF，和CHROME下不太正常，而调整后，都正常显示，但是效率又下降了。

        2.2 采用IFrame方式：把页面的头和尾部采用Iframe嵌入，去掉边框，固定大小，这个确实效率提高了，但是ifram里的跳转是个大问题，效果不是很好；

3，根本原因

我们吧注意力放在了JS上面，突然想到，是不是$(document).ready()方法的原因？？

我们去掉此方法，变为函数，同时在页面中用setTimeout()延时10毫秒触发，发现，正常了；

我网上查了一下read方法的说明：

当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。  
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。  
ready() 函数规定当 ready 事件发生时执行的代码。  
ready() 函数仅能用于当前文档，因此无需选择器。