JavaScript 关于前端页面 js 的编写习惯疑问
有个页面用到 jquery 页面中有多个地方需要 js 来控制 在每个 div 下面写
<script>
$(function(){
....
});
</script>
这样可行么？对页面速度会不会造成影响
还是把所有的都放在一个 $() 里面？
尽量不要把 js 和 html 混在一起。写在一起减少一次请求，但也许失去了更多。参考http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
$(function(){}) 的目的就是为了让函数在 DOM Ready 以后再执行，通常只把调用函数写在里面就可以了，没有必要在多处使用 script 标签。 写在外部文件里虽然第一次较慢，但有缓存之后会比写在页面里更快
function init(){};
$(function(){
init();
// and more ..
})
- 性能
从性能角度来说，inline script 和外链 script（<script src="xxx" />）各有优势。
假设你的 script 只有很少的几行，写在 html 内确实省去了一个请求。
不过用外链方式，最好的情况下可以让浏览器从本地缓存中进行一次 IO 读取——这只会花 2ms。如果谁有兴趣的话我可以解释一下什么情况下会完全读本地缓存，什么情况下是 HTTP 304，什么情况下会是全新的 HTTP 200. 这些不是重点，结论是 js 比较少的时候，在页面上写会有性能优势。
但是随着 js 代码的增加，这个优势越来越小。你需要衡量的东西也会越来越多：
- 外链 js 对页面加载速度的影响
- 内联 js 对页面加载速度的影响
- 外链 js 被缓存后，用户访问多个页面时能节约的加载时间
- 不同页面，新访问用户的比例 随着 js 代码的增加，直接在页面上嵌入 script 的做法获得的收益越来越小
- 维护性
维护性在我看来是优先于性能要考虑的，放在后面说是因为这方面外链 script 完胜。如果你在页面上写 js，分散的 js 碎片要么迅速膨胀，要么被遗忘而成为隐患。
所以建议 js 还是写到单独的 js 文件里面。
再回到楼主的问题， 是否可以或者应该合并到一处？ <ul> <li>是完全可以的，<code>$(function(){})</code> 里面的<code>function</code>会在<code>DOMReady</code>之后才运行，所以放在哪里都可以（甚至在你要操作的 DOM HTML 前面）</li> <li>是否应该？如果模板是有很多个小模块构成，对应的 js 文件也尽量和模板放在一起，做模块化的管理。</li> </ul> <div class="highlight"><pre class="highlight html"><code><span class="c"><!-- module A --></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"module mod-a"</span><span class="nt">></span>a 模块的 HTML...<span class="nt"></div></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"module-a.js"</span><span class="nt">></script></span> <span class="c"><!-- module B --></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"module mod-b"</span><span class="nt">></span>b 模块的 HTML<span class="nt"></div></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"module-b.js"</span><span class="nt">></script></span> </code></pre></div> <p>(sinatra + haml 用惯了，不习惯 rails 的静态资源管理方式)</p> <p>实际上上面这个模板，更好的方式是拆分成 a、b 两个 partial 模板了</p>
感谢楼上各位，现在清楚多了 决定用
<body>
....
<script>
</body>
这种方式来写
@zfben 关于 script 标签会堵塞浏览器下载别的内容之前真没了解过 这个堵塞是指不加载尚未执行的后面的内容呢，还是不下载后面的内容？但框架什么的还是可以出来，innerScript 还是可以执行？
#9 楼 @Tony 详细内容 google 下就知道，我这儿搜索 js 堵塞，第一条结果是 http://www.neatstudio.com/show-387-1.shtml 你可以看下