資訊專欄INFORMATION COLUMN
摘要：如果瀏覽器組件是有效的相互匹配原始服務(wù)器則不會返回整個組件，而是返回狀態(tài)碼。的請求，是不可以在客戶端緩存的，每次請求都需要發(fā)送給服務(wù)器進(jìn)行處理，每次都會返回狀態(tài)碼。
1、減少HTTP請求 why
減少響應(yīng)時間。
howCSS Sprites
合并樣式腳本
內(nèi)聯(lián)圖片（使用data:URL模式可以在web頁面中包含圖片但不需要額外的HTTP請求）
2、使用內(nèi)容發(fā)布網(wǎng)絡(luò)（CDN） why瀏覽器是根據(jù)域(Domain)來緩存內(nèi)容資源的，只要域不一樣，那么它就需要重復(fù)下載這些資源，而且使用同樣的方式將它們緩存起來。
帶來的問題：重復(fù)地下載，這會占用網(wǎng)絡(luò)資源和緩存空間。
how如果有很多站點(diǎn)，它們之間可以共享某些內(nèi)容（例如javascript，css，image等），那么與其每個站點(diǎn)放一份，就不如將他們統(tǒng)一地存在在一個地方，這樣就可以減少下載的次數(shù)和緩存的體積了。
如：引用jquery cdn
3、添加Expires頭 why使內(nèi)容具有緩存性
howExpires: Thu, 01 Dec 1994 16:00:00 GMT （必須是GMT格式）
通過HTTP的META設(shè)置expires和cache-control
上述設(shè)置僅為舉例，實際使用其一即可。這樣寫的話僅對該網(wǎng)頁有效，對網(wǎng)頁中的圖片或其他請求無效，并不會做任何cache。
4、壓縮組件 why減小文件體積，提升頁面加載速度
how壓縮腳本和樣式表
5、樣式置頂 why放在底部可能會出現(xiàn)白屏，會阻塞頁面的逐步呈現(xiàn)
注意：使用link，不使用@import（可能出現(xiàn)白屏，以及下載組件無序性）
6、腳本置底 why頁面既可以逐步呈現(xiàn)，也可以提高資源下載的并行度
最差情況：放在頂部
會阻塞后面內(nèi)容的呈現(xiàn)
會阻塞其它組件的下載
7、避免使用CSS表達(dá)式 why表達(dá)式可能會運(yùn)算很多遍、影響頁面性能
how實現(xiàn)動態(tài)CSS可以使用javascript控制
$(function () {
$("dom").css("background-color",(new Date()).getHours()%2?"#EEE":"#BBB");
});
8、使用外鏈JavaScript和CSS
why
提高樣式和腳本復(fù)用性
注意：純粹而言，內(nèi)聯(lián)速度比外鏈快，因為外鏈額外增加了http請求，但是由于瀏覽器緩存，當(dāng)多頁面引用了同一個樣式表或腳本文件時，反而減少了HTTP請求，實現(xiàn)復(fù)用。
how
優(yōu)點(diǎn)：
讓夠響應(yīng)鍵盤事件并獲得焦點(diǎn)（從而屏幕閱讀器能夠讀出背后的內(nèi)容，增強(qiáng)可訪問性）
優(yōu)雅降級，在網(wǎng)絡(luò)連接很差，還沒有加載到CSS的時候，依然有手型與正常的link樣式。
參考：YSlow團(tuán)隊的23條“Web性能最佳實踐和規(guī)則”+《高性能網(wǎng)站建設(shè)指南》
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/85072.html
摘要：譯文地址譯唯快不破應(yīng)用的個優(yōu)化步驟前端的逆襲知乎專欄原文地址時過境遷，應(yīng)用比以往任何時候都更具交互性。使用負(fù)載均衡方案我們在之前討論緩存的時候簡要提到了內(nèi)容分發(fā)網(wǎng)絡(luò)。換句話說，元素的串形訪問會削弱負(fù)載均衡器以最佳形式 歡迎關(guān)注知乎專欄 —— 前端的逆襲歡迎關(guān)注我的博客，知乎，GitHub。 譯文地址：【譯】唯快不破：Web 應(yīng)用的 13 個優(yōu)化步驟 - 前端的逆襲 - 知乎專欄原文地...
摘要：規(guī)則使用內(nèi)容發(fā)布網(wǎng)絡(luò)用戶同服務(wù)器的距離會對頁面響應(yīng)時間產(chǎn)生影響。這不僅能達(dá)到響應(yīng)時間大幅減少的目的，還很容易實現(xiàn)。提供動態(tài)頁面會引入特殊的存儲要求數(shù)據(jù)庫連接狀態(tài)管理驗證硬件和優(yōu)化等，這些復(fù)雜性超過了的范圍。 鏈接參考： https://developer.yahoo.com/performance/rules.html 只有10%～20%的最終用戶響應(yīng)時間花在了下載HTML文檔上...
摘要：自己是做前端開發(fā)的，在性能方面，根據(jù)的調(diào)查，后臺只占，而前端高達(dá)之多，其中有的東西是可以優(yōu)化的。相信很多人都聽過優(yōu)化網(wǎng)站性能的條規(guī)則。淘寶和阿里巴巴中文站目前都是這樣做的。目前的瀏覽器都能良好地支持。 相信互聯(lián)網(wǎng)已經(jīng)越來越成為人們生活中不可或缺的一部分。Ajax，flex等等富客戶端的應(yīng)用使得人們越加幸福地體驗著許多原先只能在C/S實現(xiàn)的功能。比如Google機(jī)會已經(jīng)把最基本的o...
摘要：自己是做前端開發(fā)的，在性能方面，根據(jù)的調(diào)查，后臺只占，而前端高達(dá)之多，其中有的東西是可以優(yōu)化的。相信很多人都聽過優(yōu)化網(wǎng)站性能的條規(guī)則。淘寶和阿里巴巴中文站目前都是這樣做的。目前的瀏覽器都能良好地支持。 相信互聯(lián)網(wǎng)已經(jīng)越來越成為人們生活中不可或缺的一部分。Ajax，flex等等富客戶端的應(yīng)用使得人們越加幸福地體驗著許多原先只能在C/S實現(xiàn)的功能。比如Google機(jī)會已經(jīng)把最基本的o...
摘要：渲染引擎的概述渲染引擎的主要職責(zé)是在瀏覽器屏幕上顯示請求的頁面。中，渲染樹中的每個節(jié)點(diǎn)都被稱為的渲染器或渲染對象。坐標(biāo)系相對于根渲染器。增量只有一些渲染器以不影響整個樹的方式進(jìn)行更改。渲染器使其矩形在屏幕上無效。 到目前為止，在我們之前的JavaScript工作原理系列文章中，我們一直關(guān)注JavaScript作為一種語言，其功能，它如何在瀏覽器中執(zhí)行，如何優(yōu)化等等。 但是，當(dāng)您構(gòu)建We...
閱讀 3080·2021-09-10 10:50
閱讀 3275·2019-08-30 14:19
閱讀 3590·2019-08-29 17:31
閱讀 3418·2019-08-29 16:43
閱讀 2276·2019-08-29 14:05
閱讀 2181·2019-08-29 13:17
閱讀 2118·2019-08-26 13:25
閱讀 1864·2019-08-26 12:20
