網站性能優化

　　網站前端的優化仍是很重要的，減小請求數，減小頁面打開時間都能對頁面訪問性能提高很多，最近公司就在全站作優化。

　　因爲公司的站已經有兩三年的歷史了，平時pm提的需求會分給不一樣的前端人員作，對插件引入和請求外部資源也沒有明確的規定，都是每一個人完成業務需求就能夠了，長此以往頁面就比較臃腫，一看請求數特別多，因此最近咱們在作整站優化，減小請求數和提高頁面打開時間。　　

　　下面大概總結下本身此次的優化的點：

　　1，使用頻率較高的JS插件壓縮合並   js/css combine

　　說明：頁面出現頻率較高的插件能夠合併到公用文件（能夠取名爲：plugins.min.js），好比"輪播插件"，"彈窗插件"，「腳本文件加載插件」等。

　　舉例：

　　若是幾個js插件依賴程度特別高，則合併在一塊兒，其餘插件分開合併。

　　

　　  好比合並這兩個插件，合併後文件名改成：jquery-1.8.0-LAB.2.0.3.min.js

　　總之合併規則就是：文件.版本號-文件.版本號-文件.版本號.min.js => a.1.0-b.1.0-c.1.0.min.js

 

　　2，有些功能，用到的時候再加載js，好比點擊某個按鈕觸發某個功能，這個功能的js腳本經過按鈕點擊事件再觸發，不用的時候不加載

　　3，小圖標合併成雪碧圖，這個不用多解釋了吧   css sprites

　　4，能使用css繪製的小圖標儘可能別用圖片，好比三角形，或者x,再或者若有些小圖標能夠用base64弄，能夠搜在線base64轉換的，這樣減小請求數，還能夠優先提早加載出來，增強了體驗感

　　5，減小圖片大小，好比帶alpha通道的png圖片，可使用神器 https://tinypng.com/ 在線壓縮下，能減小圖片大小，而且保留alpha通道，壓縮先後基本上沒啥區別，已經讓咱們的設計鑑定過可行，這是咱們本身站用的：

　　　　

　  6，資源加載順序，因爲瀏覽器自上而下加載，遇到資源文件會加載資源文件，阻塞進程，若是把js放在head裏，會影響樣式顯示,出現白色頁面，影響體驗，儘可能按照順序排列文件：

　　　　重要的meta聲明標籤--->css文件--->頁面主要內容佈局標籤--->js文件，插件等

　  7，減小標籤嵌套層級

　　

　　進階：

　　1：cookie-free

　　當瀏覽器請求一個靜態資源的時候，會同時一併發送此域名的cookie，可是這時的cookie是不必的，若是請求資源較多網速很差的話，就會浪費用戶的流量而且加大網絡開銷，這個時候採用一個徹底獨立的域名來server靜態資源，這樣請求的時候就不會攜帶cookie了，減小了沒必要要的開銷

　　2：domain 併發數限制

　　如今的瀏覽器廣泛都是併發加載資源的，可是同一時間針對同一域名下的請求有必定數量限制，同一個domain通常來講也只能同時併發獲取4-8個資源，好比css文件中引入了圖片的話，加載的時候可能阻塞後續資源的加載，再或者資源較多的時候，這個時候能夠適當的加大併發請求數量，好比把資源分散在其餘域名下，這樣同一時間內就能夠更多的併發資源，可是不要太多域名，通常兩三個就能夠了，好比咱們公司圖片就放在一個專門的圖片服務器上

　　3：減小首屏加載時間，常見的好比圖片懶加載（jquerylazyload）,或者對某些dom元素分屏加載（textarea包裹住容器，而後js判斷加載，我以前寫過）等等，方法比較多

　　4：dns-prefetch

　　　  預解析也是咱們首次使用，一次DNS解析耗費20-120 毫秒，減小DNS解析時間和次數是個很好的優化方式就是當你瀏覽網頁時，瀏覽器在加載網頁時對網頁中的域名進行解析緩存，這樣在單擊當前網頁連接無需DNS解析，減小瀏覽者等待時間，提升用戶體驗，如今淘寶網已經在用了：

　　　　

　　  5：減小瀏覽器重排

　　　　這個比較常見，其實就是當dom節點的幾何屬性發生變化的時候，瀏覽器會從新計算此節點的屬性，而後再根據新的計算好的渲染樹從新繪製這部分頁面，好比改變了dom元素的寬高間距等等，都會從新計算渲染數，觸發瀏覽器的重排，並且容器改變屬性值後，子節點甚至其兄弟節點都會重排，一系列的重排影響了頁面性能，經常使用優化方法有這幾種：

　　　　1，若是要js設置style屬性值的話，沒設置一次就會觸發一次重排，性能開銷較大，因此最好經過添加classname的方式，只重排一次。　

　　　　2，再或者常見的，好比動畫元素，屬性值在不停的變化，能夠給position設置成absolute或者fixed，使其脫離文檔流，這樣就不會影響其餘元素觸發重排，也起到優化做用

　　　　3，若是要對一個元素重複操做的話，最好先設置其display:none,使其脫離文檔流，這樣不會影響其餘元素重排，設置完後再顯示出來

　　　　4，在獲取一些元素屬性值時，最好用一個變量保存起來，由於當獲取一些屬性時，瀏覽器爲取得正確的值也會觸發重排，好比offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight等等

 　　

　　以上就是咱們公司需求中平時常常用到的一些優化技巧，固然還有不少其餘優化方案，總之我的認爲優化的思路就是，必定要細緻，不要不在意比較小的消耗，資源多了小消耗加起來也很多了，蒼蠅腿也是肉，得作到細緻細心，才能優化好。