使用内容安全策略 (CSP) 的页面特定 JavaScript [重复]答案

【问题标题】：Page Specific JavaScript using Content Security Policy (CSP) [duplicate]使用内容安全策略 (CSP) 的页面特定 JavaScript [重复]
【发布时间】：2017-09-23 11:18:19
【问题描述】：

我想在整个网站上使用 Content Security Policy (CSP)。这要求所有 JavaScript 都位于单独的文件中。我共享了所有页面使用的 JavaScript，但也有我只想为特定页面运行的页面特定 JavaScript。处理特定页面 JavaScript 以获得最佳性能的最佳方式是什么？

我能想到的解决此问题的两种方法是使用特定于页面的 JavaScript 包或使用带有 switch 语句的单个 JavaScript 包来执行页面特定的内容。

【问题讨论】：

只需在body id属性中添加页面名称，然后在javascript中使用switch或if else
请看这个答案stackoverflow.com/a/9578898/2724173
@IsmailFarooq 链接问题中获得最高票数的答案就是我想要的。
^ 因为你说答案就是你要找的

标签： javascript html performance bundling-and-minification content-security-policy

【解决方案1】：

有很多方法可以执行页面特定的 javascript

选项 1（通过类检查）

为body标签设置一个类

<body class="PageClass">

然后通过jQuery检查

$(function(){
  if($('body').hasClass('PageClass')){
    //your code
  }
});

选项 2（通过开关盒检查）

var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname

switch (windowLoc) {
    case "/info.php":
        //code here
        break;
    case "/alert.php":
        //code here
        break;
}

选项 3 通过函数检查

在函数中制作所有页面特定的脚本

function homepage() {
    alert('homepage code executed');
}

然后在特定页面上运行函数

homepage();

【讨论】：

【解决方案2】：

抱歉，我知道这篇文章最终读了很长时间，但这样做是值得的，因为您将能够做出适合您网站的选择。对于 tl;dr，请阅读每个段落的第一句话。

首先，无论你选择哪条路径，你都应该把每个页面共有的所有 JS 放在同一个文件中，以最大限度地利用缓存。这只是常识。此外，在所有情况下，我假设您使用的是一个称职的缩小器，因为这将比其他任何事情产生更大的差异。如果您需要其中之一，打包程序也存在——如果您需要其中任何一个，Google 就是您的朋友。

对于特定于页面的 JS，您应该决定是否让您的第一个页面加载（用户第一次与您的网站联系）“快速”是最重要的，还是让以下页面加载（用户与任何给定页面的第一次联系）是“快速”的。现代浏览器缓存现在非常好，因此您可以尽可能依赖从缓存中加载的浏览器。一般来说，如果快速加载第一个页面是最重要的，那么创建单独的 JS 文件（这样，用户在访问您的站点之前就不会被卡住下载 10 MB 的数据）。如果没有，则将所有 JS 放在同一个文件中，请记住，如果一个页面的 JS 明显多于其他页面，它将对您网站上每个页面的加载时间产生不利影响。请注意，使用async 或defer 标签可以减少额外的加载时间，稍后会详细介绍。

考虑页面 A 有 5 KB 的 JS 而页面 B 有 5 MB 的 JS 的情况。如果将两个脚本放在同一个文件中，页面 A 的加载速度会更慢（因为它需要加载大约 5 MB 的 JS），但页面 B 的加载速度会更快，因为 JS 文件已经被缓存。如果将它们分开，页面 A 的加载速度将比页面 B 快得多，但与第一种情况相比，平均速度会有所下降。 如果一个页面没有比另一个页面多得多的 JS，请使用单独的文件。您将遇到更好的平均加载时间，因为提前加载大文件的“节省”将大大减少（您还将避免下面提到的问题）。

另一个考虑是其中一个 JS 文件是否会经常更改，因为这会使缓存的版本无效并需要浏览器重新下载它。如果您将所有 JS 放在一起并且只有一个文件是易变的（尤其是如果它是一个不常访问的页面，例如注册页面），最终用户将面临比如果你把它们分开。 Stack Overflow 自己对此采取了一种有趣的方法。看来他们有一个功能，可以使与页面无关的 JS 的缓存失效，并在页面上的 JS 从缓存中加载时加载它（如果需要），以节省以后的加载时间。

还有一件事！除此之外，您还应该决定是否应该在脚本标签中使用 async 或 defer，因为您要迁移到完全“外部”的 JS .

async 允许页面在 JS 完成下载之前加载并显示给用户。如果您决定采用“一个文件来统治所有文件”的路线，这是隐藏大型 JS 文件下载的好方法。但是，您可能还会发现需要下载并执行 JS 才能正确显示页面（不使用 async 或 defer 时就是这种情况）。

因此，混合使用这两个建议并将您的 js 拆分为需要每页加载的单独文件以使页面正确显示（每页一个）可能是一个好主意，然后将所有没有进入通过async 或defer 标签加载的脚本的js（这是“一个大文件”）。 defer 让浏览器在后台加载它在页面显示给用户之后。

最终，只有您才能做出适合您的应用的决定。没有一种神奇的选择可以在所有情况下都有效，但这就是软件设计/工程的现实。不过，我希望我已经为您简化了流程，以便您可以更轻松地做出正确的选择。

【讨论】：