藝龍網前端開發自述：前端渲染優化經驗

對于不斷發展的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){

&nbs

123下一頁

文章題目：藝龍網前端開發自述：前端渲染優化經驗
標題來源：http://m.kartarina.com/news27/85477.html

成都網站建設公司_創新互聯，為您提供商城網站、定制網站、網站收錄、App開發、外貿網站建設、移動網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯