一種瀏覽器網(wǎng)頁的渲染處理方法、裝置及終端設(shè)備的制作方法
【專利摘要】本公開實施例提供了一種瀏覽器網(wǎng)頁的渲染處理方法、裝置及終端設(shè)備，用以解決瀏覽器網(wǎng)頁渲染處理技術(shù)需要額外開發(fā)、可展示的內(nèi)容較少的問題。本公開實施例提供的渲染處理方法，包括：將需展示的網(wǎng)頁數(shù)據(jù)轉(zhuǎn)換為字符串后，寫入瀏覽器可執(zhí)行腳本的變量中；將字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件；調(diào)用瀏覽器的繪圖接口，將二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁。本公開實施例不僅可以加速網(wǎng)頁渲染和展示，而且不需要重新開發(fā)代碼，不會減少顯示的網(wǎng)頁內(nèi)容，能比較明顯的提升用戶的使用體驗。
【專利說明】一種瀏覽器網(wǎng)頁的渲染處理方法、裝置及終端設(shè)備
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及通訊【技術(shù)領(lǐng)域】，尤其涉及一種瀏覽器網(wǎng)頁的渲染處理方法、裝置及終端設(shè)備。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)行業(yè)的發(fā)展，移動互聯(lián)網(wǎng)成為了互聯(lián)網(wǎng)發(fā)展的一個新的方向，越來越多的用戶開始使用移動終端瀏覽器訪問網(wǎng)站。移動終端相比于傳統(tǒng)的PC (personalcomputer,個人電腦)、MAC (Macintosh,蘋果電腦)設(shè)備來說,所使用的瀏覽器性能相對比較差(主要受限于移動終端的中央處理器計算能力和內(nèi)存空間)，如何讓移動終端的用戶可以流暢的使用傳統(tǒng)的網(wǎng)站成為一個新的挑戰(zhàn)。
[0003]針對移動終端定制網(wǎng)站，通常來說一般的做法是當(dāng)用戶使用移動終端打開一個網(wǎng)站時，網(wǎng)站會首先判斷用戶是否正在使用一個移動終端來訪問，然后呈現(xiàn)一個內(nèi)容相對簡單的頁面給用戶，也就是說從減少內(nèi)容的方面規(guī)避一些性能問題。其中，內(nèi)容減少就意味著需要展示的DOM (Document Object Model,文件對象模型)節(jié)點數(shù)量變少。這并不能從根本上解決問題，內(nèi)容的減少帶來了體驗和質(zhì)量的下降。而且，對于移動終端用戶呈現(xiàn)簡版網(wǎng)站不僅需要額外的開發(fā)時間，同時對于分辨率比較高的移動終端來說這么做會大大降低瀏覽的體驗。
[0004]可見，瀏覽器網(wǎng)頁渲染處理技術(shù)需要額外的開發(fā)時間、可展示的內(nèi)容較少的問題。
【發(fā)明內(nèi)容】

[0005]本公開實施例提供了一種瀏覽器網(wǎng)頁的渲染處理方法、裝置及終端設(shè)備，用以解決瀏覽器網(wǎng)頁渲染處理技術(shù)需要額外開發(fā)、可展示的內(nèi)容較少的問題。
[0006]本公開實施例提供了一種瀏覽器網(wǎng)頁的渲染處理方法，包括:
[0007]將網(wǎng)頁數(shù)據(jù)轉(zhuǎn)換為字符串后，寫入瀏覽器可執(zhí)行腳本的變量中；
[0008]將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件；
[0009]調(diào)用所述瀏覽器的繪圖接口，將所述二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁。
[0010]其中，在一個實施例中，所述將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件，可包括:
[0011]使用Blob (Binary large object, 二進(jìn)制大對象)對象將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件。
[0012]其中，在一個實施例中，所述調(diào)用所述瀏覽器的繪圖接口，將所述二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁，可包括:
[0013]將所述二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被所述繪圖接口訪問的網(wǎng)絡(luò)資源對象；
[0014]調(diào)用所述瀏覽器的繪圖接口，將所述網(wǎng)絡(luò)資源對象繪制為網(wǎng)頁。
[0015]其中，在一個實施例中，所述將所述二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被所述繪圖接口訪問的網(wǎng)絡(luò)資源對象，可包括:
[0016]使用createObjectURL (create Object Uniform Resource Locator,創(chuàng)建對象統(tǒng)一資源定位符)接口將所述二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被所述繪圖接口訪問的網(wǎng)絡(luò)資源對象。
[0017]其中，在一個實施例中，所述調(diào)用所述瀏覽器的繪圖接口，將所述網(wǎng)絡(luò)資源對象繪制為網(wǎng)頁，可包括:
[0018]調(diào)用所述瀏覽器可執(zhí)行腳本中的圖像Image對象加載所述網(wǎng)絡(luò)資源對象；
[0019]使用所述繪圖接口，將所述網(wǎng)絡(luò)資源對象繪制為網(wǎng)頁。
[0020]本公開實施例提供了一種瀏覽器網(wǎng)頁的渲染處理裝置，包括:
[0021]第一處理模塊，用于將網(wǎng)頁數(shù)據(jù)轉(zhuǎn)換為字符串后，寫入瀏覽器可執(zhí)行腳本的變量中；
[0022]第二處理模塊，用于將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件；
[0023]網(wǎng)頁繪制模塊，用于調(diào)用所述瀏覽器的繪圖接口，將所述二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁。
[0024]其中，在一個實施例中，所述第二處理模塊可包括:
[0025]處理單元，用于使用Blob對象將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件。
[0026]其中，在一個實施例中，所述網(wǎng)頁繪制模塊可包括:
[0027]轉(zhuǎn)換單元，用于將所述二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被所述瀏覽器的繪圖接口訪問的網(wǎng)絡(luò)資源對象；
[0028]繪制單元，用于調(diào)用所述瀏覽器的繪圖接口，將所述網(wǎng)絡(luò)資源對象繪制為網(wǎng)頁。
[0029]其中，在一個實施例中，所述轉(zhuǎn)換單元可包括:
[0030]轉(zhuǎn)換子單元,用于使用createObjectURL接口將所述二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被所述瀏覽器的繪圖接口訪問的網(wǎng)絡(luò)資源對象。
[0031]其中，在一個實施例中，所述繪制單元可包括:
[0032]調(diào)用子單元，用于調(diào)用所述瀏覽器可執(zhí)行腳本中的Image對象加載所述網(wǎng)絡(luò)資源對象；
[0033]繪制子單元，用于使用所述繪圖接口，將所述網(wǎng)絡(luò)資源對象繪制為網(wǎng)頁。
[0034]公開實施例提供了一種終端設(shè)備，終端設(shè)備包括有存儲器，以及一個或者一個以上的程序，其中一個或者一個以上程序存儲于存儲器中，且經(jīng)配置以由一個或者一個以上處理器執(zhí)行所述一個或者一個以上程序包含用于進(jìn)行以下操作的指令:
[0035]將需展示的網(wǎng)頁數(shù)據(jù)轉(zhuǎn)換為字符串后，寫入瀏覽器可執(zhí)行腳本的變量中；
[0036]將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件；
[0037]調(diào)用所述瀏覽器的繪圖接口，將所述二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁。
[0038]本公開實施例提供的瀏覽器網(wǎng)頁的渲染處理方法、裝置及終端設(shè)備，在應(yīng)用于移動或者非移動平臺下的瀏覽器尤其是頁面解析和渲染性能比較差的瀏覽器時，通過瀏覽器的繪圖接口(如Canvas參數(shù))將需要展示的網(wǎng)站界面繪制出來，從而大大減少了傳統(tǒng)的HTML (Hypertext Markup Language,超文本標(biāo)記語言)DOM節(jié)點的創(chuàng)建和渲染過程,相比【背景技術(shù)】，不僅可以加速網(wǎng)頁渲染和展示，而且不需要重新開發(fā)代碼，不會減少顯示的網(wǎng)頁內(nèi)容，能比較明顯的提升用戶的使用體驗。
[0039]本發(fā)明的其它特征和優(yōu)點將在隨后的說明書中闡述，并且，部分地從說明書中變得顯而易見，或者通過實施本發(fā)明而了解。本公開實施例的目的和其他優(yōu)點可通過在所寫的說明書、權(quán)利要求書、以及附圖中所特別指出的結(jié)構(gòu)來實現(xiàn)和獲得。
[0040]下面通過附圖和實施例，對技術(shù)方案做進(jìn)一步的詳細(xì)描述。應(yīng)當(dāng)理解的是，以上的一般描述和后文的細(xì)節(jié)描述僅是示例性的，并不能限制本公開。
【專利附圖】

【附圖說明】
[0041]附圖用來提供對本發(fā)明的進(jìn)一步理解，并且構(gòu)成說明書的一部分，與本公開的實施例一起用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明的限制。在附圖中:
[0042]圖1為本公開實施例中一種瀏覽器網(wǎng)頁的渲染處理方法的流程圖；
[0043]圖2A為本公開一優(yōu)選實施例中瀏覽器網(wǎng)頁的渲染處理方法的流程圖；
[0044]圖2B為本公開一優(yōu)選實施例中代碼示例的運行效果圖；
[0045]圖3為本公開實施例中一種瀏覽器網(wǎng)頁的渲染處理裝置的結(jié)構(gòu)示意圖；
[0046]圖4為圖3中第二處理模塊的結(jié)構(gòu)示意圖；
[0047]圖5為圖3中網(wǎng)頁繪制模塊的結(jié)構(gòu)示意圖；
[0048]圖6為圖5中轉(zhuǎn)換單元的結(jié)構(gòu)示意圖；
[0049]圖7為圖5中繪制單元的結(jié)構(gòu)示意圖；
[0050]圖8為本公開實施例中一種終端設(shè)備的示意圖。
[0051]通過上述附圖，已示出公開明確的實施例，后文中將有更詳細(xì)的描述。這些附圖和文字描述并不是為了通過任何方式限制本公開構(gòu)思的范圍，而是通過參考特定實施例為本領(lǐng)域技術(shù)人員說明本公開的概念。
【具體實施方式】
[0052]以下結(jié)合附圖對公開的優(yōu)選實施例進(jìn)行說明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實施例僅用于說明和解釋實施例，并不用于限定實施例。
[0053]本實施例提供的方法適用于移動或者非移動平臺下(包括移動操作系統(tǒng)ios、安卓androicUmac (Macintosh,蘋果電腦)、pc (personal computer,個人計算機)等)的瀏覽器。比如對于HTML5.0瀏覽器,可以基于該瀏覽器的繪圖Canvas參數(shù)和Blob (Binary largeobject, 二進(jìn)制大對象)技術(shù)實現(xiàn)。
[0054]本實施例提供的瀏覽器網(wǎng)頁的渲染處理技術(shù)，當(dāng)用戶打開網(wǎng)站網(wǎng)頁時，不會將網(wǎng)頁頁面的HTML結(jié)構(gòu)直接渲染，而是首先會將需要展示的HTML結(jié)構(gòu)以字符串的形式寫入一個瀏覽器可執(zhí)行腳本(例如可執(zhí)行腳本JavaScript)的變量中。當(dāng)需要開始渲染頁面時，將需要展示的HTML字符串轉(zhuǎn)變成一個二進(jìn)制數(shù)據(jù)文件，隨后調(diào)用瀏覽器的繪圖接口(如Canvas參數(shù))，利用二進(jìn)制數(shù)據(jù)文件繪制網(wǎng)頁，最后用該瀏覽器的繪圖接口將繪制而成的網(wǎng)頁展示出來。
[0055]如圖1所示，本實施例提供了一種瀏覽器網(wǎng)頁的渲染處理方法，包括以下步驟S11-S13:
[0056]在步驟Sll中，將需展示的網(wǎng)頁數(shù)據(jù)轉(zhuǎn)換為字符串后，寫入瀏覽器可執(zhí)行腳本的
變量中。
[0057]在步驟S12中，將字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件。
[0058]其中，在一個實施例中，步驟S12可以實施為以下方式:使用Blob對象將字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件。
[0059]在步驟S13中，調(diào)用瀏覽器的繪圖接口，將二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁。
[0060]其中，在一個實施例中，步驟S13可以包括以下步驟A1-A2:
[0061]步驟Al、將二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被瀏覽器的繪圖接口訪問的網(wǎng)絡(luò)資源對象；
[0062]其中，在一個實施例中，步驟Al可實施為以下方式:使用createObjectURL接口將二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被繪圖接口訪問的網(wǎng)絡(luò)資源對象。
[0063]步驟A2、調(diào)用瀏覽器的繪圖接口，利用網(wǎng)絡(luò)資源對象繪制網(wǎng)頁。
[0064]其中，在一個實施例中，步驟A2可以包括以下步驟B1-B2:
[0065]步驟B1、調(diào)用瀏覽器可執(zhí)行腳本中的Image對象加載網(wǎng)絡(luò)資源對象；
[0066]步驟B2、使用繪圖接口根據(jù)網(wǎng)絡(luò)資源對象繪制網(wǎng)頁。
[0067]上述瀏覽器的繪圖接口除了 Canvas之外，還可以是其它類型的繪圖接口。
[0068]在執(zhí)行完步驟S13之后，還可以利用瀏覽器的繪圖接口顯示繪制出的網(wǎng)頁。
[0069]下面以一優(yōu)選實施例來說明本實施例提供的技術(shù)方案，本優(yōu)選實施例基于HTML5.0瀏覽器的Canvas和Blob技術(shù)來實現(xiàn)。如圖2A所示，包括以下步驟:
[0070]在步驟S21中，用戶打開網(wǎng)站頁面時，瀏覽器將需要展示的HTML結(jié)構(gòu)轉(zhuǎn)換為字符串，并將上述字符串寫入瀏覽器可執(zhí)行腳本的一個變量中。
[0071]在步驟S22中，瀏覽器將上述字符串使用Blob對象轉(zhuǎn)為二進(jìn)制數(shù)據(jù)文件。
[0072]其中,BLOB (binary large object)是二進(jìn)制大對象,是一個可以存儲二進(jìn)制文件的容器。在計算機中，BLOB常常是數(shù)據(jù)庫中用來存儲二進(jìn)制數(shù)據(jù)文件的字段類型。實際操作時，調(diào)用Blob函數(shù)。
[0073]BlobO的功能是將字符串轉(zhuǎn)換成Blob類型數(shù)據(jù)。語法為Blob (text)，其中參數(shù)text:string類型,指定要轉(zhuǎn)換的數(shù)據(jù)返回值Blob。函數(shù)執(zhí)行成功時返回轉(zhuǎn)換后的Blob類型數(shù)據(jù)；如果文本text參數(shù)的值為空值NULL，則Blob O函數(shù)返回NULL。
[0074]在步驟S23中，瀏覽器使用createObjectURL接口將轉(zhuǎn)換后的二進(jìn)制數(shù)據(jù)文件，變成一個可以被Canvas (瀏覽器的一種繪圖接口)訪問的網(wǎng)絡(luò)資源對象。
[0075]其中，這么做的目的在于將二進(jìn)制數(shù)據(jù)文件變成一個Canvas可以訪問的資源，因為Canvas的drawlmage接口只能訪問同域下的資源。
[0076]可通過URL.createObjectURL 將內(nèi)容轉(zhuǎn)換為可以展現(xiàn)的 URL (Uniform ResourceLocator,統(tǒng)一資源定位符,也稱為網(wǎng)頁地址)，進(jìn)而可以被Canvas訪問。二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換由瀏覽器內(nèi)核自身實現(xiàn)的，不同的瀏覽器的實現(xiàn)方式不相同。
[0077]在步驟S24中，瀏覽器使用Image對象來加載處理好的二進(jìn)制數(shù)據(jù)文件。
[0078]在可執(zhí)行腳本中Image對象可以通過設(shè)置src屬性來加載任何類型的URL資源，不局限于圖片。
[0079]在步驟S25中，瀏覽器使用Canvas繪圖接口將上述加載的二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁并展示該網(wǎng)頁。
[0080]其中，Canvas元素是一個白板，直到在它上面“繪制”一些可視內(nèi)容。由于canvas只是一個HTML標(biāo)記，因此它的顯示方式只是包含在標(biāo)記中。
[0081]以下用一段代碼作為上述優(yōu)選實施例的完整事例。
[0082]
【權(quán)利要求】
1.一種瀏覽器網(wǎng)頁的渲染處理方法，其特征在于，包括: 將需展示的網(wǎng)頁數(shù)據(jù)轉(zhuǎn)換為字符串后，寫入瀏覽器可執(zhí)行腳本的變量中； 將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件； 調(diào)用所述瀏覽器的繪圖接口，將所述二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁。
2.如權(quán)利要求1所述的渲染處理方法，其特征在于，所述將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件，包括: 使用二進(jìn)制大對象Blob對象將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件。
3.如權(quán)利要求1所述的渲染處理方法，其特征在于，所述調(diào)用所述瀏覽器的繪圖接口，將所述二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁，包括: 將所述二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被所述瀏覽器的繪圖接口訪問的網(wǎng)絡(luò)資源對象； 調(diào)用所述瀏覽器的繪圖接口，將所述網(wǎng)絡(luò)資源對象繪制為網(wǎng)頁。
4.如權(quán)利要求3所述的渲染處理方法，其特征在于，所述將所述二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被所述瀏覽器的繪圖接口訪問的網(wǎng)絡(luò)資源對象，包括: 使用創(chuàng)建對象統(tǒng)一資源定位符createObjectURL接口將所述二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被所述繪圖接口訪問的網(wǎng)絡(luò)資源對象。
5.如權(quán)利要求3所述的渲染處理方法，其特征在于，所述調(diào)用所述瀏覽器的繪圖接口，將所述網(wǎng)絡(luò)資源對象繪制為網(wǎng)頁，包括: 調(diào)用所述瀏覽器可執(zhí)行腳本中的`圖像Image對象加載所述網(wǎng)絡(luò)資源對象； 使用所述瀏覽器的Canvas繪圖接口，將所述網(wǎng)絡(luò)資源對象繪制為網(wǎng)頁。
6.一種瀏覽器網(wǎng)頁的渲染處理裝置，其特征在于，包括: 第一處理模塊，用于將需展示的網(wǎng)頁數(shù)據(jù)轉(zhuǎn)換為字符串后，寫入瀏覽器可執(zhí)行腳本的變量中； 第二處理模塊，用于將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件； 網(wǎng)頁繪制模塊，用于調(diào)用所述瀏覽器的繪圖接口，將所述二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁。
7.如權(quán)利要求6所述的渲染處理裝置，其特征在于，所述第二處理模塊包括: 處理單元，用于使用Blob對象將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件。
8.如權(quán)利要求6所述的渲染處理裝置，其特征在于，所述網(wǎng)頁繪制模塊包括: 轉(zhuǎn)換單元，用于將所述二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被所述瀏覽器的繪圖接口訪問的網(wǎng)絡(luò)資源對象； 繪制單元，用于調(diào)用所述瀏覽器的繪圖接口，將所述網(wǎng)絡(luò)資源對象繪制為網(wǎng)頁。
9.如權(quán)利要求8所述的渲染處理裝置，其特征在于，所述轉(zhuǎn)換單元包括: 轉(zhuǎn)換子單元，用于使用createObjectURL接口將所述二進(jìn)制數(shù)據(jù)文件轉(zhuǎn)換成可被所述瀏覽器的繪圖接口訪問的網(wǎng)絡(luò)資源對象。
10.如權(quán)利要求8所述的渲染處理裝置，其特征在于，所述繪制單元包括: 調(diào)用子單元，用于調(diào)用所述瀏覽器可執(zhí)行腳本中的Image對象加載所述網(wǎng)絡(luò)資源對象； 繪制子單元，用于使用所述瀏覽器的繪圖接口，將所述網(wǎng)絡(luò)資源對象繪制為網(wǎng)頁。
11.一種終端設(shè)備，其特征在于，終端設(shè)備包括有存儲器，以及一個或者一個以上的程序，其中一個或者一個以上程序存儲于存儲器中，且經(jīng)配置以由一個或者一個以上處理器執(zhí)行所述一個或者一個以上程序包含用于進(jìn)行以下操作的指令: 將需展示的網(wǎng)頁數(shù)據(jù)轉(zhuǎn)換為字符串后，寫入瀏覽器可執(zhí)行腳本的變量中； 將所述字符串轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)文件； 調(diào)用所述瀏覽器的繪圖接口，`將所述二進(jìn)制數(shù)據(jù)文件繪制為網(wǎng)頁。
【文檔編號】G06F9/44GK103513987SQ201310430513
【公開日】2014年1月15日 申請日期:2013年9月18日 優(yōu)先權(quán)日:2013年9月18日
【發(fā)明者】任遠(yuǎn), 姚麗梅, 王宗妮 申請人:小米科技有限責(zé)任公司