最近的困境
由于公司項(xiàng)目是原生+web的混合開(kāi)發(fā)，而且web所占的比例還比較大历极，所以對(duì)web在移動(dòng)端上的表現(xiàn)要求比較高趟卸。之前一直采用的是直接使用WebView來(lái)加載锄列，不做其他優(yōu)化，所以在弱網(wǎng)環(huán)境下經(jīng)常會(huì)出現(xiàn)白屏，出現(xiàn)概率較高，不一定能復(fù)現(xiàn)规惰。雖然原生這邊能監(jiān)聽(tīng)WebView的加載情況，但是只能知道加載成功或者失敗贪磺，出現(xiàn)白屏的情況并不完全是加載失敗寒锚，很大可能是資源未下載完畢喇喉，導(dǎo)致Dom沒(méi)法渲染所致校坑。所以問(wèn)題出現(xiàn)在資源的加載上莫辨。
尋找解決之道
通過(guò)抓包發(fā)現(xiàn)問(wèn)題確實(shí)是出現(xiàn)在Web資源的加載上烫幕，加載的資源大都在百K以上，而且沒(méi)有開(kāi)啟cache-control捷犹，反復(fù)加載的話浪費(fèi)流量萍歉，在弱網(wǎng)環(huán)境下容易加載失敗档桃。針對(duì)這種弱網(wǎng)優(yōu)化藻肄，大概有幾種方案：
1拯杠、減少資源大小
2、合并資源請(qǐng)求
3宿百、緩存優(yōu)化
4....
切合業(yè)務(wù)場(chǎng)景的方案
這里只討論緩存優(yōu)化忿峻。開(kāi)啟緩存優(yōu)化薄啥，一般要在HTTP的返回頭中設(shè)置cache-control字段，然后再設(shè)置ETag/Last Modified字段逛尚。但這里有個(gè)問(wèn)題垄惧，由于各個(gè)瀏覽器內(nèi)核不一樣，對(duì)緩存支持不一定一樣绰寞，部分瀏覽器緩存時(shí)間可能比返回預(yù)設(shè)的時(shí)間要長(zhǎng)到逊，這就導(dǎo)致為什么有時(shí)候明明發(fā)布上去了，瀏覽器上的版本還是舊的滤钱，需要清除緩存觉壶。
當(dāng)然，對(duì)于這個(gè)問(wèn)題菩暗，是有標(biāo)準(zhǔn)解的掰曾。
- 文件hash值
- url上加上timestamp參數(shù)
對(duì)于文件hash值這種方案停团，就是每次發(fā)新版都要重新生成一個(gè)帶有hash值的文件名掏熬。例如：
index.csd123.js
修改后，再重新發(fā)版就是
index.dfd44.js
因?yàn)槲募兞松嘟海琖ebView再去讀取的時(shí)候原來(lái)的緩存會(huì)失效疮丛，所以會(huì)重新加載。
對(duì)于url加上timestamp參數(shù)
則是請(qǐng)求的參數(shù)變化履恩，導(dǎo)致url變化呢蔫，所以對(duì)于webview來(lái)說(shuō)相當(dāng)于請(qǐng)求了一個(gè)新的不同的資源，所以舊的緩存一樣會(huì)失效绽昏。
這兩種方案的原理基本一樣，都是url發(fā)生變化肤晓，觸發(fā)新資源請(qǐng)求機(jī)制认然，使得緩存失效季眷，實(shí)現(xiàn)全量刷新。
總結(jié)
對(duì)于移動(dòng)端來(lái)說(shuō)子刮，與web的交互是必不可少的，了解一些web的機(jī)制葵孤，對(duì)于做優(yōu)化設(shè)計(jì)是必不可少的∮热裕現(xiàn)在移動(dòng)端越來(lái)越要求懂web，大前端的趨勢(shì)看來(lái)是不可阻擋的了宰啦。
