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

zhaofeihao 發布于2019-08-02 16:05 / 2724人閱讀

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

代碼優化

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

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 圖片,減小鏈接數量和傳輸大小。

云服務器 GPU云服務器前端開發性能優化前端性能優化 web性能優化 web前端優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54629.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
web前端開發編碼規范及性能優化

摘要：性能優化頁面渲染減少頁面修改元素多個樣式可以通過修改完成這樣可以把多次減少為一次修改元素多個樣式可以分為三步先隱藏再修改最后顯示。代碼優化這個部分僅僅將代碼優化本身,不考慮性能,關于代碼部分的性能優化在頁面渲染部分代碼優化中 HTML+CSS 符合 XHTML 規范: 小寫,正確嵌套,必須關閉; 雙引號,合理縮進,utf-8編碼; 標簽語義化,便于維護; 合理注釋,比如 ...

zsy888 2019-08-29 16:40 評論0 收藏0
web前端開發編碼規范及性能優化

摘要：性能優化頁面渲染減少頁面修改元素多個樣式可以通過修改完成這樣可以把多次減少為一次修改元素多個樣式可以分為三步先隱藏再修改最后顯示。代碼優化這個部分僅僅將代碼優化本身,不考慮性能,關于代碼部分的性能優化在頁面渲染部分代碼優化中 HTML+CSS 符合 XHTML 規范: 小寫,正確嵌套,必須關閉; 雙引號,合理縮進,utf-8編碼; 標簽語義化,便于維護; 合理注釋,比如 ...

susheng 2019-08-23 11:53 評論0 收藏0
前端周刊第62期：學習學習再學習

摘要：騰訊前端技術大會和全球技術領導力峰會都于上周閉幕，我翻看了下講稿，有價值的參考還是不少。騰訊前端大會下載騰訊前端大會是由騰訊主辦，廣邀國內外的前端大牛，有著名流行框架的作者知名前端書籍的作者工程化方面的權威等。 showImg(https://segmentfault.com/img/bVQk0r?w=757&h=427); 共 2462 字，讀完需 4 分鐘。騰訊前端技術大會（TFC...

tinylcy 2019-08-20 17:46 評論0 收藏0