• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 網(wǎng)站建設(shè) >> 網(wǎng)站制作 >> 如何加速網(wǎng)站呈現(xiàn)速度

如何加速網(wǎng)站呈現(xiàn)速度

• 作者：創(chuàng)新互聯(lián) 文章來源：網(wǎng)站建設(shè) 點(diǎn)擊數(shù)： 更新時(shí)間：2013-04-18
•        一、我們需達(dá)解決的麻煩
  　　 * 讓用戶更快的看到想要的結(jié)果。
  　　 * 減少HTTP請(qǐng)求數(shù)。
  　　 * 提高客戶端渲染速度。
  　　 * 讓瀏覽器同時(shí)能請(qǐng)求更多的數(shù)據(jù)。
  　　 * 提高服務(wù)器相應(yīng)速度。
  　　 * 降低服務(wù)器跟客戶端的建立和消除HTTP請(qǐng)求和響應(yīng)Header的開銷。
  　　 * 通過版本化控制客戶端Cache。
  　　 * 減少服務(wù)器為HTTP連接的進(jìn)程和線程的開銷，如果可能，還會(huì)包括GZIP壓縮的CPU開銷。
  　　 * 減小被請(qǐng)求文件大小， 減少請(qǐng)求數(shù)據(jù)占用的網(wǎng)絡(luò)帶寬。
  　　 二、如何解決我們的麻煩
  　　 A、減小被請(qǐng)求文件大小，減少請(qǐng)求數(shù)據(jù)占用的網(wǎng)絡(luò)帶寬
  　　 1、壓縮JS體積：刪除JS中空白換行，注釋，混淆把長(zhǎng)變量換成短變量；
  　　 2、壓縮CSS體積：刪除CSS注釋、寫法盡量用簡(jiǎn)寫；
  　　 3、使用（X）HTML+CSS方式搭建網(wǎng)站結(jié)構(gòu)，提高CSS重用性，來減少（X）HTML文件大�。�
  　　 4、使用服務(wù)器端GZIP壓縮JS/ CSS文件，縮小傳輸文件大小。附注：Apache1跟Apache2的GZIP的效率跟方式不一樣的，根據(jù)需要自行選擇。
  　　 補(bǔ)充說明：壓縮、合并JS和CSS都由程序處理。而不是自己手動(dòng)去縮刪，不然不利于后期維護(hù)。
  　　 B、如何減少HTTP請(qǐng)求數(shù)
  　　 1、合并JS文件跟CSS文件。
  　　 2、合并框架圖片以及相對(duì)變動(dòng)較少的圖片成一張，通過CSS背景切割來完成渲染，比如：加速圖片顯示。
  　　 3、合理使用本地Cache來緩存JS/CSS/IMAGE。
  　　 4、合理使用UserData緩存JS文件，對(duì)于FF用戶可以單獨(dú)請(qǐng)求服務(wù)器，這樣能解決80%用戶的問題。
  　　 5、把JS跟CSS合并成一個(gè)文件
  　　 C、讓用戶更快的看到想要的結(jié)果
  　　 用戶對(duì)于一個(gè)站點(diǎn)的白頁的忍受時(shí)間根據(jù)統(tǒng)計(jì)是8-12秒。白頁的產(chǎn)生可能由于各種原因引起，我們能做的就是怎么讓用戶能變的稍微能等待更久。
  　　 1、方案1：多做一個(gè)引導(dǎo)頁，讓用戶體會(huì)其中的變化
  　　 案例：mail.aol.com中的loading引導(dǎo)頁
  　　 2、方案2：優(yōu)先載入頁面結(jié)構(gòu)以及結(jié)構(gòu)圖片，后一步載入當(dāng)前頁面數(shù)據(jù)，再后一步載入Iframe,Flash等數(shù)據(jù)。讓用戶盡早的看到被打開頁面的希望。
  　　 D、提高客戶端渲染速度
  　　 這個(gè)問題就比較泛泛了，影響客戶端的渲染速度有多方面的，主要目的都是提高程序方面的效率。
  　　 1、對(duì)于大索引的結(jié)構(gòu)，盡可能的少用索引訪問，能用訪問兄弟節(jié)點(diǎn)的方式盡可能用訪問兄弟節(jié)點(diǎn)的方式。
  　　 2、字符串拼接盡可能用數(shù)組方式
  　　 3、大規(guī)模添加節(jié)點(diǎn)數(shù)據(jù)，請(qǐng)不要使用appendChild方式，盡量使用類似innerHTML的insertAdjacentHTML方式，F(xiàn)F下需修正（標(biāo)注1）
  　　 E、通過版本化控制客戶端
  　　 通常js/css這類文件改動(dòng)比較頻繁，但是為了加載速度變快，我們有可能需要設(shè)定這類文件的過期時(shí)間為幾天后，這樣我們碰到的問題就是，如何及時(shí)更新這些在cache的文件
  　　 通過一個(gè)簡(jiǎn)單的配置，通過修改JS的版本來及時(shí)告訴瀏覽器，這些文件必須重新請(qǐng)求了，不要繼續(xù)使用瀏覽器cache中的數(shù)據(jù)。 方案有好幾個(gè)：
  　　 1、手動(dòng)改這些js的文件名。
  　　 2、手動(dòng)改這些js的路徑。
  　　 3、通過URL Rewrite方式來改重定位js路徑。
  　　 4、通過一個(gè)在高響應(yīng)服務(wù)器上的一個(gè)js配置告知頁面，這個(gè)頁面該鏈接哪些JS文件。
  　　 5、大版本不變，小版本不斷追加，等一定時(shí)間后，統(tǒng)一更新，高效利用cache。
  　　 F、讓瀏覽器同時(shí)能請(qǐng)求更多的數(shù)據(jù)。
  　　 瀏覽器默認(rèn)只是支持單域名同時(shí)有兩個(gè)HTTP請(qǐng)求，使用多域名將能把請(qǐng)求數(shù)提高，在網(wǎng)絡(luò)條件優(yōu)良的情況下，能更快的下載數(shù)據(jù)，呈現(xiàn)結(jié)果。
  　　 G、提高服務(wù)器相應(yīng)速度
  　　 對(duì)于需快速響應(yīng)的文件，把其放入快速響應(yīng)的服務(wù)器，應(yīng)該是不錯(cuò)的方案，優(yōu)化方案請(qǐng)系統(tǒng)儲(chǔ)備組提供。
• 如何評(píng)價(jià)一個(gè)網(wǎng)站好壞 :上一篇
  什么網(wǎng)站算好站? :下一篇