緩存類

合理利用瀏覽器緩存

除了上面說(shuō)到的使用Cache-Control、Expires、Etag和Last-Modified來(lái)設(shè)置HTTP緩存外，在移動(dòng)端還可以使用localStorage等來(lái)保存AJAX返回的數(shù)據(jù)，或者使用localStorage保存CSS或JavaScript靜態(tài)資源內(nèi)容，實(shí)現(xiàn)移動(dòng)端的離線應(yīng)用，盡可能減少網(wǎng)絡(luò)請(qǐng)求，保證靜態(tài)資源內(nèi)容的快速加載。

靜態(tài)資源離線方案

對(duì)于移動(dòng)端或Hybrid應(yīng)用，可以設(shè)置離線文件或離線包機(jī)制讓靜態(tài)資源請(qǐng)求從本地讀取，加快資源載入速度，并實(shí)現(xiàn)離線更新。關(guān)于這塊內(nèi)容，我們會(huì)在后面的章節(jié)中重點(diǎn)講解。

嘗試使用AMP HTML

AMP HTML可以作為優(yōu)化前端頁(yè)面性能的一個(gè)解決方案，使用AMP Component中的元素來(lái)代替原始的頁(yè)面元素進(jìn)行直接渲染。

!-- 不推薦 --

<video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster="path/poster.jpg">
 <div fallback>
 <p>Your browser doesn’t support HTML5 video</p>
 </div>
 <source type="video/mp4" src="foo.mp4">
 <source type="video/webm" src="foo.webm">
 </video>
 !-- 推薦 --
 <amp-video width="400" height="300" src="[http://www.domain.com/videos/myvideo.mp4](https://link.jianshu.com?t=http%3A%2F%2Fwww.domain.com%2Fvideos%2Fmyvideo.mp4)" poster= "path/poster.jpg">
 <div fallback>
 <p>Your browser doesn’t support HTML5 video</p>
 </div>
 <source type="video/mp4" src="foo.mp4">
 <source type="video/webm" src="foo.webm">
 </amp-video>