Question

我试图围绕缓存的概念。我还没有广泛使用它并且对使用Angular＆＃39; $templateCache与浏览器缓存有疑问：

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

鉴于＆＃39;自以为是＆＃39; Angular在开发Angular应用程序时，我认为如果他们存储相同类型的东西，我会鼓励你在浏览器上使用$templateCache。如果它们确实存储了相同类型的东西，那么使用它们的优缺点是什么？

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

3）一般来说使用缓存是否有任何缺点？

Answer 1

$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}}'
    };
});

上面模块中的模板仍然会将'html添加到angular $templateCache，即使html在指令定义中是内联的。

一般使用缓存有什么缺点（缓存文件或来自HTTP请求的响应）

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

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

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

离。 myapp_1.1.js到myapp_1.2.js

angularjs $templateCache再次受此影响，因为它不是持久性的。

Answer 2

$ templateCache上面的答案很好。另外，我相信如果您决定要缓存模板，那么您可能需要使用ng-include进行检查。

Angular并不真正鼓励一种方法而不是另一种方法。这取决于您的需求。

还有一个gulp / grunt任务angular-templates，您可以将其用作预构建步骤，将模板文件转换为在JS文件中删除的字符串，以保护模板缓存

Angular $ templateCache vs HTML5浏览器缓存

2 个答案: