前後端效能優化工具 + 範例 + 心得

前端優化範例

某 school 反應 admin/students/edit 很慢

每次進入該頁面 progress bar 需要跑個 20 秒

前端優化範例 - 工具 - chrome or edge

前端優化範例 - 工具 - chrome or edge

前端優化範例 - 工具 - chrome or edge

前端優化範例 - 如何抓到問題點

1. 先找耗時最久的區塊（火焰圖上最大的區塊）
2. 找看看
   1. 有沒有重複的區塊一直出現（重複的呼叫）
   2. 有沒有某些區塊特別大的（執行速度很慢的 function）

前端優化範例 - 解決方式

此範例的問題點：

• 當 conditional field 的值有變化時，關聯的 field 會需要根據值改成「顯示」或「隱藏」。
• 這邊會把所有的 conditional fields 都檢查一次，尋找關聯的 field 時會使用 jQuery 的 find
• 問題點：同樣的 field 會被重複使用 find 拿

解決方式：

• 先把 field cache 起來，避免重複呼叫 find 取得 field

前端優化範例 - 結果

Before: 358.31ms

After: 36.70 ms

ref: https://github.com/eduvo/openapply/pull/14478

後端效能優化 - 常見問題

• N + 1
• DB 沒有加上適合的 index
• DB Transaction 太久
• 一次從 DB 拿太多東西出來
• 從 DB 拿了不需要的東西出來

後端效能優化 - 什麼時候需要優化？

• 不破壞程式可讀性，且可以簡易優化的地方，隨時可以優化
  • N + 1 query
  • DB 沒有加上適合的 index
• 系統瓶頸
• 客戶反應有問題的地方

後端效能優化 - 檢查工具

newrelic

後端效能優化 - 檢查工具

gem - bullet

https://github.com/flyerhzm/bullet

不過也要注意在加上 includes 時是否要需要加上限制條件，避免拿太多 objects 出來

後端效能優化 - 檢查工具

explain

後端效能優化 - 檢查工具

gem ruby-prof + gem ruby-prof-flamegraph + flamegraph generator

https://ruby-prof.github.io/

https://github.com/brendangregg/FlameGraph

後端效能優化 - 優化 N + 1 query

可以使用 includes 修正

不過也要注意在加上 includes 時是否要需要加上限制條件，避免拿太多 objects 出來

後端效能優化 - 優化 bulk insert 或 bulk update

gem - activerecord-import

https://github.com/zdennis/activerecord-import

可以加速 bulk insert & bulk update

並支援 MySQL 的 ON DUPLICATE KEY UPDATE

後端效能優化 - 優化 query 太慢

加 DB Index

explain

加上 status index 後

	before	After
Type	ALL	Ref
Key	NULL	Index_pamoja_courses_on_status
Rows	169	104

部分 query 會需要多個欄位合併搜尋，可以考慮加 multiple-column Indexe

譬如 checklist_items 的

idx_checklist_items_unique_school_checklist_item_id_student_id (school_checklist_item_id,student_id,active) UNIQUE

後端效能優化 - 優化 query 太慢

可能是拿太多不需要的 row，可以用 where 或是 join 加上限制

Example 1: 譬如我需要的是 enrolled 的 pamoja_courses，那 query 就要下

PamojaCourse.where(status: 'enrolled')

而不是

PamojaCourse.all

Example 2: 譬如我需要的是「有 parent」 的 student

那就可以用 Student.joins(:parent) 來限制

後端效能優化 - 優化 query 太慢

可能是一次拿太多資料

可以利用 find_each 或 find_in_batches 分批拿

https://api.rubyonrails.org/classes/ActiveRecord/Batches.html#method-i-find_each

後端效能優化 - 優化 query 太慢

如果某個計算比較慢，但是參數不常變化

可以考慮放到 Rails 的 Cache 裡面

後端效能優化 - 優化使用者體驗

如果某段程式裡面含有執行速度較慢的程式，但不需立即得到結果

可以考慮把該段程式放到 background job 裡面

後端效能優化 - 程式執行較慢

有一種情況是拿了不需要的資料，可以利用 select 或 pluck 拿需要的欄位即可

譬如

後端效能優化 - 程式執行較慢

其他 ruby 程式的優化可以參考 https://github.com/JuanitoFatas/fast-ruby

後端效能優化 - 驗證工具 benchmark-ips

https://github.com/evanphx/benchmark-ips

ActiveRecord::Base.logger = nil

Benchmark.ips do |x|
  x.report('without select') do
    Student.all.map{|s| s.name }
  end

  x.report('with select') do
    Student.all.select(:first_name, :last_name, :preferred_name, :other_name).map{|s| s.name }
  end
  nil
end

後端效能優化 - 驗證工具 scientist

https://github.com/github/scientist

https://github.com/eduvo/openapply/pull/14760/files#diff-02ece8ad5786f65765ddb7e18dfba6a384fff6b9882ab77af6cd3927524ba191R20

class ScientistExperiment
  include Scientist::Experiment

  # ...

  def publish(result)
    puts "================================================="
    puts "matced? #{result.matched?}"
    puts "science.#{name}.control: #{result.control.duration}"
    puts "science.#{name}.candidate: #{result.candidates.first.duration}"
    puts "================================================="
  end
end

=================================================
matced? true
science.family-roster-collect-ids.control: 4.199053999999705
science.family-roster-collect-ids.candidate: 0.04198200000064389
=================================================