關於web前端效能最佳化問題

標籤：cache   直接   csdn   die   指令碼   功能   function   處理   www   

好久沒有來部落格寫隨筆了，可能是懶了吧，哈哈，

最近很想整理一篇關於前端效能最佳化的問題，畢竟能提高網站的觀賞性對吧。提升網站效能，提升使用者體驗

   那 什麼是web效能最佳化？

         可以這麼理解：從使用者訪問資源到資源完整的展現在使用者面前的過程中，通過技術手段和最佳化策略，縮短每個步驟的處理時間從而提升整個資源的訪問和呈現速度。

  那麼怎麼才能提高web效能最佳化呢？ 可以從這幾個方面考慮：

        1.減少HTTP請求

         首先，每個請求都是有成本的，既包含時間成本也包含資源成本。一個完整的請求都需要經過 DNS定址、與伺服器建立串連、發送資料、等待伺服器響應、接收資料這樣一個 “漫長” 而複雜的過程。時間成本就是使用者需要看到或者 “感受” 到這個資源是必須要等待這個過程結束的，資源上由於每個請求都需要攜帶資料，因此每個請求都需要佔用頻寬。另外，由於瀏覽器進行並發請求的請求數是有上限的        1）合理設定 HTTP緩衝：                                 原則很簡單，能緩衝越多越好，能緩衝越久越好。例如，很少變化的圖片資源可以直接通過 HTTP Header中的Expires設定一個很長的到期頭 ;變化不頻繁而又可                           能會變的資源可以使用 Last-Modifed來做請求驗證。儘可能的讓資源能夠在緩衝中待得更久         2）資源合并與壓縮  　　　　　基本原理：
　　　　　　註：這個是很基礎且必須遵循的知識點，可是為了文章的完整性勉為其難加進來吧，嘿嘿。
　　　　　　引入外部檔案好處是顯而易見的，而且是項目稍稍複雜一點的時候就有必要了這樣做了。
　　　　　　易維護、易擴充，方便管理和重複利用。
　　　　　　正確的方式：
　　　　　　JavaScript是瀏覽器中的霸主，為什麼這麼說，因為在瀏覽器在執行JavaScript代碼時，不能同時做其它事情，　　　　　　即每次出現都會讓頁面等待指令碼的解析和執行（不論JavaScript是內嵌的還是外鏈的），JavaScript代碼執行完成後，　　　　　　才繼續渲染頁面。這個也就是JavaScript的阻塞特性。
　　　　　　因為這個阻塞的特點，建議把JavaScript代碼放到標籤以前，這樣既能有效防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放        3.使用 CDN 和緩衝提高速度            您可以將網站的靜態內容連結到全球各地的伺服器擴充網路。如果您的網站觀眾遍布全球，這項功能十分有用。 CDN 允許您的網站訪問者從最近的伺服器載入資料。              如果您使用 CDN，您網站內的檔案將自動壓縮，以便在全球範圍內快速分發。           CDN 是一種緩衝方法，可極大改善資源的分發時間      4.壓縮檔         最常用的檔案壓縮方法之一是 Gzip。 這是縮小文檔、音頻檔案、PNG映像和等其他大檔案的絕佳方法。          Brotli 是一個比較新的檔案壓縮演算法，目前正變得越來越受歡迎       5、減少對DOM的操作　　　　　原理：對DOM操作的代價是高昂的，這在網頁應用中的通常是一個效能瓶頸　　　　　　　　在《高效能JavaScript》中這麼比喻：“把DOM看成一個島嶼，把JavaScript(ECMAScript)看成另一個島嶼，兩者之間以一座收費橋串連”。　　　　　　　　所以每次訪問DOM都會教一個過橋費，而訪問的次數越多，交的費用也就越多。所以一般建議盡量減少過橋次數。　　　　　　　　減少對DOM元素的查詢和修改，查詢時可將其賦值給局部變數。　　　　　　　　註：在IE中:hover會降低響應速度     6.壓縮 CSS, JS 和 HTML
         壓縮技術可以從檔案中去掉多餘的字元。你在編輯器中寫代碼的時候，會使用縮排和注釋，這些方法無疑會讓你的代碼簡潔而且易讀，        但它們也會在文檔中添加多餘的位元組。

    7.使用這個  rel="prefetch"

       <link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->
      瀏覽器的空閑時間去先下載使用者 指定需要的內容,然後緩衝起來,這樣使用者下次載入時,就直接從緩衝中取出來,效率就快了.

 

 

   

        對一個網站而言，CSS、javascript、logo、表徵圖這些靜態資源檔案更新的頻率都比較低，而這些檔案又幾乎是每次http請求都需要的，如果將這些檔案快取在瀏覽器中，可以極好的改善效能。通過設定http頭中的cache-control和expires的屬性，可設定瀏覽器緩衝，緩衝時間可以是數天，甚至是幾個月。

        在某些時候，靜態資源檔案變化需要及時應用到用戶端瀏覽器，這種情況，可通過改變檔案名稱實現，即更新javascript檔案並不是更新javascript檔案內容，而是產生一個新的js檔案並更新HTML檔案中的引用。

 

9、非同步請求Callback（就是將一些行為樣式提取出來，慢慢的載入資訊的內容）

在某些頁面中可能存在這樣一種需求，需要使用 script標籤來非同步請求資料。類似：

 

1. <span style="font-size:14px;">/*Callback 函數*/  
2.     function myCallback(info){   
3.         //do something here   
4.     }   
5. 　HTML:  
6. 　　Callback返回的內容 :  
7.    myCallback(‘Hello world!‘);  
8. </span>  

   以上是我所瞭解的web效能最佳化，歡迎各位訪客指點和評論，我都會和您溝通

 

關於web前端效能最佳化問題