Одностраничные веб-приложения и встроенные javascript и CSS

Question

Мы создали так называемое одностраничное веб-приложение (одна страница html + ajax)
В погоне за бритьем, как можно больше http-звонков, мы связали JS и CSS в 2 файлах.

Тем временем мы смотрели на то, как Google Buzz для мобильных построен, и есть некоторые интересные моменты:

• рядный SCRIPT и СТИЛЬ
• без внешних JS и CSS
• данные: изображения в CSS вместо url (...)

Таким образом, мы пошли дальше и «вложили» 2 файла JS и CSS в теги SCRIPT и STYLE. Удаление 2 драгоценных http-звонков.

Кто-нибудь испытал некоторые неприятности, делающие это на настольных браузерах?

Я не пытаюсь открыть религиозные дебаты о unobtrusivity;) Это о производительности, сетевых задержек мобильных страниц и т.д ...

Answer 1

Никогда. Поместите их в html-голову, чтобы они загрузили сначала и не волновались.

Answer 2

Inlining и связанные с CSS и файлы сценариев эквивалентны. Нет никакой разницы, кроме HTTP.

Answer 3

Является ли производительность проблемой в настоящее время? То, что Google делает для поддержки 100 пользователей одновременных пользователей, не обязательно то, что вы должны делать. Мне было намного проще поддерживать код, когда такие вещи, как CSS и JavaScript, хранятся в отдельных файлах include. Я только нарушаю то, что считаю хорошей практикой кодирования, когда есть веская причина. Трудно представить, что одностраничное приложение убивается трафиком для двух файлов include, которые будут кэшироваться браузерами пользователей после первого использования.

Answer 4

Практически никто не должен иметь дело с трафиком Google. Я бы сказал, что практически никогда не стоит следовать рекомендациям Google по оптимизации, потому что они просто не применяются в реальном мире.

Answer 5

Здесь стоит отметить, что встроенный CSS < style/> блокирует связанные CSS файлы CSS при возникновении конфликта.

Например

<style type="text/css"> 
    div .whiteBG { 
    background-color: #fff; 
    } 
</style> 

козыри связанный файл CSS, содержащий

div .whiteBG { 
    background-color: #ccc; 
    } 

даже если связанные файлы называются последним.

Answer 6

Я думаю, что вы уже смотрите на то, что никто не закодировал вывод, который вы видите с помощью системы Google Buzz или Gmail. Они зависят от очень сложной системы, которая построила на Python и C, чтобы скомпилировать исходный код и сделать его очень дружелюбным к тому, что у них есть доморощенная система «push».

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