資訊專欄INFORMATION COLUMN
摘要：是具有此屬性的域名不需要用戶點(diǎn)擊鏈接就在后臺(tái)解析，而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作，所以這個(gè)方式能減少用戶的等待時(shí)間，提升用戶體驗(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))
使用按需加載資源文件
使用滾屏記載資源文件
資源懶加載
通過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文件寫在頭部，javascript放在尾部
避免層級(jí)深嵌套
避免img、iframe、a等元素的空src
避免行內(nèi)樣式和事件綁定
大圖片避免使用base64
css優(yōu)化
移除空的css規(guī)則
正確使用display的屬性
不濫用float
不聲明過多的font-size
值為0時(shí)不要使用單位
標(biāo)準(zhǔn)化各種瀏覽器前綴
渲染優(yōu)化
HTML使用viewport(移動(dòng)端)
減少DOM節(jié)點(diǎn)
盡量使用CSS3 3d動(dòng)畫來觸發(fā)GPU渲染
使用requestAnimationFrame代替setTimeInter和setTimeout
適當(dāng)使用canvas動(dòng)畫
對(duì)于resize、mousemove事件使用節(jié)流處理，較少DOM回流和重繪次數(shù)
重點(diǎn)提示:
首屏加載
首屏的快速顯示，可以大大提升用戶對(duì)頁面速度的感知，因此應(yīng)盡量針對(duì)首屏的快速顯示做優(yōu)化，比如使用Loading等待動(dòng)畫、服務(wù)器渲染首屏(同構(gòu))...
DNS預(yù)解析
DNS 作為互聯(lián)網(wǎng)的基礎(chǔ)協(xié)議，其解析的速度似乎容易被網(wǎng)站優(yōu)化人員忽視。現(xiàn)在大多數(shù)新瀏覽器已經(jīng)針對(duì)DNS解 析進(jìn)行了優(yōu)化，典型的一次DNS解析耗費(fèi)20-120 毫秒，減少DNS解析時(shí)間和次數(shù)是個(gè)很好的優(yōu)化方式。DNS Prefetching是具有此屬性的域名不需要用戶點(diǎn)擊鏈接就在后臺(tái)解析，而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作，所以這個(gè)方式能減少用戶的等待時(shí)間，提升用戶體驗(yàn)。
瀏覽器對(duì)網(wǎng)站第一次的域名DNS解析查找流程依次為：
瀏覽器緩存-系統(tǒng)緩存-路由器緩存-ISP DNS緩存-遞歸搜索
DNS預(yù)解析的實(shí)現(xiàn)：
用meta信息來告知瀏覽器, 當(dāng)前頁面要做DNS預(yù)解析:
在頁面header中使用link標(biāo)簽來強(qiáng)制對(duì)DNS預(yù)解析:
示例
注：dns-prefetch需慎用，多頁面重復(fù)DNS預(yù)解析會(huì)增加重復(fù)DNS查詢次數(shù)。
PS：DNS預(yù)解析主要是用于網(wǎng)站前端頁面優(yōu)化，在SEO中的作用湛藍(lán)還未作驗(yàn)證，但作為增強(qiáng)用戶體驗(yàn)的一部分rel="dns-prefetch"或許值得大家慢慢發(fā)現(xiàn)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.hztianpu.com/yun/113104.html
摘要：是具有此屬性的域名不需要用戶點(diǎn)擊鏈接就在后臺(tái)解析，而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作，所以這個(gè)方式能減少用戶的等待時(shí)間，提升用戶體驗(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、jav...
摘要：順便一說，這首歌的原唱是秋田，中島當(dāng)年嗓子壞了，才有這歌。中文是直接翻譯來的，作曲是秋田。一部電影春夏秋冬又一春春夏秋冬又一春是由金基德執(zhí)導(dǎo)，金英民吳英秀金基德主演的一部韓國(guó)電影。年月日于韓國(guó)上映。 原鏈接： http://bluezhan.me/weekly/#/9-2 1、web前端 Angular vs. React vs. Vue: A 2017 comparison 9 S...
閱讀 3360·2021-11-18 10:02
閱讀 2791·2021-10-13 09:47
閱讀 3387·2021-09-22 15:07
閱讀 1065·2019-08-30 15:43
閱讀 2007·2019-08-30 10:59
閱讀 1988·2019-08-29 15:34
閱讀 1919·2019-08-29 15:06
閱讀 640·2019-08-29 13:28
