前端優(yōu)化指南(12種)

1. 減少HTTP請(qǐng)求;

1.1 CSS圖片精靈;
1.2 使用data:這樣的內(nèi)聯(lián)圖片;
1.3 合并盡可能多的腳本和樣式表;

2. CDN;

3. 壓縮組件;

1.1 壓縮代碼;
1.2 使用gzip編碼壓縮HTTP響應(yīng)包;

4. 樣式表放在頂部,腳本放在底部;

理由:樣式表放在頂部可以優(yōu)先加載,不至于出現(xiàn)網(wǎng)速慢時(shí)先有無(wú)樣式的HTML網(wǎng)頁(yè)一閃而過(guò)的尷尬情景;至于腳本放在底部最后加載,是因?yàn)榉乐鼓_本加載錯(cuò)誤或失敗導(dǎo)致網(wǎng)頁(yè)卡住。

5. 使用外聯(lián)的JS和CSS;

這種方法選擇性適用,對(duì)于統(tǒng)一、大型的網(wǎng)站(其網(wǎng)頁(yè)幾乎使用相同的JS和CSS文件),宜采用此方法;對(duì)于只有幾張網(wǎng)頁(yè)的網(wǎng)站來(lái)說(shuō)則無(wú)必要(內(nèi)聯(lián)即可,還減少了HTTP請(qǐng)求)。

6. 避免CSS表達(dá)式;

7. 減少DNS查找;

1.1 Keep-Alive;
1.2 較少的域名;

8. 避免重定向;

9. 避免重復(fù)腳本;

10. 添加Expires頭;

1.1 緩存;
1.2 HTTP引入了Cache-Control;

11. 使Ajax可緩存;

12. 配置/移除ETag;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,138評(píng)論 1 92
  • Yahoo!的Exceptional Performance團(tuán)隊(duì)為改善Web性能帶來(lái)最佳實(shí)踐。他們?yōu)榇诉M(jìn)行了一系列...
    拉風(fēng)的老衲閱讀 1,957評(píng)論 0 1
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,023評(píng)論 25 709
  • 從一開(kāi)始看《歡樂(lè)頌》,身邊很多朋友都很希望成為安迪那樣的女人,聰明強(qiáng)勢(shì)的不食人間煙火,但是身邊總有優(yōu)秀的男人愿意為...
    4f755e5670a6閱讀 513評(píng)論 0 1
  • happy birthday to you。 our handsome son
    華娘閱讀 214評(píng)論 0 0

友情鏈接更多精彩內(nèi)容