Как работает ссылка 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?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
11
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

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

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 вполне мог бы установить разные заголовки и сообщить браузерам, что он должен каждый раз повторно загружать скрипт, но это потребовало бы больше ресурсов их сервера и сломало бы вашу примерную страницу, пока нет подключения к Интернету.

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