使用内容安全策略 (CSP) 的特定页面 JavaScript

Question

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

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

Answer 1

抱歉，我知道这篇文章读起来很长，但是这样做是值得的，因为您可以做出适合您网站的选择。对于 tl;dr，请阅读每个段落的第一句。

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

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

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

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

还有一件事！除此之外，您还应该决定是否应该在脚本标签中使用 async 或 defer，因为您正在迁移到完全 "external" JS。

async 允许页面在 JS 下载完成之前加载并显示给用户。如果您决定走 "one file to rule them all" 路线，这是隐藏大 JS 文件下载的好方法。但是，您可能还会发现需要下载并执行 JS 才能使页面正常显示（不使用 async 或 defer 时就是这种情况）。

因此，最好混合使用这两种建议，并将您的 js 拆分为需要每页加载的单独文件，以便页面正确显示（每页一个），并且将所有没有的 js 放入通过 async 或 defer 标记（即 "one big file"）加载的脚本中。 defer 让浏览器在后台加载它在页面显示给用户之后。

最终，只有您才能做出适合您应用的决定。没有一种神奇的选择可以适用于所有情况，但这就是软件的现实 design/engineering。不过，我希望我已经让您更清楚地了解了这个过程，这样您就可以更轻松地做出正确的选择。

Answer 2

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

选项 1（通过 class 检查）

设置一个 class 到 body 标签

<body class="PageClass">

然后通过jQuery

检查

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

选项 2（通过 switch case 检查）

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();

使用内容安全策略 (CSP) 的特定页面 JavaScript

Page Specific JavaScript using Content Security Policy (CSP)

html

javascript

performance

bundling-and-minification

content-security-policy