高效襯着大型列表的相應式組件
- 運用窗口特徵，即在一個轉動的範圍內，顯現你給定數據的一小部份，大批縮減了顯現組件所需的時刻，以及建立DOM節點的數目。
- 瑕玷：滑動過快，能夠會湧現空缺的狀態。
前端典範題目，在JS中操縱襯着大批DOM
- 在JS當中直接操縱DOM，會致使機能嚴峻下落，所以襯着長列表（也就是大批DOM），會致使瀏覽器卡頓嚴峻，甚至有能夠湧現假死狀態。（這裏延長一個題外話，不經由歷程JS襯着大批DOM是不會有這個題目的，然則我們很少這麼干😂感興趣的同硯能夠看接下來的襯着剖析）
而處置懲罰這類題目的計劃主要有這幾種
- 轉動加載，逐漸襯着DOM（分頁，一個意義）。
- 經由歷程合理的邏輯來限定僅襯着可視地區部份。
- 算是1的變種，寫一個異步輪迴襯着，經由歷程異步的體式格局，給瀏覽器實行別的task的時機。（React異步襯着能夠關注一下哦）
- 1,3兩種計劃都邑碰到一個題目，DOM構造假如過大, 網頁就會湧現用戶操縱體驗上的題目, 比方轉動, 點擊等常常使用操縱，當用戶點擊須要再操縱DOM時, 就會湧現卡頓。
- 所以我們本日主要議論的是計劃2，也就是前端碰到一些沒法運用分頁體式格局來加載的列表。（畢竟有現成的第三方嘛）
先溫習一下瀏覽器襯着歷程(webkit)
HTML跟CSS劃定規矩剖析
- 處置懲罰 HTML 標記並構建 DOM 樹。
- 處置懲罰 CSS 標記並構建 CSSOM(Style Rules) 樹。
- 將 DOM 與 CSSOM 兼并成一個襯着樹(Render Tree)。
- 依據襯着樹(Layout)來規劃，以盤算每一個節點的多少信息。
- 將各個節點繪製(Painting)到屏幕上
注重點:
- Render Tree 襯着樹並不等同於 DOM Tree，因為一些像 Header標籤 或 display:none 的東西就沒必要放在襯着樹中。
- CSS 的Rule Tree 主要是為了完成婚配並把CSS Rule附加上 Render Tree 上的每一個 Element，也就是 DOM 節點，也就是所謂的 Frame。
- 有了Render Tree，瀏覽器已能曉得網頁中有哪些節點、各個節點的CSS定義以及它們的從屬關係。
- 然後，盤算每一個 Frame（也就是每一個Element）的位置，這又叫 layout 和 reflow 歷程
五個步驟並不一定一次性遞次完成。假如 DOM 或 CSSOM 被修正，以上歷程須要反覆實行，如許才盤算出哪些像素須要在屏幕上舉行從新襯着。現實頁面中，CSS 與 JavaScript 往往會屢次修正 DOM 和 CSSOM。
- JavaScript：一般來講，我們會運用 JavaScript 來完成一些視覺變化的效果。比方做一個動畫或許往頁面里增加一些 DOM 元素等。
- Style：盤算款式，這個歷程是依據 CSS 選擇器，對每一個 DOM 元素婚配對應的 CSS 款式。這一步完畢以後，就肯定了每一個 DOM 元素上該運用什麼 CSS 款式劃定規矩。
- Layout：規劃，上一步肯定了每一個 DOM 元素的款式劃定規矩，這一步就是詳細盤算每一個 DOM 元素終究在屏幕上顯現的大小和位置。web 頁面中元素的規劃是相對的，因而一個元素的規劃發作變化，會聯動地激發其他元素的規劃發作變化。比方， 元素的寬度的變化會影響其子元素的寬度，其子元素寬度的變化也會繼承對其孫子元素產生影響。因而關於瀏覽器來講，規劃歷程是常常發作的。
- Paint：繪製，本質上就是添補像素的歷程。包含繪製筆墨、色彩、圖象、邊框和暗影等，也就是一個 DOM 元素一切的可視效果。一般來講，這個繪製歷程是在多個層上完成的。
Composite：襯着層兼并，由上一步可知，對頁面中 DOM 元素的繪製是在多個層上舉行的。在每一個層上完成繪製歷程以後，瀏覽器會將一切層根據合理的遞次兼并成一個圖層，然後顯現在屏幕上。關於有位置堆疊的元素的頁面，這個歷程特別主要，因為一旦圖層的兼并遞次失足，將會致使元素顯現非常。
- 這裏還觸及到了層（GraphicsLayer）的觀點，GraphicsLayer 層是作為紋理(texture)上傳給 GPU 的，偶然頁面的一次襯着是CPU跟GPU配合協作的效果。
總流程圖
為何在React中襯着大批DOM會致使瀏覽器假死(15.x)？
- 事宜觸發線程：當一個事宜被觸發時(鼠標點擊，鍵盤敲擊等)該線程會把事宜增加到待處置懲罰行列的隊尾，守候JS引擎的處置懲罰。
- React運用 Virtual DOM跟diff算法來優化DOM的變動，這也意味着React在襯着出實在DOM的時刻，一切的Virtual DOM樹都在JS內存中。
- 而且React不會有一次更新就實行一次革新操縱，而是把一切的差別對照，放到一個差別行列，再一次性去實行patch要領舉行更新與襯着（時刻長）。
- 比及GUI線程去襯着實在的DOM時，因為襯着的DOM量太大，GUI實行的時刻也會很長（頁面會湧現空缺等狀態）。
部份API的運用
- List
- AutoSizer、CellMeasurer跟List(自適應寬高)
- InfiniteLoader跟List(轉動加載)
