JQuery效率問題

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() 函數僅能用於當前文檔，所以無需選擇器。