Where to Put Javascript in Web Page?
发表评论 so far
留下评论
12月 20, 2008, 9:48 上午
Filed under: 技术体会
Filed under: 技术体会
前几天写完“Slow Web Site Won’t Win”之后，有朋友和我讨论，说不大理解Steve Souders的Best Practices中的一条“Put Scripts at the bottom”，因为通常都是把javascript放在<header></header>中的。后来我看了一下Google Maps和VE的那两个例子，其实都没有遵从这条规则，所有的script都是写在了header部分，我再看了一下Yahoo!的主页，也是这样，但是YSlow还是给这些网页打出了A级的高分，我想YSlow并没有严格检测这个规则的遵从程度。
问题说回来，到底应该把Javascript放在哪里？是放在header部分，还是放在bottom（但是必须在</body>之前）。如果从只考虑效率的角度，的确应该将script尽量往后放，但是前提不要比依赖他们的元素还要往后，不然就有可能造成功能上的问题，比如有一个button的点击会引发调用一个javascript函数Button_OnClick，如果你把这个函数的javascript定义放得比这个button还靠后，那么就有可能浏览器在已经Render出这个button的时候，这个函数还没有load，这时候用户去点这个button就会出现我们不想出现的问题。
毫无疑问，应该尽量将javascript放在.js文件中让HTML去引用，这样的好处是将问题分割开了(Separation-of-Concerns)，而且可以利用Cache，如果我们将.js文件的HTTP响应Header设对，就可以让浏览器Cache这个.js文件，如果javascript很庞大，那么PLT 1.5和PLT 2.0的提高就很可观了。好，这样的话.js文件中的内容就成了library一样的东西，library就应该是时刻可用的，所以最好还是将其放在Header部分。总之，从纯粹效率的角度出发，我们应该将javascript尽量往后放，但是从功能的角度出发，我们又必须将javascript放在header中，只要合理的设置HTTP Caching，这样做并不会影响网页效率，我想这也是YSlow依然给了这些网页A分的原因。
发表评论
发表评论 so far
留下评论
巴别塔上的雇工 