May 7th, 2021

JavaScript: локальный веб-сервер и кэш браузера

Начало: JavaScript: локальный веб-сервер из набора IIS.

В процессе изучения языка JavaScript мне пришлось включить локальный веб-сервер из набора IIS моей операционной системы «Windows 10 Pro», чтобы тестировать учебные скрипты. Я об этом рассказывал подробно в одном из предыдущих постов.

Как обычно происходит написание скрипта? Я пишу скрипт в текстовом файле, вставляю его на тестовую HTML-страницу и запускаю эту страницу в браузере (в основном я пользуюсь браузером «Microsoft Edge» на движке «Chromium»). Если в скрипте есть ошибки, то я исправляю скрипт и снова запускаю тестовую HTML-страницу в браузере. И так далее до исправления всех ошибок.

Как оказалось, если браузеру приходится загружать один и тот же скрипт несколько раз, то в первый раз он помещает его в так называемый «кэш» (по-английски «cache»). Википедия определяет «кэш» как «промежуточный буфер с быстрым доступом к нему, содержащий информацию, которая может быть запрошена с наибольшей вероятностью». В последующие (второй, третий и так далее) разы браузер уже не загружает скрипт повторно из источника в сети, а просто берет его из кэша локально на этом же компьютере.

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

Подсмотреть за работой браузера с кэшем можно, загрузив тестовую HTML-страницу, которая в свою очередь загружает скрипты на языке JavaScript. Далее следует нажать клавишу F12, открыв инструменты разработчика в браузере. В меню инструментов разработчика следует выбрать пункт «Network». В этом разделе инструментов разработчика есть таблица загруженных файлов со следующими колонками: «Name» (название загруженного файла), «Status», «Type» (тип загруженного файла, например «script» для скрипта или «document» для HTML-страницы), «Initiator» (инициатор загрузки данного файла), «Size», «Time» (продолжительность загрузки данного файла), «Waterfall».

Сейчас для нас наиболее интересна колонка «Size» этой таблицы. Как я понимаю, она показывает размер файла скачанного из сети. Если файл взят из кэша, в этой колонке вместо цифр будет соответствующая пометка: «memory cashe» или «disk cashe» (из этого видно, что браузер использует несколько кэшей разных видов).

Пока включены инструменты разработчика, использование кэша браузером для данной HTML-страницы можно отключить, отметив флажок «Disable cashe» в разделе «Network» инструментов разработчика браузера.

Но я предпочитаю использовать комбинацию клавиш Ctrl+F5 для обновления тестовой HTML-страницы вместо обычного обновления (клавишей F5, либо нажатием кнопки обновления в меню браузера). Если при обычном обновлении браузер берет скрипт из кэша, то при нажатии комбинации клавиш Ctrl+F5 браузер в этот раз, обновляя страницу, скачает тестовую HTML-страницу и вызываемые ею скрипты из оригинального источника, что нам и требуется.

JavaScript: локальный веб-сервер и favicon.ico

Начало:
1. JavaScript: локальный веб-сервер из набора IIS
2. JavaScript: локальный веб-сервер и кэш браузера

Во время тестирования скриптов на языке JavaScript, загружая их с локального веб-сервера (из набора IIS на операционной системе «Windows 10 Pro») с помощью браузера («Microsoft Edge» на движке «Chromium»), я получаю в консоли разработчика такую ошибку:

GET http://localhost/favicon.ico 404 (Not Found)

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

Как я понял, браузер самостоятельно (не спрашивая у пользователя) всегда запрашивает у веб-сайта значок (иконку) с названием «favicon.ico», которую позже отображает во вкладке перед названием страницы, в качестве картинки рядом с закладкой на данную страницу веб-сайта и в других элементах интерфейса. Подробнее в википедии:

https://ru.wikipedia.org/wiki/Favicon

Я не нашел, где в браузере можно отключить этот запрос. Поэтому я, чтобы убрать эту ошибку, нарисовал простенькую картинку размером 16 х 16 пикселей, назвал ее «favicon.ico» и поместил в каталог C:\inetpub\wwwroot\. Всё получилось, ошибка исчезла, иконка появилась во вкладке браузера перед названием HTML-страницы.