如何快速的呈現(xiàn)我們的網(wǎng)頁的技巧整理
前幾天小芳同學(xué)一直在群發(fā)起一些加速的話題,我已經(jīng)把聊天記錄抽出來,正打算整理出份像樣的,沒想到小芳同學(xué)非常速度的出了這篇。我的就省掉了,挖哈哈。
特別說一下了,這些方案并非適合所有的網(wǎng)站,很多部分有的網(wǎng)站還是不要做反而會(huì)更好。如果你還有更多的想法,可以到這里討論或者評(píng)論,我只是歸檔成為方便閱讀的,對(duì)了論壇和群討論的另一些結(jié)果如果有價(jià)值我也會(huì)補(bǔ)充進(jìn)來。
如何快速的呈現(xiàn)我們的網(wǎng)頁 作者:flashsoft,(內(nèi)容被我略修刪過)。
一.我們需達(dá)解決的麻煩
- 減少HTTP請(qǐng)求數(shù). 減少HTTP請(qǐng)求數(shù)有什么好處
- 降低服務(wù)器跟客戶端的建立和消除HTTP請(qǐng)求和響應(yīng)Header的開銷
- 減少服務(wù)器為HTTP連接的進(jìn)程和線程的開銷,如果可能,還會(huì)包括GZIP壓縮的CPU開銷.
- 減小被請(qǐng)求文件大小, 減少請(qǐng)求數(shù)據(jù)占用的網(wǎng)絡(luò)帶寬.
- 讓用戶更快的看到想要的結(jié)果.
- 提高客戶端渲染速度.
- 讓瀏覽器同時(shí)能請(qǐng)求更多的數(shù)據(jù).
- 提高服務(wù)器相應(yīng)速度.
- 通過版本化控制客戶端Cache.
二.如何解決我們的麻煩
A.如何減少HTTP請(qǐng)求數(shù)
- 合并JS文件跟CSS文件。
- 合并框架圖片以及相對(duì)變動(dòng)較少的圖片成一張,通過CSS背景切割來完成渲染,比如:加速圖片顯示。
- 合理使用本地Cache來緩存JS/CSS/IMAGE。
- 合理使用UserData緩存JS文件,對(duì)于FF用戶可以單獨(dú)請(qǐng)求服務(wù)器,這樣能解決80%用戶的問題.代碼可以蓉兒(meizz)的js framework1。
- 把JS跟CSS合并成一個(gè)文件
B.減小被請(qǐng)求文件大小,減少請(qǐng)求數(shù)據(jù)占用的網(wǎng)絡(luò)帶寬
- 壓縮JS體積:刪除JS中空白換行,注釋,混淆把長(zhǎng)變量換成短變量;
- 壓縮CSS體積:刪除CSS注釋、寫法盡量用簡(jiǎn)寫;
- 使用(X)HTML+CSS方式搭建網(wǎng)站結(jié)構(gòu),提高CSS重用性,來減少(X)HTML文件大?。?
- 使用服務(wù)器端GZIP壓縮JS/ CSS文件,縮小傳輸文件大小。附注:Apache1跟Apache2的GZIP的效率跟方式不一樣的,根據(jù)需要自行選擇。
嗷嗷補(bǔ)充說明:壓縮、合并JS和CSS都由程序處理。而不是自己手動(dòng)去縮刪,不然不利于后期維護(hù)。
C.讓用戶更快的看到想要的結(jié)果
用戶對(duì)于一個(gè)站點(diǎn)的白頁的忍受時(shí)間根據(jù)統(tǒng)計(jì)是8-12秒。白頁的產(chǎn)生可能由于各種原因引起,我們能做的就是怎么讓用戶能變的稍微能等待更久。
- 方案1.多做一個(gè)引導(dǎo)頁,讓用戶體會(huì)其中的變化
案例:mail.aol.com中的loading引導(dǎo)頁 - 方案2.優(yōu)先載入頁面結(jié)構(gòu)以及結(jié)構(gòu)圖片,后一步載入當(dāng)前頁面數(shù)據(jù),再后一步載入Iframe,Flash等數(shù)據(jù).讓用戶盡早的看到被打開頁面的希望.
D.提高客戶端渲染速度
這個(gè)問題就比較泛泛了,影響客戶端的渲染速度有多方面的,主要目的都是提高程序方面的效率.
- 對(duì)于大索引的結(jié)構(gòu),盡可能的少用索引訪問,能用訪問兄弟節(jié)點(diǎn)的方式盡可能用訪問兄弟節(jié)點(diǎn)的方式.
- 字符串拼接盡可能用數(shù)組方式
- 大規(guī)模添加節(jié)點(diǎn)數(shù)據(jù),請(qǐng)不要使用appendChild方式,盡量使用類似innerHTML的insertAdjacentHTML方式,FF下需修正2
E.讓瀏覽器同時(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é)果.
F.提高服務(wù)器相應(yīng)速度
對(duì)于需快速響應(yīng)的文件,把其放入快速響應(yīng)的服務(wù)器,應(yīng)該是不錯(cuò)的方案,優(yōu)化方案請(qǐng)系統(tǒng)儲(chǔ)備組提供.
G.通過版本化控制客戶端Cache.
通常js/css這類文件改動(dòng)比較頻繁,但是為了加載速度變快,我們有可能需要設(shè)定這類文件的過期時(shí)間為幾天后,這樣我們碰到的問題就是,如何及時(shí)更新這些在cache的文件?
通過一個(gè)簡(jiǎn)單的配置,通過修改JS的版本來及時(shí)告訴瀏覽器,這些文件必須重新請(qǐng)求了,不要繼續(xù)使用瀏覽器cache中的數(shù)據(jù). 方案有好幾個(gè):
- 手動(dòng)改這些js的文件名
- 手動(dòng)改這些js的路徑
- 通過URL Rewrite方式來改重定位js路徑
- 通過一個(gè)在高響應(yīng)服務(wù)器上的一個(gè)js配置告知頁面,這個(gè)頁面該鏈接哪些JS文件
- 大版本不變,小版本不斷追加,等一定時(shí)間后,統(tǒng)一更新,高效利用cache
標(biāo)注
- meizz的js framework還沒出正式版,有興趣在CSDN的頁面翻一下
- Firefox修正方式
function addHTML(oParentNode, sHTML) {
if(window.addEventListener) {// for MOZ
var oRange = oParentNode.ownerDocument.createRange();
oRange.setStartBefore(oParentNode);
var oFrag = oRange.createContextualFragment(sHTML);
oParentNode.appendChild(oFrag);
}
else {// for IE5+
oParentNode.insertAdjacentHTML("BeforeEnd", sHTML);
}
}
相關(guān)文章
js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
javascript:window.open彈出窗口的位置問題
這篇文章主要介紹了javascript:window.open彈出窗口的位置問題,需要的朋友可以參考下2014-03-03
TypeScript模塊與命名空間的關(guān)系和使用方法
在TypeScript中就像在EC5中一樣,任何包含頂級(jí)import或export的文件都被認(rèn)為是一個(gè)模塊,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript使用模塊與命名空間以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2023-03-03
JavaScript實(shí)現(xiàn)Java中Map容器的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Java中Map容器的方法,結(jié)合實(shí)例形式分析了JavaScript實(shí)現(xiàn)Java中Map容器的原理與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-10-10
微信小程序?qū)崿F(xiàn)商品屬性聯(lián)動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)商品屬性聯(lián)動(dòng)選擇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02
Typescript中使用引用路徑別名報(bào)錯(cuò)的解決方法
本文主要介紹了Typescript中使用引用路徑別名報(bào)錯(cuò)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07

