以前那些優(yōu)化技巧就不說了,自己找度娘或谷哥一大把(搜索前端優(yōu)化)帮匾。
推薦幾篇:
CSS3與頁面布局學(xué)習(xí)總結(jié)(八)——瀏覽器兼容與前端性能優(yōu)化
《高性能網(wǎng)站建設(shè)指南》這本書中提出了一些規(guī)則:
規(guī)則1——減少HTTP請求
規(guī)則2——使用內(nèi)容發(fā)布網(wǎng)絡(luò)
規(guī)則3——添加Expires頭
規(guī)則4——壓縮組件
規(guī)則5——將樣式表放在頂部
規(guī)則6——將腳本放在底部
規(guī)則7——避免CSS表達(dá)式
規(guī)則8——使用外部JavaScript和CSS
規(guī)則9——減少DNS查找
規(guī)則10——精簡JavaScript
規(guī)則11——避免重定向
規(guī)則12——移除重復(fù)腳本
規(guī)則13——配置ETag
規(guī)則14——使AjaX可緩存
1啄骇,css prefetch
詳解HTML5中rel屬性的prefetch預(yù)加載功能使用
前端性能優(yōu)化 - 資源預(yù)加載
預(yù)先取回連結(jié) (Prefetch) 問答集
Accept-Ranges: bytes 類似斷點續(xù)傳。
static layout 靜態(tài)布局
2, 你不知道的前端性能優(yōu)化
你不知道的前端性能優(yōu)化 - 靜態(tài)資源優(yōu)化 (一)
你不知道的前端性能優(yōu)化 - 布局與樣式 (二)
你不知道的前端性能優(yōu)化 - 緩存優(yōu)化 (三)
PWA和 service worker
PWA學(xué)習(xí)心得瘟斜,關(guān)于pwa的一篇比較全面的介紹文章缸夹,內(nèi)有許多相關(guān)概念的鏈接
性能監(jiān)測對象
谷歌搜索 PerformanceObserver用法大全
螞蟻金服這樣做前端性能監(jiān)控
在線html,js編輯器-演示時用
讓你的網(wǎng)頁更絲滑 - 聲享