webview - React Native WebView 预渲染以获得更快的性能 - 如何做到这一点？

Question

在React Native中，当使用WebView组件时，它会在组件渲染的那一刻开始加载外部内容。

为了提高应用程序的性能，我尝试预取外部 HTML，以便在渲染组件时它已准备好。似乎只有对渲染方法的实际调用才会导致加载开始，并且这仅由屏幕上渲染的内容控制。我认为 React Native 没有可用于提前调用渲染方法的影子 DOM 概念。尝试操纵生命周期方法也不起作用，并且可能也不是正确的方法？

我还尝试对外部 HTML 内容执行 fetch()，并在 header 中使用正确的用户代理，并将 responseText 传递给 WebComponent。这有时适用于某些来源网站，但对于其他网站，我遇到 ACAP(自动内容访问协议(protocol))问题，这不是首选解决方案。

有没有办法将外部 HTML 内容预取到 WebView 组件，以便其显示速度更快？

Answer 1

fetch 方法在 React 端运行，fetch 保留缓存，但可用于 React api 和组件。 WebView 有自己的缓存概念。这是一个浏览器。 fetch 的缓存不适用于 WebView。为了通过预加载的数据更快地加载，您应该通过 fetch api 的 WebView 实例来获取数据。

您可以通过设置宽度和高度 0 来创建隐藏的 WebView 并在其上加载您的网站。这将在 ViewView 上加载您的网站并保留缓存，以便下次加载时使用。

这是一个示例

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  WebView,
  Alert,
  ActivityIndicator,
} from 'react-native';

// const url = 'https://github.com/facebook/react-native'
// const url = 'https://in.yahoo.com/?p=us'
const url = 'https://www.facebook.com/'

class TestWebView extends Component {
  render() {
    var renderTime = Date.now();

    return (
      <WebView
        source={{uri: url}}
        style={{marginTop: 20, flex: 1}}
        onLoad={() => {
          Alert.alert('On load event', `Loading time : ${Date.now() - renderTime}`)
        }}
      />
    );
  }
}

export default class App extends Component<{}> {
  constructor(props) {
    super(props)

    this.state = {
      isLoaded: false,
    }
  }

  render() {

    if (this.state.isLoaded) {
      return (
        <TestWebView />
      )
    }

    return (
      <View style={styles.container}>
        <View style={{height: 0, width: 0}}>
          <WebView
            source={{uri: url}}
            onLoad={() => {
              this.setState({isLoaded: true})
            }}
          />
        </View>
        <ActivityIndicator />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

我测试了一下。首次在 WebView 上加载数据后，我们要向用户显示的实际 WebView 上的加载减少了 70%。