Наилучшая практика: включать( или

#php #javascript #css #include

Вопрос:

Я уменьшил свой javascript и css.

Итак, что же лучше?

 <script type="text/javascript">
<?
  $r = file_get_contents('min.js');
  if($r) echo $r;
?>
</script>
 

или

 <script type="text/javascript" src="min.js"></script>
 

Тот же вопрос для CSS.

Если ответ будет » иногда, потому что браузеры извлекают файлы одновременно?» Какие браузеры и какие примеры времени в обоих сценариях.

Комментарии:

1. Это неправильно помечено как «http».

Ответ №1:

 <script type="text/javascript" src="min.js"></script>
 

…лучше, так как браузер пользователя может кэшировать файл.

Добавление параметра src , такого как отметка времени последнего изменения файла, еще лучше, так как браузер пользователя будет кэшировать файл, но всегда будет извлекать самую последнюю версию при изменении файла.

 <script type="text/javascript" src="min.js?version=20081007134916"></script>
 

Комментарии:

1. Учитывая, что 20-60% пользователей имеют пустой кэш, лучше ли иметь меньше HTTP-запросов или кэшированных результатов?

2. Разве браузеры не должны получать эту информацию из заголовков HTTP?

3. Issac — ключевая фраза; «предполагается». Довольно часто кэширование файлов js очень агрессивно

4. Кроме того, это лучшая практика, потому что она исключает логику поведения из логики представления. Если это не HTML, то ему не место в файле .html.

5. «С 20-60% пользователей, имеющих пустой кэш» — это означает, что у 40-80% нет пустого кэша.

Ответ №2:

В большинстве случаев лучше включать файлы javascript и css, потому что таким образом браузер может кэшировать файл javascript/css. Таким образом, браузер загружает файл только один раз, даже если вы включаете файл на несколько других страниц.

Но это верно только в том случае, если вы установили соответствующий заголовок expires и/или cache-control для файлов javascript и css с помощью php или Apache mod_expires.

Основываясь на рекомендациях исключительной производительности Yahoo, существует только одно исключение:

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

Я настоятельно рекомендую вам попробовать аддон «YSlow для Firebug». Он отвечает на множество вопросов о кэшировании и производительности браузера/клиента.

Смотрите также:

Apache mod_expires

Рекомендации по ускорению работы Вашего Веб-Сайта

ИСлоу

Ответ №3:

Помните, что браузер может загружать НЕ БОЛЕЕ двух файлов параллельно из одного домена (это значение по умолчанию в современных браузерах — я уверен в IE6 и IE7, не уверен в других). Это означает, что если ваша страница ссылается на 20 крошечных файлов javascript, многие из них будут загружаться последовательно.

Чтобы добавить к тому, что уже было сказано: помните, что если вы объедините/уменьшите свои файлы javascript, лучше объединить их все в один — сжатие будет работать лучше. Кроме того, даже если вы не уменьшаете свои файлы, не забудьте включить GZIP в конфигурации вашего веб-сервера; затем, если вы объедините все свои файлы JS в один и включите этот файл как , сжатие GZIP будет работать лучше всего (потому что сжатие двух файлов JS вместе дает лучшие результаты, чем сжатие каждого по отдельности).

Если вы ищете хорошую утилиту для минификации JS, попробуйте JS Packer (http://dean.edwards.name/packer/)

Комментарии:

1. Пока вы разгружаетесь, Упаковщик контрпродуктивен. JSMin, компрессор YUI и упаковщик имеют почти одинаковый размер gzip, но Упаковщик вводит задержку на стороне клиента, поскольку это eval()’d. Упаковщик отлично подходит, если вам нужна запутанность.