這里寫自定義目錄標題
- 如何在前端實作性能優化
- HTML優化方法
- CSS優化方法
- Javascript優化
如何在前端實作性能優化
影響用戶訪問的最大部分是前端的頁面，
網站的劃分一般為二：前端和后臺，我們可以理解成后臺是用來實作網站的功能的，比如：實作用戶注冊，用戶能夠為文章發表評論等等，而前端呢？其實應該是屬于功能的表現，
而我們建設網站的目的是什么呢？不就是為了讓目標人群來訪問嗎？所以我們可以理解成前端才是真正和用戶接觸的，
除了后臺需要在性能上做優化外，其實前端的頁面更需要在性能優化上下功夫，只有這樣才能給我們的用戶帶來更好的用戶體驗，不僅僅如此，如果前端優化得好，他不僅可以為企業節約成本，他還能給用戶帶來更多的用戶，因為增強的用戶體驗，說了這么多，那么我們應該如何對我們前端的頁面進行性能優化呢？
HTML優化方法
1.精簡html代碼
可以減少html的嵌套也就是層級關系盡量減小，也可以減小DOM節點數也就是盡量壓縮優化DOM的節點數, 讓瀏覽器渲染的DOM節點數最少，
減少一些無語意的代碼，比如說空標簽清浮動那種代碼
能不用最好不要用，建議連接中洗掉http或者https，因為一般鏈接的協議頭和頁面的協議頭都是一致的，寫他們多了4-5個字符其實是沒有什么意義的，而且可以減少代碼體積，
也可以洗掉多余的空格，換行符，縮進和不必要的注釋，一般會用壓縮工具來處理這個程序，可以省略一些標簽和屬性，使用相對路徑的url，最大范圍的減少位元組數，
2.檔案位置
css檔案鏈接盡量放在頁面頭部，css加載不會阻塞DOM Tree決議，但是會阻塞DOM Tree渲染，也會阻塞后面js執行，也就是說DOM Tree在渲染前就要決議好CSS，從而減少瀏覽器重排檔案的次數，而且css放在頁面底部會導致頁面白屏時間變長，
js檔案一般放在頁面底部，這是防止js的加載和決議阻塞頁面元素的正常渲染，
3.用戶體驗
設定favicon.ico, 如果不設定控制臺會報錯，而且用戶訪問的時候地址欄也是空的，不利于品牌記憶，
增加首屏必要的css和js，一般頁面需要在等待所有的依賴加載完成才會展示，這樣就會導致頁面存在空白，影響用戶體驗，可以增加背景圖或者loading或者骨架屏，比空白頁好很多，
CSS優化方法
1.提升css渲染性能
謹慎使用一些expensive的屬性，比如nth-child偽類或者position:fixed定位，因為這些比較消耗瀏覽器的渲染性能，
盡量減少一些樣式層級的級數，比如，div ul li span i { color: red}, 其實我們可以給i標簽設定class，直接書寫樣式，
避免使用占用過多cpu和記憶體的屬性，比如text-indent不要設定太大的值，
盡量避免使用耗電量大的屬性，比較占用GPU, 比如transfrom是，transitions, opacity.
精簡css代碼，使用縮寫的陳述句，比如margin-top可以寫在margin中，再者如果值為0能洗掉就洗掉，洗掉不必要的單位值，洗掉過多的分號，洗掉空格和注釋，盡量減小樣式表的體積，其實這些都可以使用壓縮工具來處理，會方便很多，
2.css影片優化
避免同時影片，也就是說用戶訪問的螢屏區間里面不要有過多的影片，影片太多會干擾用戶正常瀏覽網站，而且影片多也影響瀏覽器的性能，
延遲影片的初始化，可以讓其它css先渲染，讓影片延遲，比如說0.5或1，
Javascript優化
1.提升js檔案的加載性能
css檔案放在head標簽中，js檔案放在body結尾的地方，這個是js的加載不要影響html的渲染，
2.變數和函式方面的優化
盡量使用id選擇器，因為id選擇器在查詢效果上效率最快，
js函式盡可能保持簡潔，不要把太多內容寫在一個函式中，也建議使用事件的節流函式，
3.js影片
盡量避免添加大量的js影片，css3影片和canvas影片都比js影片性能好，
4.使用邏輯快取
快取dom物件，也就是用一個變數來存盤dom物件，不要每次使用都查詢，
快取串列長度，也就是說用變數存盤dom元素的個數，而不是每次都重新計算，
比如百度M站，會把頁面的css和js放在本地存盤里面，這樣后面再加載的時候就直接從本地存盤里面取，實作秒考的效果，不過本地存盤空間有限，要謹慎使用，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272264.html
標籤：其他
上一篇：理解javascript中的原型