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/

  • 相关阅读:
    cocos2d-x的初步学习七
    cocos2d-x的初步学习六
    cocos2d-x的初步学习五
    cocos2d-x的初步学习四
    net core or Linux
    XML序列化反序列化
    用NSoup解析HTML
    ubuntu 下的ftp安装及root身份远程配置
    Windows 10 子系统Linux重启(不重启Win10)
    C# HttpRequest 请求
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11907694.html
Copyright © 2011-2022 走看看