[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/

[HTML5] Using HTMLPortalElement to improve MPA preformance

猜你喜欢