ProcessingJS link 如何在没有互联网连接的情况下工作？

Question

这不是问题，只是出于好奇：

包含 ProcessingJS 库的 HTML/JS 项目如何在离线时工作，假设库 link 是标准的 https 类型而不是 link 上的文件磁盘？

我通过关闭 WiFi 进行测试，然后在 Safari 中打开项目文件（有效），并尝试加载不同的网页（如预期的那样没有）。我知道该库也可以作为可下载文件使用，但这个项目没有使用它，只有 link:

<!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 一样内置于浏览器中？

Answer 1

查看您的浏览器发出的请求，您可以看到脚本响应已被缓存。下图红线是我断网重新加载页面的时候。

jsdelivr 在其服务的脚本上设置以下 header：

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

And:

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.

因此允许脚本保留在存储中，而不是 re-fetched 31536000 秒。有关“新鲜度”的描述，请参阅 here。

jsdelivr 对其所有脚本都这样做，而不仅仅是 Processing.js。 jsdelivr 可以设置不同的 headers 并告诉浏览器每次都应该 re-download 脚本 - 但这都需要更多的服务器资源并且会在没有互联网连接时破坏您的示例页面可用。

ProcessingJS link 如何在没有互联网连接的情况下工作？

How does the ProcessingJS link work without an internet connection?

javascript

html

processing.js