藝龍網(wǎng)前端開發(fā)自述：前端渲染優(yōu)化經(jīng)驗(yàn)

對于不斷發(fā)展的web應(yīng)用，性能的優(yōu)化，用戶的體驗(yàn)從來都沒有間斷過，如何逆水行舟，不進(jìn)則退。隨著通訊技術(shù)的高速發(fā)展，web應(yīng)用在近幾年快速增加及普及，已經(jīng)成為人們必不可少的工具，充斥著生活的方方面面，商務(wù)，娛樂，旅游，工作。

隨著用戶規(guī)模的日益增大，web應(yīng)用的內(nèi)容和功能也變得越來越豐富，各大應(yīng)用對于用戶的體驗(yàn)，流量，內(nèi)存，性能優(yōu)化也越來越高，人們不僅僅要看到自己需要的內(nèi)容，還對響應(yīng)速度，動畫的流暢性，瀏覽網(wǎng)頁的等待時間都提出了非常大的要求。

在網(wǎng)頁首屏優(yōu)化上，我們盡量采用異步加載頁面數(shù)據(jù)的方式來提升用戶的流暢性，也增加了一些離線模板的技術(shù)規(guī)劃，而在代碼的底層組件，我們引入了一下新的方向，去減少用戶點(diǎn)擊事件之后對頁面DOM節(jié)點(diǎn)的操作，從而提升用戶體驗(yàn)。

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

回到dom優(yōu)化上，最開始我們打算是引用domdiff的理念，來進(jìn)行數(shù)據(jù)對比，而這些數(shù)據(jù)對比完全是在js中去實(shí)現(xiàn)，然后精簡之后來進(jìn)行dom的操作。舉個簡單的例子，一個dom節(jié)點(diǎn)可能是這樣的：

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節(jié)點(diǎn)，第二種，將你想要變成的數(shù)據(jù)循環(huán)inner進(jìn)去，這樣我們就有了4次的刪除和5次的添加，但是我們覺得這些dom操作太多了。

其實(shí)真實(shí)的情況，我們最需要把第四個li中的數(shù)據(jù)替換，并且在后面添加一個<li>6/li>就能達(dá)到我們需要的結(jié)果，我們需要一個組件來幫助我們對dom節(jié)點(diǎn)的操作進(jìn)行分析。一般的domdiff應(yīng)用都存在于大多數(shù)的聊天室，評論區(qū)，一些頻繁的dom替換的場所，我們希望他是一個小型的，方便應(yīng)用的，適合框架的一個小應(yīng)用。

在開發(fā)期間，我們還花費(fèi)了將近兩周的時間對現(xiàn)在非常流行的react及react-native進(jìn)行了詳細(xì)的技術(shù)調(diào)研，我不得不說，react的開發(fā)效率是我目前所見最快速的框架，他的模塊化開發(fā)思路，虛擬dom的理念都是我非常喜歡的一種方式，并且我們嘗試了將它合并進(jìn)slarkjs框架，開始我們只希望讓它來負(fù)責(zé)view層的重繪工作，但是在實(shí)踐中我們其實(shí)更希望它能負(fù)責(zé)更多的內(nèi)容，可惜的是，react來web層面的使用，還有一定局限性，并且需要大量的開發(fā)時間來修改一些組件，很遺憾我們暫時停滯了這個項(xiàng)目的開發(fā)進(jìn)度，但react-native在app上的開發(fā)，卻是一個潛能無限的壯舉，在之后的文章中，我們會持續(xù)的給大家?guī)韘larkjs框架是如何吸收react-native并融入到app的開發(fā)。現(xiàn)在我們先回到domdiff的思路邏輯中。首先，我們在構(gòu)建domdiff中，想法是很簡單的，

1. 我們需要它來接收2個參數(shù)，1.現(xiàn)在頁面上的節(jié)點(diǎn)，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下一頁

文章題目：藝龍網(wǎng)前端開發(fā)自述：前端渲染優(yōu)化經(jīng)驗(yàn)
標(biāo)題來源：http://www.muchs.cn/news27/85477.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、定制網(wǎng)站、網(wǎng)站收錄、App開發(fā)、外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)

廣告

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