Question

所以我有一个梦想。我的梦想是我的角应用程序在为用户呈现数据之前等待尽可能少的时间。我还想象用户可以在没有网络连接的情况下使用我的应用程序。

基于此，我试图拥有两级缓存。它们（这些是粗略的名称，不要从字面上理解）内存和磁盘。内存存储为可通过服务在我的应用程序中访问的全局变量。第二个是“磁盘”，存储在chrome.storage.sync中。

所以我的应用程序当前尝试从内存加载，尝试从磁盘加载，然后发送一个慢速网络请求以获取最新的，如果找到，则更新内存和磁盘。

这是正确的做法吗？我无法考虑如何标准化或抽象这一点，所以我不必为每种数据类型手动执行此操作。它工作得很好，但它是很多代码。

// Load from Memory NOW
  if(Cache.get("receiptList")) {
    $scope.receipts = Cache.get("receiptList");
    console.log("Mem Cache hit");
  } else {
    console.log("Mem Cache miss");
  }

  // Asynchronously load from disk soon
  chrome.storage.sync.get('receiptList', function(value) {
    // The $apply is only necessary to execute the function inside Angular scope
    if(value) {
      $scope.$apply(function() {

        console.log("Disk cache hit");
        console.log(value.receiptList);
        $scope.receipts = value.receiptList;
      });
    } else {
      console.log("Disk cache miss.");
    }
  });

  // Asynchronously load from network later and save
  Receipt.query({}, function(result) {
    Cache.put("receiptList",result);
    chrome.storage.sync.set({'receiptList':result});
    $scope.receipts = result;
    console.log("Caches set from network.");
  });

Answer 1

我知道改善Angular应用程序的加载时间和/或渲染时间的最佳技术是：

预加载HTML模板
预加载非HTML资源

https://medium.com/p/f8ae57e2cec3

致力于优化关键渲染路径 https://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present#slide=id.p19

使用Angular.js和Chrome应用程序的最佳缓存策略是什么？

1 个答案: