zoukankan      html  css  js  c++  java
  • [HTML5] Using HTMLPortalElement to improve MPA preformance

    For multi pages application, it is very slow to navgiate between page by page, because it needs to reload the full page.

    Portal can solve the problem by using another thread to load the page in the background, you can always do this in advance, so that when we need to navigate to that page, it is already loaded.

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Parcel Sandbox</title>
        <style>
            portal {
                position:fixed;
                width: 100%;
                height: 100%;
                opacity: 0;
                box-shadow: 0 0 20px 10px #999;
                transform: scale(0.4);
                transform-origin: bottom left;
                bottom: 20px;
                left: 20px;
                animation-name: fade-in;
                animation-duration: 1s;
                animation-delay: 2s;
                animation-fill-mode: forwards;
            }
            .portal-transition {
                transition: transform 0.4s;
            }
            /*@media (prefers-reduced-motion: reduce) {
                .portal-transition {
                    transition: transform 0.001s;
                }
            }*/
            .portal-reveal {
                transform: scale(1.0) translateX(-20px) translateY(20px);
            }
            @keyframes fade-in {
                0%   { opacity: 0; }
                100% { opacity: 1; }
            }
        </style>
        <meta charset="UTF-8" />
    </head>
    
    <body>
        <div id="app"></div>
    
        <script>
            if ('HTMLPortalElement' in window) {
                let portal = document.createElement("portal");
                portal.src = "https://en.wikipedia.org/wiki/World_Wide_Web";
    
                portal.classList.add('portal-transition');
    
                portal.addEventListener('click', evt => {
                    // Animate the portal once user interacts
                    portal.classList.add('portal-reveal');
                });
    
                portal.addEventListener('transitionend', evt => {
                    console.log('evt', evt);
                    if (evt.propertyName == 'transform') {
                        // Activate the portal once the transition has completed
                        portal.activate();
                    }
                });
    
                document.body.appendChild(portal);
            }
        </script>
    </body>
    
    </html>

    package.json:

    {
      "name": "parcel-sandbox",
      "version": "1.0.0",
      "description": "Simple Parcel Sandbox",
      "main": "index.html",
      "scripts": {
        "start": "parcel index.html --open",
        "build": "parcel build index.html"
      },
      "dependencies": {},
      "devDependencies": {
        "@babel/core": "7.2.0",
        "parcel-bundler": "^1.6.1"
      }
    }

    More information, you can read: https://web.dev/hands-on-portals/

  • 相关阅读:
    canvas
    canvas基础
    canvas基础
    面向对象
    函数的原型链
    原型链&Object的一些方法
    普通函数和构造函数
    下载RDO OpenStack RPM
    RHEL7修改swappiness
    2016年新年愿望
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11907694.html
Copyright © 2011-2022 走看看