前端性能优化浏览器存储 serviceWorker

时间 2020-07-09

原文原文链接

service workers

由于 js 是单线程的，若是有前端部分数据大量渲染和计算的状况下，会致使页面渲染很是慢，会遭到阻塞。由于 js 是会阻塞页面渲染的。有没有办法，用 service workers 在背后进行大规模的运算。好比 webgl 这样的 3d 渲染，可是 3d 存在一个很大的问题，就是 3d 模型， 3d 数据很是大。一个数据就好几M, 这种状况下就能够用 service workers，用 workers 进行渲染再进入主线程。

Service Worker是一个脚本，浏览器独立于当前网页，将其在后台运行，为实现一些不依赖页面或者用户交互的特性打开了一扇大门。在将来这些特性将包括推送信息，背景后台同步，geofencing(地址围栏定位)，但它将推出的第一个首要特性，就是拦截和处理网络请求的能力，包括以编程方式来管理被缓存的相应。就是离线应用。

Service Worker 两点应用

一、使用拦截和处理网络请求的能力，去实现一个 离线应用

二、使用 Service Worker 在后台运行同时能和页面通讯的能力，去实现大规模后台数据的处理

PWA

Progressive Web Apps 是一种 Web App 新模型，并非具体指某一种前沿的技术或者某一个单一的知识点，咱们用英文缩写来看就能看出，这是一个渐进式的 Web App，是经过一系列新的 Web 特性，配合优秀的 UI 交互设计，逐步的加强 Web App 的用户体验。

所谓渐进式就是手机在弱网的状况下，页面能不能加载出来。若是你的手机在离线的状况下，你的 app 能不能加载出来。

pwa 如今大概有3点的方向

一、可靠：在没有网络的环境中也能提供基本的页面访问，而不会出现‘未链接到互联网’的页面。以前这是 web app 逊色于安卓的

二、快速：针对网页渲染及网络数据访问有较好优化。好比安卓app在过分页面的时候有个好的渲染，web app 也支持

三、融入，应用能够被增长到手机桌面，而且和普通应用同样有全屏，推送等特性。这也是相较于原生 app 提出来的。

一、离线应用，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.csscss

.container{
    color: red;
}

app.jshtml

// 注册 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 {
                        // 用户提示
                    }
                })
            }
        })
    )
})

二、使用 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.jsweb

// 注册 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);
})

前端性能优化 浏览器存储 serviceWorker

前端性能优化浏览器存储 serviceWorker