ArkWeb页面预加载与缓存实战：让应用快到飞起原创

mb6858ed302a25e

发布于 2025-6-23 14:51

浏览

0收藏

兄弟们，Web应用的加载速度那可是用户体验的生命线。想想看，你打开个App要等半天，是不是想直接卸了？ArkWeb框架里的预加载和缓存功能就是来解决这事儿的，今天咱就整明白怎么用这些功能让页面加载快到飞起。

一、页面预加载：提前把菜端上桌

（一）预加载下一个页面

预加载页面就像餐馆提前把下道菜备好，用户点的时候直接端上来。在ArkWeb里用prefetchPage就能干这事儿：

@Entry
@Component
struct PreloadDemo {
  private controller = new webview.WebviewController();
  
  build() {
    Web({ src: 'https://www.example.com' })
      .controller(this.controller)
      .onPageEnd(() => {
        // 当前页面加载完，马上预加载下一个页面
        this.controller.prefetchPage(
          'https://www.example.com/next-page',
          {
            mode: 'Preload', // 预加载模式
            onProgressChange: (p) => {
              console.log(`预加载进度: ${p}%`);
            },
            onComplete: () => {
              console.log('预加载搞定，随时能打开');
            },
            onError: (e) => {
              console.error(`预加载出错: ${e}`);
            }
          }
        );
      })
  }
}

这儿的关键是onPageEnd回调，当前页面加载完就触发预加载，用户还没点下一页呢，咱就把页面提前拉到内存里了，点击的时候直接显示，爽！

（二）预加载关键资源

有时候咱不用预加载整个页面，先把图片、JS这些关键资源备好：

Web({ src: 'https://www.example.com' })
  .controller(this.controller)
  .onPageEnd(() => {
    // 预加载logo图片
    this.controller.prefetchResource(
      {
        url: 'https://www.example.com/assets/logo.png',
        method: 'GET',
        headers: [{ key: 'Content-Type', value: 'image/png' }]
      },
      {
        mode: 'Preload',
        onProgressChange: (p) => {
          console.log(`图片预加载进度: ${p}%`);
        }
      }
    );
  })

比如电商App，列表页加载完就预加载详情页的主图，用户点进去时图片直接显示，不用等加载，体验直接拉满。

二、页面缓存：把常用资源囤起来

（一）缓存模式选择：不同场景不同策略

缓存就像囤货，根据网络情况选不同囤货策略：

@Entry
@Component
struct CacheDemo {
  private controller = new webview.WebviewController();
  
  build() {
    Web({ src: 'https://www.example.com' })
      .controller(this.controller)
      .cacheMode(CacheMode.Default) // 默认模式，能缓存就缓存
      .onCreate(() => {
        // 动态切换到在线模式
        this.controller.setCacheMode(CacheMode.Online, (err) => {
          if (err) {
            console.error(`设置缓存模式失败: ${err}`);
            return;
          }
          console.log('已切换到在线模式，优先拉取最新资源');
        });
      })
  }
}

常用的缓存模式有这几种：

Default：默认模式，系统自己决定怎么缓存
Online：优先走网络，缓存当备胎
Offline：只读缓存，适合没网时用
NoCache：不缓存，每次都拉新的

（二）清理缓存：定期扔旧东西

缓存囤多了占地方，得定期清理：

Button('清除缓存')
  .onClick(() => {
    this.controller.removeCache(
      true, // true表示清除所有缓存
      (err) => {
        if (err) {
          console.error(`清除失败: ${err}`);
          return;
        }
        console.log('缓存已清空，释放空间');
      }
    );
  })

建议在这几种情况清缓存：

应用版本更新后，旧资源没用了
用户手动触发清理（比如设置里加个按钮）
缓存占用超过阈值时自动清理

三、实战案例：全流程优化

import { webview, CacheMode } from '@ohos.web.webview';

@Entry
@Component
struct WebOptimization {
  private controller = new webview.WebviewController();
  
  // 预加载下一页
  preloadNextPage() {
    this.controller.prefetchPage(
      'https://www.example.com/detail',
      {
        mode: 'Preload',
        onProgressChange: (p) => this.updateProgress(p),
        onComplete: () => this.showToast('预加载完成')
      }
    );
  }
  
  // 预加载详情页图片
  preloadDetailImages() {
    this.controller.prefetchResource(
      {
        url: 'https://www.example.com/images/product.jpg',
        method: 'GET'
      },
      { mode: 'Preload' }
    );
  }
  
  // 智能设置缓存
  setupCache() {
    const isOnline = checkNetworkStatus();
    this.controller.setCacheMode(
      isOnline ? CacheMode.Online : CacheMode.Offline,
      (err) => {
        if (err) console.error(`缓存模式设置失败: ${err}`);
      }
    );
  }
  
  build() {
    Column {
      Web({ src: 'https://www.example.com' })
        .controller(this.controller)
        .onPageEnd(() => {
          this.preloadNextPage();
          this.preloadDetailImages();
          this.setupCache();
        })
      
      Button('前往详情页')
        .onClick(() => navigateToDetailPage());
      
      Button('清理缓存')
        .onClick(() => this.controller.removeCache(true));
    }
  }
}

这个例子里，页面加载完就干三件事：