Performance Method - libitums/FE GitHub Wiki

์ธก์ • ๋ฐฉ๋ฒ•๊ณผ ์ง€ํ‘œ

์ง€ํ‘œ

์ง€ํ‘œ ๋œป ์ฝ๋Š” ๋ฒ•
์ฒซ ๋ Œ๋” (pipeline) ๋ฒˆ๋“ค์„ ๋ฐ›์•„ ์ฒซ ํ™”๋ฉด์„ ๊ทธ๋ฆฌ๊ธฐ๊นŒ์ง€ 12.6 ms ์•ˆ์ชฝ ์ฐจ์ด๋Š” ํ”๋“ค๋ฆผ์œผ๋กœ ๋ณธ๋‹ค
ํŒŒ์‹ฑ (parse) ๋ฒˆ๋“ค์„ ์ฝ์–ด ํ•ด์„ํ•˜๋Š” ์‹œ๊ฐ„. ์ฒซ ๋ Œ๋”์˜ ์•ž๋ถ€๋ถ„ ๋ณดํ†ต 1~4 ms
์ฒซ ํ‘œ์‹œ (lynxFcp) ์ฒซ ์ฝ˜ํ…์ธ ๊ฐ€ ๋ณด์ด๊ธฐ๊นŒ์ง€ ์„ค์น˜ ๋ฐฉ์‹ ยท ํšŒ์ฐจ์— ๋”ฐ๋ผ 30~55 ms ํ”๋“ค๋ฆฐ๋‹ค
ํ™”๋ฉด ์ „ํ™˜ ํƒญ ยท ํ™”๋ฉด์„ ๋ฐ”๊ฟ€ ๋•Œ ๋‹ค์‹œ ๊ทธ๋ฆฌ๋Š” ์‹œ๊ฐ„(๊ณ„์ธก์ ์ด ์žˆ๋Š” ํ™”๋ฉด๋งŒ) ๊ฐ™์€ ์ด๋ฆ„์˜ ๊ณ„์ธก์ ์€ ์ฒ˜์Œ ํ•œ ๋ฒˆ๋งŒ ์žฐ๋‹ค
๋ฉ”๋ชจ๋ฆฌ (mainThreadRuntimeBytes) ๋ฉ”์ธ ์Šค๋ ˆ๋“œ JS๊ฐ€ ์ฅ” ๋ฉ”๋ชจ๋ฆฌ ๊ฐ™์€ ์ฝ”๋“œ๋ฉด ๋ฐ”์ดํŠธ๊นŒ์ง€ ๊ฐ™๋‹ค โ€” ์ž‘์€ ์ฐจ์ด๋„ ์‹ค์ œ
์š”์†Œ ยท ๋ทฐ ๋ฉ”๋ชจ๋ฆฌ (elementBytes ยท viewBytes) ํ™”๋ฉด ์š”์†Œ ํŠธ๋ฆฌ ยท ๋„ค์ดํ‹ฐ๋ธŒ ๋ทฐ ์ด๋ฏธ์ง€ ๋””์ฝ”๋”ฉ์— ํฌ๊ฒŒ ์›€์ง์ธ๋‹ค
๋ฒˆ๋“ค (main.lynx.bundle) pnpm build๊ฐ€ ๋งŒ๋“  ํŒŒ์ผ ํฌ๊ธฐ ์ƒํ•œ์„ ๋„˜์œผ๋ฉด CI๊ฐ€ ๋ง‰๋Š”๋‹ค

๋น ๋ฅด๋‹ค ยท ๋А๋ฆฌ๋‹ค๋ฅผ ๊ฐ€๋ฅด๋Š” ๊ธฐ์ค€๊ฐ’์€ ์•„์ง ์—†๋‹ค. ๋ณด๊ณ ์„œ๋Š” ์ˆ˜์น˜๋ฅผ ๋‚จ๊ธธ ๋ฟ ํ†ต๊ณผ ยท ์‹คํŒจ๋ฅผ ํŒ์ •ํ•˜์ง€ ์•Š๋Š”๋‹ค.

์ธก์ • ์กฐ๊ฑด

ํ•ญ๋ชฉ ๊ฐ’
๊ธฐ๊ธฐ iPhone 17 Pro ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ
OS ยท SDK iOS 26.5 ยท Lynx 4.0.1
๋นŒ๋“œ Release ํ˜ธ์ŠคํŠธ ์•ฑ(์ฒซ ๊ธฐ๋ก ํ•˜๋‚˜๋งŒ Debug)
๋„๊ตฌ pnpm --filter @libitums/mobile performance:capture -- start ยท report ยท stop

์‹ค๊ธฐ(์‹ค์ œ iPhone)์—์„œ ์žฐ ๊ธฐ๋ก์€ ์•„์ง ์—†๋‹ค.

์‹œ๋‚˜๋ฆฌ์˜ค ์ข…๋ฅ˜

  1. ์ฒซ ๋กœ๋“œ โ€” ์•ฑ์„ ์—ด๊ณ  ์กฐ์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค
  2. ์ƒˆ ์„ค์น˜ ์ฒซ ๋กœ๋“œ โ€” ์ง€์šฐ๊ณ  ๋‹ค์‹œ ์„ค์น˜ํ•œ ๋’ค ์˜จ๋ณด๋”ฉ ยท ๋กœ๊ทธ์ธ๊นŒ์ง€
  3. ํƒญ ยท ํ™”๋ฉด ์ „ํ™˜ โ€” ๋กœ๊ทธ์ธ๋œ ์ƒํƒœ์—์„œ ์—ฌ์ • ๋งต ยท ํƒญ์„ ์˜ค๊ฐ„๋‹ค(๋ณดํ†ต 3ํšŒ์ฐจ)
  4. ํ•™์Šต ํ™”๋ฉด ์ง„์ž…
  5. ๋ฐ˜๋ณต ์ธก์ • โ€” ๊ฐ™์€ commit์„ ์—ฌ๋Ÿฌ ๋ฒˆ ์žฌ์–ด ํ”๋“ค๋ฆผ ํญ์„ ์žก๋Š”๋‹ค
  6. ๋ฒˆ๋“ค๋งŒ โ€” Release ๋นŒ๋“œ ์—†์ด pnpm build ํฌ๊ธฐ๋งŒ ๋น„๊ต(์ƒํƒœ โšช)

๊ธฐ๋ก ๊ทœ์น™

  • ์•ฑ ๋™์ž‘์„ ๋ฐ”๊พธ๋Š” PR๋งˆ๋‹ค ๋ณด๊ณ ์„œ๋ฅผ ํ•˜๋‚˜ ์ด์ƒ ๊ฐ™์€ PR์— ๋„ฃ๋Š”๋‹ค. ์—†์œผ๋ฉด CI(performance:reports:gate)๊ฐ€ ๋ง‰๋Š”๋‹ค.
  • ํŒŒ์ผ ํ•˜๋‚˜ = ๊ธฐ๊ธฐ ยท ์‹œ๋‚˜๋ฆฌ์˜ค ยท ํšŒ์ฐจ ํ•˜๋‚˜. ๋‚ ์งœ๋Š” ๋ณธ๋ฌธ์—๋งŒ ์ ๋Š”๋‹ค.
  • ๋ชป ์žฐ ๊ฐ’์€ ์ง€์šฐ์ง€ ์•Š๊ณ  ๋ฏธ์ธก์ •๊ณผ ์ด์œ ๋ฅผ ์ ๋Š”๋‹ค. ๋ฏธ์ธก์ •์€ ๊ธฐ์ค€์„ ๋„, ํ†ต๊ณผ๋„ ์•„๋‹ˆ๋‹ค.
  • ์›๋ณธ ์บก์ฒ˜(JSON ยท NDJSON)๋Š” ์˜ฌ๋ฆฌ์ง€ ์•Š๋Š”๋‹ค.

์ž์„ธํ•œ ์–‘์‹์€ ์ €์žฅ์†Œ docs/performance/reports/README.md์™€ docs/performance-analysis.md์— ์žˆ๋‹ค.

์ด ์œ„ํ‚ค๋ฅผ ๊ฐฑ์‹ ํ•˜๋Š” ๋ฒ•

์ƒˆ ๋ณด๊ณ ์„œ๊ฐ€ main์— ๋“ค์–ด์˜ค๋ฉด ๊ธฐ๋ก ๋ชฉ๋ก ๋งจ ์œ„ ๋‚ ์งœ์— ํ•œ ์ค„์„ ๋”ํ•œ๋‹ค. ๋ฒˆ๋“ค ยท ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ํฌ๊ฒŒ ์›€์ง์˜€์œผ๋ฉด ์ถ”์ด์˜ ใ€Œํฌ๊ฒŒ ๋Š˜์–ด๋‚œ ์ง€์ ใ€์—๋„ ๋”ํ•˜๊ณ , ์ˆ˜์น˜๋ฅผ ์ฝ๋Š” ๋ฒ•์ด ๋ฐ”๋€Œ์—ˆ์œผ๋ฉด ์ฃผ์š” ๋ฐœ๊ฒฌ์— ์ ๋Š”๋‹ค.