我正试图围绕缓存的概念展开思考。我没有广泛使用它，并且有一个关于使用 Angular 的 $templateCache 与浏览器缓存的问题：
1) 浏览器的缓存和 Angular 的 $templateCache 是否相互竞争？ IE 他们通常存储相同类型的东西吗？
考虑到 Angular 的“自以为是”，在开发 Angular 应用程序时，我假设如果浏览器确实存储了相同类型的东西，我会假设你被鼓励使用 $templateCache 而不是浏览器。如果它们确实存储了相同类型的东西，那么使用它们各自的优缺点是什么？
2) 动态生成的 HTML 如何适合这个关于使用哪个缓存（如果它们存储不同的东西）的讨论？
3) 一般来说，使用缓存有什么缺点吗？
【问题讨论】：
标签： javascript angularjs html caching
$templateCache 与浏览器缓存完全分离。
浏览器缓存：缓存 myapp.js 和 fancy.css 等文件，因此如果您的浏览器有最近缓存的副本，则不必从服务器获取文件
$templateCache：是 angularjs 存储和跟踪 html 的 sn-ps 的方式，这些 html 用于不同的 Angular 组件/模块在它们第一次加载后（尽管您可以选择直接加载$templateCache）。 $templateCache 每次重新加载应用程序时都会重新构建，它不会在浏览器中持久存在。
Angular 这样做的原因是因为您可能会为多个模板重复使用同一个 html 文件（或者它可能会在您的网站上多次出现，例如在使用指令时）。这允许 Angular 知道它已经拥有该 sn-p 并可以从缓存中加载它。
几个问题的答案
这两个缓存如何与 HTTP 请求交互？
您不能缓存 $.ajax 或 $http 请求，但这只会影响获取静态内容，例如 javascript 文件、css 文件和图像。浏览器缓存的优点是它可以改善用户体验/性能。如果他们昨天刚刚在您的网站上，他们不必等待拉下所有相关的静态内容。
angularjs $templateCache 根本不与 http 交互。虽然资源可能来自 http 获取，但您的浏览器可能会缓存该文件。 Angular 选择组织和跟踪那些 html 的 sn-ps。
为了更好地说明这一点，请查看 this sn-p：
angular.module('directivesModule').directive('mySharedScope', function () {
return {
template: 'Name: {{customer.name}}<br /> Street: {{customer.street}}'
};
});
即使 html 在指令定义中是内联的，上述模块中的模板仍会将其 html 添加到角度 $templateCache。
一般来说使用缓存有什么缺点（无论是缓存文件还是来自 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 文件中以补充模板缓存
【讨论】：