ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

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-страницу и вызываемые ею скрипты из оригинального источника, что нам и требуется.
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments