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