DIV CSS 佈局教程網

對於不斷發展的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.我們需要讓它變成什麼樣子。

• var domdiff = function(oldid,newid) { 
•         var a1 = document.getElementById(oldid); 
•         var a2 = document.getElementById(newid); 
•         var dd = new diffDOM(); 
•         dd.apply(a2, dd.diff(a2, a1)); 
•     }; 
• var tdomdiff = function(oldid,newid) { 
•    &nbs