1# 设置Web组件前进后退缓存 2<!--Kit: ArkWeb--> 3<!--Subsystem: Web--> 4<!--Owner: @aohui--> 5<!--Designer: @yaomingliu--> 6<!--Tester: @ghiker--> 7<!--Adviser: @HelloCrease--> 8 9Web组件为开发者提供了启用和配置前进后退缓存（以下简称BFCache）的功能。启用此功能后，能够显著提升用户返回至先前浏览网页的速度，尤其对于网络条件不佳的用户，可提供更为流畅的浏览体验。 10 11BFCache功能启用后，Web组件会在用户离开当前页面时在内存中保存该页面的快照。当用户在短期内通过Web组件的前进或后退功能重新访问同一页面时，能够迅速恢复页面状态，避免重复发起HTTP请求。 12 13## Web组件开启BFCache 14 15开发者需要在调用[initializeWebEngine()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#initializewebengine)初始化ArkWeb内核之前调用[enableBackForwardCache()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#enablebackforwardcache12)来开启BFCache。enableBackForwardCache可以接收一个[BackForwardCacheSupportedFeatures](../reference/apis-arkweb/arkts-apis-webview-BackForwardCacheSupportedFeatures.md)参数，用于控制是否允许具备同层渲染特性和视频托管特性的页面进入BFCache。 16 17```ts 18// EntryAbility.ets 19import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 20import { hilog } from '@kit.PerformanceAnalysisKit'; 21import { window } from '@kit.ArkUI'; 22import { webview } from '@kit.ArkWeb'; 23 24export default class EntryAbility extends UIAbility { 25 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { 26 let features = new webview.BackForwardCacheSupportedFeatures(); 27 features.nativeEmbed = true; 28 features.mediaTakeOver = true; 29 webview.WebviewController.enableBackForwardCache(features); 30 webview.WebviewController.initializeWebEngine(); 31 AppStorage.setOrCreate("abilityWant", want); 32 } 33} 34``` 35 36## 设置缓存的页面数量和页面留存的时间 37 38启用BFCache后仅能存储一个页面，Web组件默认进入BFCache的页面可保持存活状态600秒。开发者可通过调用[setBackForwardCacheOptions()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#setbackforwardcacheoptions12)设置每个Web实例的前进后退缓存策略。包括调整缓存中页面的最大数量，使BFCache能够容纳更多页面，从而在用户连续进行前进后退操作时，提供更快的加载速度。同时，开发者还能修改每个页面在缓存中的停留时间，延长页面在BFCache中的驻留期限，进而优化用户的浏览体验。 39 40在下面的示例中，设置Web组件可以缓存的最大数量为10，每个页面在缓存中停留300s。 41 42```ts 43// Index.ets 44import { webview } from '@kit.ArkWeb'; 45 46@Entry 47@Component 48struct Index { 49 controller: webview.WebviewController = new webview.WebviewController(); 50 51 build() { 52 Column() { 53 Row() { 54 Button("Add options").onClick((event: ClickEvent) => { 55 let options = new webview.BackForwardCacheOptions(); 56 options.size = 10; 57 options.timeToLive = 300; 58 this.controller.setBackForwardCacheOptions(options); 59 }) 60 Button("Backward").onClick((event: ClickEvent) => { 61 this.controller.backward(); 62 }) 63 Button("Forward").onClick((event: ClickEvent) => { 64 this.controller.forward(); 65 }) 66 } 67 Web({ src: "https://www.example.com", controller: this.controller }) 68 } 69 .height('100%') 70 .width('100%') 71 } 72} 73``` 74