主要內(nèi)容為下面幾大類(lèi):移動(dòng)端褥琐、圖片锌俱、JavaScript、css敌呈、html贸宏、頁(yè)面內(nèi)容造寝、服務(wù)器、cookie吭练。
移動(dòng)端性能優(yōu)化:
保持單個(gè)文件小于25KB
移動(dòng)網(wǎng)站頁(yè)面要求下載資源诫龙,如果文件過(guò)大,會(huì)大大減慢頁(yè)面加載速度线脚。打包內(nèi)容為分段multipart文檔
由于HTTP請(qǐng)求每一次都會(huì)執(zhí)行三次握手赐稽,每次握手都會(huì)消耗較多的時(shí)間。使用multipart浑侥,實(shí)現(xiàn)了多文件同時(shí)上傳,可用一個(gè)HTTP請(qǐng)求獲取多個(gè)組件晰绎。
圖片優(yōu)化:
CSS sprites
俗稱(chēng) CSS 精靈寓落、雪碧圖,雪花圖等荞下。即將多張小圖片合并成一張圖片伶选,達(dá)到減少 HTTP 請(qǐng)求的一種解決方案〖饣瑁可通過(guò) CSS中的background 屬性訪問(wèn)圖片內(nèi)容仰税。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù),節(jié)省命名詞匯量抽诉。壓縮圖片
圖片占據(jù)資源極大陨簇,因此盡量避免使用多余的圖片,使用時(shí)選擇最合適的格式大小迹淌,然后使用智圖壓縮河绽,同時(shí)在代碼中用Srcset來(lái)按需顯示。(切記不要過(guò)分壓縮 可能會(huì)導(dǎo)致圖片迷糊)盡量避免重設(shè)圖片大小
重設(shè)圖片大小是指在頁(yè)面唉窃、CSS耙饰、JavaScript等中多次重置圖片大小,多次重設(shè)圖片大小會(huì)引發(fā)圖片的多次重繪纹份,影響性能苟跪。圖片盡量避免使用DataURL
DataURL圖片沒(méi)有使用圖片的壓縮算法文件會(huì)變大,并且要解碼后再渲染蔓涧,加載慢耗時(shí)長(zhǎng)件已。圖片懶加載
圖片對(duì)頁(yè)面加載速度影響非常大。比如蠢笋,當(dāng)一個(gè)頁(yè)面內(nèi)容比較多的時(shí)候拨齐,加載速度就會(huì)大大的降低,極大的影響到用戶體驗(yàn) 昨寞。更有甚者瞻惋,一個(gè)頁(yè)面可能會(huì)有幾百個(gè)圖片厦滤,但是頁(yè)面上僅僅只顯示前幾張圖片,那其他的圖片是否可以晚點(diǎn)加載用于提高性能歼狼。具體可見(jiàn) >>