對於不斷發展的web應用，效能的優化，使用者的體驗從來都沒有間斷過，如何逆水行舟，不進則退。隨著通訊技術的高速發展，web應用在近幾年快速增加及普及，已經成為人們必不可少的工具，充斥著生活的方方面面，商務，娛樂，旅遊，工作。
隨著使用者規模的日益增大，web應用的內容和功能也變得越來越豐富，各大應用對於使用者的體驗，流量，記憶體，效能優化也越來越高，人們不僅僅要看到自己需要的內容，還對響應速度，動畫的流暢性，瀏覽網頁的等待時間都提出了非常大的要求。
在網頁眉屏優化上，我們盡量採用非同步載入頁面資料的方式來提公升使用者的流暢性，也增加了一些離線模板的技術規劃，而在**的底層元件，我們引入了一下新的方向，去減少使用者點選事件之後對頁面dom節點的操作，從而提公升使用者體驗。
我們希望slarkjs是乙個簡單的，通用的，易了解和使用的框架，而我們的組員也保持著平常心的心態ledfkjuycc去豐富我們的框架，我們希望slarkjs是很多初級的h5開發希望去了解的，去熟悉的，以下我會用很多非常白話文的概念思路去解析我們的框架元件，給一些對h5有興趣，對slarkjs有興趣的前端開發童靴去了解元件化的開發思路與框架的理念。
回到dom優化上，最開始我們打算是引用domdiff的理念，來進行資料對比，而這些資料對比完全是在js中去實現，然後精簡之後來進行dom的操作。舉個簡單的例子，乙個dom節點可能是這樣的：
而我們想把它變成這樣
正常情況我們只有兩種方式，第一種，替換整個ul節點，第二種，將你想要變成的資料迴圈inner進去，這樣我們就有了4次的刪除和5次的新增，但是我們覺得這些dom操作太多了。
其實真實的情況，我們最需要把第四個li中的資料替換，並且在後面新增乙個
2. 我們需要它來對2個引數進行資料對比，並放回乙個list，裡面包含最少量級的dom操作
www.cppcns.com
3. 去實現list
從開發的角度來講，1,3都非常好實現，而第二步，會讓大多數的前端開發覺得頭疼，這時候我們需要介紹兩個很容易被遺忘，並且不會經常用到的屬性nodetpye和childnodes，其實js有很多屬性我們是很少會用到或者說，在我們的業務開發中和技術實現中很少去涉及的，相對來說，這也影響了我們對更深入的技術開發的方向，所以很多時候，我們提倡去看一些開發大拿的**，其實是去看他們都用到了哪些屬性，他們的開發邏輯思維，而並不是去copy他們的**。
nodetype，它會讓我們獲得body元素的節點型別。說得簡單一些，就是讓我們知道當前節點是元素，屬性，文字內容等等
childnodes會讓我們獲得body元素的子節點集合，以nodelist物件。簡單解釋就是返回乙個list，裡面是當前節點下所有的子節點，包括class，文字，select,option等等。
之後就很好去分析我們的構想了，通過nodetype去獲取節點並判斷節點屬性，當然還要去判斷當前頁面的節點是否唯一，然後通過childnodes去對比節點下屬性之間的差異，並且需要增加一些屬性作為標記，比如判斷當前是否應該修改，修改的順序等等。ok，說幹就幹，於是我們有了以下這個邏輯圖
我們在diff中傳建了乙個空的list陣列，然後將2個nodetype傳到finddiff中，finddiff會做兩件事情，在finddiff-out中判斷在body中是否唯一，然後分離其中的資料並在list中增加第乙個修改項，也就是最外層的修改項。然後再finddiff-inner中通過childnodes分析內部結構，並且迴圈去判斷2組資料中是否重疊，這裡有個小問題，就是你需要用用距離值去填充匹配獲相同的內容量，舉個例子：
而我們想把它變成這樣
如果你僅僅是去迴圈判斷重複，那你會在第二步的時候，將5變成2，第三步將6變成3，這樣是乙個很浪費資源的，所以我們需要用距離值去填充，當我們用新資料去迴圈的時候，我們需要在第一次迴圈中判斷引數是否重複，對重複的引數判斷修改值為false，再第二次迴圈中對非重複的引數用距離值去填充資料，最後得出最簡單的list來覆蓋。
這樣的方式，減少了頁面對dom的操作次數，提公升頁面的載入速率和二次載入速率，但是也是有一些坑的，比如：如果頁面dom修改量巨大，在迴圈中會浪費非常多的時間去迴圈判斷重複項，可能會比單獨替換整體dom節點花費更多的時間，所以在domdiff中，需要增加一些判斷，去適應大多數的方式。比如：減少迴圈，如果只是單純的文字替換，我們並不需要去迴圈判斷它的其他屬性，又或者增加閥值，如果執行時間或者資料量超過標準時間進行部分的dom替換，這些都是元件級對**的嚴謹性。
結尾，domdiff其實是為了瀏覽器的優化而做，但是也要適應當前的環境而用，它更像是react虛擬dom理念的前身，有好處也有壞處，使用時候還需謹慎，我們會在今後的1,2個月中，對react-native進行詳細的分析，並且嘗試去融入到我們的框架中，也許會打出分支版，slarkjs-native來支援app的開發，到時候會給大家繼續分享進一步的技術體驗，希望對h5比較有興趣的童靴可以加入到我們的team中，體驗既擁有native的使用者體驗、又保留react的開發效率。
參考文獻
作者簡介王海濱 ，8年網際網路前端開發，任職過中演票務通等網際網路電商平台，14年就任藝龍網前端框架組開發工程師，負責藝龍網前端框架開發。
本文位址: /news/seo/77381.html
2010 03 12網龍筆試小記
郵箱裡的記錄是 3 月 8 日 收到了網龍人力資源部的筆試 面試通知，但我並未注意到，直到 3 月 11 日中午 接到對方的 問我下午有沒有時間安排去筆試，我才發現。後來和對方說實在太倉促了點，所以改到了今天下午筆試。由此意識到投出簡歷以後應該每日檢視一下郵箱，並且，最好有乙個郵箱是專門投放簡歷的。...
2010 03 12網龍筆試小記
郵箱裡的記錄是3月8日收到了網龍人力資源部的筆試 面試通知，但我並未注意到，直到3月11日中午接到對方的 問我下午有沒有時間安排去筆試，我才發現。後來和對方說實在太倉促了點，所以改到了今天下午筆試。由此意識到投出簡歷以後應該每日檢視一下郵箱，並且，最好有乙個郵箱是專門投放簡歷的。雖然說改到了隔天，不...
藝龍的執著與固執 等待微信
20日，藝龍公布了其四季度及全年財報，全年淨虧損1.68億元，而其老對手攜程卻此前一天宣布13年實現淨利潤9.98億元，這也讓一直以攜程挑戰者身份出現在公眾視野中的藝龍頗為尷尬。押寶酒店業務的執著與固執 從崔廣福入主藝龍之初，藝龍就確立了酒店業務這個唯一核心，崔廣福更是奉克勞塞維茨的 戰爭論 為圭臬...