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. 深度学习-CNN+RNN笔记

    以下叙述只是简单的叙述,CNN+RNN(LSTM,GRU)的应用相关文章还很多,而且研究的方向不仅仅是下文提到的1. CNN 特征提取,用于RNN语句生成图片标注.2. RNN特征提取用于CNN内容分 ...

  2. JS Web API 拖拽对话框案例

    <style> .login-header { width: 100%; text-align: right; height: 30px; font-size: 24px; line-he ...

  3. NOI2019：Stay at Home

    7.16 NOI D1 从同步赛开始更起好了 先看了一圈题目,发现T1非常可做,二次函数因为对称轴在\(x < 0\)的地方所以有跟一次函数类似的单调性,搞个单调队列维护一下似乎就可以了.大力码 ...

  4. Window中C++进行精确计时的方法

    嗯,程序员一个永恒的追求就是性能吧? 为了衡量性能,自然需要计时. 奈何无论C标准库还是C++标准库,因为通用性的考虑,其time API精度都不高.基本都是毫秒级的. 所以如果要真正精确地衡量程序的 ...

  5. nacos初探--作为配置中心

    什么是nacos Nacos 支持基于 DNS 和基于 RPC 的服务发现(可以作为springcloud的注册中心).动态配置服务(可以做配置中心).动态 DNS 服务. 官方介绍是这样的: Nac ...

  6. C# vb .net实现倾斜效果滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的倾斜效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...

  7. Matlab模板模式

    在模板模式(Template Pattern)中,一个抽象类公开定义了执行它的方法的方式/模板.它的子类可以按需要重写方法实现,但调用将以抽象类中定义的方式进行.本文以数据库SQL语法为例来阐述模板模 ...

  8. IDEA自动清理优化import包

    IDEA自动清理优化import包 直接上图: Add unambiguous imports on the fly:快速添加明确的导入. Optimize imports on the fly:快速 ...

  9. PHP7中方法的弃用

    php7与数据库连接创建函数方法调用: function fun_conn($sql) { $con = mysqli_connect("localhost", "roo ...

  10. 2.在HTML中使用JavaScript

    目录 1. script元素 2. 标签的位置 3.延迟和异步加载 4.嵌入代码与外部代码的区别 5.noscript元素 6. 小结 1. script元素 向HTML中插入JavaScript的主 ...