專利名稱：：一種利用web原生布局進行頁面渲染的方法及裝置的制作方法一種利用WEB原生布局進行頁面渲染的方法及裝置
技術(shù)領(lǐng)域：
：本發(fā)明涉及網(wǎng)頁開發(fā)領(lǐng)域，特別是涉及一種利用TOB原生布局進行頁面渲染的方法。
背景技術(shù)：
：在打開網(wǎng)頁的過程中，對頁面進行渲染是瀏覽器的工作之一。所謂的渲染，是指針對網(wǎng)頁的數(shù)據(jù)項和可操作的元素(即網(wǎng)頁標(biāo)簽)進行修飾性處理，以增強頁面元素的可表現(xiàn)能力和可介入處理能力的過程。所謂修飾性處理，涉及的是數(shù)據(jù)項或操作的可操作限制、數(shù)據(jù)項或數(shù)值的突出顯示、數(shù)值的格式化輸出等。所謂可表現(xiàn)能力，主要是針對用戶頁面中的數(shù)據(jù)項和操作。頁面的標(biāo)簽作為數(shù)據(jù)項和操作的表現(xiàn)技術(shù)，要求具備動態(tài)的表現(xiàn)能力，即根據(jù)不同的請求和許可限制展現(xiàn)出不同的效果。所謂可介入處理，即定制修飾規(guī)則來干預(yù)用戶界面實例化時的表現(xiàn)風(fēng)格和形式，比如在網(wǎng)頁上展現(xiàn)對數(shù)據(jù)項或操作的授權(quán)限制。通俗地說，渲染是為了使網(wǎng)頁具有更好的顯示和動態(tài)效果而對加載的網(wǎng)頁文檔上的元素進行修飾性處理的過程。頁面的渲染通常是通過腳本技術(shù)實現(xiàn)的，現(xiàn)有技術(shù)在網(wǎng)頁開發(fā)中已有一些成熟的腳本庫可以用于頁面的渲染，例如EXT，Jquery等，但是使用這些腳本庫進行頁面渲染始終存在一個問題，那就是在渲染失敗時，頁面會出現(xiàn)白屏。例如現(xiàn)有技術(shù)中的一種做法是利用腳本庫的布局器進行布局，我們可以把瀏覽器文檔理解為一個容器，控件是放在這個容器當(dāng)中的，那么布局器就是控件與其所在容器之間的一層抽象，它決定了控件在容器中的位置，所以在網(wǎng)頁的渲染中，必須首先加載布局器，然后再加載控件，但這會導(dǎo)致由于布局器加載失敗而引起的頁面白屏(頁面一片空白無任何內(nèi)容)。布局器加載失敗通常都是JS(JAVASCRIPT)加載失敗造成的，而造成JS加載失敗的原因有可能是在加載JS時網(wǎng)絡(luò)突然中斷或采用了第三方的JS庫而第三方的JS庫出現(xiàn)了問題?，F(xiàn)有技術(shù)還有一種做法，沒有采用上述的布局器方式進行頁面渲染，而是采用網(wǎng)頁文檔的節(jié)點標(biāo)記待渲染位置，然后利用控件庫對這個節(jié)點進行渲染。以EXT技術(shù)為例對這種方式進行說明，例如需要生成一個表格控件，網(wǎng)頁中的代碼如下<diVid="grid-example"X/diV>生成該表格控件的渲染腳本代碼如下Ext.onReady(function(){Ext.QuickTips.init()；varmyData=[[‘A公司'，‘www.Α.com','A地',1980],[‘B公司'，‘www.B.com','B地',1990],[‘C公司'，‘www.C.com',‘C地',2000],[‘D公司'，‘www.D.com',5‘D地',2010],]；varstore=newExt.data.ArrayStore({fields:[{name:{name:{name:{name:company'}，price'}，change'}，pctChange'}})；store.IoadData(myData)；vargrid=newExt.grid.GridPanel({store:store,columns:[header:'公司名稱‘，width:200，sortable:true，header"URL'，width:200，sortable:true，header:'地址‘，width:250，sortable:true，header:'創(chuàng)辦時間‘，width:100，sortable:true，ι]，stripeRows:true，height:350，width:600，title:'示例‘，stateful:true，stateld:‘grid'})；grid,render(‘grid-example')；})；從上述代碼可以看出表格控件(代碼中的grid)中的數(shù)據(jù)，是由一個JAVASCRIPT變量提供的(代碼中的myDate)，這樣如果渲染成功，會出現(xiàn)一個如下所示的表格權(quán)利要求1.一種利用WEB原生布局進行頁面渲染的方法，其特征在于，所述方法包括步驟加載網(wǎng)頁到DOM構(gòu)造完成；改寫所述網(wǎng)頁的DOM節(jié)點的結(jié)構(gòu)以生成控件，其中所述改寫是基于所述DOM節(jié)點的信息進行的；讀取所述DOM節(jié)點的原始布局信息；以及填充改寫后的所述DOM節(jié)點的布局信息以設(shè)置所述控件布局，其中填充改寫后的所述DOM節(jié)點的布局信息是以所述DOM節(jié)點的原始布局信息為依據(jù)，按照預(yù)定的布局一致性填充策略進行的。2.根據(jù)權(quán)利要求1所述的利用WEB原生布局進行頁面渲染的方法，其特征在于，所述改寫所述網(wǎng)頁的DOM節(jié)點的結(jié)構(gòu)包括以下步驟識別標(biāo)簽及標(biāo)簽參數(shù)；根據(jù)所述標(biāo)簽參數(shù)將所述控件需要的特定結(jié)構(gòu)補充寫入到所述標(biāo)簽原有位置，生成并初始化所述控件。3.根據(jù)權(quán)利要求2所述的利用TOB原生布局進行頁面渲染的方法，其特征在于，所述標(biāo)簽參數(shù)至少包括用以指示相應(yīng)控件類型的所述標(biāo)簽的屬性及屬性值。4.根據(jù)權(quán)利要求2所述的利用TOB原生布局進行頁面渲染的方法，其特征在于，在所述生成并初始化所述控件之后還包括在所述控件對應(yīng)的所述標(biāo)簽中添加分類的CSS接口。5.根據(jù)權(quán)利要求1所述的利用WEB原生布局進行頁面渲染的方法，其特征在于，所述網(wǎng)頁在頁面渲染前包含數(shù)據(jù)。6.根據(jù)權(quán)利要求5所述的利用TOB原生布局進行頁面渲染的方法，其特征在于，所述數(shù)據(jù)在頁面渲染失敗時仍能正常顯示。7.根據(jù)權(quán)利要求1所述的利用WEB原生布局進行頁面渲染的方法，其特征在于，所述加載網(wǎng)頁到DOM構(gòu)造完成包括加載所述網(wǎng)頁完成。8.根據(jù)權(quán)利要求1所述的利用WEB原生布局進行頁面渲染的方法，其特征在于，所述改寫所述網(wǎng)頁的DOM節(jié)點的結(jié)構(gòu)包括擴展標(biāo)簽的個數(shù)或擴展所述標(biāo)簽中屬性的個數(shù)。9.根據(jù)權(quán)利要求1所述的利用WEB原生布局進行頁面渲染的方法，其特征在于，所述布局一致性填充策略包括嚴(yán)格按照所述DOM節(jié)點的原始布局信息填充改寫后的所述DOM節(jié)點的布局信息，使得渲染前后頁面布局完全一致。10.根據(jù)權(quán)利要求1所述的利用WEB原生布局進行頁面渲染的方法，其特征在于，所述布局一致性填充策略還包括參照所述DOM節(jié)點的原始布局信息以一定的偏移量填充改寫后的所述DOM節(jié)點的布局信息，使得渲染前后頁面布局整體結(jié)構(gòu)一致。11.根據(jù)權(quán)利要求1所述的利用WEB原生布局進行頁面渲染的方法，其特征在于，所述改寫所述網(wǎng)頁的DOM節(jié)點的結(jié)構(gòu)、所述讀取所述DOM節(jié)點的原始布局信息、所述填充改寫后的所述DOM節(jié)點的布局信息是以單個節(jié)點為單位進行的。12.根據(jù)權(quán)利要求1所述的利用WEB原生布局進行頁面渲染的方法，其特征在于，所述改寫所述網(wǎng)頁的DOM節(jié)點的結(jié)構(gòu)、所述讀取所述DOM節(jié)點的原始布局信息、所述填充改寫后的所述DOM節(jié)點的布局信息是以批量節(jié)點為單位進行的。13.根據(jù)權(quán)利要求12所述的利用TOB原生布局進行頁面渲染的方法，其特征在于，在讀取所述DOM節(jié)點的原始布局信息之后還需要對讀取的所述DOM節(jié)點的原始布局信息進行緩存。14.一種利用WEB原生布局進行頁面渲染的裝置，其特征在于，所述裝置包括加載網(wǎng)頁單元，用于加載所述網(wǎng)頁到DOM構(gòu)造完成；改寫DOM節(jié)點的結(jié)構(gòu)單元，用于改寫所述網(wǎng)頁的DOM節(jié)點的結(jié)構(gòu)以生成控件，其中所述改寫是基于所述DOM節(jié)點的信息進行的；讀取DOM節(jié)點的布局信息單元，用于讀取所述DOM節(jié)點的原始布局信息；以及填充DOM節(jié)點的布局信息單元，用于填充改寫后的所述DOM節(jié)點的布局信息以設(shè)置所述控件的布局，其中填充所述DOM節(jié)點的布局信息是以所述DOM節(jié)點的原始布局信息為依據(jù)，按照預(yù)定的布局一致性填充策略進行的。15.根據(jù)權(quán)利要求14所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述改寫DOM節(jié)點的結(jié)構(gòu)單元包括以下單元識別標(biāo)簽及標(biāo)簽參數(shù)單元，用于識別標(biāo)簽及所述標(biāo)簽參數(shù)；生成并初始化控件單元，用于根據(jù)所述標(biāo)簽參數(shù)將所述控件需要的特定結(jié)構(gòu)補充寫入到所述標(biāo)簽原有位置，生成并初始化所述控件。16.根據(jù)權(quán)利要求15所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述標(biāo)簽參數(shù)至少包括用以指示生成相應(yīng)控件類型的所述標(biāo)簽的屬性及屬性值。17.根據(jù)權(quán)利要求15所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述改寫DOM節(jié)點的結(jié)構(gòu)單元還包括添加CSS接口單元，用于在所述控件對應(yīng)的所述標(biāo)簽中添加分類的CSS接口。18.根據(jù)權(quán)利要求14所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述網(wǎng)頁在頁面渲染前包含數(shù)據(jù)。19.根據(jù)權(quán)利要求14所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述數(shù)據(jù)在頁面渲染失敗時仍能正常顯示。20.根據(jù)權(quán)利要求14所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述加載網(wǎng)頁到DOM構(gòu)造完成包括加載所述網(wǎng)頁完成。21.根據(jù)權(quán)利要求14所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述改寫所述網(wǎng)頁的DOM節(jié)點的結(jié)構(gòu)包括擴展標(biāo)簽的個數(shù)或擴展所述標(biāo)簽中屬性的個數(shù)。22.根據(jù)權(quán)利要求14所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述布局一致性填充策略包括嚴(yán)格按照所述DOM節(jié)點的原始布局信息填充改寫后的所述DOM節(jié)點的布局信息，使得渲染前后頁面布局完全一致。23.根據(jù)權(quán)利要求14所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述布局一致性填充策略還包括參照所述DOM節(jié)點的原始布局信息以一定的偏移量填充改寫后的所述DOM節(jié)點的布局信息，使得渲染前后頁面布局整體結(jié)構(gòu)一致。24.根據(jù)權(quán)利要求14所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述改寫所述網(wǎng)頁的DOM節(jié)點的結(jié)構(gòu)、所述讀取所述DOM節(jié)點的原始布局信息、所述填充改寫后的所述DOM節(jié)點的布局信息是以單個節(jié)點為單位進行的。25.根據(jù)權(quán)利要求14所述的利用TOB原生布局進行頁面渲染的裝置，其特征在于，所述改寫所述網(wǎng)頁的DOM節(jié)點的結(jié)構(gòu)、所述讀取所述DOM節(jié)點的原始布局信息、所述填充改寫后的所述DOM節(jié)點的布局信息是以批量節(jié)點為單位進行的。26.根據(jù)權(quán)利要求25所述的利用WEB原生布局進行頁面渲染的裝置，其特征在于，讀取DOM節(jié)點的布局信息單元在讀取所述DOM節(jié)點的原始布局信息之后還需要對讀取的所述DOM節(jié)點的原始布局信息進行緩存。全文摘要本發(fā)明提供了一種利用WEB原生布局進行頁面渲染的方法及裝置。其中利用WEB原生布局進行頁面渲染的方法，包括步驟加載網(wǎng)頁到DOM構(gòu)造完成；改寫網(wǎng)頁的DOM節(jié)點的結(jié)構(gòu)以生成控件，其中所述改寫是基于DOM節(jié)點的信息進行的；讀取DOM節(jié)點的原始布局信息；以及填充改寫后的DOM節(jié)點的布局信息以設(shè)置控件布局，其中填充改寫后的DOM節(jié)點的布局信息是以DOM節(jié)點的原始布局信息為依據(jù)，按照預(yù)定的布局一致性填充策略進行的。采用本發(fā)明的方法進行頁面渲染，在頁面渲染成功的情況下可以使控件在原始DOM節(jié)點基礎(chǔ)上提供更高級的功能，在頁面渲染失敗的情況下也能保留原始DOM節(jié)點的信息，從而大大地提高了用戶體驗，還保證了頁面渲染前后布局的一致性，提高了頁面渲染的效率。文檔編號G06F17/30GK102073502SQ20111000478公開日2011年5月25日申請日期2011年1月11日優(yōu)先權(quán)日2011年1月11日發(fā)明者歐陽先偉申請人:百度在線網(wǎng)絡(luò)技術(shù)(北京)有限公司