性能优化的方式
CDN
CSS Sprite
Compress / Gzip
Async / Defer
HTTP Cache
性能优化的核心在于提升用户体验。
认识 Service Worker
不仅能使页面达到“秒开”的效果,还能使站点在网络较差或者无网络的情况下依然能做出很好的响应。
提供离线缓存功能。
Service Worker 能拦截页面向服务端的网络请求,根据一些条件来决定是使用本地存储还是请求服务器再把内容写入本地进行管理。在 2014 年 5 月由 W3C 提出,它之前的 API 是 Application Cache。Application Cache 虽然在2012 年出现并被浏览器支持,但它假定你要严格遵守一些规则。
Service Worker 的特性
不能直接访问 / 操作 DOM
需要时直接唤醒,不需要时自动休眠
离线缓存内容开发者可控
一旦被安装则永远存活,除非手动装卸
必须在 HTTPS 环境下工作(本地环境除外)
广泛使用了 Promise
注册
注册 Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw-demo.js', {scope: '/js'})
.then(function (registration) {
console.log(registration);
})
.catch(function (error) {
console.log(error);
});
});
}
Service Worker 默认的域为注册文件所在的目录,默认情况下不能跨域或者指定文件上级都会造成注册失败。
当服务器设置 service-worker-allowed: / 的响应头时,只要在此声明的最大域下就能注册。
同域下可以注册多个不同 scope 的 Service Worker。
安装
如果浏览器发现这个 Service Worker 没有被安装过或者过期,它将开始安装.