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. Django框架（十）--ORM多对多关联关系三种创建方式、form组件

    多对多的三种创建方式 1.全自动(就是平常我们创建表多对多关系的方式) class Book(models.Model): title = models.CharField(max_length=32 ...

  2. 【转】ISE——完整工程的建立

    FPGA公司主要是两个Xilinx和Altera(现intel PSG),我们目前用的ISE是Xilinx的开发套件,现在ISE更新到14.7已经不更新了,换成了另一款开发套件Vivado,也是Xil ...

  3. delphi xe10 FMX 启动参数

    关于 Delphi Xe10 FMX 启动参数  需要在启动窗口前来调用 也就是在bar文件修改 如果参数多可以用json来 uses system.SysUtils; var param: stri ...

  4. Maven 初学+http://mvnrepository.com/

    了解 maven是一款服务于java平台的自动化构建工具(项目管理工具) 构建:全方位.多角度.深层次地建立 项目构建是一个项目从:源代码.编译.测试.打包.部署.运行的过程 用来解决团队开发遇到的问 ...

  5. C#静态字段的两个用处

    静态字段的2个常用方法 (1)记录已实例化的对象的个数 (2)存储必须在所有实例化之间共享的值 (1)记录已实例化的对象的个数 现在某个培训机构啊,要开设一个学理发的班,计划招5人,只要人数够5人就开 ...

  6. 实战Go内存泄露【转】

    最近解决了我们项目中的一个内存泄露问题,事实再次证明pprof是一个好工具,但掌握好工具的正确用法,才能发挥好工具的威力,不然就算你手里有屠龙刀,也成不了天下第一,本文就是带你用pprof定位内存泄露 ...

  7. python-tyoira基本

    目录 .Typora安装 我们在之前的时候记录笔记就是使用word和记事本,但是从今天开始我们要更换软件,记录笔记使用Typora软件,为什么要使用Typora的软件呢,是因为我们程序员不只是写代码这 ...

  8. 深入理解es6(上)

    一.let和const 1.let与var的区别 不存在变量提升 块级作用域 不允许重复声明 2.const常量 const与let一样,唯一区别在于声明的常量不能被修改 二.解构赋值 es6按照一定 ...

  9. Oracle建立连接的过程分析

    Oracle建立连接的过程 如果我们想登陆数据库并在数据库中真正做事情,就必须先建立连接,首先我会介绍如何建立连接,再介绍建立连接的两种方式的原理,以及建立连接的过程中在客户端和服务端都做了些什么. ...

  10. echarts 曲线平滑配置

    来源:https://blog.csdn.net/sinat_36422236/article/details/62430114 series : [ { name:'your name', symb ...