为什么Content-Security-Policy会强制Chrome按顺序加载Javascript?

时间:2016-04-15 20:36:17

标签: javascript html5 performance google-chrome

当我添加

时,我的网站加载速度相当慢
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

指向index.html的负责人。

经过调试一段时间后,我意识到,当存在此元标记时,所有javascript源都会按顺序加载。当我删除此标记时,javascript会并行加载,因此网站加载速度更快。

为了重现这一点,我写了这个小样本html文件:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  </head>

  <body>
    Hello World
    <script src="angular.js"></script>
    <script src="angular-animate.js"></script>
    <script src="angular-touch.js"></script>
  </body>
</html>

以下是带有“Content-Security-Policy”元标记的网络时间轴:

timelineWithTag

可以看出,资源是按顺序加载的。

以下是我删除“Content-Security-Policy”标记时的网络时间线。

timelineWithoutTag

正如预期的那样,Javascript资源在这里并行加载,即使用一些小例子,页面加载的速度也要快得多。

这种行为有什么解释吗? 我怎样才能充分利用这两个方面:并行加载Javascript文件,同时激活“Content-Security-Policy”?

目前,测试都是使用最新的Chrome(50.0.2661.75(64位))完成的。 Safari和Firefox都没有表现出相同的奇怪行为,它们都会并行加载javascripts并激活“Content-Security-Policy”。

1 个答案:

答案 0 :(得分:0)

使用

在MAC上无法重现
Chrome 49.0.2623.110 (64-bit)
Chrome 50.0.2661.75 (64-bit)

两个浏览器都在几毫秒内从localhost提供这三个文件,同时关闭了缓存。

我也在远程服务器上尝试了这一点,即不是本地主机,两者都放慢了速度,但是所有文件都是并行加载的,即无论是否打开或关闭CSP都没有区别。

我相信有一个Mozilla的变化,将C ++用于CSP,但这是多年前的事情,它不会影响Chrome。

https://blog.mozilla.org/security/2014/09/10/faster-csp/