O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Liking performance

2.343 visualizações

Publicada em

Slides from SydJS, Sydney 2012

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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

×