国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淘寶新勢(shì)力周H5性能優(yōu)化實(shí)戰(zhàn)

Lionad-Morotar / 1028人閱讀

摘要：前言淘寶新勢(shì)力周春上新是命運(yùn)石鏈路鏈路第一次承接級(jí)大促，面對(duì)級(jí)大促內(nèi)容豐富且復(fù)雜的頁面需求，鏈路遇到了一些性能問題，在未進(jìn)行性能優(yōu)化之前，搭建出來的頁面，業(yè)務(wù)方普遍反饋頁面卡頓嚴(yán)重，無法滑動(dòng)。

前言

淘寶新勢(shì)力周（春上新）是命運(yùn)石kimi鏈路（H5鏈路）第一次承接S級(jí)大促，面對(duì)S級(jí)大促內(nèi)容豐富且復(fù)雜的頁面需求，kimi鏈路遇到了一些性能問題，在未進(jìn)行性能優(yōu)化之前，搭建出來的頁面，業(yè)務(wù)方普遍反饋頁面卡頓嚴(yán)重，無法滑動(dòng)。

因?yàn)闀r(shí)髦女裝會(huì)場(chǎng)是反饋比較嚴(yán)重的頁面之一，所以我以時(shí)髦女裝會(huì)場(chǎng)為例子，介紹下這次性能優(yōu)化的具體方案。時(shí)髦女裝會(huì)場(chǎng)頁面模塊在18個(gè)左右，頁面上的img標(biāo)簽數(shù)量在200左右，頁面總長(zhǎng)度 31208px，以iPhone6頁面一屏736px為標(biāo)準(zhǔn)，總共能分為42.4屏左右。為什么我要特別把img標(biāo)簽寫出來呢？因?yàn)檫@次的性能卡頓主要的原因是因?yàn)殄e(cuò)誤使用圖片懶加載引起的。

通過performance圖排查性能問題

現(xiàn)代的web性能優(yōu)化離不開chrome devtool里performance的幫助，我們先來看一張未優(yōu)化之前 performance的截圖

這張performance圖我們主要看三個(gè)部分：第一個(gè)是最上面FPS紅線的部分，紅線代表著這段時(shí)間內(nèi)未達(dá)到60FPS每幀；第二部分是Frames的耗時(shí)，勾選了Screenshots后我們能看到每幀的耗時(shí)；第三部分是下面函數(shù)耗時(shí)，我們能從函數(shù)耗時(shí)里分析出來到底是哪段代碼block住了頁面渲染，導(dǎo)致卡幀。

從上面的圖可以看到最長(zhǎng)的一幀耗時(shí)3.37秒，這導(dǎo)致FPS都快接近0了。

把函數(shù)耗時(shí)圖拉大分析里面耗時(shí)最長(zhǎng)的函數(shù)，可以看到耗時(shí)最長(zhǎng)的函數(shù)是inview函數(shù)，這個(gè)函數(shù)是圖片懶加載庫里面檢查當(dāng)前圖片是否在屏幕中間的函數(shù)。

圖片懶加載庫的基本邏輯是：當(dāng)調(diào)用初始化函數(shù)時(shí)立即檢查當(dāng)前頁面上所有未真正加載的圖片，判斷是否需要加載。當(dāng)頁面進(jìn)行滑動(dòng)時(shí)，重復(fù)檢查所有圖片的邏輯。

這次性能問題的原因和解決方案

卡頓掉幀的原因：這次搭建出來的頁面使用的是外包同學(xué)開發(fā)的業(yè)務(wù)模塊，在模塊內(nèi)部手動(dòng)調(diào)用了lazyLoad初始函數(shù)，所以每初始化一個(gè)模塊就會(huì)立即檢查所有未加載圖片，當(dāng)頁面上圖片數(shù)量不斷增長(zhǎng)的時(shí)候，inview函數(shù)的耗時(shí)也不斷增加，檢查一個(gè)圖片是否在頁面的耗時(shí)是2ms~5ms，如果頁面中有100個(gè)圖片未加載當(dāng)頁面滑動(dòng)時(shí)每一次檢查會(huì)耗時(shí)200ms~500ms，如果檢查是同步操作的話，掉幀幾乎無法避免。

優(yōu)化方案：之前的其他鏈路的優(yōu)化方案是模塊懶加載，然后lazyload統(tǒng)一調(diào)用，但是因?yàn)檫@次離上線時(shí)間較緊張，讓外包返工改模塊風(fēng)險(xiǎn)較大，于是有另外的一個(gè)優(yōu)化方案：圖片懶加載庫的異步化，只要避免函數(shù)執(zhí)行耗時(shí)過長(zhǎng)阻塞渲染，就能避免卡幀，假設(shè)我們有100張圖片，我們分多批次進(jìn)行檢查，避免一次檢查所有圖片阻塞渲染。另外針對(duì)模塊初始化時(shí)頻繁的檢查所有圖片的問題，我們給這段邏輯加上debounce函數(shù)和圖片緩存隊(duì)列。

優(yōu)化的過程 優(yōu)化1.0：

在我接手之前，有一版優(yōu)化是將模塊的渲染通過setTimeout函數(shù)改成異步的；這個(gè)優(yōu)化是幾乎沒有效果的，優(yōu)化后頁面依然卡頓掉幀，因?yàn)檫@個(gè)優(yōu)化并沒有找到頁面卡頓的原因。起碼也應(yīng)該將setTimeout改成RAF。當(dāng)然模塊的延時(shí)加載并不能解決卡頓問題，但是模塊的懶加載能解決一部分問題。下面我們看一張使用模塊懶加載后的performance圖

模塊懶加載后，一長(zhǎng)條紅色塊已經(jīng)變成了短條的紅色塊，但是因?yàn)槟K內(nèi)部多帶帶使用圖片懶加載導(dǎo)致頻繁檢查所有圖片是否在可視范圍內(nèi)的問題還是沒有得到解決，最長(zhǎng)的一幀達(dá)到855ms，依然存在掉幀。

優(yōu)化2.0：

圖片懶加載異步版本：通過對(duì)圖片懶加載庫的改造，1、初始化時(shí)加上debound優(yōu)化和圖片緩存隊(duì)列，2、分批檢查圖片。我們?cè)诳匆幌聝?yōu)化后的performance圖

紅色的條塊也消失，看下面函數(shù)執(zhí)行變的又長(zhǎng)有尖，這是因?yàn)闄z查圖片的操作變成異步分批了。

圖片懶加載庫改造時(shí)遇到的問題：

在將圖片懶加載改造成異步的時(shí)候遇到了一個(gè)問題，就和Java多線程一樣，很多時(shí)候異步我們也希望是有序的異步。

分批檢查的有序是比較容易保證的，將圖片分成多批，一批一批進(jìn)行，再最后一批結(jié)束任務(wù)。但是問題出在分批檢查和圖片懶加載模塊初始化存在交替運(yùn)行的情況，而這兩個(gè)任務(wù)都會(huì)改變一個(gè)變量。如果不能解決這個(gè)問題，就會(huì)出現(xiàn)圖片有時(shí)候能正常加載，有時(shí)候加載不出來的情況。所以有說法是，大部分偶現(xiàn)的問題都是異步并行的問題。

解決這個(gè)問題的思路也比較常見，就是通過鎖，當(dāng)一個(gè)操作異步變量的任務(wù)開啟，我們的鎖自增1，完成異步任務(wù)時(shí)自減，圖片懶加載庫的圖片緩存初始隊(duì)列等到異步鎖釋放后再進(jìn)行檢查，否則存入緩存隊(duì)列，等待下一幀再檢查。

總結(jié)

優(yōu)化過后，對(duì)應(yīng)常見的機(jī)型基本能保證頁面流暢不卡頓。chrome的performance圖基本上和真機(jī)操作的情況保持一致，如果performance出現(xiàn)掉幀，那iPhone6s上和android上基本也會(huì)出現(xiàn)掉幀，但是iPhone7以上的機(jī)器卻可能感受不明顯。通過performance能夠快速定位掉幀的問題，通過解決這些問題實(shí)質(zhì)性的優(yōu)化頁面性能，而不是通過猜測(cè)進(jìn)行無效優(yōu)化。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94215.html

相關(guān)文章

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡(jiǎn)稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    zxhaaa 評(píng)論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡(jiǎn)稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    JouyPub 評(píng)論0 收藏0

  • 前端資源分享-只為更好前端

    摘要：一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì)，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì)，簡(jiǎn)稱，騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì)，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

    vslam 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<