代碼優(yōu)化
這個部分僅僅將代碼優(yōu)化本身,不考慮性能,關(guān)于代碼部分的性能優(yōu)化在 頁面渲染 部分 代碼優(yōu)化 中
HTML+CSS
- 符合 XHTML 規(guī)范: 小寫,正確嵌套,必須關(guān)閉;
- 雙引號,合理縮進(jìn),utf-8編碼;
- 標(biāo)簽語義化,便于維護(hù);
- 合理注釋,比如 div 關(guān)閉的地方表明配對的 div;
- HTML,CSS,JS 分離,方便維護(hù);
- 避免使用 iframe, 否則會阻塞父文檔 onload;
- 樣式繼承,不要重復(fù);
- 不要亂用 href 和 onclick, 他們本質(zhì)不同,href 偏向資源加載,而 onclick 僅僅是點擊;其次 click 事件在 href 之前執(zhí)行;
- css偽類選擇器不宜太多,防止選擇器過載;
- 不要讓樣式難以覆蓋,少用
!improtant; - 善于利用樣式繼承(注意繼承和層疊是不一樣的概念);
- 不要保留過時的瀏覽器前綴和兼容性寫法;
JavaScript
- 標(biāo)識符簡短清晰,不用 1 和 0 代替 true 和 false,合理編寫注釋,提高代碼可讀性;
- 定義變量一定寫 var,以免污染全局,同時,new Function() 和 eval() 也會污染全局;
- 長字符串用字符串鏈接寫法,而非跨行。在兼容的情況下,用 ES6 中的多行字符串也更好;
- 不要在 if 和 for 中定義函數(shù),前置沒有意義,破壞分支;后者易出現(xiàn)循環(huán)參數(shù)拖尾的情況;
- 在此法作用域開始處聲明變量,提高可讀性;
-
var Name = function Name(){};有利于堆棧跟蹤(注意變量名一致性); - 位運算不要大于32位;
- 不要隨意重寫已有原型,可以用其實例化對象代替,實現(xiàn)實例繼承;
- 對象方法盡量返回 this 以便鏈?zhǔn)秸{(diào)用;
- 函數(shù)的放入同名文件夾中,定義 noConflict 方法導(dǎo)出前一版本并返回當(dāng)然版本;
- 設(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ù)疮薇。
性能優(yōu)化
頁面渲染
減少頁面 reflow
- 修改元素多個樣式可以通過修改 className 完成,這樣可以把多次 reflow 減少為一次 reflow;
- 修改元素多個樣式可以分為三步：先隱藏(display:none), 再修改,最后顯示凹蜂。這樣可以把多次 reflow 減少為兩次次 reflow;
- 添加頁面內(nèi)容可以通過將所有內(nèi)容寫入 docuemnt fragment 元素后再一次性 append 到頁面中;
- 添加頁面內(nèi)容可以通過將所有內(nèi)容組成長字符串,再一次性編輯 innerHTML 加入到頁面中;
- css(style 標(biāo)簽和 link 標(biāo)簽) 放在 head 中,這樣瀏覽器在加載數(shù)據(jù)時候可以直接通過 css tree 生成 render tree, 減少不必要的重新渲染;
- 在不影響視覺效果的情況下,盡量減少 js 動畫精度;
- div 布局優(yōu)于 table 布局,因為后者中元素任意屬性改名都會對整個表進(jìn)行回流;
優(yōu)化用戶體驗
- 使用懶加載技術(shù),保證首屏優(yōu)先加載;
- 使用異步腳步,不阻塞主頁面渲染;
- 先渲染界面,在不影響首屏情況下,使用 js 腳本動態(tài)加載后續(xù)數(shù)據(jù);
- 將不影響渲染的腳本后置(放在 body 之后),優(yōu)先渲染;
- 添加自定義的錯誤頁面（如404 not found 頁面）;
- 利用 GPU 加速;
代碼優(yōu)化
- 圖片 img 標(biāo)簽的 src 不要空著,以免產(chǎn)生多余請求;
- href, url()和 src 中的鏈接,用
//代替http://,/content/a.jpg代替content/a.jpg, 被替代的后者會多發(fā)送一個 http 請求; - 合理優(yōu)化外鏈 css 和 JS 以利用緩存;
- 資源控制在25kB之內(nèi),否則移動端可能無法緩存;
- 減少不必要的 DOM 節(jié)點;
- 十六進(jìn)制顏色優(yōu)于 rgb/hsl 函數(shù),圖形轉(zhuǎn)換優(yōu)于動畫,css 動畫優(yōu)于 js 動畫,少用 hack 寫法;
- 盡量避免 css 表達(dá)式;
- 不要重復(fù)加載相同代碼;
- 利用事件委托減少事件定義;
- 利用變量保存多次用到的 DOM 查詢結(jié)果,減少反復(fù)查找;
- 能用 !== 或 ===,就不要用 != 或 ==,減少不必要的隱式類型轉(zhuǎn)換;
- 盡量使用現(xiàn)有的函數(shù)方法,比如數(shù)組所有元素求和,直接用 reduce 方法, 再考慮用 map 方法,接著考慮 forEach 方法,然后是 for...in, 最后是 for;
- 利用 {} 或 [] 定義對象或數(shù)組,比 new Object() 或 new Array() 效率高;
- 避免 String 類型隱式裝箱（隱式調(diào)用 new String());
- 用 switch 代替過多的 if, 并按判斷條件的可能性排序,以便盡早結(jié)束判斷;
- [].join() 動態(tài)生成字符串比字符串鏈接(+)性能更好;
- nextSibling() 性能比 children 好虑绵；
- cloneNode() 比 createElement() 效率高乍桂；
- 考慮在頁面渲染完畢以后再動態(tài)加載輔助用的外部 js 腳本唤衫；
網(wǎng)絡(luò)通信
減少通信鏈接次數(shù)
- css spirit 將多次請求變?yōu)?次請求;
- 設(shè)置 http頭的屬性：connection: keep-alive,使得鏈接為長連接,減少頻繁的握手揮手過程;
- 設(shè)置合適的 http頭的屬性：expires, cache-control 和 max-age
- 合理利用瀏覽器本地緩存,路由緩存,使得一些數(shù)據(jù)不需要從服務(wù)器獲取;
- 去除不必要的重定向;
- 合并文件 如 css js腳本;
- 保存(緩存)必要的 Ajax 請求數(shù)據(jù);
減少數(shù)據(jù)傳輸距離和數(shù)據(jù)大小
- 壓縮代碼;
- 使用內(nèi)容分發(fā)網(wǎng)絡(luò)(cdn), 如 Akamai, Limelight等;
- 使用 Gzip 壓縮;
- 使用新的圖片格式或矢量圖,如
.apng,.webp和.svg; - 必要時, 減小 cookie, 以減少 http 請求中的數(shù)據(jù)量;
- 盡量用縮寫的 css 樣式;
- 合理利用服務(wù)器緩存,cdn緩存;
- 盡量少用或不用 ETag,一般情況下 Expires 頭已經(jīng)夠用了;
合理利用服務(wù)器資源
- 使用負(fù)載均衡技術(shù),如硬件技術(shù)：Alteon, F5和軟件技術(shù)：Nginx, LVS;
- 減少 DNS 查找時間(控制在20ms~100ms);
- 設(shè)置圖片服務(wù)器;
- 增加 TTL 時長,建議為24hours(引自Steve Souders的《High Performance Web Sites》)
SEO
- 完善 meta 標(biāo)簽,discription 簡潔明了,keywords 清晰;
- 重要內(nèi)容不要用 js 或后端語言加載;
- 合理利用 h標(biāo)簽,尤其 h1 標(biāo)簽,有很高權(quán)重;
- 圖片寫上合理的 alt 值;
- URI 控制在 256KB 之內(nèi);
- 不要使用 iframe;
- 語義化標(biāo)簽的使用;
綜合優(yōu)化
- 用多個域名存儲網(wǎng)站資源(減小cookie, 節(jié)約主域名連接數(shù),突破瀏覽器并發(fā)限制,優(yōu)化cdn緩存)
- 使用 base64 Encode 圖片,減小鏈接數(shù)量和傳輸大小刁笙。
