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的更多相关文章

  1. 使用HTML5监测网站性能

    在这个信息爆炸的互联网时代,越来越多的人缺少了等待的耐心,网站性能对于一个网站来说越来越重要.以下为监控到的网站打开时间对跳出率的影响: 当网站打开时间在0-1秒时,跳出率为12% 当网站打开时间在1 ...

  2. 使用HTML5监測站点性能

    在这个信息爆炸的互联网时代,越来越多的人缺少了等待的耐心.站点性能对于一个站点来说越来越重要.下面为监控到的站点打开时间对跳出率的影响: 当站点打开时间在0-1秒时,跳出率为12% 当站点打开时间在1 ...

  3. 壁虎书2 End-to-End Machine Learning Project

    the main steps: 1. look at the big picture 2. get the data 3. discover and visualize the data to gai ...

  4. [HTML5] Using the focus event to improve navigation accessibility (nextElementSibling)

    For a menu item, when we tab onto it, we want this element get 'focus' event, so that the submenu wi ...

  5. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  6. 《HTML5》 Audio/Video全解

    一.标签解读 <audio> 标签属性 <audio id="media" src="http://www.abc.com/test.mp3" ...

  7. HTML5 文件操作API

    简介 我常常想,如果网络应用能够读取和写入文件与目录,将会非常方便.从离线转移到在线后,应用变得更加复杂,而文件系统方面的API的缺乏也一直阻碍着网络前进.存储二进制数据或与其进行交互不应局限于桌面. ...

  8. HTML5 game engines

    The following are few examples of game engines implemented with HTML5 and JavaScript: Construct 2: O ...

  9. [重磅] 让HTML5达到原生的体验 系列之中的一个 避免切页白屏

    非常多人都想.甚至曾使用HTML5开发跨平台App.而且想达到原生App的体验. 最后的结果都是无奈的放弃.HTML5貌似美好,但坑太多.想做到原生App的体验差点儿不可为. 也曾有过著名的faceb ...

随机推荐

  1. 为何一个@LoadBalanced注解就能让RestTemplate拥有负载均衡的能力？【享学Spring Cloud】

    每篇一句 你应该思考:为什么往往完成比完美更重要? 前言 在Spring Cloud微服务应用体系中,远程调用都应负载均衡.我们在使用RestTemplate作为远程调用客户端的时候,开启负载均衡极其 ...

  2. 同类控件的统一操作（以TCHECKBOX为例）

    https://www.cnblogs.com/gaodu2003/archive/2008/12/15/1355355.html Procedure UnCheck; var i: integer; ...

  3. Migrate to AndroidX 遇到的坑

    Androidx 迁移方法: 首先把 gradle 版本改为3.2.0以上,以及 compileSdkVersion 为28以上 然后 Android Studio 菜单栏 Refactor -> ...

  4. yum命令安装jdk

    1.查看是否已安装JDK,卸载 yum list installed |grep java java--openjdk.x86_64 :.b13.el7_5 @updates java--openjd ...

  5. Golang ---testing包

    golang自带了testing测试包,使用该包可以进行自动化的单元测试,输出结果验证,并且可以测试性能. 建议安装gotests插件自动生成测试代码: go get -u -v github.com ...

  6. 华为、华三 交换机 开启SNMP 简单网络管理协议

    [huawei]snmp-agent //使能SNMP代理 [huawei]snmp-agent sys-info version all //允许所有SNMP 支持 协议 [huawei]snmp- ...

  7. 将整个 project 资源打包

    <build> <finalName>bootstrap</finalName> <sourceDirectory>${basedir}/src/mai ...

  8. EF CodeFirst Dome学习

    创建ConsoleDome控制台应用程序 从NuGet包管理器安装EntityFramework 创建DbContextDome类并继承DbContext public class DbContext ...

  9. centos7安装face_recognition踩各种坑

    要在阿里云服务器上部署face_recognition.用的是centos7.  千辛万苦啊.感谢网上的各种解答.回报社会,我也把各种坑写下了.整理的有点乱.不过仔细看,有干货的. 感谢这个博主Fat ...

  10. Python进阶----线程基础,开启线程的方式(类和函数),线程VS进程,线程的方法,守护线程,详解互斥锁,递归锁,信号量

    Python进阶----线程基础,开启线程的方式(类和函数),线程VS进程,线程的方法,守护线程,详解互斥锁,递归锁,信号量 一丶线程的理论知识 什么是线程:    1.线程是一堆指令,是操作系统调度 ...