前端性能優化的總結

時間 2019-12-04

標籤前端性能優化總結欄目系統性能简体版

原文原文鏈接

前端性能的總結記錄：javascript

一、實現html的語義化　css

　　語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。通俗地講,語義化就是對數據和信息進行處理,使得機器能夠理解.

　　語義化的(X)HTML文檔有助於提高你的網站對訪客的易用性，好比使用PDA、文字瀏覽器以及殘障人士將從中受益。對於搜索引擎或者爬蟲軟件來講，則有助於它們創建索引，並可能給予一個較高的權值。

　　通常來講語義化的好處是爲了搜索引擎，和適配閱讀器，對於性能的優化效果不是特別明顯。

二、css，js文件數量及大小的優化

　　要求css與js文件引入的時候須要進行壓縮，有助於頁面渲染前，下載速度的提高。每次頁面加載都要想服務器發出請求，下載外聯的文件，越小進入下一步的速度越快

三、css文件放在head中，js內聯的文件放在body的最後位置

　　html頁面的渲染操做是在body中開始的，至上而下逐步渲染，由於js文件常常會包含對於頁面元素的改變。所以，頁面對於js內容進行了所謂的阻塞處理，即加載js模塊時，頁面渲染中止，加載完以後再進行渲染。爲了不阻塞，js模塊放在body中的末尾位置，以防阻塞。外聯的css與js文件要放在head中，這些內容會在渲染前下載。

四、使用外部javascript和CSS

　　外部的能夠被緩存，多個頁面能夠調用

五、避免重定向

六、js的代碼精簡，規範化編寫

七、圖標能夠用繪圖來代替

　　多個圖標能夠放在一張圖裏，而後經過定位來獲取相應的圖標，避免重複的下載，屢次的http請求

1 <style>2 .icon{background: url("Icons.png") -112px -78px; width:32px;height: 35px; border: 0px;cursor: pointer;}3 </style>4 <body>5 <div class="icon"></div>6 </body>