javascript - Should use Head.js or just minified scripts before </body> with scripts in the markup? -
i have optimisation problem — site uses 2 (pretty large) javascript resources:
application.js (minimised jquery, jquery-ui, underscore-js , shared scripts, 120kb total) controller-specific file (some modules required page + interactions, 4kb total)i have scripts in views format/convert markup javascript (dependable on both jquery , controller-specific js code) need wait either $(document).ready or head.ready , makes part of website invisible prevent flash of unstyled content :(
now question comes: should utilize head.js or stick "before " scripts? there smart ways speed page loading time in case?
update: here's part of code (see versusio.com total code, landing page):
<html> <head> ... usual stuff <link (css stuff) /> <script src="head.js"></script> <script> // here global variables set cache keys, actual locale code etc., not dependable on jquery or other js code js assets </script> </head> <body> ... page content <div id="search">!-- here code "display: none" style prevent flash of unstyled content</div> <script> // here code positions , processes styles , adds interactions #search div application.position.in.center($(#search), $(document)); </script> ... more page content ... "display: none" div , accompanying script ... rest of page content <script type="text/javascript">head.js( { 'application': 'application.js' }, { 'landing': 'landing.js' } );</script> </body> </html>
first inquire question: need javascript loaded when user visits page?
when first loading website, need autocomplete-functionality, rest isn't needed on load. go seperated approach. advice following:
build page without javascript-functionality , enhance javascript, rid of inline styles , scripts. after have done this, load scripts need, can in head or before end of body use cdn jquery, jquery-ui, underscore , other libraries. if user loaded these libraries website, have performance bonus. last of all, asynchronously load javascript needed later on, user has scripts when hits compare-button.small tweaks:
use tool yslow or networking graph in favorite browser bottlenecks. looks gzipping not enabled, seek , that. do need load facebook/google/twitter/third-party stuff in head or done when page loaded? is server fast possible? looks takes halve sec html.i hope helped out bit, luck performance tweaking!
javascript jquery html optimization head.js
No comments:
Post a Comment