Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Liking performance

2.369 Aufrufe

Veröffentlicht am

Slides from SydJS, Sydney 2012

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×