前端性能优化 浏览器存储 serviceWorker
service workers
因为 js 是单线程的，如果有前端部分数据大量渲染和计算的情况下，会导致页面渲染非常慢，会遭到阻塞。因为 js 是会阻塞页面渲染的。有没有办法，用 service workers 在背后进行大规模的运算。比如 webgl 这样的 3d 渲染，但是 3d 存在一个很大的问题，就是 3d 模型， 3d 数据非常大。一个数据就好几M, 这种情况下就可以用 service workers，用 workers 进行渲染再进入主线程。
Service Worker是一个脚本，浏览器独立于当前网页，将其在后台运行，为实现一些不依赖页面或者用户交互的特性打开了一扇大门。在未来这些特性将包括推送信息，背景后台同步，geofencing(地址围栏定位)，但它将推出的第一个首要特性，就是拦截和处理网络请求的能力，包括以编程方式来管理被缓存的相应。就是离线应用。
Service Worker 两点应用
1、使用拦截和处理网络请求的能力，去实现一个离线应用
2、使用 Service Worker 在后台运行同时能和页面通信的能力，去实现大规模后台数据的处理
PWA
Progressive Web Apps 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一个单一的知识点，我们用英文缩写来看就能看出，这是一个渐进式的 Web App，是通过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验。
所谓渐进式就是手机在弱网的情况下，页面能不能加载出来。如果你的手机在离线的情况下，你的 app 能不能加载出来。
pwa 现在大概有3点的方向
1、可靠：在没有网络的环境中也能提供基本的页面访问，而不会出现‘未连接到互联网’的页面。之前这是 web app 逊色于安卓的
2、快速：针对网页渲染及网络数据访问有较好优化。比如安卓app在过度页面的时候有个好的渲染，web app 也支持
3、融入，应用可以被增加到手机桌面，并且和普通应用一样有全屏，推送等特性。这也是相较于原生 app 提出来的。
1、离线应用，service worker 只能在 https 下使用
serviceWorker.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./main.css"> </head> <body> <div class="container">service worker</div> <script src="./app.js"></script> </body> </html>
main.css
.container{ color: red; }
app.js
// 注册 serviceWorker if (navigator.serviceWorker) { navigator.serviceWorker.register('./service-worker.js', { scope: './' // 作用域 }).then(function (reg) { console.log(reg); }).catch(function (e) { console.log(e); }) } else { alert('Service Worker is not supported') }
service-worker.js
// 监听 serviceWorker install 事件 self.addEventListener('install', function(e) { // 会接受一个 promise 对象，返回成功后才会进行后续的运行 e.waitUntil( // caches 就是开启一个 cacheStorage caches.open('app-v1').then(function(cache){ console.log('open cache'); return cache.addAll([ './app.js', './main.css', './serviceWorker.html' ]) }) ) }) self.addEventListener('fetch', function(event) { // 读缓存 event.respondWith( caches.match(event.request).then(function(res) { if (res) { return res; } else { // 通过 fetch 方法向网络发起请求 fetch(url).then(function() { if (res) { // 对于新请求到资源存储到我们的 cachestorage中 } else { // 用户提示 } }) } }) ) })
2、使用 Service Worker 在后台运行同时能和页面通信的能力，去实现大规模后台数据的处理
msg-demo.html
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <ul id="msg-box"></ul> <input type="text" id="msg-input" /> <button id="send-msg-button">发送</button> <script src="./msgapp.js"></script> </body> </html>
msgapp.js
// 注册 serviceWorker if (navigator.serviceWorker) { var sendBtn = document.getElementById('send-msg-button'); var msgInput = document.getElementById('msg-input'); var msgBox = document.getElementById('msg-box'); sendBtn.addEventListener('click', function(){ // 点击btn ，主页往 servicework 发事件 navigator.serviceWorker.controller.postMessage(msgInput.value); }) navigator.serviceWorker.addEventListener('message', function(event){ msgBox.innerHTML = msgBox.innerHTML + ('<li>' + event.data.message + '</li>') }) navigator.serviceWorker.register('./msgsw.js', { scope: './' // 作用域 }).then(function (reg) { console.log(reg); }).catch(function (e) { console.log(e); }) } else { alert('Service Worker is not supported') }
msgsw.js
// 监听 serviceworker message 事件 self.addEventListener('message', function(event) { var promise = self.clients.matchAll().then(function(clientList){ var senderID = event.source ? event.source.id : 'unknown'; clientList.forEach(client => { if(client.id == senderID) { return } else { client.postMessage({ client: senderID, message: event.data }) } }); }) event.waitUntil(promise); })
