Liking performance

1,896 views

Published on

Slides from SydJS, Sydney 2012

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,896
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Liking performance

  1. 1. Liking performance SydJS, Oct 17, 2012
  2. 2. https://www.facebook.com/plugins/like.php?href=…
  3. 3. Starting: OMG! 2-3 CSS files7-8 JavaScript files
  4. 4. Static resource packaging 1 CSS, 1 sprite, 1 JS
  5. 5. Single CDN hostnameNo domain sharding for so few resources
  6. 6. Async JSvar js = document.createElement(script);js.src = http://path/to/js;document.getElementsByTagName(head)[0] .appendChild(js);
  7. 7. CSS: inline, then lazy
  8. 8. Serializing hidden contentIE still downloads images in display: none
  9. 9. CSS "nubs"
  10. 10. Rounded corners<!-- IE --><b></b> <button /><b></b>
  11. 11. RewriteReducing CSS and JS
  12. 12. All CSS inlinesmall enough, dynamic
  13. 13. All images inline, reverted :(
  14. 14. Common JS migrationvar DOM = require(DOM);// …DOM.find(#something .or .other);// …module.exports = Like;
  15. 15. Lazy JSSome inline. Preload some more. Execute on user action.
  16. 16. Loading SDK <script> Async JS FIF
  17. 17. Async JS
  18. 18. http://jsbin.com/axibow/10/edit
  19. 19. Thank you!@stoyanstefanov

×