Как работает ссылка ProcessingJS без подключения к Интернету?

Это не проблема, просто из любопытства спрашиваю:

Как проекты HTML/JS, включающие библиотеку ProcessingJS, работают даже в автономном режиме, учитывая, что ссылка на библиотеку является стандартным видом https, а не ссылкой на файл на диске?

Я проверил это, отключив Wi-Fi, затем открыв файл проекта в Safari (что сработало) и попытавшись загрузить другую веб-страницу (что, как и ожидалось, не сработало). Я знаю, что библиотека также доступна в виде загружаемого файла, но этот проект не использует его, а только ссылку:

<!DOCTYPE html>

<html>
 <head>
    <title>Example Program</title>
    <style>
        body {
            background-color: purple;
        }
        #canvasDiv {
            margin-left: 20%;
            margin-right: 20%;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="canvasDiv">
        <canvas id="_canvas"></canvas>
    </div>
</body>
 
<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
 
<script>
    var canvasWidth = 200;
    var canvasHeight = 200;
    
    var drawSmiley = function(p, x, y, d) {
        p.background(255);
        p.strokeWeight(3);
        p.stroke(0);
        p.fill(250, 200, 0);
        p.ellipse(x, y, d, d);
        p.strokeWeight(8);
        p.point(x - 0.2*d, y - 0.1*d);
        p.point(x + 0.2*d, y - 0.1*d);
        p.strokeWeight(5);
        p.arc(x, y + 0.05*d, 0.6*d, 0.4*d, 0.5, 2.64);
        p.textSize(24);
        p.fill(0, 200, 0);
        p.noStroke();
        p.textAlign(p.CENTER, p.CENTER);
        p.text("Hello", 100, 20);
        p.text("World", 100, 180);
    };
    
    var applyProcessing = function(p) {
        p.setup = function() {
            p.size(canvasWidth, canvasHeight);
            drawSmiley(p, 100, 100, 100);
        };
    };
    
    var canvas = document.getElementById("_canvas");
    var pInstance = new Processing(canvas, applyProcessing);
    
 </script>

</html> 

Запуск скрипта в первый раз автоматически загружает и сохраняет где-то копию библиотеки, или функциональность ProcessingJS также встроена в браузер, как обычный JavaScript?

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
11
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

enter image description here

jsdelivr устанавливает следующий заголовок для скриптов, которые он обслуживает:

cache-control: public, max-age=31536000, s-maxage=31536000, immutable

И:

The max-age=N response directive indicates that the response remains fresh until N seconds after the response is generated.)

Indicates that caches can store this response and reuse it for subsequent requests while it's fresh.

Таким образом, скрипту разрешено оставаться в хранилище и не извлекаться повторно в течение 3 153 6000 секунд. См. здесь для описания «свежести».

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

Другие вопросы по теме