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/

  • 相关阅读:
    poj1330 Nearest Common Ancestors
    poj3237 Tree
    spoj2798 QTREE3 Query on a tree again!
    spoj913 QTREE2 Query on a treeⅡ
    自动类型转换
    js "+"连接符号
    js parseFloat
    js字符串与数字的运算
    js prompt
    js数组排序
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11907694.html
Copyright © 2011-2022 走看看