媒介
淘寶新勢力周（春上新）是運氣石kimi鏈路（H5鏈路）第一次承接S級大促，面臨S級大促內容豐富且龐雜的頁面需求，kimi鏈路碰到了一些機能題目，在未舉行機能優化之前，搭建出來的頁面，營業方廣泛反應頁面卡頓嚴峻，沒法滑動。
由於時興女裝會場是反應比較嚴峻的頁面之一，所以我以時興女裝會場為例子，引見下此次機能優化的詳細計劃。時興女裝會場頁面模塊在18個擺布，頁面上的img標籤數目在200擺布，頁面總長度 31208px，以iPhone6頁面一屏736px為規範，統共能分為42.4屏擺布。為何我要特別把img標籤寫出來呢？由於此次的機能卡頓重要的緣由是由於毛病運用圖片懶加載引發的。
經由歷程performance圖排查機能題目
當代的web機能優化離不開chrome devtool里performance的協助，我們先來看一張未優化之前 performance的截圖
這張performance圖我們重要看三個部份：第一個是最上面FPS紅線的部份，紅線代表着這段時候內未到達60FPS每幀；第二部份是Frames的耗時，勾選了Screenshots后我們能看到每幀的耗時；第三部份是下面函數耗時，我們能從函數耗時里剖析出來究竟是哪段代碼block住了頁面襯着，致使卡幀。
從上面的圖可以看到最長的一幀耗時3.37秒，這致使FPS都快靠近0了。
把函數耗時圖拉大剖析內里耗時最長的函數，可以看到耗時最長的函數是inview函數，這個函數是圖片懶加載庫內里搜檢當前圖片是不是在屏幕中心的函數。
圖片懶加載庫的基礎邏輯是：當挪用初始化函數時馬上搜檢當前頁面上一切未真正加載的圖片，推斷是不是須要加載。當頁面舉行滑動時，反覆搜檢一切圖片的邏輯。
此次機能題目的緣由和處理計劃
卡頓掉幀的緣由：此次搭建出來的頁面運用的是外包同硯開闢的營業模塊，在模塊內部手動挪用了lazyLoad初始函數，所以每初始化一個模塊就會馬上搜檢一切未加載圖片，當頁面上圖片數目不停增進的時刻，inview函數的耗時也不停增添，搜檢一個圖片是不是在頁面的耗時是2ms~5ms，假如頁面中有100個圖片未加載當頁面滑動時每一次搜檢會耗時200ms~500ms，假如搜檢是同步操縱的話，掉幀險些沒法防止。
優化計劃：之前的其他鏈路的優化計劃是模塊懶加載，然後lazyload一致挪用，然則由於此次離上線時候較慌張，讓外包返工改模塊風險較大，因而有別的的一個優化計劃：圖片懶加載庫的異步化，只需防止函數實行耗時太長壅塞襯着，就可以防止卡幀，假定我們有100張圖片，我們分多批次舉行搜檢，防止一次搜檢一切圖片壅塞襯着。別的針對模塊初始化時頻仍的搜檢一切圖片的題目，我們給這段邏輯加上debounce函數和圖片緩存行列。
優化的歷程
優化1.0：
在我接辦之前，有一版優化是將模塊的襯着經由歷程setTimeout函數改成異步的；這個優化是險些沒有結果的，優化后頁面依舊卡頓掉幀，由於這個優化並沒有找到頁面卡頓的緣由。最少也應當將setTimeout改成RAF。固然模塊的延時加載並不能處理卡頓題目，然則模塊的懶加載能處理一部份題目。下面我們看一張運用模塊懶加載后的performance圖
模塊懶加載后，一長條赤色塊已變成了短條的赤色塊，然則由於模塊內部零丁運用圖片懶加載致使頻仍搜檢一切圖片是不是在可視範圍內的題目照樣沒有得到處理，最長的一幀到達855ms，依舊存在掉幀。
優化2.0：
圖片懶加載異步版本：經由歷程對圖片懶加載庫的革新，1、初始化時加上debound優化和圖片緩存行列，2、分批搜檢圖片。我們在看一下優化后的performance圖
赤色的條塊也消逝，看下面函數實行變的又長有尖，這是由於搜檢圖片的操縱變成異步分批了。
圖片懶加載庫革新時碰到的題目：
在將圖片懶加載革新成異步的時刻碰到了一個題目，就和Java多線程一樣，許多時刻異步我們也願望是有序的異步。
分批搜檢的有序是比較輕易保證的，將圖片分紅多批，一批一批舉行，再末了一批結束使命。然則題目出在分批搜檢和圖片懶加載模塊初始化存在交替運轉的狀況，而這兩個使命都邑轉變一個變量。假如不能處理這個題目，就會湧現圖片有時刻能一般加載，有時刻加載不出來的狀況。所以有說法是，大部份偶現的題目都是異步并行的題目。
處理這個題目的思緒也比較罕見，就是經由歷程鎖，當一個操縱異步變量的使命開啟，我們的鎖自增1，完成異步使命時自減，圖片懶加載庫的圖片緩存初始行列比及異步鎖開釋后再舉行搜檢，不然存入緩存行列，守候下一幀再搜檢。
總結
優化事後，對應罕見的機型基礎能保證頁面流通不卡頓。chrome的performance圖基礎上和真機操縱的狀況保持一致，假如performance湧現掉幀，那iPhone6s上和android上基礎也會湧現掉幀，然則iPhone7以上的机械卻可能感覺不明顯。經由歷程performance可以疾速定位掉幀的題目，經由歷程處理這些題目實質性的優化頁面機能，而不是經由歷程猜想舉行無效優化。
