前端优化之雅虎军规
以下是我在雅虎35條軍規(guī)摘選的幾條,主要針對(duì)的是前端和移動(dòng)端。
1.減少http請(qǐng)求，web頁(yè)面無(wú)論是js還是html、css都是依賴于網(wǎng)絡(luò)請(qǐng)求的。所以合并通用的css等文件，減少網(wǎng)絡(luò)的請(qǐng)求次數(shù)。對(duì)于頁(yè)面渲染速度是有用的。使用雪碧圖，即CSS Sprite，減少圖片的請(qǐng)求次數(shù)，并且圖片在合并之后，總的字節(jié)數(shù)減少，請(qǐng)求更快
2.避免重定向，重定向會(huì)拖慢用戶頁(yè)面渲染,影響體驗(yàn)。
3.ajax緩存,當(dāng)請(qǐng)求的資源文件沒(méi)有修改時(shí)，可以添加expires或cache-control請(qǐng)求頭緩存文件減少http請(qǐng)求消耗。
4.延遲加載，圖片的懶加載可以加快頁(yè)面的渲染速度。推薦圖片懶加載庫(kù)echo.js,輕量級(jí)不依賴其他第三方庫(kù)。使用地址:https://github.com/toddmotto/echo?使用非常簡(jiǎn)單,源碼就幾十行。
5.預(yù)加載,使用html5的prefetch屬性 例如：<link rel="prefetch" href="http://file06.16sucai.com/2016/0825/5203cb96ceadafa0f2f26d11c572d727.jpg" />這樣就可以提前預(yù)加載一張圖片,當(dāng)跳轉(zhuǎn)到另一頁(yè)面后,不會(huì)在網(wǎng)絡(luò)請(qǐng)求直接在緩存文件中獲取。但是并不是所有的資源都可以預(yù)加載：url中包含下載資源，惡意頁(yè)面，資源很大，https頁(yè)面等不可以預(yù)加載。
6.減少dom元素的數(shù)量,盡量使用語(yǔ)義化標(biāo)簽，減少dom標(biāo)簽之間的層級(jí)嵌套。雅虎研究dom數(shù)量最多不要大于700個(gè)。超過(guò)之后會(huì)影響用戶體驗(yàn)。
7.跨域分離組件,但確保不要超過(guò)2-4個(gè)域，域多了dns解析的代價(jià)就會(huì)增大。把html與組件分別部署到不同的域中,最大話并行下載。
8.盡量少用iframe,因?yàn)橛锌赡茏枞?yè)面，需要請(qǐng)求加載，非語(yǔ)義化。
9.杜絕404,404是一種非常浪費(fèi)資源并給用戶帶來(lái)不好體驗(yàn)的。
10.避免使用css表達(dá)式。
11.樣式表放到head標(biāo)簽中,使頁(yè)面逐步渲染。
12.去除重復(fù)腳本，在ie和火狐中,重復(fù)引入的腳本會(huì)執(zhí)行兩次，浪費(fèi)資源。
13.減少js對(duì)dom的訪問(wèn)。
14.智能的事件處理,如果dom元素被添加了多個(gè)事件,會(huì)影響響應(yīng)速度。因此，當(dāng)div中有10個(gè)按鈕時(shí)。應(yīng)該給div添加事件而不是給每個(gè)按鈕添加事件。
15.js腳本放到底部。
16.將css與js放到外面,通過(guò)外部文件的這種引入方式可以被瀏覽器緩存起來(lái)，下次請(qǐng)求的時(shí)候就減小了html的大小。
17.js與css壓縮,減小資源的體積。
18.優(yōu)化圖片，把gif轉(zhuǎn)化為png格式
19.優(yōu)化css sprite,在sprite中橫向排列一般比縱向排列生成的體積小。組合sprite中的相似顏色可以保持低色數(shù)。最理想的是256以下png8格式,不用在sprite中留有太多的間隙。
20.不要在html中縮放圖片,例如原本請(qǐng)求的圖片大小是500*500的圖片,img大小設(shè)置為100*100.
21.用小的favicon,最好在1k以下
22.cookie盡量的小,設(shè)置合適的域級(jí)別,以免影響子域
23.把組件放到不含cookie的域中,減少請(qǐng)求頭的大小
24.保證所有組件都小于25k,iphone不能緩存大于25k的組件
25.避免img標(biāo)簽src屬性為空
26.在請(qǐng)求頭中添加expires和cache-control緩存組件
總結(jié)
- 上一篇： 变量关系的描述方法
- 下一篇： subline修改html模板,subl