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

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

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

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

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

1. • 1
   • 2
   • 3
   • 4
   
   

而我們想把它變成這樣

1. • 1
   • 2
   • 3
   • 5
   • 6
   
   

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

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

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

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

1. 我們需要它來接收2個參數(shù)，1.現(xiàn)在頁面上的節(jié)點，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)站標題：藝龍網(wǎng)前端開發(fā)自述：前端渲染優(yōu)化經(jīng)驗
本文地址：http://www.rwnh.cn/news/85477.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、ChatGPT、手機網(wǎng)站建設、網(wǎng)站維護、定制網(wǎng)站、搜索引擎優(yōu)化

廣告

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