以下是我在雅虎35條軍規(guī)摘選的幾條,主要針對(duì)的是前端和移動(dòng)端。

1.減少http請(qǐng)求，web頁(yè)面無論是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)求的資源文件沒有修改時(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ù)量,盡量使用語義化標(biāo)簽，減少dom標(biāo)簽之間的層級(jí)嵌套。雅虎研究dom數(shù)量最多不要大于700個(gè)。超過之后會(huì)影響用戶體驗(yàn)。

7.跨域分離組件,但確保不要超過2-4個(gè)域，域多了dns解析的代價(jià)就會(huì)增大。把html與組件分別部署到不同的域中,最大話并行下載。

8.盡量少用iframe,因?yàn)橛锌赡茏枞?yè)面，需要請(qǐng)求加載，非語義化。

9.杜絕404,404是一種非常浪費(fèi)資源并給用戶帶來不好體驗(yàn)的。

10.避免使用css表達(dá)式。

11.樣式表放到head標(biāo)簽中,使頁(yè)面逐步渲染。

12.去除重復(fù)腳本，在ie和火狐中,重復(fù)引入的腳本會(huì)執(zhí)行兩次，浪費(fèi)資源。

13.減少js對(duì)dom的訪問。

14.智能的事件處理,如果dom元素被添加了多個(gè)事件,會(huì)影響響應(yīng)速度。因此，當(dāng)div中有10個(gè)按鈕時(shí)。應(yīng)該給div添加事件而不是給每個(gè)按鈕添加事件。

15.js腳本放到底部。

16.將css與js放到外面,通過外部文件的這種引入方式可以被瀏覽器緩存起來，下次請(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é)

以上是生活随笔為你收集整理的前端优化之雅虎军规的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。