網頁站點加速守則

2021-06-21 16:34:21 字數 2282 閱讀 6178

簡述:

如何讓我們站點更快速呢

原文出處: 

這裡做一下筆記先不做深入1.

never expire

cache-control

如果使用永不過期,那在每一次更新元件時,都需要變更檔名稱

比如原來是a_1.0.0.js, 更新之後變為a_1.0.1.js

2.使用gzip

在scripts 和stylesheets,以及一些文字型別資料,如json, xml

但是在例如、pdf上就沒有必要做了,因為他們本身就已經壓縮處理了

3. css 外聯樣式

把樣式檔案放在head裡,這樣可以讓使用者訪問乙個站點時,至少在視覺上現有反饋

4.不要出現在css中動態變換的資料

例如,

background-color: expression( (new date()).gethours()%2 ? "#b8d4ff" : "#f08a00" );
5. 不要出現

或者 js中 var img = new image(); img.src = ""空

因為如果為空的話 還是會發出請求(例如在ie, sarifi, chrome)

6.優化

推薦一款imagemagick 

指令有,convert image.gif image.png

7. 避免redirect重定向

路徑末尾新增"/", 防止出現多餘的重定向

例如應該記得新增, 

/對同乙個網域名稱下, 使用alias或者mod_rewrite, 如果確實網域名稱變了,

那就用cname(一種dns記錄,產生乙個標記,用來標識domain之間的指向)

8. etag

etag 用來確定 瀏覽器快取的元件

例如image、js、stylesheet是否和伺服器是相同的

用etag的表頭,可以定義etag返回的表頭。

eg, 

伺服器上生成了乙個component的表頭

如果和伺服器上得etag版本相同,

則會302客戶端跳轉到瀏覽器快取中得component,

但是在apache和iis伺服器上,不同主機的etag值不同

所以在親和式負載均衡上,會出現不同的伺服器主機生成的etag不同的情況

9. ajax 快取判定

通過新增時間戳timestamp達到判定是否和上一次ajax獲取資料相同,

如果相同,則直接從快取中提取

10.在伺服器端開發中使用flush

flush是將伺服器端生成的頁面部分先行輸出

例如 可以在

jsp:flush一把, 先將頁面的部分css,js引入

11. 如果沒有什麼額外需要,盡量使用get方法替代post

由於post需要先傳送header, 然後再傳送data.

一般是規定,只從伺服器取資料那就用get,如果需要存資料就用post

12. 預載入

例如在某個頁面,並不需要請求多少components, 這時,可以做出預判,

在瀏覽器請求idle的這段時間裡,可用來載入之後可能訪問的頁面需要的

components(如styles,scripts。。。)。

13. cookie free -- 靜態檔案不要傳cookie

對於image, styles, scripts這種靜態檔案,就不要朝裡面傳cookie,

通過網域名稱設定任然無法避免靜態檔案cookie傳入,那就只能新建乙個domain

所以cookie配置時候不應該配置成*.exmaple.org這種全域性網域名稱

取而代之,應該設定子網域名稱。

14. 正確使用事件驅動

yui工具可以做到事件驅動優化

另外有一篇 ajax應用 高效能使用的文章

網頁加速調整

1.壓縮 這個給個超級壓縮 質量基本不變,能少一半大小。可以通過減少 quality的方式,比如100 的quality與80 的quality,使用者感觀上基本一樣,但是體積卻可以減少30 以上 2.延遲載入 lazyload。其次是延遲載入,特別是內容站建議不要一次性載入所有,載入顯示區域必要的...

網頁加速系列(六) 網頁加速之高階下篇

網頁加速系列 六 網頁加速之高階下篇 本文可參考以下 六 網頁加速之高階下篇 很明顯,上面的 中缺少三個結束標記。但是這並不妨礙它的正確執行。在html中,這樣的標記還有一些,例如frame img和p。可是請不要偷懶,請將結束標記寫完整,這樣做不僅使html 格式規範,更可以加速頁面的顯示速度。因...

如何加速網頁的開啟速度?

最近看到乙個提問,是關於如何快速開啟 的,由此我簡單總結了一下影響 開啟速度的3方面原因。1 客戶端也就是瀏覽器,是最直接的影響因素,牽扯到速度的有標籤的渲染速度 css的渲染速度,指令碼和動態功能的資源佔用量。標籤的不同也存在渲染速度的不同,為什麼大家現在都喜歡div css布局,就是因為 在數量...