摘要：性能優(yōu)化頁(yè)面渲染減少頁(yè)面修改元素多個(gè)樣式可以通過(guò)修改完成這樣可以把多次減少為一次修改元素多個(gè)樣式可以分為三步先隱藏再修改最后顯示。

這個(gè)部分僅僅將代碼優(yōu)化本身,不考慮性能,關(guān)于代碼部分的性能優(yōu)化在 頁(yè)面渲染 部分 代碼優(yōu)化 中

符合 XHTML 規(guī)范: 小寫,正確嵌套,必須關(guān)閉;

雙引號(hào),合理縮進(jìn),utf-8編碼;

標(biāo)簽語(yǔ)義化,便于維護(hù);

合理注釋,比如 div 關(guān)閉的地方表明配對(duì)的 div;

HTML,CSS,JS 分離,方便維護(hù);

避免使用 iframe, 否則會(huì)阻塞父文檔 onload;

樣式繼承,不要重復(fù);

不要亂用 href 和 onclick, 他們本質(zhì)不同,href 偏向資源加載,而 onclick 僅僅是點(diǎn)擊;其次 click 事件在 href 之前執(zhí)行;

css偽類選擇器不宜太多,防止選擇器過(guò)載;

不要讓樣式難以覆蓋,少用!improtant;

善于利用樣式繼承(注意繼承和層疊是不一樣的概念);

不要保留過(guò)時(shí)的瀏覽器前綴和兼容性寫法;

標(biāo)識(shí)符簡(jiǎn)短清晰,不用 1 和 0 代替 true 和 false,合理編寫注釋,提高代碼可讀性;

定義變量一定寫 var,以免污染全局,同時(shí),new Function() 和 eval() 也會(huì)污染全局;

長(zhǎng)字符串用字符串鏈接寫法,而非跨行。在兼容的情況下,用 ES6 中的多行字符串也更好;

不要在 if 和 for 中定義函數(shù),前置沒(méi)有意義,破壞分支;后者易出現(xiàn)循環(huán)參數(shù)拖尾的情況;

在此法作用域開始處聲明變量,提高可讀性;

var Name = function Name(){}; 有利于堆棧跟蹤(注意變量名一致性);

位運(yùn)算不要大于32位;

不要隨意重寫已有原型,可以用其實(shí)例化對(duì)象代替,實(shí)現(xiàn)實(shí)例繼承;

對(duì)象方法盡量返回 this 以便鏈?zhǔn)秸{(diào)用;

函數(shù)的放入同名文件夾中,定義 noConflict 方法導(dǎo)出前一版本并返回當(dāng)然版本;

設(shè)計(jì)封裝(類,閉包,模塊)時(shí),盡量使用嚴(yán)格模式;

在內(nèi)容為 js 的 script 標(biāo)簽上和內(nèi)容為 css 的 link 標(biāo)簽上省略 type 屬性和 lang 屬性;

注意變量名不要使用保留字和系統(tǒng)全局變量(方法)一樣;

以下行為污染全局: setTimeout 和 setInterval 的首參傳入字符串; eval()函數(shù); new Function() 構(gòu)造函數(shù)。

修改元素多個(gè)樣式可以通過(guò)修改 className 完成,這樣可以把多次 reflow 減少為一次 reflow;

修改元素多個(gè)樣式可以分為三步：先隱藏(display:none), 再修改,最后顯示。這樣可以把多次 reflow 減少為兩次次 reflow;

添加頁(yè)面內(nèi)容可以通過(guò)將所有內(nèi)容寫入 docuemnt fragment 元素后再一次性 append 到頁(yè)面中;

添加頁(yè)面內(nèi)容可以通過(guò)將所有內(nèi)容組成長(zhǎng)字符串,再一次性編輯 innerHTML 加入到頁(yè)面中;

css(style 標(biāo)簽和 link 標(biāo)簽) 放在 head 中,這樣瀏覽器在加載數(shù)據(jù)時(shí)候可以直接通過(guò) css tree 生成 render tree, 減少不必要的重新渲染;

在不影響視覺(jué)效果的情況下,盡量減少 js 動(dòng)畫精度;

div 布局優(yōu)于 table 布局,因?yàn)楹笳咧性厝我鈱傩愿拿紩?huì)對(duì)整個(gè)表進(jìn)行回流;

使用懶加載技術(shù),保證首屏優(yōu)先加載;

使用異步腳步,不阻塞主頁(yè)面渲染;

先渲染界面,在不影響首屏情況下,使用 js 腳本動(dòng)態(tài)加載后續(xù)數(shù)據(jù);

將不影響渲染的腳本后置(放在 body 之后),優(yōu)先渲染;

添加自定義的錯(cuò)誤頁(yè)面（如404 not found 頁(yè)面）;

利用 GPU 加速;

圖片 img 標(biāo)簽的 src 不要空著,以免產(chǎn)生多余請(qǐng)求;

href, url()和 src 中的鏈接,用//代替http://,/content/a.jpg代替content/a.jpg, 被替代的后者會(huì)多發(fā)送一個(gè) http 請(qǐng)求;

合理優(yōu)化外鏈 css 和 JS 以利用緩存;

資源控制在25kB之內(nèi),否則移動(dòng)端可能無(wú)法緩存;

減少不必要的 DOM 節(jié)點(diǎn);

十六進(jìn)制顏色優(yōu)于 rgb/hsl 函數(shù),圖形轉(zhuǎn)換優(yōu)于動(dòng)畫,css 動(dòng)畫優(yōu)于 js 動(dòng)畫,少用 hack 寫法;

盡量避免 css 表達(dá)式;

不要重復(fù)加載相同代碼;

利用事件委托減少事件定義;

利用變量保存多次用到的 DOM 查詢結(jié)果,減少反復(fù)查找;

能用 !== 或 ===,就不要用 != 或 ==,減少不必要的隱式類型轉(zhuǎn)換;

盡量使用現(xiàn)有的函數(shù)方法,比如數(shù)組所有元素求和,直接用 reduce 方法, 再考慮用 map 方法,接著考慮 forEach 方法,然后是 for...in, 最后是 for;

利用 {} 或 [] 定義對(duì)象或數(shù)組,比 new Object() 或 new Array() 效率高;

避免 String 類型隱式裝箱（隱式調(diào)用 new String());

用 switch 代替過(guò)多的 if, 并按判斷條件的可能性排序,以便盡早結(jié)束判斷;

[].join() 動(dòng)態(tài)生成字符串比字符串鏈接(+)性能更好;

nextSibling() 性能比 children 好；

cloneNode() 比 createElement() 效率高；

考慮在頁(yè)面渲染完畢以后再動(dòng)態(tài)加載輔助用的外部 js 腳本；

css spirit 將多次請(qǐng)求變?yōu)?次請(qǐng)求;

設(shè)置 http頭的屬性：connection: keep-alive,使得鏈接為長(zhǎng)連接,減少頻繁的握手揮手過(guò)程;

設(shè)置合適的 http頭的屬性：expires, cache-control 和 max-age

合理利用瀏覽器本地緩存,路由緩存,使得一些數(shù)據(jù)不需要從服務(wù)器獲取;

去除不必要的重定向;

合并文件 如 css js腳本;

保存(緩存)必要的 Ajax 請(qǐng)求數(shù)據(jù);

壓縮代碼;

使用內(nèi)容分發(fā)網(wǎng)絡(luò)(cdn), 如 Akamai, Limelight等;

使用 Gzip 壓縮;

使用新的圖片格式或矢量圖,如 .apng, .webp 和 .svg;

必要時(shí), 減小 cookie, 以減少 http 請(qǐng)求中的數(shù)據(jù)量;

盡量用縮寫的 css 樣式;

合理利用服務(wù)器緩存,cdn緩存;

盡量少用或不用 ETag,一般情況下 Expires 頭已經(jīng)夠用了;

使用負(fù)載均衡技術(shù),如硬件技術(shù)：Alteon, F5和軟件技術(shù)：Nginx, LVS;

減少 DNS 查找時(shí)間(控制在20ms~100ms);

設(shè)置圖片服務(wù)器;

增加 TTL 時(shí)長(zhǎng),建議為24hours(引自Steve Souders的《High Performance Web Sites》)

完善 meta 標(biāo)簽,discription 簡(jiǎn)潔明了,keywords 清晰;

重要內(nèi)容不要用 js 或后端語(yǔ)言加載;

合理利用 h標(biāo)簽,尤其 h1 標(biāo)簽,有很高權(quán)重;

圖片寫上合理的 alt 值;

URI 控制在 256KB 之內(nèi);

不要使用 iframe;

語(yǔ)義化標(biāo)簽的使用;

用多個(gè)域名存儲(chǔ)網(wǎng)站資源(減小cookie, 節(jié)約主域名連接數(shù),突破瀏覽器并發(fā)限制,優(yōu)化cdn緩存)

使用 base64 Encode 圖片,減小鏈接數(shù)量和傳輸大小。