Должен ли я встроить все CSS и JS для статического SPA?

Я создаю одностраничное приложение, состоящее только из статических HTML, JS и CSS. Мне нужно поддерживать IE9 +, современные настольные браузеры и iOS 6+.Должен ли я встроить все CSS и JS для статического SPA?

Веб-сайт построен с использованием grunt, и я рассматриваю возможность вложения всех JS и CSS в HTML-файл, что упростит обработку немного.

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

У вас есть опыт работы с этим?

[Изменить] Кажется, что это неясно. Я не хочу вручную поместить все JS и CSS, с которыми я работаю, в полученный HTML-файл. У меня есть чистая структура проекта, и подумайте о том, чтобы позволить grunt генерировать встроенную версию как выпуск. Я не буду работать с встроенной версией, ни для разработки, ни для отладки. Мой вопрос касается только технической части: будет ли какое-либо негативное влияние на браузер (за исключением кеширования, весь код html кэширован, и я могу жить с его недействительностью в целом)? Почему встраивание в результате автоматизированного процесса сборки по-прежнему считается плохой практикой (за исключением темы кэширования)?

источник

2014-08-27 muffel

Работает ли над этим приложением более одного разработчика? Если это так, совместное использование одного большого файла может создать проблему. Вы считаете, что трудно перемещаться по одному большому файлу в редакторе? – DaveB

@DaveB да, я работаю в команде, но это не имеет значения, так как это результат процесса сборки Grunt. Есть две версии, построенные по нашей конфигурации, одна версия и еще одна, которая не была уменьшена, сжата (и не будет встроена), так что это не проблема – muffel

Это действительно хороший вопрос.

Единственный серьезный недостаток, который я вижу, - это кеширование.

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

Я мог бы даже сделать еще один шаг дальше и встраивать все ваши изображения с помощью Data URIs, рассуждения в том, что дополнительные запросы HTTP являются более дорогостоящими, чем загрузка дополнительных ~ 33% данных, благодаря, как работает TCP (Он начинает медленно, а затем экспоненциально увеличивает скорость загрузки до тех пор, пока пакеты не начнут теряться), дополнительные несколько КБ на максимальной скорости могут быть лучше, чем куча новых запросов.

источник

2014-08-27 16:10:01

вся HTML-страница кэшируется, а изменения обнаруживаются с помощью ETag заголовок. Изменений не будет (фиксированные выпуски-циклы и окна проверки для продуктивной системы), а самая большая часть - CSS и JS, которые должны быть обновлены, тем не менее, в случае каких-либо изменений. – muffel

Идите к этому. Это интересный подход, и мне было бы интересно, если бы вы сделали некоторый бенчмаркинг после того, как вы выпустили, а затем посмотрите, действительно ли это лучше. Я подозреваю, что так будет. Также проверьте мое редактирование для твиста;) –

спасибо, я попробую и опубликую некоторые результаты тестов после этого;) – muffel

Нет, вы не должны вставлять CSS и JavaScript с помощью HTML. Отдельные ресурсы будут кэшироваться. Подумайте о разделении проблем! Как запустить JavaScript через JSLint? Как вы можете проверить CSS, когда все это встроено?

источник

2014-08-27 16:14:47 DaveB

Там ** есть ** разделение проблем в исходном коде и отладочной версии. Я говорю о выпуске выхода grunt («никогда не смотрите на автоматически сгенерированный код») – muffel

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

@SecondRikudo Спасибо, я вижу суть. Я не понял этого, когда отправил свой ответ. Есть ли влияние на отладку на стороне клиента? – DaveB

Оставьте свой CSS и JS отдельно. Если в вашем HTML есть изменения, но не ваш CSS, вы просите пользователя загрузить все свои CSS снова. Если CSS является отдельным файлом, то браузер будет использовать локально кэшированную версию, никаких дополнительных поездок на сервер не требуется.

Если вы используете хрюканье, используйте задачу, например grunt-filerev, чтобы добавить хэш к вашим именам файлов CSS и JS после их миниатюризации и конкатенации.

источник

2014-08-27 16:18:56

Если изменения достаточно разнесены, влияние этого минимально. –

-2

Если вы встроите JS и CSS в сам сайт SPA, вы получите код, не поддерживающий код, а также проблему, когда браузер не может кэшировать файлы CSS и JS.

Если вы используете хрюкать, чтобы подготовить сборку, почему вы не просто создать много мелких JS и CSS файлы, как мы делаем в обычных приложениях, а затем использовать рубаки-вно-Concat для конкатенации (возможно, также преуменьшать) их в один файл и иметь это как ссылку в вашем HTML.

Сообщите мне, если вам нужен образец кода.

источник

2014-08-27 16:28:21 stripathi

см. Мое редактирование. Приложение часто не обновляется (не может быть), и я не буду вручную вводить код. Это технический вопрос, и только о том, что может улучшить производительность браузера или пользовательский интерфейс. – muffel

Да. Фактически это рекомендуется Google, если ресурсы CSS невелики. (примечание: это относится только к CSS)

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

https://developers.google.com/speed/docs/insights/InlineCSS

Очевидно, вы бы сохранить эти ресурсы отдельно в процессе разработки и использовать некоторые сборки инструмента, как Глоток/хрюкать.

источник

2015-08-06 23:37:56 warrickh

Должен ли я встроить все CSS и JS для статического SPA?

ответ

Смежные вопросы