Question

我为udacity移动Web专家项目开发的Web应用程序进行了chrome审核，性能得分为85。我需要获得90分以上的分数才能通过该项目。

以下是诊断信息-

对找到的14个资产使用无效的缓存策略

较长的缓存生存期可以加快对页面的重复访问。
主要线程工作时间为6,520毫秒

考虑减少解析，编译和执行JS所花费的时间。您可能会发现提供较小的JS有效负载对此有所帮助。
JavaScript的启动时间太长了3,810毫秒

考虑减少解析，编译和执行JS所花费的时间。您可能会发现，提供较小的JS有效载荷对此有帮助

这是我的服务工作者脚本的一部分。 -

importScripts("/js/idb.js");
importScripts("/js/dbhelper.js");
const staticCacheName = 'restaurant-1';
const resourcesToCache = [
'/',
'index.html',
'restaurant.html',
'css/styles.css',
'js/idb.js',
'js/dbhelper.js',
'js/restaurant_info.js',
'js/main.js',
'sw.js',
'img/1_small.jpg',
'img/1_medium.jpg',
'img/1_large.jpg',
'img/2_small.jpg',
'img/2_medium.jpg',
'img/2_large.jpg',
'img/3_small.jpg',
'img/3_medium.jpg',
'img/3_large.jpg',
'img/4_small.jpg',
'img/4_medium.jpg',
'img/4_large.jpg',
'img/5_small.jpg',
'img/5_medium.jpg',
'img/5_large.jpg',
'img/6_small.jpg',
'img/6_medium.jpg',
'img/6_large.jpg',
'img/7_small.jpg',
'img/7_medium.jpg',
'img/7_large.jpg',
'img/8_small.jpg',
'img/8_medium.jpg',
'img/8_large.jpg',
'img/9_small.jpg',
'img/9_medium.jpg',
'img/9_large.jpg',
'img/10_small.jpg',
'img/10_medium.jpg',
'img/10_large.jpg',
'https://unpkg.com/leaflet@1.3.1/dist/images/marker-icon.png',
'https://unpkg.com/leaflet@1.3.1/dist/leaflet.css',
'https://unpkg.com/leaflet@1.3.1/dist/leaflet.js'
];

对于2和3。-每当我尝试压缩或缩小我的JavaScript时，我总是会收到类似-错误的令牌：的错误。我确定js没有错误。

我该如何解决这些问题，使我的性能得分达到90或以上？

Answer 1

已修复。我不得不更改部分服务人员代码（sw.js）

来自

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, { ignoreSearch: true }).then(response => {
  return response || fetch(event.request).then(res => {
    return caches.open(staticCacheName).then(cache => {
      cache.put(event.request, res.clone());
      return res;
    })
  });
})
);
});

到

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, { ignoreSearch: true }).then(response => {
  return response || fetch(event.request).then(res => {
    if (!res || res.status !== 200 || res.type !== 'basic') {
      return res;
    }
    return caches.open(staticCacheName).then(cache => {
      cache.put(event.request, res.clone());
      return res;
    })
  });
})
);
});

如何修复审计灯塔建议以提高绩效

1 个答案: