Каковы последствия производительности для добавления всего кода JQuery в application.js в проекте Rails

Question

Я запускаю довольно большое веб-приложение, которое содержит все больше кода JQuery как для пользовательского интерфейса, так и для выполнения запросов AJAX.

Большие куски кода живут в своем собственном, выделенном .js файле, но растет число страниц (в первую очередь, форм), которые используют небольшое количество JQuery для отображения / скрытия элементов формы, изменения классов и т. Д. В настоящее время я поместите этот код в блок $(document).ready() в моем основном файле application.js.

Учитывая это, на любом данном просмотре страницы загружается application.js и выполняется весь код JQuery в этом блоке ready(), несмотря на тот факт, что только один или два вызова будут иметь отношение к текущей странице. Есть ли какие-либо последствия для производительности, или это на самом деле весьма незначительно? Если это влияет на производительность, каков рекомендуемый альтернативный способ управления этими специфичными для страницы фрагментами JQuery (или вообще любого типа Javascript) в больших приложениях Rails?

Несмотря на то, что это считается плохой практикой, не имеет ли больше смысла определять просто правила JQuery , которые относятся только к одной форме внутри самой части формы?

Answer 1

Я так понимаю, вы обеспокоены производительностью выполнения JavaScript на стороне клиента?

Если издержки выполнения javascript на страницу в вашем блоке $(document).ready() не так высоки, я бы не стал об этом беспокоиться.

Однако вполне возможно, что у вас может быть какой-то довольно тяжелый javscript, который вы хотите запускать только при визуализации соответствующих форм (или других элементов страницы).

Если это так, то как насчет подхода: Для каждого элемента, который имеет партнерскую функцию javascript, которая требует вызова, установите встроенный флаг.

1010 *, например *

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

Тогда в вашем $(document).ready() блоке есть:

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

Я почти уверен, что вы можете включить такую ​​функциональность в код Rails, чтобы в значительной степени автоматизировать ее, если хотите обобщить ее.

Answer 2

Преимущество наличия всего в одном файле (application.js) состоит в том, что клиент кэширует этот файл и будет обслуживать их локально при последующих HTTP-запросах.

Удар производительности, который вы можете получить, связан с самим вашим кодом jQuery. В частности, при поиске элементов DOM, с которыми вы позже будете работать. Sizzle , новый механизм выбора в jQuery 1.3, анализирует ваши селекторы справа налево, как браузеры анализируют CSS. Поэтому лучше постараться максимально сузить свой выбор справа от запроса селектора. Сам jQuery оптимизирован также для селекторов #id (пропускает Sizzle), что хорошо иметь в виду. По этой причине выполнение $ ('# id'). Find ('div') намного быстрее, чем выполнение $ ('# id div'). Кроме этого, большинство предупреждений, относящихся к скорости страницы Google относительно селекторов CSS, будут применяться к вашим селекторам jQuery.

Что касается js для конкретной страницы, вот один из способов сделать это:

Добавьте <%= yield :javascripts %> на свой макет, прямо перед закрывающим тегом тела. Затем вы можете добавить это к вашему виду после html:

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

Это сохраняет HTTP-запрос и сохраняет поведение вашего представления близким к вашему, что является выигрышем, хотя и не уменьшает ваш javascript. Это компромисс, который хорошо сработал для меня.

Answer 3

Если вы переместите все свои блоки $ (document) .ready () в отдельный файл JS, клиенты загрузят его только один раз, сэкономив при этом несколько килобайт на запрос. Есть много способов улучшить производительность и снизить нагрузку. Проверьте это: http://developer.yahoo.com/performance/rules.html и это расширение Firefox: http://developer.yahoo.com/yslow/help/index.html