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