[HTML5] Using HTMLPortalElement to improve MPA preformance
2024-10-21 16:29:00
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/
最新文章
- bzoj2141 树状数组套Treap树
- Asp.Net转换Html加号显示为空格的字符！（自已备用）
- Linux磁盘管理：LVM逻辑卷的拉伸及缩减
- 使用out来返回多个值
- Android中各种onTouch事件
- Mob短信验证的配置的解释
- linux学习（一个） 在unbuntu通过添加新的用户
- 微信企业号接收消息(使用SpringMVC)
- #黑客攻防实战详解#[Chapter 1]
- ra_interface_lines_all 接口表各字段说明
- iOS----------has copy command from（bug修复）
- springcloud情操陶冶-springcloud config server(一)
- JSF初学之概念篇1
- java对象比较
- grpc 使用总结
- resure挽救笔记本系统和一些相关的操作记录
- 【Java】【集合】
- 安装配置ubuntu的web项目（新）
- Pearson（皮尔逊）相关系数
- makefile高级应用