自己寫的vue項(xiàng)目,自己寫的安卓殼子,本來自己覺得慢,忍忍就過去了,但是人家覺得慢,你不得改么?結(jié)果是前端自己開發(fā),安卓也自己開發(fā),想甩個(gè)鍋都沒法甩,總不能甩給后端吧?哈哈哈
言歸正傳:如果你有急事,可以直接跳到后面看,這部分是我自己介紹事件背景的
描述一下我的情況,我寫了一個(gè)vue項(xiàng)目,需要嵌在安卓里運(yùn)行,沒想到安卓webview加載vue會(huì)這么慢,不知道是哪里出了問題,先介紹一下我的abandon的思路:
1、啟用本地有緩存就就從緩存中加載,沒有緩存就從網(wǎng)絡(luò)加載的方式,這個(gè)緩存模式,仍然阻擋不了第一次沒有緩存的白屏很久的情況,雖然第一次過后速度會(huì)明顯加快,但是第一次的慢客戶也是不接受的呀,于是這種只是我在開發(fā)過程中體驗(yàn)體驗(yàn)了,而且開啟了這種緩存模式,vue有js更新也不能更新到緩存,還是要清緩存才行。于是這種方案在提交測(cè)試之后就放棄了。
2、考慮從vue那邊優(yōu)化,因?yàn)榭紤]到vue是單頁模式,運(yùn)行的時(shí)候會(huì)全部加載,所以就覺得是vue頁面過多導(dǎo)致的問題,采用了網(wǎng)上最熱門的解決方案:
預(yù)加載、
懶加載、
gzip壓縮、
cdn、
刪除無用的三方庫…
直到我build完的vue dist包只有500k的時(shí)候,我抓緊試試吧,再一次十多秒二十秒的白屏擊碎了我的心。我瞬間開始痛恨網(wǎng)絡(luò),恨這些寫手們只知道復(fù)制粘貼,壓根解決不了問題呀(痛恨只是因?yàn)槲覀€(gè)人情緒不好哈,沒有惡意,人家的方法也許很好用只是不適用我而已),然后我用chrome和edge測(cè)試沒有問題,網(wǎng)上說是因?yàn)榘沧渴謾C(jī)性能不如電腦瀏覽器,然后我下載了手機(jī)端的edge,發(fā)現(xiàn)手機(jī)的edge也一樣快,秒加載,我崩潰了。壓根不是手機(jī)性能不夠,就是webview對(duì)于js解析能力不足。當(dāng)然不排除我的代碼有問題,但是針對(duì)edge很快,我就又不想從我的代碼下功夫了,主要是費(fèi)時(shí)間太多了也不解決問題。
解決方案:
在開發(fā)過程中,我發(fā)現(xiàn)webview使用默認(rèn)緩存策略的時(shí)候,第一次慢,短期內(nèi)再訪問會(huì)很快,即使清了緩存也不影響的快,于是我就想如果我在進(jìn)入app的時(shí)候就開始在后臺(tái)加載這個(gè)網(wǎng)址,等我打開webview的時(shí)候,app對(duì)于這個(gè)網(wǎng)站已經(jīng)有了緩存,那訪問不就快了么,你們看到這里,也許已經(jīng)猜出來要怎么做了吧,沒錯(cuò),就是用最不友好的辦法去做,那就是:
在application中創(chuàng)建一個(gè)webview,二話不說,給他設(shè)置個(gè)viewClient就讓他loadUrl,
也不讓他顯示,就是為了加載這個(gè)網(wǎng)址讓他緩存下來,緩存了以后,我再在別處訪問就隨便訪問了。說到這里代碼你們肯定也會(huì)寫了,大致寫寫application中的代碼吧
首先聲明靜態(tài)的webview對(duì)象(這里會(huì)報(bào)一個(gè)警告,就是如果把webview聲明成靜態(tài)變量,那么有可能由于持有該webview的context聲明周期沒有webview長(zhǎng)導(dǎo)致內(nèi)存泄露,但是我們是聲明在application內(nèi)的,我們給的是app的context,擁有app最長(zhǎng)的生命周期,所以不會(huì)出現(xiàn)這個(gè)問題):
companion object {
lateinit var webView:WebView
}
然后再oncreate中賦值并開啟訪問:
//這里的app是application的實(shí)例this
webView = WebView(app)
webView.webViewClient = WebViewClient()
//允許js交互
webView.settings.javaScriptEnabled = true
webView.loadUrl(WebViewActivity.BASE_URL)
然后體驗(yàn)速度就起飛了,(實(shí)際上并沒有加快加載速度,只是體驗(yàn)上加快了速度)
這里就夠了,然后你在app內(nèi)訪問就可以了,開啟一個(gè)默認(rèn)緩存就行。如果你覺得在操作間隔過長(zhǎng)之后再次訪問還是慢那你可以更改一下緩存模式,但是從磁盤讀緩存的話,不利于你日后更新前端代碼。
滿足了客戶的需要就可以了,管他別的呢,當(dāng)然不得不承認(rèn)我這個(gè)方法不算高級(jí),但是卻很有巧思,我只是一個(gè)搬磚工,解決了問題就行,我沒那么高級(jí)。如果你遇到過類似的情況,有vue方面的解決方案,如果愿意在評(píng)論區(qū)講解一番,那我感激不盡,并虛心學(xué)習(xí),要是能加個(gè)好友就更妙了,真的我太需要一個(gè)人給我講講前端vue了。文章來源:http://www.zghlxwxcb.cn/news/detail-780602.html
文章就到這兒了,希望能解決你的問題,如果解決不了你的問題,那我表示遺憾文章來源地址http://www.zghlxwxcb.cn/news/detail-780602.html
到了這里,關(guān)于已解決:安卓自帶的webview加載前端h5項(xiàng)目白屏?xí)r長(zhǎng)嚴(yán)重,vue首頁加載白屏?xí)r間過長(zhǎng),那我讓app進(jìn)入的時(shí)候就提前加載網(wǎng)頁的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!