前端性能優化之js性能問題定位

nodejs接口性能優化

v8-profiler api 分析

需要在接口中添加node profile api

ab壓測 產生xxxx.cpuprofile

ab -c 20 -n 2000 "http://xxxxx"

chrome devtool 分析

• 使用chart，可視化查看峯值所在，着重分析js代碼
• 使用Tree形式，根據total Time 倒序，查看各自代碼耗時self time

火焰圖分析

• 安裝

    npm i flamegraph -g

• 生成svg

  flamegraph -t  cpuprofile -f xxx.cpuprofile -o cpuprofile.svg

• 查看深色部分，定位js代碼

v8-analysis分析

分析v8-profile和heapdump等模塊生成的CPU和heap-memeory日誌的工具

• 安裝

 npm i v8-analytics -g 

• 分析超過200ms代碼

 va timeout xxx.cpuprofile 200 --only

v8內置分析工具-tick processor

• 開啓

node -prof xxx.js   //生成 islate-xxx-v8.log

• v5.2之後自帶處理命令

 node --prof-process islate-xxx-v8.log  //查看Bottom up profile耗時統計，定位問題

• v8 web ui 可視化下查看

  node --prof-process --preprocess  islate-xxx-v8.log > v8.json

  git clone http://github.com/v8/v8.git

v8/tools/profview/index.html加載v8.json 分析峯值

web頁面cpu測試

chrome dev 自帶 peformance 分析cpu

通過可視化，查看佔用長時間的js compute ,rendering

chrome dev javascript profile

通過可視化，查看cpu峯值點。找到峯值高的代碼，在看上方調用代碼，是否是自己能修改範圍的代碼。

分析內存

gcore lldb、llnode適合小型node服務

gcore產生分析文件

 ulimit -c  // 0 表示關閉， 1 開始 

 ulimit -c unlimited 

gcore [-o file] pid

lldb分析

lldb-4.0 -c core.[pid] // 啓動node，可以使用core dump生成 node --abort-on-uncatch-exception 

v8-profile dump

heapdump 更簡單 手動，不適合

cpu-memory-monitor

web系統使用chrome devtool - memory

通用處理方法

使用requestAnimationFrame

• 避免使用setTimeout或setInterval進行視覺更新；
• 始終使用requestAnimationFrame代替。

Web Workers dom計算

• 將長時間運行的JavaScript從主線程移至Web Workers。
• 不需要DOM訪問，則可以將純計算工作移至 Web Workers。數據處理或遍歷（例如排序或搜索）通常非常適合此模型，加載和模型生成也是如此。

微任務

• 使用微任務使DOM在多個框架上進行更改。
• 必須將工作放在主線程上的地方，請考慮將較大的任務分割爲微任務，每個微任務不超過幾毫秒，並requestAnimationFrame在每個幀的處理程序內部運行.

timeline

• 使用Chrome DevTools的時間軸評估JavaScript的影響
  *

避免對JavaScript進行微優化

只會節省幾分之一毫秒的時間 沒有優化的必要

css優化方案

簡化樣式選擇器

• 瀏覽器確定元素上選擇器
• 根據選擇器，確定對應的樣式規則

去除無效的元素

• 計算元素的計算樣式的最壞情況是將元素數乘以選擇器計數，因爲需要針對每種樣式至少對每個元素檢查一次，以查看其是否匹配。

本文作者：前端首席體驗師(CheongHu)

聯繫郵箱：[email protected]