JavaScript 关于前端页面 js 的编写习惯疑问

tony · 2011年12月21日 · 最后由 zfben 回复于 2012年02月04日 · 5314 次阅读

有个页面用到 jquery 页面中有多个地方需要 js 来控制 在每个 div 下面写

<script>
$(function(){
....
});
</script>

这样可行么?对页面速度会不会造成影响

还是把所有的都放在一个 $() 里面?

可行 有影响 放一个$() 里

另外如果脚本有共用的部分,独立成一个.js 文件避免重复加载,效果更好

application 定义一个 helper 吧。

#1 楼 @zfben 放在一个$() 里和放在多个$() 里有多大区别? 另外,把 js 直接写在页面中和写在.js 中有多大区别,我的理解是写在页面中少了加载的一步,页面更快

尽量不要把 js 和 html 混在一起。写在一起减少一次请求,但也许失去了更多。参考http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

#3 楼 @Tony 我也比较赞成@zfben的意见,主要是便于管理代码,同时加载速度也能提升一点 (在缓存于浏览器后)。在 rails 2.x 的时候,RJS 生成的代码是很难看的,在 rails3 就解决了这个问题。HTML,CSS,JS 就好比 MVC 三层一样,尽量保持三层的分立,后端开发有 “代码污染”“代码侵入” 这种说法,这同样也适用于前端开发

$(function(){}) 的目的就是为了让函数在 DOM Ready 以后再执行,通常只把调用函数写在里面就可以了,没有必要在多处使用 script 标签。 写在外部文件里虽然第一次较慢,但有缓存之后会比写在页面里更快


function init(){};
$(function(){
init(); 
// and more ..
})
  1. 性能

从性能角度来说,inline script 和外链 script(<script src="xxx" />)各有优势。 假设你的 script 只有很少的几行,写在 html 内确实省去了一个请求。 不过用外链方式,最好的情况下可以让浏览器从本地缓存中进行一次 IO 读取——这只会花 2ms。如果谁有兴趣的话我可以解释一下什么情况下会完全读本地缓存,什么情况下是 HTTP 304,什么情况下会是全新的 HTTP 200. 这些不是重点,结论是 js 比较少的时候,在页面上写会有性能优势。

但是随着 js 代码的增加,这个优势越来越小。你需要衡量的东西也会越来越多:

  • 外链 js 对页面加载速度的影响
  • 内联 js 对页面加载速度的影响
  • 外链 js 被缓存后,用户访问多个页面时能节约的加载时间
  • 不同页面,新访问用户的比例 随着 js 代码的增加,直接在页面上嵌入 script 的做法获得的收益越来越小
  1. 维护性

维护性在我看来是优先于性能要考虑的,放在后面说是因为这方面外链 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">&lt;!-- module A --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"module mod-a"</span><span class="nt">&gt;</span>a 模块的 HTML...<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"module-a.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="c">&lt;!-- module B --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"module mod-b"</span><span class="nt">&gt;</span>b 模块的 HTML<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"module-b.js"</span><span class="nt">&gt;&lt;/script&gt;</span> </code></pre></div> <p>(sinatra + haml 用惯了,不习惯 rails 的静态资源管理方式)</p> <p>实际上上面这个模板,更好的方式是拆分成 a、b 两个 partial 模板了</p>

#3 楼 @Tony 放在一个$() 里和放在多个$() 里有多大区别? script 标签会堵塞浏览器下载别的内容,所以这个取决于你的script标签之间的内容,举个简单的例子

<script>//script 1</script><img src="img1" />

浏览器会执行完 script1 的脚本后,才开始下载 img1。如果把两个标签对换下顺序,就可以尽早让浏览器下载图片(通常下载图片比执行 JS 所需时间长的多)。

以此类推,把script放在</body>前是最佳实践。

感谢楼上各位,现在清楚多了 决定用

<body>
....
<script>
</body>

这种方式来写

@zfben 关于 script 标签会堵塞浏览器下载别的内容之前真没了解过 这个堵塞是指不加载尚未执行的后面的内容呢,还是不下载后面的内容?但框架什么的还是可以出来,innerScript 还是可以执行?

#9 楼 @Tony 详细内容 google 下就知道,我这儿搜索 js 堵塞,第一条结果是 http://www.neatstudio.com/show-387-1.shtml 你可以看下

需要 登录 后方可回复, 如果你还没有账号请 注册新账号