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

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

1、WebAPP移動(dòng)前端性能優(yōu)化規(guī)范和設(shè)計(jì)指導(dǎo)

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

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

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

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

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

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

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

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

比如我們常用的插件：

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

& ?簡(jiǎn)單的JavaScript圖像延遲加載庫(kù)Echo.js等。

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

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

簡(jiǎn)單明了的解釋：

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

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

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

（1）DNS prefetching

DNS解析的速度可用通過下面的標(biāo)簽來進(jìn)行預(yù)解析：

<link rel="dns-prefetch" >

（2）Preconnect

和DNS預(yù)解析差不多，Preconnect還會(huì)做TCP握手和TLS Negotiation。

<link rel="preconnect" >

（3）Prefetching

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

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

（4）Prerendering pages

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

（5）新特性：Preloading

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

（6）H5音樂預(yù)加載?preload="auto"

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

恩，合理利用以上標(biāo)簽，可以一定程度上提高用戶體驗(yàn)。

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