Session 2 - 이병승 브라우저에 날개를 달자 2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다. 보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요. (2019년 9월 30일 오후 오픈 예정)

2. DIET!!!
resource size =
loop count =
logic =
etc… =

3. !

5. Network
• DNS
• CDN
• IDC / Switch
• Http Protocol
• 1.1 vs 2.0
• Request Header Directive
• Cookie

6. Server
• Resource (IO / CPU / Memory)
• Cache
• Logic
• Asynchronous (Process, Thread)
• Non-blocking

7. Database
• Lock, Wait
• Internal Process mechanism
• Batch
• SQL Tuning

8. Browser
• Asynchronous
• Non-blocking
• Network
• Resource : images & javascript
• Connection count
• Rendering

9. Todos

10. Browser (chrome dev-tools)
Resource
# Network efficiency
compress images
• SVG : gzip
• png, jpg : webpack

11. Browser (chrome dev-tools)
Resource
# Network efficiency
load images
• do not load images
unnecessarily.

12. Browser (chrome dev-tools)
Rendering
# do not block!
Smooooth the screen.
• requestAnimationFrame
• requestIdleTimeout

13. Browser (chrome dev-tools)
Rendering
# do not block renderer!
html parsing
• <script [async | defer] />
• async
• defer

14. conclusion
, . .
. ,
.
.
. ,
.
,
. DOMContentLoaded
,
, .

15. conclusion
• ?
• ?
• ?
• ( | ) ?
• ?