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/

  • 相关阅读:
    方法的调用机制
    类的成员之二:方法
    类的成员之一:属性
    关键字static
    构造器
    this关键字
    递归方法(recursion)
    方法重载(二)
    GTID 跳过脚本
    mydumper 找不到libmysqlclient.so.20
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11907694.html
Copyright © 2011-2022 走看看