zoukankan      html  css  js  c++  java
  • 前端性能优化 浏览器存储 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);
    })
  • 相关阅读:
    java常见异常总结
    敏捷开发的七种主流方法
    转:一位10年Java工作经验的架构师聊Java和工作经验
    Map遍历
    Mybatis中的模糊查询
    Mybatis中动态SQL多条件查询
    J2EE,LAMP和ASP.NET三者比较
    关于加密
    Md5Hash的测试
    CentOS7 修改默认时区为 北京时间
  • 原文地址:https://www.cnblogs.com/wzndkj/p/12159459.html
Copyright © 2011-2022 走看看