性能優化總結

時間 2019-11-16

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

原文原文鏈接

1. 雅虎軍規javascript

1.1 減小http請求數，通常5個，不能再多了php

js，css合併壓縮，圖片雪碧圖css

1.2 減小DNS的查找次數html

CDN分發請求，預加載服務器，不要CDN太多，也會變慢前端

1.3 避免跳轉node

跳轉是301和302實現的jquery

要把http狀態碼記住linux

1.4 可緩存的ajax

使響應具備可緩存性

具體的討論能夠查看add an Expires or a Cache-Control Header。其餘的幾條規則也一樣適用於Ajax：

Gizp壓縮，減小DNS查找次數，精簡JavaScript，避免跳轉，配置ETag

具體實現方式

$.ajax參數裏面 cache: true，須要傳過時時間，後臺返回的頭也有時間，這樣就能夠實現了

1.5 推遲加載內容

lazyload，模版和後端配合實現首屏加載

1.6 預加載

mozilla實現的，不知道有沒有放到標準裏

是將下一個頁面的東西提早下載到緩存中

下面有三種預加載的方法：

1.6.1 無條件加載，觸發onload事件時，直接加載額外的頁面內容，好比google，在首頁會下載搜索結果頁用到的圖片

1.6.2 有條件加載，根據用戶的操做來有條件的判斷用戶下面可能去往的頁面並相應的預加載頁面內容。在輸入內容時加載額外的頁面內容

1.6.3 有預期的加載，載入從新設計過的頁面時使用預加載，這種狀況常常出如今頁面通過從新設計後，用戶抱怨，比之前慢。問題多是用戶對於以前的站點創建了完整的緩存，對於新站點沒有，所以能夠在訪問舊站點的時候就加載一部分新站點的內容。適用狀況是，有個舊網站，上面有個新網站的連接，這個能夠提早加載。

1.7 減小DOM元素數量

1.8 根據域名劃份內容

1.9 使用iframe的數量最小

iframe優勢，解決加載緩慢的第三方內容，如圖標和廣告等的加載問題

iframe缺點，即時內容爲空，加載也須要時間，會阻止頁面加載，沒有語義

1.10 不要出現404

1.11 使用內容分發網絡

1.12 爲文件頭指定Expires或Cache-Control

感受瀏覽器本身就能作這個事，對於圖片，文件它本身就會緩存

1.13 gzip壓縮

1.14 配置ETag

1.15 儘早刷新輸出緩衝

php有一個方法flush()方法，它容許把已經編譯好的部分html響應文件先發給瀏覽器，這時瀏覽器就能夠先下載文件中的內容（腳本，css文件等）然後臺處理剩餘的html頁面

...

</head>

<?php flush();?>

<body>

...

1.16 使用GET來完成AJAX請求

1.17 把樣式表置於頂部

1.18 避免使用css表達式

1.19 使用外部的js和css

1.20 削減js和css

1.21 用link 代替@import

1.22 避免使用濾鏡， filter

1.23 把腳本放到底部

1.24 剔除重複的腳本

1.25 減小DOM訪問

這個和vue衝突

1.26 開發智能的事件處理程序

事件代理，過多的事件句柄會使瀏覽器反應緩慢，由於句柄會頻繁的觸發，從而拖慢瀏覽器

1.27 減少Cookie體積

去除沒必要要的cookie

使cookie體積儘可能小，以減小對用戶響應的時間

注意在適應級別的域名上設置cookie以便子域名不受影響

設置合理的過時時間

1.28 對頁面內容使用無cookie的域名

也是CDN分發的一種，可是若是在頂級域名上設置了cookie，則全部的子域名都包含頂級域名的cookie，這點要注意，若是想實現無cookie的域名，須要從新申請別的域名存放靜態文件

1.29 優化圖像

壓縮，修改gif爲png格式

檢查顏色的工具imagemagick，

命令： identify -verbose image.gif

將gif轉爲png的命令：
convert image.gif image.png

png圖片優化工具，有不少種，這裏說一種pngcrush

pngcrush image.png -rem alla -reduce -brute result.png

jpg圖片優化

jpegtran -copy none -optimize -perfect src.jpg dest.jpg

1.30 優化css spirite

雪碧圖垂直排列，顏色較近的組合到一塊兒，能夠下降顏色數，理想情況是低於256色以便使用png8格式，不要在雪碧圖的圖像中間留有較大的空隙，雖然空隙不會增長文件大小，可是內存須要更大的空間來存放像素

1.31 不要在html中縮放圖像

儘可能在縮略圖的地方使用縮略圖

1.32 favicon.ico要小並且可緩存

也可使瀏覽器不下載這個文件

1.33 保持單個文件小於25k

這個限制主要是由於iPhone不能緩存大於25k的文件，這裏指的是解壓後的大小，因爲單純gzip可能達不到要求，所以精簡文件就顯得十分重要。

1.34 打包組件成複合文本

把頁面內容打包成複合文本，就如同帶有多附件的Email，它可以在一個http請求中取得多個組件，切記http請求是很奢侈的，當使用這條規則時，首先肯定用戶代理是否支持，iPhone是不支持的

js和css寫在一塊兒

根據註釋的不一樣來區分加載

如今通常不這樣作了

2. 面向切面編程

Aspect Oriented Programming（AOP）面向切面編程，主要實現的目的是針對業務處理過程當中的切面進行提取，它所面對的是處理過程當中俄某個步驟或階段，以得到邏輯過程當中各部分之間低耦合性的隔離效果。

對業務操做進行無干擾的處理

好比埋點操做，測試等

這種在運行時，動態地將代碼切入到類的指定方法、指定位置上的編程思想就是面向切面的編程。

通常而言，咱們管切入到指定類指定方法的代碼片斷稱爲切面，而切入到哪些類、哪些方法則叫切入點。有了AOP，咱們就能夠把幾個類共有的代碼，抽取到一個切片中，等到須要時再切入對象中去，從而改變其原有的行爲。

這樣看來，AOP其實只是OOP的補充而已。OOP從橫向上區分出一個個的類來，而AOP則從縱向上向對象中加入特定的代碼。有了AOP，OOP變得立體了。若是加上時間維度，AOP使OOP由原來的二維變爲三維了，由平面變成立體了。從技術上來講，AOP基本上是經過代理機制實現的。 AOP在編程歷史上能夠說是里程碑式的，對OOP編程是一種十分有益的補充。

3. nginx配置緩存

瀏覽器發請求後，先看本身的緩存有沒有過時，若是過時的話先看有沒有ETag，若是有的話瀏覽器自動帶if-None-Match給服務器，服務器決定是返回304仍是200，若是是304的話就向緩存讀取，這裏的緩存是指瀏覽器的緩存，若是沒有ETag的話，看是否有Last-Modified，若是有瀏覽器自帶If-Modified-Since給服務器，服務器決定是304仍是200，若是沒有向服務器正常發送請求。

瀏覽器必定會有緩存嗎，若是設置no-cache呢？瀏覽器必定會有緩存，就算設置了no-cache也沒有用，照樣緩存。就是修改了會立馬有變化。

若是全部設置緩存的設置都關閉，則瀏覽器會根據Last-Modified判斷文件是否更新，不一樣瀏覽器也有不一樣的策略，因此不能徹底依賴這個，仍是要設置其餘的。

expires和add_header Cache-Control cache-control的優先級高於expires，若是沒有cache-control的話使用expires

若是設置了etag和expires，則expires的優先級最高，屬於強緩存，因此要慎用expires。

http://www.javashuo.com/article/p-uiwvkybf-z.html

from disk cache仍是from memory cache

#設置瀏覽器緩存

add_header Cache-Control no-cache;

add_header Cache-Control private ;

3.1 默認ETag是開啓的，ETag是更細粒度的緩存策略，根據文件信息生成的值，若是文件變化則該值就會變化。

3.2 expires, 設置過時時間，再修改後可能會形成客戶端沒法獲取新內容的問題

3.3 add_header Cache-Control no-cache;

3.4 gzip開啓，默認進行gzip壓縮的格式只有html文件，咱們須要加上js，css，圖片等

可是服務器啓動gzip壓縮須要消耗必定的時間，因此可能會犧牲時間來減小流量。視具體狀況而定。

gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

http://www.javashuo.com/article/p-kgwxpnns-hm.html

反向代理以上設置都不起做用，須要用proxy_cache 的配置

http://www.cnblogs.com/dudu/p/4597351.html

還有清除緩存的

proxy_cache_key $host$uri$is_args$args;

location ~ /purge(/.*) {
allow all;#指定能夠清除緩存的ip，all容許全部ip清除
proxy_cache_purge my-cache $host$1$is_args$args;
}

4. 實現聊天的方法

a. Polling(AJAX)，每隔一段時間發送一次

b. Long Polling(Comet)

c. Flash

d. Web Socket

經過http握手，握手成功使用tcp

發送的請求頭添加upgrade: upgrade

https://socket.io/get-started/chat/

一個聊天小程序

nginx安裝node

二、直接安裝編譯好的 Nodejs（推薦）

這種方法相比第一種節省了編譯安裝的時間，因此安裝起來更快。
第一步仍然須要下載對應的二進制文件：
wget -c https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz
提取文件：
tar -xvf node-v8.9.1-linux-x64.tar.xz
解壓以後獲得的文件夾就是已經安裝好的 Nodejs 了，爲了方便咱們能夠把它重命名一下（在這裏我把它放到了
用戶根目錄下面的 app 的文件夾裏，你也能夠換成其餘路徑）：
mv node-v8.9.1-linux-x64 ~/app/nodejs

然而，這種方式安裝的 Nodejs 並不完美。首先，Nodejs 的命令 node 和 npm 並不能在全局使用。爲了解決這個問題，咱們須要創建兩個軟連接：
sudo ln -s ~/app/nodejs/bin/node /usr/local/bin/node
sudo ln -s ~/app/nodejs/bin/npm /usr/local/bin/npm
其中，~/app/nodejs 是咱們剛纔安裝的 Nodejs 的路徑，在創建軟連接的時候要注意區別。
如今，node 和 npm 能夠在全局使用了，一樣輸入命令 node -v 來檢查 Nodejs 是否安裝成功：

http://180.76.99.112:3001/

多元素滾動優化，使用overflow:hidden，外層再包裹一個滾動的div，根據滾動的高度計算元素的位置

5. Google AMP

Google AMP針對的場景是手機端，資訊頁面（非SPA）

場景的特色：

機器性能低，瀏覽器性能，網速受限，非剛性需求

優化：

減小請求，減少體積，犧牲一部分UE

優化的目標：

提高用戶體驗，提高執行效率，減輕服務器壓力

限制：

安全性，一致性，可維護性，成本，業務類型

綜合考慮性能提高

前端性能優化場景： web場景下的瀏覽器和http層性能優化

通常性特色：

js執行效率，V8的及時編譯，閉包的使用，單線程應用模型

渲染引擎效率，重繪，重排問題

http請求，

pc端：瀏覽器性能差別，網速相對快，處理器性能較好

移動端：處理器性能有限，網絡速度慢，流量成本，手機端對請求數有限制，3G，4G網絡網速的限制

AMP有自定義的標籤 amp-image，amp-video等

圖片的大小未知，會出發reflow，因此強制要求圖片必須在渲染以前指定大小

AMP CSS，必須inline，必須在head，只能有一個，禁止在html標籤上寫樣式，禁止* selector，禁止 filter

AMP的限制：只容許異步腳本，顯示指定UI尺寸，css只能有一個inline，css只能50k，容許有限的css動畫，控制資源加載，動畫執行

AMP的原則：嚴格控制外部資源，嚴格控制整個頁面渲染，嚴格控制css動畫

icon font https://icomoon.io/app/#/select/font

性能優化須要權衡

人月神話

6. 高性能動畫及渲染過程

如何實現動畫

jquery animation setTimeout， top/left

css3動畫

GPU加速，哪些動畫是在GPU中渲染的？

https://csstriggers.com/

重排和重繪加速

硬件加速（GPU加速）

CPU和GPU

相同之處：二者都有總線和外界聯繫，有本身的緩存體系，以及數字和邏輯運算單元，二者都是爲了完成計算任務而設計的

不一樣之處： CPU主要負責操做系統和應用程序，GPU主要負責跟顯示相關的數據處理，GPU的活CPU通常均可以幹，可是效率低下

layer模型：瀏覽器根據css屬性爲元素生成layers，將layers做爲texture上傳到GPU，當改變layer的transform，opacity屬性時，渲染會跳過layout，paint，直接通知GPU對layer作變換。

哪些會生成layer模型：

擁有3d transform屬性，animation，transition，實現opacity，transform動畫，video，canvas，flash，使用css filter的元素，z-index大於某個相鄰節點的layer的元素

爲何硬件加速會快？

節省了哪些時間，CPU節省了paint和layout和向GPU傳輸位圖的時間。

composite layers圖層合成是在GPU上不會佔用CPU的空間

layout就是重排的操做，觸發layout，設置寬高相關的屬性，clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText,, offsetHeight, offsetLeft, offetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth ...

fastdom.js

分離讀寫操做，寫操做會觸發layout

paint重繪，對元素進行修飾的屬性會觸發重繪，減小重繪的區域和元素

GPU的composite也須要優化，

http://jankfree.org/