Плюсы и минусы полной генерации HTML с использованием JavaScript - PullRequest
9 голосов
/ 21 декабря 2011

Недавно у меня появилась идея о том, как повысить общую производительность веб-приложения, а не генерировать готовую к показу HTML-страницу с веб-сервера, почему бы не дать ей полностью сгенерироваться всторона клиента.Делая это таким образом, только браузер должен отправлять только чистые данные (в моем случае это данные в формате JSON).Это разгрузит работу по генерации html с сервера в браузер клиента и уменьшит размер ответного пакета, отправляемого пользователям.

После некоторых исследований я обнаружил, что эта структура (http://beebole -apps.com / pure /) делает то же самое, что и мой.

То, что я хочу знать, - это плюсы и минусы этого.Это, безусловно, быстрее и лучше для веб-серверов, а благодаря современному браузеру код Javascript может работать быстро, что позволяет быстро создавать страницы.

Что должно быть недостатком этого метода, вероятно, для SEO.Я не уверен, что поисковые системы, такие как Google, будут соответствующим образом индексировать мой сайт. Не могли бы вы сказать мне, каковы недостатки этого метода?

Ps: Я также приложил пример кода, чтобы помочь описать метод следующим образом:

В голове, простойКод javascript будет написан так:

<script type='javascript' src='html_generator.js'/>
<script>
   function onPageLoad(){
      htmlGenerate($('#data').val());
   } 
</script>

В теле существует только один элемент, используемый просто как контейнер данных следующим образом:

  <input type='hidden' id='data' value='{"a": 1, "b": 2, "c": 3}'/> 

Когда браузер отображает файлБудет вызвана функция htmlGenerate, которая находится в html_generator.js, и в этой функции будет сгенерирована вся страница html.Обратите внимание, что файл html_generator.js может быть большим, поскольку он содержит много шаблонов html, но, поскольку он может кэшироваться в браузере, он будет загружен один и только один раз.

Ответы [ 5 ]

7 голосов
/ 21 декабря 2011

1001 * Downsides * Поисковые системы не смогут проиндексировать вашу страницу. Если они это сделают, вам очень повезет. Пользователи с отключенным JavaScript или на мобильных устройствах, скорее всего, не смогут его использовать. Преимущества в скорости могут оказаться минимальными, особенно если пользователь использует медленный движок JavaScript, как в IE. Поддерживаемость: если вы не автоматизируете генерацию своего javascript, это станет кошмаром! Всего

Этот метод не рекомендуется, если вы делаете это только для увеличения скорости. Однако это часто делается в веб-приложениях, где пользователи остаются на одной странице, но тогда вам, вероятно, будет лучше использовать одну из существующих платформ для этого, такую ​​как backbone.js , и убедитесь, что его можно сканировать, следуя рекомендациям Google по хеш-бангу или HTML5 PushState (в соответствии с рекомендациями @rohk).

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

3 голосов
/ 21 декабря 2011

Клиентские шаблоны часто используются в Одностраничных приложениях .

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

Плюсы:

  • Более отзывчивый интерфейс
  • На вашем веб-сервере снижена нагрузка

Минусы:

  • SEO будет сложнее, чем на классическом сайте (если вы не используете HTML5 PushState )
  • Доступность: вы сильно полагаетесь на JavaScript ...

Если вы идете этим путем, я рекомендую вам взглянуть на Backbone.js . Вы можете найти учебники и примеры здесь: http://www.quora.com/What-are-some-good-resources-for-Backbone-js

Примеры SPA:

Также посмотрите на этот ответ: https://stackoverflow.com/a/8372246/467003

1 голос
/ 21 декабря 2011

Хлоп.

Шаблоны jQuery ближе к тому, что вы думаете. Sanity говорит, что у вас должно быть несколько HTML-шаблонов, которые вы можете легко изменить по желанию. Вы хотите, чтобы ОБСЛУЖИВАНИЕ не связывало строки, которые заставляют вас бросать и превращать в свои худшие кошмары.

Вы можете продолжать с этим безумием, но в итоге вы научитесь трудному пути. Я использую вас, чтобы сначала попробовать некоторые прототипы, используя шаблоны jQuery и ваш чистый код. Разум, конечно, одолеет тебя, мой друг, и я говорю это, пытаясь на время пробовать тебя. :)

Можно также загружать содержимое в динамически нужном вам шаблоне, используя AJAX. Не имеет смысла, что у вас будет подход панацеи, когда каждый возможный шаблон должен быть загружен в одном запросе.

0 голосов
/ 21 декабря 2011

Минусы

  1. SEO
  2. Без учета пользователя без JavaScript

Плюсы

  1. Ускоренный рабочий процесс / интерфейс Fluider
  2. Небольшое снижение нагрузки

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

Кстати: я бы не упаковывал все шаблоны в один файл.Это было бы слишком большим для больших проектов.

0 голосов
/ 21 декабря 2011

плюсы?Я действительно не могу думать ни о чем.Вы говорите, что в веб-сервере это будет проще, но обслуживание HTML - это то, для чего веб-серверы предназначены для .

Минусы?Это противоречит практически всем лучшим методам создания веб-сайтов:

  • поисковые системы не смогут хорошо проиндексировать ваш сайт, если вообще
  • снизит удобство обслуживания
  • независимо от того, насколько быстры движки JS, DOM работает медленно и никогда не будет столь же быстрым, как построение HTML на сервере
  • одна ошибка JS, и весь ваш сайт не отображается.К сожалению.Браузеры, однако, чрезвычайно терпимы к ошибкам HTML.

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

...