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. 如何使用RedisTemplate访问Redis数据结构之Zset

    Redis的ZSet数据结构 Redis 有序集合和无序集合一样也是string类型元素的集合,且不允许重复的成员. 不同的是每个元素都会关联一个double类型的分数.redis正是通过分数来为集合 ...

  2. 手撕面试官系列（五）：Tomcat+Mysql+设计模式面试专题

    Tomcat (面试题+答案领取方式见侧边栏) Tomcat 的缺省端口是多少,怎么修改? tomcat 有哪几种 Connector 运行模式(优化)? Tomcat 有几种部署方式? tomcat ...

  3. 开灯问题—C语言

    开灯问题 有n盏灯,编号为1~n.第1个人把所有灯打开,第2个人按下所有编号为2的倍数开关(这些灯将被关掉),第3个人按下所有编号为3的倍数的开关,以此类推.一共有k个人,问最后哪些灯是开着?输入n和 ...

  4. Python输错4次用户名密码需要输入验证码

    time = 0 login_success = False USER_NAME = "alex" PWD = "alex123" CHECK_CODE = & ...

  5. 英语propretie房产

    property (英文释义)  英 ['prɒpəti] 美 ['prɑːpərti] n.财产:所有物:地产,房地产:性质:道具 中文名:房产财产地产 外文名:property.propreti ...

  6. Fiddler抓包8-打断点（bpu）（转）

    转自:https://www.cnblogs.com/yoyoketang/p/6778006.html

  7. 阿里巴巴 Java 开发手册 (十三) 其它

    1. [强制]在使用正则表达式时,利用好其预编译功能,可以有效加快正则匹配速度. 说明:不要在方法体内定义:Pattern pattern = Pattern.compile(规则); 2. [强制] ...

  8. Ole操作帮助类

    /// <summary> /// Ole操作类 /// </summary> public class OleDataBaseHandle { private static ...

  9. Golang中的RegExp正则表达式用法指南

    ------------------------------------------------------------ Golang中的正则表达式 ------------------------- ...

  10. 图像平移 cv.warpAffine()函数用法

    # 图像平移image1='C:\\Users\\10107472\\Desktop\\myfile\\tensorflow-yolov\\read.jpg'img = cv.imread(image ...