我正在努力思考缓存的概念。我没有广泛使用它,并且有一个关于使用 Angular 的 $templateCache
与浏览器缓存的问题:
1) 浏览器的缓存和 Angular 的 $templateCache 是否相互竞争?一般来说,IE 存储的是同一种类型的东西吗?
考虑到 Angular 是多么“固执己见”,在开发 Angular 应用程序时,我认为如果浏览器确实存储了相同类型的内容,我会鼓励您在浏览器上使用 $templateCache
。如果它们确实存储了相同类型的东西,那么使用它们各自的优缺点是什么?
2) 动态生成的 HTML 如何适合这个关于使用哪个缓存(如果它们存储不同的东西)的讨论?
3) 一般来说使用缓存有什么缺点吗?
最佳答案
$templateCache
完全独立于浏览器缓存。
浏览器缓存:缓存 myapp.js 和 fancy.css 等文件,这样您的浏览器就不必从服务器获取文件(如果它有最近缓存的副本)
$templateCache:是 angularjs
存储和跟踪首次加载后用于不同 Angular 组件/模块的 html 片段的方式(尽管您可以选择直接加载 $templateCache
)。 $templateCache
会在您每次重新加载应用程序时重建,它不会跨浏览器持久存在。
angular 这样做的原因是因为您可能会为多个模板重复使用相同的 html 文件(或者它可能会在您的网站上多次出现,例如在使用指令时)。这允许 Angular 知道它已经有该片段并可以从缓存中加载它。
几个问题的答案
How do these two caches interact with HTTP requests?
您不能缓存$.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 在指令定义中是内联的。
What are the drawbacks of using caches in general (either for caching files or response from HTTP requests)
更新静态内容的版本时,您一定要小心。您可以通过各种类型的缓存破坏来解决这个问题。
示例: 你更新你的 myapp.js,原来是 1.1 现在是 1.2 用户浏览器现在不会那样,他们会加载旧版本的网站。
要解决这个问题,您可以更改名称。这将强制用户浏览器获取最新的文件。
例如。 myapp_1.1.js 到 myapp_1.2.js
同样,angularjs
$templateCache
不受此影响,因为它不是持久的。
关于javascript - Angular $templateCache 与 HTML5 浏览器缓存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34440978/