關於web前端性能優化問題

很久沒有來博客寫隨筆了，多是懶了吧，哈哈，

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

   那 什麼是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文件中的引用。

 

九、異步請求Callback（就是將一些行爲樣式提取出來，慢慢的加載信息的內容）

在某些頁面中可能存在這樣一種需求，須要使用 script標籤來異步的請求數據。相似：

<span style="font-size:14px;">/*Callback 函數*/
    function myCallback(info){
        //do something here
    }
　HTML:
　　Callback返回的內容 :
   myCallback('Hello world!');
</span>

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