web前端開發編碼規範及性能優化

代碼優化

這個部分僅僅將代碼優化自己,不考慮性能,關於代碼部分的性能優化在 頁面渲染 部分 代碼優化 中

HTML+CSS

• 符合 XHTML 規範: 小寫,正確嵌套,必須關閉;
• 雙引號,合理縮進,utf-8編碼;
• 標籤語義化,便於維護;
• 合理註釋,好比 div 關閉的地方代表配對的 div;
• HTML,CSS,JS 分離,方便維護;
• 避免使用 iframe, 不然會阻塞父文檔 onload;
• 樣式繼承,不要重複;
• 不要亂用 href 和 onclick, 他們本質不一樣,href 偏向資源加載,而 onclick 僅僅是點擊;其次 click 事件在 href 以前執行;
• css僞類選擇器不宜太多,防止選擇器過載;
• 不要讓樣式難以覆蓋,少用!improtant;
• 善於利用樣式繼承(注意繼承和層疊是不同的概念);
• 不要保留過期的瀏覽器前綴和兼容性寫法;

JavaScript

• 標識符簡短清晰,不用 1 和 0 代替 true 和 false,合理編寫註釋,提升代碼可讀性;
• 定義變量必定寫 var,以避免污染全局,同時,new Function() 和 eval() 也會污染全局;
• 長字符串用字符串連接寫法,而非跨行。在兼容的狀況下,用 ES6 中的多行字符串也更好;
• 不要在 if 和 for 中定義函數,前置沒有意義,破壞分支;後者易出現循環參數拖尾的狀況;
• 在此法做用域開始處聲明變量,提升可讀性;
• var Name = function Name(){}; 有利於堆棧跟蹤(注意變量名一致性);
• 位運算不要大於32位;
• 不要隨意重寫已有原型,能夠用其實例化對象代替,實現實例繼承;
• 對象方法儘可能返回 this 以便鏈式調用;
• 函數的放入同名文件夾中,定義 noConflict 方法導出前一版本並返回固然版本;
• 設計封裝(類,閉包,模塊)時,儘可能使用嚴格模式;
• 在內容爲 js 的 script 標籤上和內容爲 css 的 link 標籤上省略 type 屬性和 lang 屬性;
• 注意變量名不要使用保留字和系統全局變量(方法)同樣;
• 如下行爲污染全局: setTimeout 和 setInterval 的首參傳入字符串; eval()函數; new Function() 構造函數。

性能優化

頁面渲染

減小頁面 reflow

• 修改元素多個樣式能夠經過修改 className 完成,這樣能夠把屢次 reflow 減小爲一次 reflow;
• 修改元素多個樣式能夠分爲三步：先隱藏(display:none), 再修改,最後顯示。這樣能夠把屢次 reflow 減小爲兩次次 reflow;
• 添加頁面內容能夠經過將全部內容寫入 docuemnt fragment 元素後再一次性 append 到頁面中;
• 添加頁面內容能夠經過將全部內容組成長字符串,再一次性編輯 innerHTML 加入到頁面中;
• css(style 標籤和 link 標籤) 放在 head 中,這樣瀏覽器在加載數據時候能夠直接經過 css tree 生成 render tree, 減小沒必要要的從新渲染;
• 在不影響視覺效果的狀況下,儘可能減小 js 動畫精度;
• div 佈局優於 table 佈局,由於後者中元素任意屬性更名都會對整個表進行迴流;

優化用戶體驗

• 使用懶加載技術,保證首屏優先加載;
• 使用異步腳步,不阻塞主頁面渲染;
• 先渲染界面,在不影響首屏狀況下,使用 js 腳本動態加載後續數據;
• 將不影響渲染的腳本後置(放在 body 以後),優先渲染;
• 添加自定義的錯誤頁面（如404 not found 頁面）;
• 利用 GPU 加速;

代碼優化

• 圖片 img 標籤的 src 不要空着,以避免產生多餘請求;
• href, url()和 src 中的連接,用//代替http://,/content/a.jpg代替content/a.jpg, 被替代的後者會多發送一個 http 請求;
• 合理優化外鏈 css 和 JS 以利用緩存;
• 資源控制在25kB以內,不然移動端可能沒法緩存;
• 減小沒必要要的 DOM 節點;
• 十六進制顏色優於 rgb/hsl 函數,圖形轉換優於動畫,css 動畫優於 js 動畫,少用 hack 寫法;
• 儘可能避免 css 表達式;
• 不要重複加載相同代碼;
• 利用事件委託減小事件定義;
• 利用變量保存屢次用到的 DOM 查詢結果,減小反覆查找;
• 能用 !== 或 ===,就不要用 != 或 ==,減小沒必要要的隱式類型轉換;
• 儘可能使用現有的函數方法,好比數組全部元素求和,直接用 reduce 方法, 再考慮用 map 方法,接着考慮 forEach 方法,而後是 for...in, 最後是 for;
• 利用 {} 或 [] 定義對象或數組,比 new Object() 或 new Array() 效率高;
• 避免 String 類型隱式裝箱（隱式調用 new String());
• 用 switch 代替過多的 if, 並按判斷條件的可能性排序,以便儘早結束判斷;
• [].join() 動態生成字符串比字符串連接(+)性能更好;
• nextSibling() 性能比 children 好；
• cloneNode() 比 createElement() 效率高；
• 考慮在頁面渲染完畢之後再動態加載輔助用的外部 js 腳本；

網絡通訊

減小通訊連接次數

• css spirit 將屢次請求變爲1次請求;
• 設置 http頭的屬性：connection: keep-alive,使得連接爲長鏈接,減小頻繁的握手揮手過程;
• 設置合適的 http頭的屬性：expires, cache-control 和 max-age
• 合理利用瀏覽器本地緩存,路由緩存,使得一些數據不須要從服務器獲取;
• 去除沒必要要的重定向;
• 合併文件 如 css js腳本;
• 保存(緩存)必要的 Ajax 請求數據;

減小數據傳輸距離和數據大小

• 壓縮代碼;
• 使用內容分發網絡(cdn), 如 Akamai, Limelight等;
• 使用 Gzip 壓縮;
• 使用新的圖片格式或矢量圖,如 .apng, .webp 和 .svg;
• 必要時, 減少 cookie, 以減小 http 請求中的數據量;
• 儘可能用縮寫的 css 樣式;
• 合理利用服務器緩存,cdn緩存;
• 儘可能少用或不用 ETag,通常狀況下 Expires 頭已經夠用了;

合理利用服務器資源

• 使用負載均衡技術,如硬件技術：Alteon, F5和軟件技術：Nginx, LVS;
• 減小 DNS 查找時間(控制在20ms~100ms);
• 設置圖片服務器;
• 增長 TTL 時長,建議爲24hours(引自Steve Souders的《High Performance Web Sites》)

SEO

• 完善 meta 標籤,discription 簡潔明瞭,keywords 清晰;
• 重要內容不要用 js 或後端語言加載;
• 合理利用 h標籤,尤爲 h1 標籤,有很高權重;
• 圖片寫上合理的 alt 值;
• URI 控制在 256KB 以內;
• 不要使用 iframe;
• 語義化標籤的使用;

綜合優化

• 用多個域名存儲網站資源(減少cookie, 節約主域名鏈接數,突破瀏覽器併發限制,優化cdn緩存)
• 使用 base64 Encode 圖片,減少連接數量和傳輸大小。