性能優化

時間 2019-11-25

原文原文鏈接

1.　　請減小HTTP請求　　css

　　基本原理：前端

　　在瀏覽器(客戶端)和服務器發生通訊時，就已經消耗了大量的時間，尤爲是在網絡狀況比較糟糕的時候，這個問題尤爲的突出。java

　　一個正常HTTP請求的流程簡述：如在瀏覽器中輸入"www.xxxxxx.com"並按下回車，瀏覽器再與這個URL指向的服務器創建鏈接，而後瀏覽器才能向服務器發送請求信息，服務器在接受到請求的信息後再返回相應的信息，瀏覽器接收到來自服務器的應答信息後，對這些數據解釋執行。json

　　而當咱們請求的網頁文件中有不少圖片、CSS、JS甚至音樂等信息時，將會頻繁的與服務器創建鏈接，與釋放鏈接，這一定會形成資源的浪費，且每一個HTTP請求都會對服務器和瀏覽器產生性能負擔。api

　　網速相同的條件下，下載一個100KB的圖片比下載兩個50KB的圖片要快。因此，請減小HTTP請求。跨域

　　解決辦法：數組

　　合併圖片（css sprites），合併CSS和JS文件；圖片較多的頁面也可使用 gruntJs或者FIS等技術進行優化。瀏覽器

2.　　請正確理解 Repaint 和 Reflow　　緩存

　　注：Repaint 和 Reflow 也就是重繪和迴流服務器

　　基本原理：

　　Repaint(重繪)就是在一個元素的外觀被改變，但沒有改變佈局(寬高)的狀況下發生，如改變visibility、outline、背景色等等。

　　Reflow(迴流)就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會從新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證DOM樹上的全部其它結點的visibility屬性，這也是Reflow低效的緣由。如：改變窗囗大小、改變文字大小、內容的改變、瀏覽器窗口變化，style屬性的改變等等。若是Reflow的過於頻繁，CPU使用率就會噌噌的往上漲，因此前端也就有必要知道 Repaint 和 Reflow的知識。

　　減小性能影響的辦法：

　　上面提到經過設置style屬性改變結點樣式的話，每設置一次都會致使一次reflow，因此最好經過設置class的方式；　有動畫效果的元素，它的position屬性應當設爲fixed或absolute，這樣不會影響其它元素的佈局；若是功能需求上不能設置position爲fixed或absolute，那麼就權衡速度的平滑性。

　　總之，由於 Reflow 有時確實不可避免，因此只能儘量限制Reflow的影響範圍。

3.　　請減小對DOM的操做　　

　　基本原理：

　　對DOM操做的代價是高昂的，這在網頁應用中的一般是一個性能瓶頸。

　　解決辦法：

　　修改和訪問DOM元素會形成頁面的Repaint和Reflow，循環對DOM操做更是罪惡的行爲。因此請合理的使用JavaScript變量儲存內容，考慮大量DOM元素中循環的性能開銷，在循環結束時一次性寫入。

　　減小對DOM元素的查詢和修改，查詢時可將其賦值給局部變量。

　　注：在IE中:hover會下降響應速度。

4.　　使用JSON格式來進行數據交換　　

　　基本原理：

　　JSON是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，是理想的數據交換格式。同時，JSON是 JavaScript原生格式，這意味着在 JavaScript 中處理 JSON數據不須要任何特殊的 API 或工具包。

　　與XML序列化相比，JSON序列化後產生的數據通常要比XML序列化後數據體積小，因此在Facebook等知名網站中都採用了JSON做爲數據交換方式。

　　JS操做JSON：

　　在JSON中，有兩種結構：對象和數組。

　　1. 一個對象以「 { 」開始，「 } 」結束。每一個「名稱」後跟一個「 : 」；「名稱/值對」之間使用「 , 」（逗號）分隔。名稱用引號括起來；值若是是字符串則必須用引號括起來，數值型則不須要。如：
var obj={"name":"darren","age":24,"location":"beijing"}    
　　2. 數組是值（value）的有序集合。一個數組以「 [ 」開始，「 ] 」結束。值之間使用「 , 」（逗號）分隔。如：
var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];
　　對這種數組和對象字面量的操做是很是方便且高效的。若是預先知道JSON結構的狀況下，使用JSON進行數據傳遞簡直是太美妙了，能夠寫出很實用美觀可讀性強的代碼。若是你是純粹的前臺開發人員，必定會很是喜歡JSON。

5.　　高效使用HTML標籤和CSS樣式　　

　　基本原理：

　　HTML是一門用來描述網頁的一種語言，它使用標記標籤來描述網頁，做爲一名合格的前端開發，你有必要去知道其經常使用標籤表明的含義(SEO)和屬性(表現形式)。

　　CSS指層疊樣式表 (Cascading Style Sheets)，若是說把頁面想象成一我的，HTML就是人的骨架，CSS就是人的衣裝，一我的的品味從他的衣裝就能一目瞭然。

　　一名專業的前端開發也是一名優秀的重構，由於在頁面中常常會有各類不合理的嵌套和重複定義的CSS樣式，我不是要你重構頁面，只是但願你在碰到這種狀況的時候解決這些問題。如這樣的HTML：
<table><tr><td>
　　<table><tr><td>
　　　　...
　　</td></tr></table>
</td></tr></table>
或者這樣的CSS:
body .box .border ul li p strong span{color:#000}
　　以上都是對HTML和CSS很是糟糕的使用方法。

　　正確理解：

　　HTML是一門標記語言，使用合理的HTML標籤前你必須瞭解其屬性，好比Flow Elements，Metadata Elements ，Phrasing Elements。比較基礎的就是得知道塊級元素和內聯元素、盒模型、SEO方面的知識。

　　CSS是用來渲染頁面的，也是存在渲染效率的問題。CSS選擇符是從右向左進行匹配的，這裏對css選擇符按照開銷從小到大的順序梳理一下：　
　　ID選擇符 #box
　　類選擇符 .box  
　　標籤 div
　　僞類和僞元素 a:hover
　　當頁面被觸發引發迴流（reflow）的時候，低效的選擇符依然會引起更高的開銷，因此請避免低效。

6.　　使用CDN加速（內容分發網絡）　　

　　基本原理：

　　CDN的全稱是Content Delivery Network，即內容分發網絡。

　　"其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。經過在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡，CDN系統可以實時地根據網絡流量和各節點的鏈接、負載情況以及到用戶的距離和響應時間等綜合信息將用戶的請求從新導向離用戶最近的服務節點上。" - 百度百科。

　　上面幾句話有多少能安安心心看完的，因此我仍是經過說故事再來介紹一遍吧，順便補一句，故事出處不明，^_^：

　　古代打仗你們必定都知道，因爲古代的交通很不發達，因此當外族進攻的時候每每不能及時的反擊，等朝廷徵完兵再把兵派往邊境的時候那些侵略者倒是早已不見了蹤跡，這個讓古代的帝王非常鬱悶。後來帝王們學聰明瞭，都將大量的兵員提早派往邊境駐紮，讓他們平時屯田，戰時當兵，這樣的策略起到了很顯著的做用。

　　不足之處：

　　實時性不太好是CDN的致命缺陷。隨着對CDN需求的逐漸升溫，這一缺陷將獲得改進，使來自於遠程服務器的網絡內容網頁與複本服務器或緩存器中的網頁保持同步。解決方法是在網絡內容發生變化時將新的網絡內容從服務器端直接傳送到緩存器，或者當對網絡內容的訪問增長時將數據源服務器的網絡內容儘量實時地複製到緩存服務器。

7.　　將CSS和JS放到外部文件中引用，CSS放頭，JS放尾　　

　　基本原理：

　　注：這個是很基礎且必須遵循的知識點，但是爲了文章的完整性勉爲其難加進來吧，嘿嘿。

　　引入外部文件好處是顯而易見的，並且是項目稍稍複雜一點的時候就有必要了這樣作了。

　　易維護、易擴展，方便管理和重複利用。

　　正確的方式：

　　JavaScript是瀏覽器中的霸主，爲何這麼說，由於在瀏覽器在執行JavaScript代碼時，不能同時作其它事情，即<script>每次出現都會讓頁面等待腳本的解析和執行（不論JavaScript是內嵌的仍是外鏈的），JavaScript代碼執行完成後，才繼續渲染頁面。這個也就是JavaScript的阻塞特性。

　　由於這個阻塞的特色，建議把JavaScript代碼放到</body>標籤之前，這樣既能有效的防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放。

　　HTML規範清楚指出CSS要放包含在頁面的<head>區域內，這裏就很少解釋了。

8.　　精簡CSS和JS文件　　

　　基本原理：

　　有一條很是重要的準則一直沒有提到，就是CSS和JavaScript的壓縮，直接減小下載的文件體積。我我的常用的方式是使用 YUI Compressor，它的特色是：移除註釋；移除額外的空格；細微優化；標識符替換。

　　YUI Compressor是java程序，若是你對java很熟悉的話可快速的上手使用yuicompressor.jar；若是你對java很陌生也不要緊，同樣可使用YUI Compressor，下面介紹其使用方式。

　　YUI Compressor的配置和使用：

　　先配置使用環境：

　　1.先確保電腦中是否安裝了JDK

　　2.再配置必要的環境變量(細節不能三兩句說清，因此不知道如何設置仍是搜索吧)

　　3.在cmd界面，輸入javac可測試是否安裝成功

　　使用方法可從cmd到進入yuicompressor.jar所在磁盤，我以本身的yuicompressor-2.4.2.jar爲例：

　　1.壓縮JS
　　java -jar yuicompressor-2.4.2.jar api.js > api.min.js
　　2.壓縮CSS
　　java -jar yuicompressor-2.4.2.jar style.css > style.min.css
　　

9.　　壓縮圖片和使用圖片Sprite技術　　

　　基本原理:

　　注：其實壓縮圖片和圖片精靈是兩個方面的技術。

　　通常圖片壓縮的方式有：

　　1.縮小圖片分辨率；

　　2.改變圖片格式；

　　3.下降圖片保存質量。

　　關於圖片精靈(Sprite)技術就和咱們工做直接相關，不論是在CSS中的圖片仍是在HTML結構中的圖片都會產生HTTP請求，前端優化的第一條就是減小請求數，最直接有效的方法是使用圖片精靈（CSS Sprite）。圖片精靈就是把許多圖片放到一張大圖片裏面，經過CSS來顯示圖片的一部分。

　　至於圖片精靈的操做細節就很少作介紹了，網上相關內容不少。

10.　　注意控制Cookie大小和污染　　

　　基本原理和使用方法：

　　由於Cookie是本地的磁盤文件，每次瀏覽器都會去讀取相應的Cookie，因此建議去除沒必要要的Coockie，使Coockie體積儘可能小以減小對用戶響應的影響；

　　使用Cookie跨域操做時注意在適應級別的域名上設置coockie以便使子域名不受其影響

　　Cookie是有生命週期的，因此請注意設置合理的過時時間，合理地Expire時間和不要過早去清除coockie，都會改善用戶的響應時間。