Javascript Angular$templateCache与HTML5浏览器缓存

我正试着把我的头脑集中在缓存的概念上。我没有广泛使用过它，并且对Angular的

$templateCache

与浏览器缓存的使用有疑问：

1） 浏览器的缓存和Angular的$templateCache是否相互竞争？一般来说，他们储存的是同一种东西吗

考虑到Angular的“自以为是”程度，在开发Angular应用程序时，我认为如果浏览器确实存储了相同类型的东西，则鼓励您在浏览器上使用

$templateCache

。如果它们确实存储相同类型的东西，那么使用每种东西的利弊是什么

2） 动态生成的HTML如何适应关于使用哪个缓存（如果它们存储不同的东西）的讨论

---

3） 一般来说，使用缓存有什么缺点吗？

的

$templateCache

与浏览器缓存完全不同

浏览器缓存：缓存myapp.js和fancy.css等文件，这样，如果浏览器最近缓存了副本，则不必从服务器获取文件

$templateCache：是

angularjs

存储和跟踪用于不同角度组件/模块的html片段的方式，这些组件/模块在首次加载后使用（尽管您可以选择直接加载

$templateCache

）。

$templateCache

会在每次重新加载应用程序时重新生成，但不会在浏览器中持久化

angular这样做的原因是，您可能会对多个模板重复使用同一个html文件（或者它可能会在您的站点上多次出现，例如在使用指令时）。这允许angular知道它已经有了那个片段，并可以从缓存中加载它

对几个问题的回答

---

这两个缓存如何与HTTP请求交互

您不能缓存

$.ajax

或

$http

请求，但这只会影响获取静态内容，如javascript文件、css文件和图像。浏览器缓存的优点是可以改善用户体验/性能。如果他们昨天只是在你的网站上，他们不必等待拉下来所有相关的静态内容

angularjs$templateCache根本不与http交互。而资源可能来自http获取，您的浏览器可能会缓存该文件。Angular选择组织和跟踪这些html片段

为了更好地说明这一点，请查看此片段：

angular.module('directivesModule').directive('mySharedScope', function () {
    return {
        template: 'Name: {{customer.name}}<br /> Street: {{customer.street}}'
    };
});

angular.module（'directivesModule'）。directive（'mySharedScope'，function（）{
返回{
模板：“名称：{{customer.Name}}
街道：{{customer.Street}”
};
});

上述模块中的模板仍会将其“html”添加到angular

$templateCache

，即使html在指令定义中是内联的

通常使用缓存（用于缓存文件或HTTP请求的响应）有哪些缺点

在更新静态内容的版本时，您必须小心。您可以通过各种类型的缓存破坏来解决这个问题

示例： 你更新你的myapp.js，现在是1.1，现在是1.2，用户浏览器现在不会，他们会加载网站的旧版本

要解决这个问题，您可以更改名称。这将强制用户浏览器获取最新的文件

例如myapp_1.1.js至myapp_1.2.js

---

同样地，

angularjs

$templateCache

不受此影响，因为它不是持久的

以上关于$templateCache的回答很好。此外，我相信如果您确实决定要缓存模板，那么您可能希望使用ng include签出

Angular并不真正鼓励一种方法胜过另一种方法。这取决于你需要什么

---

还有一个gulp/grunt任务angular templates，您可以使用它作为预构建步骤，将模板文件转换为字符串，这些字符串会被放入JS文件中，以水合模板缓存。这两个缓存如何与HTTP请求交互？通常使用缓存（用于缓存文件或HTTP请求的响应）的缺点是什么？感谢您提供了这个详细的答案。我还在AngularJS中找到$cacheFactory，它回答了我的一些其他问题：。我混淆了资产缓存和HTTP请求缓存。