首页 > 其他分享 >[HTML 5] Back Forward Cache

[HTML 5] Back Forward Cache

时间:2023-06-22 15:13:47浏览次数:43  
标签:dbPromise bfcache req Back page window HTML Forward event

 

Blog: https://web.dev/bfcache/

 

bfcache is an in-memory cache that stores a complete snapshot of a page (including the JavaScript heap) as the user is navigating away. With the entire page in memory, the browser can quickly and easily restore it if the user decides to return.

How many times have you visited a website and clicked a link to go to another page, only to realize it's not what you wanted and click the back button? In that moment, bfcache can make a big difference in how fast the previous page loads:

Without bfcache enabled A new request is initiated to load the previous page, and, depending on how well that page has been optimized for repeat visits, the browser might have to re-download, re-parse, and re-execute some (or all) of resources it just downloaded.
With bfcache enabled Loading the previous page is essentially instant, because the entire page can be restored from memory, without having to go to the network at all

 

Observe when a page is restored from bfcache

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    console.log('This page was restored from the bfcache.');
  } else {
    console.log('This page was loaded normally.');
  }
});
window.addEventListener('pagehide', (event) => {
  if (event.persisted) {
    console.log('This page *might* be entering the bfcache.');
  } else {
    console.log('This page will unload normally and be discarded.');
  }
});

 

No "unload"

Instead of using the unload event, use the pagehide event. The pagehide event fires in all cases where the unload event currently fires, and it also fires when a page is put in the bfcache.

 

"beforeunload"

Don't

window.addEventListener('beforeunload', (event) => {
  if (pageHasUnsavedChanges()) {
    event.preventDefault();
    return event.returnValue = 'Are you sure you want to exit?';
  }
});

Do:

function beforeUnloadListener(event) {
  event.preventDefault();
  return event.returnValue = 'Are you sure you want to exit?';
};

// A function that invokes a callback when the page has unsaved changes.
onPageHasUnsavedChanges(() => {
  window.addEventListener('beforeunload', beforeUnloadListener);
});

// A function that invokes a callback when the page's unsaved changes are resolved.
onAllChangesSaved(() => {
  window.removeEventListener('beforeunload', beforeUnloadListener);
});

 

Handle IndexDB

let dbPromise;
function openDB() {
  if (!dbPromise) {
    dbPromise = new Promise((resolve, reject) => {
      const req = indexedDB.open('my-db', 1);
      req.onupgradeneeded = () => req.result.createObjectStore('keyval');
      req.onerror = () => reject(req.error);
      req.onsuccess = () => resolve(req.result);
    });
  }
  return dbPromise;
}

// Close the connection to the database when the user is leaving.
window.addEventListener('pagehide', () => {
  if (dbPromise) {
    dbPromise.then(db => db.close());
    dbPromise = null;
  }
});

// Open the connection when the page is loaded or restored from bfcache.
window.addEventListener('pageshow', () => openDB());

 

标签:dbPromise,bfcache,req,Back,page,window,HTML,Forward,event
From: https://www.cnblogs.com/Answer1215/p/17497756.html

相关文章

  • [HTML 5] Refer Polices
    Mordenbrowserapply noopenerforyou,butforlagacybrowsermightnot.What noopenerdoesisthat,itset window.openerto null,whichcanpreventevilsitechangetheoriginalsiteurlpointstoaphisingsite. A:iswrong,shouldbepreventnewlyop......
  • [HTML5] Content Security Policy CSP Header
    default-src"none";script-src"self";img-src"self"example.com;style-srcfonts.googleapis.com;font-srcfonts.gstatic.com;<scriptsrc="/js/app.js"></script>:allowbecause script-src"self&qu......
  • POSTGRESQL 15 pg_basebackup 新功能,LOCAL backup 与 数据强力压缩
    与MYSQL不一样,开源XTRABACKUP的备份软件无法跟上MYSQL版本的更迭,PG这点做的是一贯的好。从来没有让人失望过。所以POSTGRESQL数据的备份一直就不是一个问题,众多的工具以及pg_basebackup良好的功能,让POSTGRESQL备份起来速度与硬件有关。但基于POSTGRESQL本身的原理,数据库表......
  • HTML
    ......
  • 记录--新的HTML标签 :<search>
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助本文介绍了一种新的HTML元素搜索方法,并提供了一个实用的工具来帮助开发者快速找到所需的元素。这对于那些需要处理大量HTML元素的开发者来说是非常有用的。文章还通过提供一些常见元素的用法示例,帮助开发者更好地......
  • mysql的备份恢复之percona-xtrabackup物理备份
    1.mysql的备份恢复之percona-xtrabackup物理备份目录1.mysql的备份恢复之percona-xtrabackup物理备份1.1.背景1.2.Xtrabackup是什么?1.3.使用场景1.4.Xtrabackup可以做什么?1.5.Xtrabackup版本及下载地址1.6.PerconaXtraBackup工作流程1.7.Xtrabackup使用说明文档1.8.X......
  • innobackupex只备份恢复单表或者单库
    innobackupex只备份恢复单表或者单库全程在线导入,数据库不需要重启前提条件:1.单库备份和恢复可以使用innobackupex全量备份的文件或者单独备份的文件2.单库恢复需要将所有的表discard和import3.单库恢复需要在目标端单独建立数据库和对应的表结构,否则只能全库备份和恢复一、......
  • 如何实现带有颜色文本的日志框_使用HTMLEditor模拟
    如何实现带有颜色文本的日志框_使用HTMLEditor模拟HTMLEditor是一个强大的html编辑器,可以方便的编辑各种html元素并得到html文本。比之TextArea要强大很多,因为TextArea中所有的文本只能有一种样式。如果想要实现一个日志框,其中普通信息、警告信息、错误信息使用不同......
  • [万神网络科技]Windows12网页版开源HTML源码
    Windows12网页版开源HTML源码源码介绍Windows12网页版是一个开源项目,使用标准网络技术,例如Html、CSS和Javascript,希望让用户在网络上预先体验Windows12因为这只是概念版,所以内容可能与Windows12正式版本不一致。源码截图下载地址:vx公众号:万神的小屋......
  • VS Code 中 HTML文件使用emmet语法 感叹号!+Tab 生成HTML元素的修改方法
    在visualstudiocode(以下简称vscode)新建一个html,输入!后会提示按tab键生成html元素:这种方法生成的格式不适合我们,需要修改它;方法一,原有基础上简单的修改lang和charset这两个在vscode上,依次:文件-首选项-设置,输入emmet.variables然后添加项,如下图:建议:搜......