作為一名專業(yè)的前端攻城獅，必須需要了解一些web前端性能優(yōu)化方面的知識點。

之前25學堂分享了一個web前端性能優(yōu)化的信息圖表，有興趣的小伙伴可以看下。

1、WebAPP移動前端性能優(yōu)化規(guī)范和設計指導

2、5個CSS性能優(yōu)化減肥工具|web前端開發(fā)必備資源

3、手機網(wǎng)站Html5前端開發(fā)的必備知識點，超贊

4、移動端最實用的HTML5+CSS3開發(fā)教程【大神筆記】

而今天學堂君繼續(xù)跟大家分享一些比較高效前端性能優(yōu)化代碼和筆記。主要講解預加載。

無論你是APP設計師，還是APP產(chǎn)品經(jīng)理，都有必要了解這個H5前端性能優(yōu)化的預加載知識點。

1、下面我們先了解下 什么是預加載技術(shù)：

WEB中的預加載就是在網(wǎng)頁全部加載之前，對一些主要內(nèi)容進行加載，以提供給用戶更好的體驗，減少等待的時間。否則，如果一個頁面的內(nèi)容過于龐大，沒有使用預加載技術(shù)的頁面就會長時間的展現(xiàn)為一片空白，直到所有內(nèi)容加載完畢。

圖片的預加載技術(shù)使用較為廣泛，一般的效果是網(wǎng)頁中的圖片由模糊變得清晰。

比如我們常用的插件：

& ?jQuery圖片延遲加載插件jQuery.lazyload,使用延遲加載在可提高網(wǎng)頁下載速度。

& ?簡單的JavaScript圖像延遲加載庫Echo.js等。

下面這張圖展示了一個頁面從開始到呈現(xiàn)完畢需要經(jīng)歷什么階段，主要有四個階段：

預加載是H5前端性能優(yōu)化當中的最重要的一個環(huán)節(jié)。也是我們最常用的H5前端性能優(yōu)化手段。

簡單明了的解釋：

所謂預加載技術(shù)，核心思想就是讓瀏覽器提早去加載未來可能會用到的資源，然后瀏覽器就會把URL對應的資源給緩存起來。

2、下面分享一些前端大牛的H5前端性能優(yōu)化之預加載知識的標簽。值得收藏

介紹幾個通過瀏覽器特性來很容易提高資源加載速度的方法：

（1）DNS prefetching

DNS解析的速度可用通過下面的標簽來進行預解析：

<link rel="dns-prefetch" >

（2）Preconnect

和DNS預解析差不多，Preconnect還會做TCP握手和TLS Negotiation。

<link rel="preconnect" >

（3）Prefetching

如果我們猜測用戶接下來將要訪問哪個具體的資源，那就可以用prefetching來預加載確定的資源了：

<link rel="prefetch" href="image.png">

（4）Prerendering pages

預先渲染頁面，這是更牛的預加載方式了，他的作用就類似打開一個隱藏的tab差不多：

（5）新特性：Preloading

和prefetching不同的是，preloading會讓瀏覽器無論如何都下載指定的資源：

（6）H5音樂預加載?preload="auto"

<audio src="music.mp3" autoplay="autoplay" loop preload="auto" id="sendid2"></audio>

恩，合理利用以上標簽，可以一定程度上提高用戶體驗。

以上就是25學堂收集各位前端大神的的要點來跟大家分享這些干貨。希望各位可以選擇性的使用。