1. 客戶端緩存靜態(tài)文件
客戶端在feed流提前加載頁(yè)面所需要的靜態(tài)資源伦腐，提前調(diào)用所需要調(diào)用的接口管闷，這部分優(yōu)化節(jié)省了很多時(shí)間遏考。
優(yōu)點(diǎn)：
節(jié)省了很多靜態(tài)資源加載所需要的時(shí)間
缺點(diǎn)：
在feed流會(huì)很消耗用戶的流量捂人，一些用戶不想點(diǎn)進(jìn)來(lái)的頁(yè)面也會(huì)消耗流量去加載
2. 客戶端識(shí)別文章title取消loading效果
前景：
loading效果是客戶端做的逐纬，為什么不在H5做loading效果呢蛔屹，因?yàn)镠5頁(yè)面的loading需要在H5頁(yè)面開始加載才會(huì)出來(lái)，這樣就會(huì)有剛開始用戶點(diǎn)開頁(yè)面是空白的效果豁生，體驗(yàn)太差了兔毒，所以loading做到了客戶端，客戶端在識(shí)別文章加載完成之后取消loading效果甸箱，這樣為了用戶體驗(yàn)更好育叁。
問題：
之前是識(shí)別文章加載完成之后取消loading效果，這樣用戶等待的時(shí)間太長(zhǎng)了芍殖，其實(shí)文章已經(jīng)在頁(yè)面加載完成之前就出現(xiàn)了豪嗽。
解決：
所以和客戶端商量做一個(gè)小優(yōu)化，就是在客戶端檢測(cè)到詳情頁(yè)出現(xiàn)title的時(shí)候取消loading框，因?yàn)榭蛻舳藱z測(cè)到文章title的時(shí)候就意味著文章已經(jīng)加載完了昵骤，但是后續(xù)的相關(guān)推薦和評(píng)論可能并沒有加載完树碱，但是用戶首屏其實(shí)看不到相關(guān)推薦和評(píng)論，所以不會(huì)影響用戶體驗(yàn)变秦，這樣既不會(huì)出現(xiàn)空白的瞬間成榜，還可以讓用戶先看到文章，后續(xù)加載相關(guān)推薦和評(píng)論蹦玫。體驗(yàn)上升一個(gè)level赎婚。
優(yōu)點(diǎn)：
進(jìn)一步減少了用戶的等待時(shí)間
缺點(diǎn)：
暫未發(fā)現(xiàn)缺點(diǎn)
3. 將圖片都進(jìn)行懶加載模式
先加載文章，根據(jù)用戶滑動(dòng)到位置去加載圖片樱溉，在加載速度方面其實(shí)并沒有加快多少挣输，1.5s~2s加載的文章，做了這項(xiàng)優(yōu)化大概能加快100ms左右福贞。
優(yōu)點(diǎn)：
速度加快了撩嚼，但是并不多
缺點(diǎn)：
如果首屏有圖片的情況下，體驗(yàn)不是很好挖帘，會(huì)后出來(lái)圖片完丽，做了一個(gè)優(yōu)化，就是首屏的圖片不使用懶加載解決了這個(gè)問題
4. 將JS合并拇舀，CSS合并逻族，壓縮
將第三方JS和自己寫的JS合并壓縮，將CSS合并壓縮骄崩，頁(yè)面只引用一個(gè)JS和一個(gè)CSS聘鳞。減少靜態(tài)資源加載所消耗的時(shí)間，會(huì)優(yōu)化100ms左右要拂。
優(yōu)點(diǎn)：
靜態(tài)資源少抠璃，加載所消耗的時(shí)間短
缺點(diǎn)：
后續(xù)維護(hù)不好維護(hù)，所以留了一般初版
5. 修改詳情頁(yè)的框架
之前的幾個(gè)操作都是在用vue寫的前提下操作的宇弛，所以看到的作用都不是很大鸡典，所以我就研究了一下市面上一些新聞?lì)恆pp的詳情頁(yè)，發(fā)現(xiàn)所有的頁(yè)面都是用jquery枪芒，沒有用vue寫的，后來(lái)通過研究谁尸，vue其實(shí)在加載的時(shí)候會(huì)重新渲染dom舅踪，導(dǎo)致了加載太慢。
優(yōu)點(diǎn)：
頁(yè)面渲染加快了一倍的速度良蛮，在之前1.5s~2s打開一個(gè)詳情頁(yè)的情況下降低到了在1s內(nèi)讓用戶可以看到文章抽碌。
缺點(diǎn)：
缺點(diǎn)就是人工耗費(fèi)的時(shí)間太長(zhǎng)，兩個(gè)不同的框架在重構(gòu)的時(shí)候會(huì)有很多思想不一樣的地方，需要重新捋清楚一遍之前的邏輯重新寫货徙。
后續(xù)還可以做的優(yōu)化
之前在研究一些市面上的新聞app時(shí)左权，發(fā)現(xiàn)有部分app是通過后端渲染文章頁(yè)面，執(zhí)行前端的JS痴颊，去后續(xù)渲染相關(guān)推薦和評(píng)論的赏迟，這種操作可以讓用戶更早的去看到文章內(nèi)容。這項(xiàng)優(yōu)化只有做過才知道能優(yōu)化多少蠢棱，但是因?yàn)楹蠖巳肆Σ蛔阈可保赃@個(gè)優(yōu)化沒有在這兩次迭代中做。
總結(jié)：
經(jīng)過這一系列優(yōu)化的采坑泻仙，發(fā)現(xiàn)在以后做一些市面上已經(jīng)有的東西時(shí)糕再，可以去提前借鑒一些他們的案例，這樣在后續(xù)開發(fā)中可以減輕開發(fā)人員的工作量玉转。咱們的詳情頁(yè)加載慢突想，我覺得很大一部分是因?yàn)楫?dāng)時(shí)在選擇使用的框架時(shí)沒有選擇好。
