當前位置:首頁 > 新聞中心 > 解決方案
網(wǎng)站前端開發(fā):前端渲染優(yōu)化經(jīng)驗責(zé)任編輯 :李飛    文章來源 :星翼創(chuàng)想(16qt59sf.cn)    發(fā)布時間 :2015-11-25    閱讀次數(shù):3527     專題 :網(wǎng)站開發(fā)

隨著用戶規(guī)模的日益增大,web應(yīng)用的內(nèi)容和功能也變得越來越豐富,各大應(yīng)用對于用戶的體驗,流量,內(nèi)存,性能優(yōu)化也越來越高,人們不僅僅要看到自己需要的內(nèi)容,還對響應(yīng)速度,動畫的流暢性,瀏覽網(wǎng)頁的等待時間都提出了非常大的要求。在網(wǎng)頁首屏優(yōu)化上,我們盡量采用異步加載頁面數(shù)據(jù)的方式來提升用戶的流暢性,也增加了一些離線模板的技術(shù)規(guī)劃,而在代碼的底層組件,我們引入了一下新的方向,去減少用戶點擊事件之后對頁面DOM節(jié)點的操作,從而提升用戶體驗。

網(wǎng)站前端開發(fā)

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

正常情況我們只有兩種方式,第一種,替換整個ul節(jié)點,第二種,將你想要變成的數(shù)據(jù)循環(huán)inner進去,這樣我們就有了4次的刪除和5次的添加,但是我們覺得這些dom操作太多了。

其實真實的情況,我們最需要把第四個li中的數(shù)據(jù)替換,并且在后面添加一個

  • 6/li>就能達到我們需要的結(jié)果,我們需要一個組件來幫助我們對dom節(jié)點的操作進行分析。一般的domdiff應(yīng)用都存在于大多數(shù)的聊天室,評論區(qū),一些頻繁的dom替換的場所,我們希望他是一個小型的,方便應(yīng)用的,適合框架的一個小應(yīng)用。


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

    網(wǎng)站前端開發(fā)


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

    NodeType,它會讓我們獲得body元素的節(jié)點類型。說得簡單一些,就是讓我們知道當前節(jié)點是元素,屬性,文本內(nèi)容等等

    ChildNodes會讓我們獲得body元素的子節(jié)點集合,以NodeList對象。簡單解釋就是返回一個list,里面是當前節(jié)點下所有的子節(jié)點,包括class,文本,select,option等等。

    網(wǎng)站前端開發(fā),html5

    之后就很好去分析我們的構(gòu)想了,通過NodeType去獲取節(jié)點并判斷節(jié)點屬性,當然還要去判斷當前頁面的節(jié)點是否唯一,然后通過ChildNodes去對比節(jié)點下屬性之間的差異,并且需要增加一些屬性作為標記,比如判斷當前是否應(yīng)該修改,修改的順序等等。

    如果你僅僅是去循環(huán)判斷重復(fù),那你會在第二步的時候,將5變成2,第三步將6變成3,這樣是一個很浪費資源的,所以我們需要用距離值去填充,當我們用新數(shù)據(jù)去循環(huán)的時候,我們需要在第一次循環(huán)中判斷參數(shù)是否重復(fù),對重復(fù)的參數(shù)判斷修改值為false,再第二次循環(huán)中對非重復(fù)的參數(shù)用距離值去填充數(shù)據(jù),最后得出最簡單的list來覆蓋。

    這樣的方式,減少了頁面對dom的操作次數(shù),提升頁面的加載速率和二次加載速率,但是也是有一些坑的,比如:如果頁面dom修改量巨大,在循環(huán)中會浪費非常多的時間去循環(huán)判斷重復(fù)項,可能會比單獨替換整體dom節(jié)點花費更多的時間,所以在domdiff中,需要增加一些判斷,去適應(yīng)大多數(shù)的方式。比如:減少循環(huán),如果只是單純的文本替換,我們并不需要去循環(huán)判斷它的其他屬性,又或者增加閥值,如果運行時間或者數(shù)據(jù)量超過標準時間進行部分的dom替換,這些都是組件級對代碼的嚴謹性。

    domdiff其實是為了瀏覽器的優(yōu)化而做,但是也要適應(yīng)當前的環(huán)境而用,它更像是react虛擬dom理念的前身,有好處也有壞處,使用時候還需謹慎,我們會在今后的1,2個月中,對react-native進行詳細的分析,并且嘗試去融入到我們的框架中,也許會打出分支版,slarkjs-native來支持app的開發(fā),到時候會給大家繼續(xù)分享進一步的技術(shù)體驗,希望對h5比較有興趣的童靴可以加入到我們的team中,體驗既擁有Native的用戶體驗、又保留React的開發(fā)效率。




  • 文章轉(zhuǎn)載請保留網(wǎng)址:http://16qt59sf.cn/news/solutions/1562.html

    掃碼添加微信
    159 8667 8737
    24小時電話

    返回頂部