藝龍網前端開發自述:前端渲染最佳化經驗

佚名發表於2015-11-25

網站最佳化 Web最佳化 前端最佳化 效能最佳化

對於不斷髮展的web應用,效能的最佳化,使用者的體驗從來都沒有間斷過,如何逆水行舟,不進則退。隨著通訊技術的高速發展,web應用在近幾年快速增加及普及,已經成為人們必不可少的工具,充斥著生活的方方面面,商務,娛樂,旅遊,工作。

隨著使用者規模的日益增大,web應用的內容和功能也變得越來越豐富,各大應用對於使用者的體驗,流量,記憶體,效能最佳化也越來越高,人們不僅僅要看到自己需要的內容,還對響應速度,動畫的流暢性,瀏覽網頁的等待時間都提出了非常大的要求。

在網頁首屏最佳化上,我們儘量採用非同步載入頁面資料的方式來提升使用者的流暢性,也增加了一些離線模板的技術規劃,而在程式碼的底層元件,我們引入了一下新的方向,去減少使用者點選事件之後對頁面DOM節點的操作,從而提升使用者體驗。

我們希望slarkjs是一個簡單的,通用的,易瞭解和使用的框架,而我們的組員也保持著平常心的心態去豐富我們的框架,我們希望slarkjs是很多初級的h5開發希望去了解的,去熟悉的,以下我會用很多非常白話文的概念思路去解析我們的框架元件,給一些對h5有興趣,對slarkjs有興趣的前端開發童靴去了解元件化的開發思路與框架的理念。

回到dom最佳化上,最開始我們打算是引用domdiff的理念,來進行資料對比,而這些資料對比完全是在js中去實現,然後精簡之後來進行dom的操作。舉個簡單的例子,一個dom節點可能是這樣的:

  1. <ul>
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. </ul>

而我們想把它變成這樣

  1. <ul>
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>5</li>
  6. <li>6</li>
  7. </ul>

正常情況我們只有兩種方式,第一種,替換整個ul節點,第二種,將你想要變成的資料迴圈inner進去,這樣我們就有了4次的刪除和5次的新增,但是我們覺得這些dom操作太多了。

其實真實的情況,我們最需要把第四個li中的資料替換,並且在後面新增一個<li>6/li>就能達到我們需要的結果,我們需要一個元件來幫助我們對dom節點的操作進行分析。一般的domdiff應用都存在於大多數的聊天室,評論區,一些頻繁的dom替換的場所,我們希望他是一個小型的,方便應用的,適合框架的一個小應用。

在開發期間,我們還花費了將近兩週的時間對現在非常流行的react及react-native進行了詳細的技術調研,我不得不說,react的開發效率是我目前所見最快速的框架,他的模組化開發思路,虛擬dom的理念都是我非常喜歡的一種方式,並且我們嘗試了將它合併進slarkjs框架,開始我們只希望讓它來負責view層的重繪工作,但是在實踐中我們其實更希望它能負責更多的內容,可惜的是,react來web層面的使用,還有一定侷限性,並且需要大量的開發時間來修改一些元件,很遺憾我們暫時停滯了這個專案的開發進度,但react-native在app上的開發,卻是一個潛能無限的壯舉,在之後的文章中,我們會持續的給大家帶來slarkjs框架是如何吸收react-native並融入到app的開發。現在我們先回到domdiff的思路邏輯中。首先,我們在構建domdiff中,想法是很簡單的,

1. 我們需要它來接收2個引數,1.現在頁面上的節點,2.我們需要讓它變成什麼樣子。

  • vardomdiff=function(oldid,newid){
  • vara1=document.getElementById(oldid);
  • vara2=document.getElementById(newid);
  • vardd=newdiffDOM();
  • dd.apply(a2,dd.diff(a2,a1));
  • };
  • vartdomdiff=function(oldid,newid){
  • vara2=document.getElementById(oldid);
  • vara3=document.createElement('div');
  • a3.innerHTML=newid;
  • vardd=newdiffDOM();
  • dd.apply(a2,dd.diff(a2,a3));
  • };

2. 我們需要它來對2個引數進行資料對比,並放回一個list,裡面包含最少量級的dom操作

  1. if(!tree1||!tree2){
  2. returnfalse;
  3. }
  4. if(tree1.nodeType!==tree2.nodeType){
  5. returnfalse;
  6. }
  7. if(tree1.nodeType===3){
  8. if(tree2.nodeType!==3){
  9. returnfalse;
  10. }
  11. returnpreventRecursion?true:tree1.data===tree2.data;
  12. }
  13. if(tree1.nodeName!==tree2.nodeName){
  14. returnfalse;
  15. }
  16. if(tree1.tagName===tree2.tagName){
  17. ....
  18. }
  19. if(tree1.childNodes.length!==tree2.childNodes.length){
  20. returnfalse;
  21. }

3. 去實現list

  1. Object.keys(options).forEach(function(t){
  2. diff[t]=options[t];
  3. });

從開發的角度來講,1,3都非常好實現,而第二步,會讓大多數的前端開發覺得頭疼,這時候我們需要介紹兩個很容易被遺忘,並且不會經常用到的屬性nodeTpye和childNodes,其實JS有很多屬性我們是很少會用到或者說,在我們的業務開發中和技術實現中很少去涉及的,相對來說,這也影響了我們對更深入的技術開發的方向,所以很多時候,我們提倡去看一些開發大拿的程式碼,其實是去看他們都用到了哪些屬性,他們的開發邏輯思維,而並不是去copy他們的程式碼。

NodeType,它會讓我們獲得body元素的節點型別。說得簡單一些,就是讓我們知道當前節點是元素,屬性,文字內容等等

ChildNodes會讓我們獲得body元素的子節點集合,以NodeList物件。簡單解釋就是返回一個list,裡面是當前節點下所有的子節點,包括class,文字,select,option等等。

之後就很好去分析我們的構想了,透過NodeType去獲取節點並判斷節點屬性,當然還要去判斷當前頁面的節點是否唯一,然後透過ChildNodes去對比節點下屬性之間的差異,並且需要增加一些屬性作為標記,比如判斷當前是否應該修改,修改的順序等等。OK,說幹就幹,於是我們有了以下這個邏輯圖

網站最佳化 Web最佳化 前端最佳化 效能最佳化

我們在diff中傳建了一個空的list陣列,然後將2個nodeType傳到finddiff中,finddiff會做兩件事情,在finddiff-out中判斷在body中是否唯一,然後分離其中的資料並在list中增加第一個修改項,也就是最外層的修改項。然後再Finddiff-inner中透過ChildNodes分析內部結構,並且迴圈去判斷2組資料中是否重疊,這裡有個小問題,就是你需要用用距離值去填充匹配獲相同的內容量,舉個例子:

  1. <ul>
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. </ul>

而我們想把它變成這樣

  1. <ul>
  2. <li>1</li>
  3. <li>5</li>
  4. <li>6</li>
  5. <li>3</li>
  6. <li>4</li>
  7. </ul>

如果你僅僅是去迴圈判斷重複,那你會在第二步的時候,將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的開發效率。

參考文獻

http://www.w3school.com.cn/jsref/prop_node_nodetype.asp

http://www.w3school.com.cn/jsref/prop_node_childnodes.asp

https://github.com/Seven-wang/react

作者簡介 王海濱 ,8年網際網路前端開發,任職過中演票務通等網際網路電商平臺,14年就任藝龍網前端框架組開發工程師,負責藝龍網前端框架開發。

相關文章