Re: Yahoo - Move Scripts to the Bottom

On Aug 6, 10:14 am, Peter Michaux <petermich...@xxxxxxxxx> wrote:
On Aug 5, 3:10 pm, "dhtmlkitc...@xxxxxxxxx" <dhtmlkitc...@xxxxxxxxx>
wrote:





On Aug 4, 10:06 am, howa <howac...@xxxxxxxxx> wrote:

According to Yahoo's recommendation:

http://developer.yahoo.com/performance/rules.html#js_bottom

Rule 5 described how stylesheets near the bottom of the page prohibit
progressive rendering, and how moving them to the document HEAD
eliminates the problem. Scripts (external JavaScript files) pose a
similar problem, but the solution is just the opposite: it's better to
move scripts from the top to as low in the page as possible. One
reason is to enable progressive rendering, but another is to achieve
greater download parallelization.

Im fact, I wonder if this method is reliable, just like you have a
link to trigger action, e.g.

<a onclick="test()"...

but this test() is at the end of the page, if people click the link
before the script was loaded...not reliabe...isn';t?

I remember a talk on performance at Yahoo. A member of the audience
asked something like "We have four files that we combined by copy
pasting them into one to improve our Y-Slow grade... What do you
recommend?"

Steve Souders replied to the effect that they should continue their
combining files approach/process.

Having worked on a few projects that have various components, I don't
think it's good advice to follow. This copy-and-paste approach can
lead to code that is not cohsesive and, difficult to maintain, and
hard to test. Much better to develop modular code and build it.

I'm thinking about a build system for JavaScript now. The site has
many pages and as we refactor the JavaScript I want file dependencies
to be easy to track. Reducing the number of scripts served is a
priority also. Any suggestions from experience on good build process
features?

Thanks,
Peter- Hide quoted text -

- Show quoted text -

It's no simple task! Yahoo does not have an official build process.
Doug mentioned that he is working on it. I probably shouldn't go into
detail anymore than that.

There's an interesting article on ajaxpatterns.org regarding download
on demand javascript. It's definitely not the easiest approach; it's
along the lines of what Dojo recommends.

One idea is to use ANT, if you're a Java shop. You can build a file by
parsing out: an include file, or a page-specific js file that has
require/import function calls (like dojo.require). I was on a project
that did this and it made a huge difference.

Another idea would be to have a custom tag or include. I have never
done this, but doesn't seem any harder than using ANT to do it.

<js:resources>
<js:resource src="com.example.ArrayExtras.js"/>
</js:resources>

would generate:
<script src="everythingCombined.js"></script>

everythingCombined would combine your framework.js file and all the
other js:resources.

Personally, I can't wait 'till ES4 so we can have real imports. It
just makes more sense to bind the behavior in the behavior layer.

Pros, cons? What are your thoughts?

(probably don't even have to ask on here, as everyone seems very
opinionated and vocal anyway!)

Garrett

.

Loading