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

Question

在React Native中,当使用WebView组件时,它会在呈现组件时开始加载外部内容.

为了提高应用程序的性能,我尝试预先获取外部HTML,以便在呈现组件时准备就绪.看起来它只是对render方法的实际调用将导致加载开始,这只是由屏幕上呈现的内容控制.我想React Native没有shadow DOM的概念,可以用来调用render方法的时间.试图操纵生命周期方法也行不通,可能也不是正确的方法吗？

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

有没有办法预先将外部HTML内容提取到WebView组件,以便更快地显示？

Answer 1

fetch方法运行在反应端,fetch保持缓存,但可用于反应apis和那里的组件.WebView有自己的缓存概念.这是一个浏览器.缓存fetch将无法实现WebView.为了通过预加载数据加快加载速度,您应该通过api WebView实例获取数据fetch.

您可以WebView通过设置宽度和高度来创建隐藏,并0在其上加载您的网站.这将加载您的站点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%的负载.