Хранить HTML-код в переменной (быстрее для браузера?) - PullRequest
Новая
       2

Хранить HTML-код в переменной (быстрее для браузера?)

2 голосов
/ 13 августа 2011

Есть ли разница между ...

этим 

<html>
   ...
    <div id="myDiv">  </div>';
   ...
</html>
var manyHtmlCode = '  ... many Html Code ... ';
// onclick -> write it in to the DIV -> $('myDiv').append(manyHtmlCode);

и этим 

<html>
   ...
    <div id="myDiv" style="display:none;"> ... many Html Code ... </div>';
   ...
</html>
// onclick -> show content $('myDiv').show();

Для меня очевидно, что второе решение быстрее вjavascript, а что со скоростью браузера?Быстрее ли браузер (например, перетаскивает div) с меньшим HTML-кодом в теле Tag?

Если это так, было бы лучше хранить ненужный HTML-код в переменной JS.Моя проблема в том, что у меня есть страница с множеством перетаскиваемых элементов.Imho лучше работает, когда HTML-код меньше.

Ответы [ 5 ]

4 голосов
/ 13 августа 2011

Второе решение быстрее по двум причинам:

  1. HTML в этом подходе является «статическим» HTML; он существует в ответе браузеру и не нуждается в анализе или интерпретации JavaScript для добавления на страницу.
  2. При синтаксическом анализе и рендеринге HTML браузер заметит display: none и не будет заботиться о рендеринге ни этого элемента, ни чего-либо внутри него. Это ускоряет первоначальный рендеринг страницы, потому что на самом деле он не отображает большую часть вашего HTML.
2 голосов
/ 13 августа 2011

Я бы использовал второй, потому что он быстрее выполняется.(1 вызов jQuery вместо 2)

0 голосов
/ 13 августа 2011

Есть ли разница между ...

Это зависит от значения слова "есть".

В определенной версии определенного браузера один или другой будет работать быстрее. Вы можете, если хотите, сравнить их с пятью или десятью различными версиями браузера и узнать, какая из них обычно побеждает.

Ну и что? Пользователь не сможет заметить разницу; компьютер пользователя, как правило, больше ничего не делает, поэтому нет смысла сохранять циклы процессора.

Мой совет всем программистам - но особенно программистам, пишущим для браузеров - игнорировать время и эффективность пространства до тех пор, пока вы не увидите проблему, и сосредоточиться на

  • Корректность - код работает так, как задумано, даже несмотря на неожиданные входные данные, изменения в базовой платформе и подобные проблемы;
  • Ремонтопригодность - код написан так, что его можно изменять при изменении требований; и
  • Удобство использования - код представляет интерфейс (либо пользовательский интерфейс в случае кода конечного пользователя, либо API в случае кода библиотеки), который позволяет пользователю, которому не хватает полного понимания кода по-прежнему использовать его правильно.

КПД, бах.

0 голосов
/ 13 августа 2011

Зависит от того, чего именно ты хочешь достичь.Да, второй, очевидно, будет быстрее, так как HTML уже присутствует в документе, который показывает jQuery.В то время как в первом методе jquery пишет содержимое в режиме реального времени.

Опять же, могут быть разные способы добиться того, что вы пытаетесь, например, вы можете написать div, который вы отредактировали в файл, используя ajax и т. Д. И т. Д., И удалить его из текущего документа.Таким образом уменьшается количество HTML в документе.

Я просто даю вам идею ... дело в том, что вы не четко объяснили, чего вы пытаетесь достичь, чтобы дать вам наиболее подходящее решение

0 голосов
/ 13 августа 2011

Если у вас слишком много предметов DOM, я бы посоветовал перейти к первому. Предположим, что вы хотите пройти DOM и найти элемент, если у вас меньше элементов, тогда переход займет меньше времени.

Мое предложение - сравнить ваш код. И используйте тот, который подходит вам лучше всего.

Вы можете использовать ниже инструмент

http://jsperf.com/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...