代码之家 › 专栏 › 技术社区 › Olly

在Rails项目中将所有jquery代码添加到application.js会带来什么性能影响?

ruby-on-rails jquery javascript

Olly · 技术社区 · 16 年前

我运行的是一个相当大的Web应用程序,它包含越来越多的jQuery代码,用于UI润色和发出Ajax请求。

更大的代码块存在于它们自己的专用代码中 .js 文件,但是有越来越多的页面(主要是表单)使用少量jquery来显示/隐藏表单元素、修改类等。 $(document).ready() 阻止在我的主 application.js 文件。

给出了这个,在任何给定的页面视图上 应用程序 已加载,其中的所有jquery代码 ready() 尽管只有一个或两个调用与当前页面相关,但仍会执行块。这样做是否会对性能产生影响,或者实际上可以忽略不计?如果存在性能方面的影响,那么在大型Rails应用程序中管理这些特定于页面的jquery(或者实际上是任何类型的javascript)片段的推荐替代方法是什么?

尽管被认为是不好的做法,简单地定义jquery规则是否更有意义? 只针对一个表单 在形式内部,部分本身?

3 回复 | 直到 16 年前

hgmnz 16 年前

将所有内容都放在一个文件(application.js)中的好处是,客户机将缓存此文件,并将在随后的HTTP请求上在本地为其提供服务。

您可能会受到的性能影响与您的jquery代码本身有关。具体来说,在搜索稍后要处理的DOM元素时。 Sizzle jquery 1.3中的新选择器引擎从右到左解析选择器,就像浏览器解析CSS一样。因此,最好尽量缩小选择器查询右侧的选择范围。jquery本身也针对id选择器进行了优化(跳过sizzle),这是一个很好的考虑。因此,执行$('id').find('div')比执行$('id div')快得多。除此之外,大多数警告适用于 google page speed 关于css选择器将应用于jquery选择器。

对于特定于页面的JS,有一种方法可以做到:

添加一个 <%= yield :javascripts %> 在你的布局上,就在你的结束身体标签之前。然后,您可以在HTML之后将其添加到视图中:

<% content_for :javascripts do %>
  <% javascript_tag do %>
    //your js here
  <% end %>
<% end %>

这将保存一个HTTP请求,并使您的视图行为接近您的视图,这是一个胜利,尽管它不会缩小您的javascript。这是一个对我很有效的妥协。

DanSingerman 16 年前

我认为您关心的是客户端的JavaScript执行性能?

如果您的 $(document).ready() 街区,不是那么高,我就不想担心了。

但是,很有可能只有在呈现相关表单(或其他页面元素)时才需要运行一些相当重的javscript。

如果是这样,那么作为一种方法,这会怎么样: 对于每个具有需要调用的合作javascript函数的元素,设置一个内联标志。

例如

<%= some rails stuff %>
<script type="text/javascript">
   elements_rendered('your_element_name') = true;
</script>

然后在你 $(文档).ready()) 块有:

if (elements_rendered('your_element_name'))
    your_function_for_the_element();

我非常肯定,如果您想概括一下Rails代码,您可以将这类功能包装在Rails代码中,从而在很大程度上实现自动化。

knoopx 16 年前

如果将所有的$(document).ready()块移动到一个单独的JS文件中,客户机将只下载一次,每次请求只保存几KB。有很多方法可以提高性能和减少负载。看看这个: http://developer.yahoo.com/performance/rules.html 这个火狐扩展: http://developer.yahoo.com/yslow/help/index.html