【发布时间】：2016-08-07 23:19:52
【问题描述】：
我有一个网站，当我添加时，它的加载速度要慢得多
<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”元标记的网络时间线：
可以看到，资源是按顺序加载的。
这是网络时间线，当我删除“Content-Security-Policy”标签时。
正如预期的那样，Javascript 资源在这里并行加载，页面加载速度更快，即使是小示例。
对这种行为有什么解释吗？ 我怎样才能两全其美：并行加载 Javascript 文件，同时激活“Content-Security-Policy”？
测试均使用当时最新的 Chrome (50.0.2661.75 (64-bit)) 完成。 Safari 和 Firefox 都没有表现出相同的奇怪行为，它们都加载 javascripts 并同时激活了“Content-Security-Policy”。
【问题讨论】：
-
这可能对你有帮助 ;) An Introduction to Content Security Policy 你可以创建一个“withe list”，但我不确定它是否有帮助......
-
您的域是否为您的静态资产（如 JS 文件）启用了缓存标头？
-
我无法重现，mobile.twitter.com 使用相同的 CSP 标头 （不在元标记中，但应该相同），它似乎加载资源并行就好了。您应该在其他浏览器中测试它，看看问题是否只是在 Chrome 中？
-
您是否尝试过使用“Content-Security-Policy”HTTP 标头而不是元标记？可能是在元标记中设置它（当内容在浏览器中流式传输时读取）可能会影响验证策略的算法是如何完成的？
-
@TeaCode 缓存头可用，但此测试已在未使用缓存的情况下完成。我想改善浏览器尚未缓存任何内容的初次使用用户的体验。
标签： javascript html performance google-chrome