브라우저에 날개를 달자
0 likes667 views
The document outlines various strategies for optimizing web resource management and network efficiency, with a focus on asynchronous processing, non-blocking databases, and efficient image loading techniques. It emphasizes the use of tools like Chrome DevTools for monitoring performance and suggests techniques such as compressing images and avoiding unnecessary loads to enhance rendering. Key concepts include request header directives, cache management, and HTML parsing improvements to ensure smooth user experience.
![Browser (chrome dev-tools)
Rendering
# do not block renderer!
html parsing
• <script [async | defer] />
• async
• defer](https://image.slidesharecdn.com/hl1enshowroom2-190930022530/85/-13-320.jpg)
브라우저에 날개를 달자
- 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 • ? • ? • ? • ( | ) ? • ?