前端优化实践

14,847 views

Published on

Published in: Technology, Design
  • Be the first to comment

前端优化实践

  1. 1. |
  2. 2.
  3. 3. ••
  4. 4. •••
  5. 5.
  6. 6. ••
  7. 7. •••
  8. 8. • Find the master
  9. 9. •Find the master• Follow the master
  10. 10. •Find the master• Follow the master• Be the master!
  11. 11. • Yahoo 14
  12. 12. • Yahoo 14• Firebug + Yslow
  13. 13. • Yahoo 14• Firebug + Yslow• Google Page Speed
  14. 14. • Yahoo 14• Firebug + Yslow• Google Page Speed• Monster
  15. 15. • Yahoo 14• Firebug + Yslow• Google Page Speed• Monster•
  16. 16.
  17. 17. •• ajax HTML
  18. 18. •• ajax HTML• js
  19. 19. •• ajax HTML• js•
  20. 20. •• ajax HTML• js•• Gzip, Expire
  21. 21. •• ajax HTML• js•• Gzip, Expire• CSS Sprite
  22. 22. • CSS Sprite
  23. 23. • CSS Sprite• Ajax Expire
  24. 24. • CSS Sprite• Ajax Expire• CSS3 + IE Filter
  25. 25. • CSS Sprite• Ajax Expire• CSS3 + IE Filter• Mini Arale + Loader
  26. 26.
  27. 27. ••
  28. 28. •••
  29. 29. •••
  30. 30. • Core = Arale base + Cashier.base
  31. 31. • Core = Arale base + Cashier.base• Extend = Arale + Cashier.Module + Deps Module
  32. 32. • Core = Arale base + Cashier.base• Extend = Arale + Cashier.Module + Deps Module• Cashier.Module.defer()
  33. 33. • Core = Arale base + Cashier.base• Extend = Arale + Cashier.Module + Deps Module• Cashier.Module.defer()• Cashier.Module.icons()
  34. 34. • 220 K 80K
  35. 35. • 220 K 80K• 14 7 4 ajax 11
  36. 36. • 220 K 80K• 14 7 4 ajax 11•
  37. 37. Gzip
  38. 38. Gzip• , CPU , 50ms
  39. 39. Gzip• , CPU , 50ms• Gzip
  40. 40. Thanks for your time.

×