Best place for JavaScript block

dalaohu

原帖由 典 于 2011-8-4 11:46 发表


如果这么想，推荐google Closure
感觉jquery是游击队，小米步枪砍刀之类的。
google Closure是正规军，什么都齐全，其unit test也做的很好。

当然也可以二者同用，

我覺得js都是游擊隊，野路子 :) 野的不是一點點

dalaohu

原帖由 混不到坑的萝卜 于 2011-8-4 11:57 发表

The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads  ...

真的假的，這我還真不知道。

不過以前用 scriptmanager 是我一直吧所有的js ref放在裡面，這樣就一個request了。

混不到坑的萝卜

原帖由 dalaohu 于 2011-8-4 12:00 发表
真的假的，這我還真不知道。

不過以前用 scriptmanager 是我一直吧所有的js ref放在裡面，這樣就一個request了。

真！比郭美美的胸还真！我那段话直接copy & paste Yahoo的原文。

如果你考虑大规模网站的load balancing, multiple web server，那么这种把static resources分开的做法的优势就更明显了。

混不到坑的萝卜

Head JS script loaderWith Head JS your scripts load like images - completely separated from the page rendering process. The page is ready sooner. Always. This is guaranteed even with a single combined JavaScript file. See it yourself:
Sample page with 5 SCRIPT SRC tags
Same scripts loaded with Head JS
Non-blocking loading is the key to fast pages. Moreover Head JS loads scripts in parallel no matter how many of them and what the browser is. The speed difference can be dramatic especially on the initial page load when the scripts are not yet in cache. It’s your crucial first impression.
Pages no longer “hang” and there is less or zero “flashing” between pages. User only cares when the page is ready. Unfortunately current networking tools don’t highlight this crucial point. They focus on the overall loading of assets instead.
Head JS can make your pages load 100% or even 400% faster. It can make the largest impact on client side optimization.
SCRIPT SRCThis is from Apple.com’s HEAD:
<script src="http://images.apple.com/global/scripts/lib/prototype.js"></script>
<script src="http://images.apple.com/global/scripts/lib/scriptaculous.js"></script>
<script src="http://images.apple.com/global/scripts/browserdetect.js"></script>
<script src="http://images.apple.com/global/scripts/apple_core.js"></script>
<script src="http://images.apple.com/global/scripts/search_decorator.js"></script>
<script src="http://images.apple.com/global/scripts/promomanager.js"></script>
<script src="http://images.apple.com/home/scripts/ticker.js"></script>
<script src="http://images.apple.com/home/scripts/promotracker.js"></script>


HTML
All these scripts block the page. The page needs to wait for these to be loaded until it starts rendering itself. This is how majority of web sites are done. There is not a large difference whether the script tags are placed on top or on bottom of the page. On both cases the scripts must be loaded first. Compare it yourself.
With older generation browsers the scripts will be loaded sequentially. Here is a screenshot from Firefox 3.0.

It’s easy to understand that this is poison for performance. The single best optimization technique for script loading is to use a non-blocking and paraller script loader such as Head JS.
Combining scriptsThere is a common misbelief that a single combined script performs best. Wrong:

• latest browsers and Head JS can load scripts in parallel. loading 3 parts in parallel instead of as a single chunk is usually faster.
• if an individual file is changed the whole combination changes and you lose the benefits of caching. It’s better to combine only the stable files that doesn’t change often.
• many popular libraries are hosted on CDN. you should take the advantage of it instead of hosting yourself.
• iPhone 3.x cannot cache files larger than 15kb and in iPhone 4 the limit is 25kb. And this is the size before gzipping. if you care about iPhones you should respect these limits.
  

With Head JS the file amount is not as critical as it is with SCRIPT SRC because page rendering is not blocked. Combining scripts is an important optimization method but you can go too far with it.
Page styling and CSSStylesheets needs to be on top. An included script in the HEAD is the only place where a script is executed before the stylesheets are loaded and where it can give a helping hand for the CSS developer. Head JS takes this important role seriously and gives you following possibilities:

• use the latest CSS3 techniques and provide alternate CSS for IE and other old school browsers
• safely use HTML5 tags even with IE
• target CSS for specific screen widths, browsers and URLs
• style your pages differently depending on the application state, such as whether user is logged or not.

Essentially Head JS adds CSS class names to the <html> element. If you attempt to do this in a script that is loaded with Head JS you can see a “Flash of Unstyled Content” (FOUC) effect: the page is first rendered without the to-be-loaded style definitions and then re-rendered when the scripts are executed. This is why the CSS feature detection is a core part of Head JS.
A script in HEAD blocks so it must be small. This is the essence of Head JS. It weights only 2.5 kb when minified and gzipped. It’s preferred to load the file from a CDN. Google: I’m staring at You! (please give it a star)

典

还是parrallel downloading的问题
看来最新的浏览器大不一样了
我做了一个测试
简单网页同一个domain,
用IE9 如下

[ 本帖最后由 典 于 2011-8-4 13:54 编辑 ]

典

firefox4 如下

典

这个测试是同一个domain下的

总的来说IE9快很多

就并行而言IE9不会block,
firefox 一开始7个并行，超过7个就傻了

在新的浏览器下，script放在 头部还是尾部似乎不在是一个问题了，所以还是放在头部省事

[ 本帖最后由 典 于 2011-8-4 14:02 编辑 ]

dalaohu

那基本上要這樣做吧

<head>
    <script type="text/javascript">
        function AttachScript(src)
        {
            var script = document.createElement("SCRIPT");
            script.type = "text/javascript";
            document.getElementsByTagName("body")[0].appendChild(script);
            script.src = src;
        }
    </script>
</head>
<body>
  <script type="text/javascript">
    AttachScript("Script1.js");
    AttachScript("Script2.js");
  </script>
</body>

或
<script type="text/javascript">
  document.writeln("<script type='text/javascript' src='Script1.js'><" + "/script>");
  document.writeln("<script type='text/javascript' src='Script2.js'><" + "/script>");
</script>

外加host在不同的domain下。

dalaohu

典，你試一下。給個截圖看看

混不到坑的萝卜

原帖由 dalaohu 于 2011-8-4 14:06 发表
那基本上要這樣做吧
        function AttachScript(src)
        {
            var script = document.createElement("SCRIPT");
            script.type = "text/javascript";
            document.getE ...

你这种做法最不适合browser本地caching，浪费了static resources的初衷。那就是力争http response 304。

304 Not Modified

If the client has performed a conditional GET request and access is allowed, but the document has not been modified, the server SHOULD respond with this status code. The 304 response MUST NOT contain a message-body, and thus is always terminated by the first empty line after the header fields.

The response MUST include the following header fields:

      - Date, unless its omission is required by section 14.18.1
If a clockless origin server obeys these rules, and proxies and clients add their own Date to any response received without one (as already specified by [RFC 2068], section 14.19), caches will operate correctly.

      - ETag and/or Content-Location, if the header would have been sent
        in a 200 response to the same request
      - Expires, Cache-Control, and/or Vary, if the field-value might
        differ from that sent in any previous response for the same
        variant
If the conditional GET used a strong cache validator (see section 13.3.3), the response SHOULD NOT include other entity-headers. Otherwise (i.e., the conditional GET used a weak validator), the response MUST NOT include other entity-headers; this prevents inconsistencies between cached entity-bodies and updated headers.

If a 304 response indicates an entity not currently cached, then the cache MUST disregard the response and repeat the request without the conditional.

If a cache uses a received 304 response to update a cache entry, the cache MUST update the entry to reflect any new field values given in the response.

典

用你的代码我试了一下firefox，

这样看起来，对firefox来说，放在头部比放在尾部要慢，很明显
请注意，如我前面的试验所说，新的浏览器已经自动启动并行下载，

乱码

忙了一天，帖子变这么大了，u guys r tech geeks,尤其是典

乱码

front end基本上follow一些practice出不了大错。

1.放css在head里.

2.js尽量往下放，越靠近closing body越好。

3.static resource放在不用的domain上。

4.css/js combine.

5.用version的变化来break browser这边的cache.

6.sprite

7.load test.

这是大方向，小的细节就是注意ready中js的写法，别让Dom tree总是不断地reflow就好,不过logic不多的话也看不出来.

Yslow就很好，做到了那些checklist，基本上就过去了

front这块的确很重要，我们team的人都会做css/js,但做的都不是很精湛，这是我们的短板。

[ 本帖最后由 乱码 于 2011-8-4 18:11 编辑 ]

鱼羊鲜

现在验证分析优化工具真不少