Включая загрузки CSS-файлов и файлов Javascript - как мне оптимизировать

Question

Дубликат: Несколько файлов javascript / css: лучшие практики?

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

Но в результате я заметил, что теперь я включил 8 внешних файлов CSS, а также колоссальные 20 внешних файлов Javascript. в сочетании, так что я определенно должен делать что-то не так здесь. Как мне с этим разобраться - я где-то читал, что один большой js-файл загружается быстрее, чем 2 или 3 файла, которые даже вдвое меньше накопленного размера.

Любая помощь будет принята с благодарностью

Answer 1

Один большой файл лучше, чем кучка маленьких, потому что в этом случае веб-браузер делает один запрос к веб-серверу вместо, скажем, 8 запросов. Важнее не небольшие различия в общем размере, а общая задержка запросов.

Представьте себе два сценария: вы загружаете один файл размером 8 КБ и 8 файлов по 1 КБ каждый.

1. В первом сценарии общее время равно 80 мс (время передачи) + 50 мс (задержка) = 130 мс

2. Во втором сценарии вы видите что-то вроде 8x10 мс (время передачи) + 8x50 мс (!) С задержкой = 480 мс (!)

Вы видите разницу. Это ни в коем случае не исчерпывающий пример, но вы поняли идею.

Так что, если возможно, объединяйте файлы вместе. Сжатие содержимого, чтобы уменьшить объем данных для передачи. И используйте кэширование, чтобы избавиться от повторяющихся запросов.

Answer 2

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

Answer 3

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

Answer 4

YUI Compressor http://developer.yahoo.com/yui/compressor/

И хороший учебник: http://beardscratchers.com/journal/compressing-css-and-javascript-with-yui-compressor

Answer 5

В предыдущих проектах я использовал SmartOptimizer для сжатия файлов JS и CSS на лету. Это минимизатор файлов на основе PHP.

Использование средства минимизации точно в срок освобождает вас от необходимости хранить отдельные исходные и сокращенные файлы. Конечно, для минимизации файлов требуется небольшая вычислительная мощность. Кроме того, загрузка одного уменьшенного файла лучше со следующими преимуществами:

1. Меньший размер файла (наверняка)
2. Нет задержки параллельной загрузки компонента, потому что меньше скриптов / таблиц стилей.

Answer 6

Прочитайте это: Рекомендации по ускорению работы вашего сайта