The vue project written by myself, the Android shell written by myself, I thought it was slow, so I passed it, but others thought it was slow, so you can’t change it? The result is that the front-end is developed by itself, and Android is also developed by itself. If you want to throw the pot away, you can’t throw it away. You can’t leave it to the back-end, right? Hahaha
Closer to home: If you are in a hurry, you can skip directly to the back, this part is my own introduction to the background of the event
Describe my situation. I wrote a vue project that needs to be embedded in Android. I didn’t expect that Android webview would load Vue so slowly. I don’t know what went wrong. Let me introduce my idea of abandon first:
1. Enable the method of loading from the cache if there is a local cache, and loading from the network if there is no cache. This caching mode still cannot prevent the white screen without caching for the first time for a long time, although the speed will be significantly faster after the first time. , but the first slow customer is not acceptable, so this is just my experience during the development process, and this caching mode is turned on, vue cannot be updated to the cache even if js is updated, it is still necessary to clear the cache OK. So this scheme was abandoned after submitting the test.
2. Consider optimizing from vue, because considering that vue is a single-page mode, it will be fully loaded when running, so I think it is a problem caused by too many vue pages, and adopt the most popular solution on the Internet: preloading
,
lazy Loading,
gzip compression,
cdn,
delete useless three-party libraries ...
Until the vue dist package I built was only 500k, I hurried to try it out. Once again, the white screen of more than ten seconds and twenty seconds broke my heart. I immediately hated the Internet, hated these writers who only know how to copy and paste, and can’t solve the problem at all (I hate it because I’m in a bad mood, I’m not malicious, their methods may work well but they don’t apply to me), and then I tested with chrome and edge and there was no problem. It was said on the Internet that the performance of the Android phone was not as good as that of the computer browser. Then I downloaded the edge on the mobile phone and found that the edge on the phone was just as fast. It loaded in seconds, and I crashed. It's not that the performance of the mobile phone is not enough at all, or that the webview has insufficient parsing ability for js. Of course, it is not ruled out that there is a problem with my code, but the edge is very fast, and I don't want to work on my code, mainly because it takes too much time and does not solve the problem.
solution:
During the development process, I found that when webview uses the default cache strategy, it is slow for the first time, and it will be very fast when it is accessed again in a short period of time. Even if the cache is cleared, it will not affect the speed, so I thought if I entered the app. Start loading this URL in the background. When I open the webview, the app already has a cache for this website, so the access will be faster. You may have guessed what to do when you see this, yes, it is The least friendly way to do it is to:
Create a webview in the application, apart from anything else, set a viewClient for him and let him loadUrl ,
Don't let him display it, just to load this URL and let him cache it. After caching, I can visit it casually when I visit it elsewhere. Speaking of the code here, you will definitely write it, roughly write the code in the application
First declare the static webview object (a warning will be reported here, that is, if the webview is declared as a static variable, then there may be a memory leak because the context declaration cycle of the webview is not as long as the webview, but we declare it in the application. What we give is the context of the app, which has the longest life cycle of the app, so this problem will not occur):
companion object {
lateinit var webView:WebView
}
Then assign and open access in oncreate:
//这里的app是application的实例this
webView = WebView(app)
webView.webViewClient = WebViewClient()
//允许js交互
webView.settings.javaScriptEnabled = true
webView.loadUrl(WebViewActivity.BASE_URL)
Then the experience speed took off, (in fact, it didn't speed up the loading speed, but it just speeded up the experience)
here is enough, and then you can access it in the app, just turn on a default cache. If you feel that re-access is still slow after the operation interval is too long, you can change the cache mode, but reading the cache from the disk is not conducive to updating the front-end code in the future.
It’s enough to meet the needs of the customer, let him care about others, of course I have to admit that my method is not advanced, but it is very ingenious, I am just a brick mover, I just solve the problem, I am not that advanced. If you have encountered a similar situation and have a vue solution, if you are willing to explain it in the comment area, then I will be grateful and learn with an open mind. It would be even better if you can add a friend, I really need it too much A person told me about the front-end vue.
That's all for the article, I hope it can solve your problem, if it can't solve your problem, then I regret