移動(dòng)Web前端性能與圖片優(yōu)化的研究.pdf

1、近年來(lái)，隨著智能移動(dòng)設(shè)備的普及，移動(dòng)互聯(lián)網(wǎng)成為了互聯(lián)網(wǎng)發(fā)展的新動(dòng)力，同時(shí)也為移動(dòng)學(xué)習(xí)的跨越式發(fā)展帶來(lái)了新契機(jī)。移動(dòng)設(shè)備間的差異和無(wú)線網(wǎng)絡(luò)資源的稀缺決定在移動(dòng)學(xué)習(xí)開(kāi)發(fā)時(shí)必須關(guān)注應(yīng)用的性能問(wèn)題。在紛繁復(fù)雜的移動(dòng)學(xué)習(xí)Web站點(diǎn)中，用戶更傾向于使用可以迅速響應(yīng)、完美交互的優(yōu)秀產(chǎn)品。這就形成了對(duì)web站點(diǎn)進(jìn)行優(yōu)化的迫切需求。Web站點(diǎn)優(yōu)化可分為后端優(yōu)化和前端優(yōu)化兩部分。研究表明，用戶響應(yīng)時(shí)間中只有10％～20％是花在了下載HTML文檔上，其余的時(shí)

2、間則花在了下載頁(yè)面中的所有組件上。也就是說(shuō)，如果關(guān)注前端性能并將其響應(yīng)時(shí)間減少一半，整體響應(yīng)時(shí)間可減少40％～45％;加之國(guó)內(nèi)在后端的優(yōu)化技術(shù)已經(jīng)比較成熟，所以本文專注于Web前端的性能優(yōu)化。
　　本文首先介紹了移動(dòng)Web前端優(yōu)化的國(guó)內(nèi)外研究現(xiàn)狀，提出進(jìn)行移動(dòng)web前端性能優(yōu)化的必要性。然后對(duì)Web的工作方式如HTTP協(xié)議、瀏覽器工作機(jī)制等和移動(dòng)開(kāi)發(fā)的特殊性進(jìn)行介紹，web工作方式構(gòu)成了在移動(dòng)學(xué)習(xí)開(kāi)發(fā)過(guò)程中進(jìn)行性能優(yōu)化的現(xiàn)實(shí)依據(jù)和

3、理論基礎(chǔ)。本文中間部分從html、CSS、JavaScript、圖片和緩存五個(gè)方面，圍繞內(nèi)存和CPU兩個(gè)核心主題，結(jié)合移動(dòng)學(xué)習(xí)開(kāi)發(fā)的實(shí)踐，分類展開(kāi)了移動(dòng)Web前端性能優(yōu)化方案的介紹。
　　本文最后對(duì)圖片優(yōu)化方案之一，CSSSprites，進(jìn)行了制作時(shí)的再優(yōu)化。現(xiàn)在每個(gè)網(wǎng)站都有大量圖片需要下載，而一個(gè)一個(gè)地下載不如整合到一塊下載來(lái)的迅速，這就是Sprites技術(shù)。CSSSprites技術(shù)的出現(xiàn)在一定程度上加速了網(wǎng)站的響應(yīng)時(shí)間，從而可