https://bugzilla.wikimedia.org/show_bug.cgi?id=27488
--- Comment #15 from Krinkle <[email protected]> 2011-04-01 11:03:34 UTC --- In one of Steve Sauders' talks (thanks for the link Trevor) he highlights how sites are doing today. He compares several different techniques and in the end I draw the following conclusion: * Overall it's best to move them down instead of up becuase every <script src=> tag in the <head> will cause the browser to stop rendering, stop downloading and stop executing until that one script is ready, and then it will start downloading the next script, and then when it's finished downloading (and executing) it only then will it start on the next element. So these <script> tags really stop pretty much everything (Not just downloading but also execution of it is part of the hold up). * He also mentions an alternative in which he compares several sites (on of which is Wikipedia by the way) and aside from these sites (at that time) loading everything on top he checks how many of this code is actually being executing before or at the dom-ready event. [1] The alternative is to have both: All styles on top. Scripts that are needed right away on top and the rest dynamically from a call on the bottom (ie. mw.loader.load( .. ).go(); ) I think we should definitly consider the concept of having two queues. Although it may not be as easy as that due to the cachability of the html. But I think having something like the following: -- <head> <!-- this will be the names of all modules that have queue set to "top" [2] --> <link rel=stylesheet href="load.php?modules=these|are|top|moduels&only=styles " /> <script src="load.php?modules=startup|site|user"></script> <script src="load.php?modules=these|are|top|modules&only=scripts"></script> </head> <body> ... <script> mw.loader.load( ['these', 'are', 'bottom', 'modules'] ).go(); </script> </head> -- instead of the following that we have now -- <head> <link rel=stylesheet href="load.php?modules=site&only=styles " /> <link rel=stylesheet href="load.php?modules=user&only=styles " /> </head> <body> ... <script src="load.php?modules=startup"></script> <script> mw.loader.load( ['these', 'are', 'top', 'and', 'bottom', 'modules'] ).go(); </script> <script src="load.php?modules=site&only=scripts "></script> <script src href="load.php?modules=user&only=scripts "></script> -- I think that may be a good way to to handle this. -- Krinkle [1] http://blip.tv/file/3060565 section "initial payload and execution" after ~ 20:00, rough quote: "About 32% of the functions defined in code download on en.wikipedia.org/wiki (114K of JS) is actually executed before or at the dom-ready event. The rest was not needed (some small amount may be for errors or cases that don't apply to me), but most of it could've been deferred without missing anything." [2] Note that this may also solve the problem we're having with styles being applied too late (ie. LiquidThreads flash-of-unstyled-content that is not dynamically created - that's currently being workaround by using addModuleStyles instead of addModule ). LiquidThreads would either mark it's either stuff as 'queue' => 'top' – or it would split up in two modules, one (perhaps only with styles) as 'queue' => 'top' and the other one (whether or not implied) as 'queue' => 'bottom'. -- Configure bugmail: https://bugzilla.wikimedia.org/userprefs.cgi?tab=email ------- You are receiving this mail because: ------- You are on the CC list for the bug. _______________________________________________ Wikibugs-l mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/wikibugs-l
