Как кэшировать мои файлы JavaScript для повышения производительности

Question

Так вот мой заголовок:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script> 
<script type="text/javascript" src="js/jdpicker/jquery.jdpicker.js"></script> 
<script type="text/javascript" src="js/uniform/jquery.uniform.min.js"></script> 
<script type="text/javascript" src="js/jquery.hotkeys.js"></script> 
<script type="text/javascript" src="js/visualize/visualize.jQuery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="js/jwysiwyg/jquery.wysiwyg.js"></script> 

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

Answer 1

В ваших штанах большой груз JavaScript!Мои предложения будут (пожалуйста, не обижайтесь, так как я уверен, что вы уже предприняли многие из этих шагов):

• Убедитесь, что вам нужны все эти файлы js на странице.Вы используете fancybox?Вы используете cookie.js?Если есть какие-либо js-файлы, которые вы можете удалить из списка, сделайте это.
• Доступны ли какие-либо из этих файлов js через CDN ?JQuery есть.Пользовательский интерфейс jQuery есть.Это уменьшит нагрузку на ваш сервер, и многие пользователи могут заходить на ваш сайт с уже закаленными версиями этих js-библиотек!
• Существуют ли более легкие версии ваших библиотек,вы могли бы поменяться?Если это так, замените их!
• Для тех файлов, которые вы размещаете локально, сверните и разбейте их .Если вы работаете в Visual Studio, вы можете использовать Chirpy или Combres .Если вы не используете Visual Studio, есть множество других интересных инструментов, которые помогут вам уменьшить размер ваших CSS и JS-ресурсов.
• Попробуйте использовать Меньше для CSS и CoffeeScript для JS .Они ускорят ваш цикл разработки и предварительно оптимизируют большую часть вашего кода (если вам повезет).
• Теперь, когда у вас есть один большой, оптимизированный, оптимизированный JS-файл,Вы можете кэшировать его .Этот шаг зависит от платформы, поэтому вам может потребоваться поиск вокруг .

Я что-то упустил?Это те быстрые шаги, которые я делаю.Я думаю.

Answer 2

Я бы предложил минимизировать и объединить все это в ОДИН файл - меньше HTTP-запросов = более быстрое время загрузки

Answer 3

См. If-Match и If-Modified-Since более здесь .

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

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

Сокращение глобальных инициализаторов (т. Е. Кода, который используется только на 1 странице, но выполняется для всех страниц сайта). Переместите код из встроенных тегов скрипта в событие загрузки окна. Если все сделано правильно, это может помочь немного успокоиться.

Answer 4

Мне нравится Minify .

Это будет гораздо больше, чем просто кэширование файлов на локальных компьютерах пользователей, и его довольно легко настроить. Один совет: не пытайтесь разрабатывать / отлаживать ваш минимизированный код! Держите отладочную копию под рукой, хех.

Вот реклама на первой полосе, посмотрите, подходит ли она вашим потребностям:

[Minify] объединяет несколько файлов CSS или Javascript, удаляет ненужные пробелы и комментарии и предоставляет им кодировку gzip и оптимальные заголовки кэша на стороне клиента