react-native-webview: Initial Webview load very slow, can we pre-cache?
Is your feature request related to a problem? If so, Please describe.
Recently, on 10.9.0, I’ve noticed that our Webview loads very slowly (on the order of ~8 seconds, when hitting a localhost address from my iOS simulator). This didn’t seem to be a problem in the past, and neither the content we are loading nor our Webview component usage have changed. Is it possible there has been a regression? I have noticed that subsequent loads seem to be much faster (~1-2 seconds), which makes me think that the caching behavior is very helpful for performance.
Describe the solutions you came up with
I was wondering if you had any other solutions off the top of your head that might help performance. Alternatively, would it be possible to pre-cache/pre-load the page content before the Webview is rendered, so on initial render it could render from a cache and our users wouldn’t have to wait 10 seconds for load? I would like to avoid doing something like rendering an invisible Webview on app load and displaying it when needed.
Additional context
Please let me know if there’s any other information that might be helpful. Thanks!
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 35
- Comments: 45 (1 by maintainers)
This works for me.
Agreed
Yeah. Me too facing the same. It’s very slow for first time.
As an update, I implemented an invisible WebView that renders on app load, and is unrendered after it finishes loading. I don’t like the solution (and have not committed it yet) but it seems to be working. Code looks something like this:
{!loaded && <WebView {...someProps} onLoad={() => { setLoaded(true); } />}Where
loadedis some boolean state variable that is initialized tofalse(and thus allows the WebView to be rendered) and once the WebView has loaded (and the content has been cached)loadedis set totrue, which removes the WebView from the page. I added some styling to my WebView component that makes the height 0 and (to be extra safe) makes theopacity: 0.Hey, I haven’t actually tested that scenario but I’ll try it and come back with results, however the initial load with the same site is marginally slower.
Another important note, some guys in our team temporarily downgraded to version
7.1.1but it seems this issue was raised before the downgrade. In any case I’ll check after we’re back up to the latest version and also check the loading time with two different sites as you mentioned and report back.cc @Titozzz @jamonholmgren @alloy @TheAlmightyBob
any thoughts here??
A prefetching mechanism would be a very good solution here. Currently the only workaround I found that significantly improved performance was to render an invisible WebView sometime before rendering the actual WebView but this is rather nasty.