摘要：是具有此屬性的域名不需要用戶(hù)點(diǎn)擊鏈接就在后臺(tái)解析，而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作，所以這個(gè)方式能減少用戶(hù)的等待時(shí)間，提升用戶(hù)體驗(yàn)。

web前端性能優(yōu)化主要分為以下幾個(gè)板塊:

加載優(yōu)化

DNS預(yù)解析

合并img、css、javascript文件，減少http請(qǐng)求

緩存一切可緩存資源

使用長(zhǎng)Cache

使用外聯(lián)式引用css、javascript文件

壓縮HTML、css、javascript文件

啟用GZip

使用首屏加載(比如同構(gòu))

使用按需加載資源文件

使用滾屏記載資源文件

資源懶加載

通過(guò)Media Query加載css文件

增加Loading進(jìn)度條

減少Cookie

避免重點(diǎn)向

圖片優(yōu)化

在保證圖片質(zhì)量的情況下，壓縮圖片，減少圖片大小

使用Css3、svg、iconfont代替圖片

首次加載不大于1024KB的圖片

圖片寬不大于640px(移動(dòng)端)

腳本優(yōu)化

減少重回和回流操作

緩存DOM元素、DOM列表長(zhǎng)度length、屬性值

使用事件委托，避免批量綁定事件

盡量使用ID選擇器

使用touch事件代替click事件

使用節(jié)流函數(shù)減少性能消耗

HTML優(yōu)化

css文件寫(xiě)在頭部，javascript放在尾部

避免層級(jí)深嵌套

避免img、iframe、a等元素的空src

避免行內(nèi)樣式和事件綁定

大圖片避免使用base64

css優(yōu)化

移除空的css規(guī)則

正確使用display的屬性

不濫用float

不聲明過(guò)多的font-size

值為0時(shí)不要使用單位

標(biāo)準(zhǔn)化各種瀏覽器前綴

渲染優(yōu)化

HTML使用viewport(移動(dòng)端)

減少DOM節(jié)點(diǎn)

盡量使用CSS3 3d動(dòng)畫(huà)來(lái)觸發(fā)GPU渲染

使用requestAnimationFrame代替setTimeInter和setTimeout

適當(dāng)使用canvas動(dòng)畫(huà)

對(duì)于resize、mousemove事件使用節(jié)流處理，較少DOM回流和重繪次數(shù)

重點(diǎn)提示:

首屏加載

首屏的快速顯示，可以大大提升用戶(hù)對(duì)頁(yè)面速度的感知，因此應(yīng)盡量針對(duì)首屏的快速顯示做優(yōu)化，比如使用Loading等待動(dòng)畫(huà)、服務(wù)器渲染首屏(同構(gòu))...

DNS預(yù)解析

DNS 作為互聯(lián)網(wǎng)的基礎(chǔ)協(xié)議，其解析的速度似乎容易被網(wǎng)站優(yōu)化人員忽視?，F(xiàn)在大多數(shù)新瀏覽器已經(jīng)針對(duì)DNS解 析進(jìn)行了優(yōu)化，典型的一次DNS解析耗費(fèi)20-120 毫秒，減少DNS解析時(shí)間和次數(shù)是個(gè)很好的優(yōu)化方式。DNS Prefetching是具有此屬性的域名不需要用戶(hù)點(diǎn)擊鏈接就在后臺(tái)解析，而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作，所以這個(gè)方式能減少用戶(hù)的等待時(shí)間，提升用戶(hù)體驗(yàn)。

瀏覽器對(duì)網(wǎng)站第一次的域名DNS解析查找流程依次為：

瀏覽器緩存-系統(tǒng)緩存-路由器緩存-ISP DNS緩存-遞歸搜索

DNS預(yù)解析的實(shí)現(xiàn)：

用meta信息來(lái)告知瀏覽器, 當(dāng)前頁(yè)面要做DNS預(yù)解析:

在頁(yè)面header中使用link標(biāo)簽來(lái)強(qiáng)制對(duì)DNS預(yù)解析:

示例

注：dns-prefetch需慎用，多頁(yè)面重復(fù)DNS預(yù)解析會(huì)增加重復(fù)DNS查詢(xún)次數(shù)。

PS：DNS預(yù)解析主要是用于網(wǎng)站前端頁(yè)面優(yōu)化，在SEO中的作用湛藍(lán)還未作驗(yàn)證，但作為增強(qiáng)用戶(hù)體驗(yàn)的一部分rel="dns-prefetch"或許值得大家慢慢發(fā)現(xiàn)。