javascript - 如何修复审计灯塔建议以提高性能
问题描述
我在 chrome 中对我正在为 udacity 移动网络专家项目开发的网络应用程序进行了审核,我的性能得分为 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。 - 每当我尝试压缩或缩小我的 javascripts 时,我总是会收到类似的错误 - Unexpected token:。我确定 js 没有错误。
我该如何解决这些问题,以便获得 90 或以上的性能分数?
解决方案
固定的。我不得不更改我的部分服务人员代码 (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;
})
});
})
);
});
推荐阅读
- intershop - 是否可以在 ISML 表达式中使用 Java 枚举
- linux - 如何有效增加 Debian 上 mongodb 的最大打开文件数?
- r - 如何增加由 grid.arrange 产生的绘图的大小
- php - 使用 str_word_count 计算对手单词中的字母
- php - 在php中为每个循环附加变量
- reactjs - IE10 中反应 vendor.js 中的羊皮纸定义无效
- selenium-webdriver - Jmeter - Selenium/Webdriver 支持:HTMLUNIT 驱动程序错误
- java - 如何在 hybris 中隐藏工单状态?
- maven - 将单独的jar文件打包到maven中的war文件
- c++ - codeforces 455A 的意外失败测试用例无聊