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/

  • 相关阅读:
    鸽巢原理(The Pigeonhole Principle)(抽屉原理)
    VS2010显示行号
    HDU 2546 饭卡
    组合数学之排列组合(Permutations and Combinations)(四种情况)
    php中的$_SERVER方法初识
    重新认识hasLayout——IE浏览器css bug的一大罪恶根源 转
    javascript实现简单的链式调用
    Javascript 静态类的实现
    Object类相关的属性,方法和操作符
    <转>前端开发中的MCRV模式
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11907694.html
Copyright © 2011-2022 走看看