最近在做一個(gè)微信端的小項(xiàng)目，前端代碼寫(xiě)完后，就放在手機(jī)端測(cè)試，沒(méi)什么問(wèn)題，但是頁(yè)面在加載和渲染時(shí)的效果卻讓人有些不爽，雖然是個(gè)小項(xiàng)目，我大可不必做這些，但是看著頁(yè)面的閃動(dòng)，就忍不住想做些什么。
先說(shuō)說(shuō)問(wèn)題吧：
上面是首頁(yè)效果圖，其實(shí)在最開(kāi)始的時(shí)候并沒(méi)有考慮web端，這圖是給IOS和安卓native App用的。為了方面兩個(gè)本地APP的開(kāi)發(fā)，所以上面的圖中，除了那幾個(gè)科目和下面的tabBar，其余都是圖片。
因?yàn)槎际菆D片，所以布局真的是挺簡(jiǎn)單，但是問(wèn)題也隨之來(lái)了，幾張圖片都是通過(guò)img標(biāo)簽的src屬性去請(qǐng)求的，所以在刷新或者跳轉(zhuǎn)的時(shí)候，會(huì)有明顯的空白閃動(dòng)。
因?yàn)槊繌垐D片都會(huì)有請(qǐng)求，這樣就會(huì)有排隊(duì)等候的時(shí)間，獲取到圖片后再渲染繪制，這樣就造成了頁(yè)面每個(gè)圖片區(qū)域都會(huì)有短暫的空白閃動(dòng)。
我的解決方法則是通過(guò)base64，可以比較下兩者的network情況：
1.請(qǐng)求時(shí)間比較
1.首次加載無(wú)緩存
（圖片通過(guò)請(qǐng)求獲取的情況）
