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. 记一次redis主从同步失败

    zabbix告警突然从某个时间点开始提示CPU使用高,网卡流量也一直居高不下. 首先查看redis日志,发现告警时间点redis主节点被重启了,发生了主备切换,并且在日志中发现这么一段 [3081] ...

  2. CSDN刷阅读数

    今天我们来盘一下csdn,做一个小程序,为什么做这个呢?今天小编看着我的博客的阅读数,唉,惨不忍睹,没办法,只能想一些........呃呃呃呃,你懂的. 话不多说,分析一波csdn的阅读数,计数原理是 ...

  3. Java abstract 理解和学习

    /** * <html> * <body> * <P> Copyright JasonInternational Since 1994 https://github ...

  4. 【开发笔记】- SSM使用velocity模板语言

    1.在pom.xml里添加velocity模板语言支持的依赖 <!-- velocity模板语言支持包 --> <dependency> <groupId>org. ...

  5. exchange From Middle English eschaunge

    exchange From Middle English eschaunge, borrowed from Anglo-Norman eschaunge exchange 1.An act of ex ...

  6. EVM靶机渗透

    前言 靶机下载地址: https://download.vulnhub.com/norzhctf/Basilic.ova 通过渗透靶机来学习相关知识以便提高在真实环境的渗透能力 ==. 安装: 我是用 ...

  7. Linux应用与端口

    lsof -i:port --- 得到对应端口的应用pid PS -ef|grep pid --- 根据pid得到对应应用

  8. C#创建DataTable（转载）

    来源:https://www.cnblogs.com/xietianjiao/p/11213121.html方法一: DataTable tblDatas = new DataTable(" ...

  9. 记一次IntelliJ IDEA中文乱码问题

    问题描述:输出控制台中文乱码,反正就是各种百度解决不了 问题解决:https://blog.csdn.net/m0_37893932/article/details/78280663 解决方案:我用的 ...

  10. Trunk 实现跨交换机 VLAN 通信

    当网络中有多台交换机时,位于不同交换机上的相同VLAN的主机之间时如何通信的呢?我们使用Trunk实现跨交换机VLAN通信.还有以太网通道的操作哦. 实验拓扑 两台交换机直连,每台下面再连接两台VPC ...