JS 頁面載入慢 的問題分析—轉

巧妙解決js內容調用導致頁面載入慢的問題2009-6-14 0:17:00

3推薦

很多內容管理系統、論壇系統都提供了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.getElementById("jsnews").innerHTML=document.getElementById("tmpjsnews").innerHTML;
</script>
以上語句，根據js調用的數量增加多條。其中，getElementById的id名要與前面設定的id相對應。完工。
三、原理說明

經以上修改後，頁面的前部分全部變成了靜態內容。原先js調用的地區全部變成了“內容正在載入...”幾個簡單的漢字。因此，可以很順利地載入，不會卡。只有等到頁面載入至最後面添加的幾個隱藏<span>的時候，才可能會卡住，但這個時候，整個頁面其他的內容都載入完畢了，因此即使卡住也影響不大。等<span>中的js調用載入完畢後，最後面增加的js語句就會自動將<span>中的內容複寫到真正需要顯示這些調用內容的地區，並替換掉“內容正在載入...”的字樣。於是整個頁面就載入完成了。