一種瀏覽器網頁的渲染處理方法、裝置及終端設備的製作方法
2023-05-21 10:20:06
一種瀏覽器網頁的渲染處理方法、裝置及終端設備的製作方法
【專利摘要】本公開實施例提供了一種瀏覽器網頁的渲染處理方法、裝置及終端設備，用以解決瀏覽器網頁渲染處理技術需要額外開發、可展示的內容較少的問題。本公開實施例提供的渲染處理方法，包括：將需展示的網頁數據轉換為字符串後，寫入瀏覽器可執行腳本的變量中；將字符串轉換成二進位數據文件；調用瀏覽器的繪圖接口，將二進位數據文件繪製為網頁。本公開實施例不僅可以加速網頁渲染和展示，而且不需要重新開發代碼，不會減少顯示的網頁內容，能比較明顯的提升用戶的使用體驗。
【專利說明】一種瀏覽器網頁的渲染處理方法、裝置及終端設備
【技術領域】
[0001]本發明涉及通訊【技術領域】，尤其涉及一種瀏覽器網頁的渲染處理方法、裝置及終端設備。
【背景技術】
[0002]隨著網際網路行業的發展，移動網際網路成為了網際網路發展的一個新的方向，越來越多的用戶開始使用移動終端瀏覽器訪問網站。移動終端相比於傳統的PC (personalcomputer,個人電腦)、MAC (Macintosh,蘋果電腦)設備來說,所使用的瀏覽器性能相對比較差(主要受限於移動終端的中央處理器計算能力和內存空間)，如何讓移動終端的用戶可以流暢的使用傳統的網站成為一個新的挑戰。
[0003]針對移動終端定製網站，通常來說一般的做法是當用戶使用移動終端打開一個網站時，網站會首先判斷用戶是否正在使用一個移動終端來訪問，然後呈現一個內容相對簡單的頁面給用戶，也就是說從減少內容的方面規避一些性能問題。其中，內容減少就意味著需要展示的DOM (Document Object Model,文件對象模型)節點數量變少。這並不能從根本上解決問題，內容的減少帶來了體驗和質量的下降。而且，對於移動終端用戶呈現簡版網站不僅需要額外的開發時間，同時對於解析度比較高的移動終端來說這麼做會大大降低瀏覽的體驗。
[0004]可見，瀏覽器網頁渲染處理技術需要額外的開發時間、可展示的內容較少的問題。
【發明內容】
[0005]本公開實施例提供了一種瀏覽器網頁的渲染處理方法、裝置及終端設備，用以解決瀏覽器網頁渲染處理技術需要額外開發、可展示的內容較少的問題。
[0006]本公開實施例提供了一種瀏覽器網頁的渲染處理方法，包括:
[0007]將網頁數據轉換為字符串後，寫入瀏覽器可執行腳本的變量中；
[0008]將所述字符串轉換成二進位數據文件；
[0009]調用所述瀏覽器的繪圖接口，將所述二進位數據文件繪製為網頁。
[0010]其中，在一個實施例中，所述將所述字符串轉換成二進位數據文件，可包括:
[0011]使用Blob (Binary large object, 二進位大對象)對象將所述字符串轉換成二進位數據文件。
[0012]其中，在一個實施例中，所述調用所述瀏覽器的繪圖接口，將所述二進位數據文件繪製為網頁，可包括:
[0013]將所述二進位數據文件轉換成可被所述繪圖接口訪問的網絡資源對象；
[0014]調用所述瀏覽器的繪圖接口，將所述網絡資源對象繪製為網頁。
[0015]其中，在一個實施例中，所述將所述二進位數據文件轉換成可被所述繪圖接口訪問的網絡資源對象，可包括:
[0016]使用createObjectURL (create Object Uniform Resource Locator,創建對象統一資源定位符)接口將所述二進位數據文件轉換成可被所述繪圖接口訪問的網絡資源對象。
[0017]其中，在一個實施例中，所述調用所述瀏覽器的繪圖接口，將所述網絡資源對象繪製為網頁，可包括:
[0018]調用所述瀏覽器可執行腳本中的圖像Image對象加載所述網絡資源對象；
[0019]使用所述繪圖接口，將所述網絡資源對象繪製為網頁。
[0020]本公開實施例提供了一種瀏覽器網頁的渲染處理裝置，包括:
[0021]第一處理模塊，用於將網頁數據轉換為字符串後，寫入瀏覽器可執行腳本的變量中；
[0022]第二處理模塊，用於將所述字符串轉換成二進位數據文件；
[0023]網頁繪製模塊，用於調用所述瀏覽器的繪圖接口，將所述二進位數據文件繪製為網頁。
[0024]其中，在一個實施例中，所述第二處理模塊可包括:
[0025]處理單元，用於使用Blob對象將所述字符串轉換成二進位數據文件。
[0026]其中，在一個實施例中，所述網頁繪製模塊可包括:
[0027]轉換單元，用於將所述二進位數據文件轉換成可被所述瀏覽器的繪圖接口訪問的網絡資源對象；
[0028]繪製單元，用於調用所述瀏覽器的繪圖接口，將所述網絡資源對象繪製為網頁。
[0029]其中，在一個實施例中，所述轉換單元可包括:
[0030]轉換子單元,用於使用createObjectURL接口將所述二進位數據文件轉換成可被所述瀏覽器的繪圖接口訪問的網絡資源對象。
[0031]其中，在一個實施例中，所述繪製單元可包括:
[0032]調用子單元，用於調用所述瀏覽器可執行腳本中的Image對象加載所述網絡資源對象；
[0033]繪製子單元，用於使用所述繪圖接口，將所述網絡資源對象繪製為網頁。
[0034]公開實施例提供了一種終端設備，終端設備包括有存儲器，以及一個或者一個以上的程序，其中一個或者一個以上程序存儲於存儲器中，且經配置以由一個或者一個以上處理器執行所述一個或者一個以上程序包含用於進行以下操作的指令:
[0035]將需展示的網頁數據轉換為字符串後，寫入瀏覽器可執行腳本的變量中；
[0036]將所述字符串轉換成二進位數據文件；
[0037]調用所述瀏覽器的繪圖接口，將所述二進位數據文件繪製為網頁。
[0038]本公開實施例提供的瀏覽器網頁的渲染處理方法、裝置及終端設備，在應用於移動或者非移動平臺下的瀏覽器尤其是頁面解析和渲染性能比較差的瀏覽器時，通過瀏覽器的繪圖接口(如Canvas參數)將需要展示的網站界面繪製出來，從而大大減少了傳統的HTML (Hypertext Markup Language,超文本標記語言)DOM節點的創建和渲染過程,相比【背景技術】，不僅可以加速網頁渲染和展示，而且不需要重新開發代碼，不會減少顯示的網頁內容，能比較明顯的提升用戶的使用體驗。
[0039]本發明的其它特徵和優點將在隨後的說明書中闡述，並且，部分地從說明書中變得顯而易見，或者通過實施本發明而了解。本公開實施例的目的和其他優點可通過在所寫的說明書、權利要求書、以及附圖中所特別指出的結構來實現和獲得。
[0040]下面通過附圖和實施例，對技術方案做進一步的詳細描述。應當理解的是，以上的一般描述和後文的細節描述僅是示例性的，並不能限制本公開。
【專利附圖】
【附圖說明】
[0041]附圖用來提供對本發明的進一步理解，並且構成說明書的一部分，與本公開的實施例一起用於解釋本發明，並不構成對本發明的限制。在附圖中:
[0042]圖1為本公開實施例中一種瀏覽器網頁的渲染處理方法的流程圖；
[0043]圖2A為本公開一優選實施例中瀏覽器網頁的渲染處理方法的流程圖；
[0044]圖2B為本公開一優選實施例中代碼示例的運行效果圖；
[0045]圖3為本公開實施例中一種瀏覽器網頁的渲染處理裝置的結構示意圖；
[0046]圖4為圖3中第二處理模塊的結構示意圖；
[0047]圖5為圖3中網頁繪製模塊的結構示意圖；
[0048]圖6為圖5中轉換單元的結構示意圖；
[0049]圖7為圖5中繪製單元的結構示意圖；
[0050]圖8為本公開實施例中一種終端設備的示意圖。
[0051]通過上述附圖，已示出公開明確的實施例，後文中將有更詳細的描述。這些附圖和文字描述並不是為了通過任何方式限制本公開構思的範圍，而是通過參考特定實施例為本領域技術人員說明本公開的概念。
【具體實施方式】
[0052]以下結合附圖對公開的優選實施例進行說明，應當理解，此處所描述的優選實施例僅用於說明和解釋實施例，並不用於限定實施例。
[0053]本實施例提供的方法適用於移動或者非移動平臺下(包括行動作業系統ios、安卓androicUmac (Macintosh,蘋果電腦)、pc (personal computer,個人計算機)等)的瀏覽器。比如對於HTML5.0瀏覽器,可以基於該瀏覽器的繪圖Canvas參數和Blob (Binary largeobject, 二進位大對象)技術實現。
[0054]本實施例提供的瀏覽器網頁的渲染處理技術，當用戶打開網站網頁時，不會將網頁頁面的HTML結構直接渲染，而是首先會將需要展示的HTML結構以字符串的形式寫入一個瀏覽器可執行腳本(例如可執行腳本JavaScript)的變量中。當需要開始渲染頁面時，將需要展示的HTML字符串轉變成一個二進位數據文件，隨後調用瀏覽器的繪圖接口(如Canvas參數)，利用二進位數據文件繪製網頁，最後用該瀏覽器的繪圖接口將繪製而成的網頁展示出來。
[0055]如圖1所示，本實施例提供了一種瀏覽器網頁的渲染處理方法，包括以下步驟S11-S13:
[0056]在步驟Sll中，將需展示的網頁數據轉換為字符串後，寫入瀏覽器可執行腳本的
變量中。
[0057]在步驟S12中，將字符串轉換成二進位數據文件。
[0058]其中，在一個實施例中，步驟S12可以實施為以下方式:使用Blob對象將字符串轉換成二進位數據文件。
[0059]在步驟S13中，調用瀏覽器的繪圖接口，將二進位數據文件繪製為網頁。
[0060]其中，在一個實施例中，步驟S13可以包括以下步驟A1-A2:
[0061]步驟Al、將二進位數據文件轉換成可被瀏覽器的繪圖接口訪問的網絡資源對象；
[0062]其中，在一個實施例中，步驟Al可實施為以下方式:使用createObjectURL接口將二進位數據文件轉換成可被繪圖接口訪問的網絡資源對象。
[0063]步驟A2、調用瀏覽器的繪圖接口，利用網絡資源對象繪製網頁。
[0064]其中，在一個實施例中，步驟A2可以包括以下步驟B1-B2:
[0065]步驟B1、調用瀏覽器可執行腳本中的Image對象加載網絡資源對象；
[0066]步驟B2、使用繪圖接口根據網絡資源對象繪製網頁。
[0067]上述瀏覽器的繪圖接口除了 Canvas之外，還可以是其它類型的繪圖接口。
[0068]在執行完步驟S13之後，還可以利用瀏覽器的繪圖接口顯示繪製出的網頁。
[0069]下面以一優選實施例來說明本實施例提供的技術方案，本優選實施例基於HTML5.0瀏覽器的Canvas和Blob技術來實現。如圖2A所示，包括以下步驟:
[0070]在步驟S21中，用戶打開網站頁面時，瀏覽器將需要展示的HTML結構轉換為字符串，並將上述字符串寫入瀏覽器可執行腳本的一個變量中。
[0071]在步驟S22中，瀏覽器將上述字符串使用Blob對象轉為二進位數據文件。
[0072]其中,BLOB (binary large object)是二進位大對象,是一個可以存儲二進位文件的容器。在計算機中，BLOB常常是資料庫中用來存儲二進位數據文件的欄位類型。實際操作時，調用Blob函數。
[0073]BlobO的功能是將字符串轉換成Blob類型數據。語法為Blob (text)，其中參數text:string類型,指定要轉換的數據返回值Blob。函數執行成功時返迴轉換後的Blob類型數據；如果文本text參數的值為空值NULL，則Blob O函數返回NULL。
[0074]在步驟S23中，瀏覽器使用createObjectURL接口將轉換後的二進位數據文件，變成一個可以被Canvas (瀏覽器的一種繪圖接口)訪問的網絡資源對象。
[0075]其中，這麼做的目的在於將二進位數據文件變成一個Canvas可以訪問的資源，因為Canvas的drawlmage接口只能訪問同域下的資源。
[0076]可通過URL.createObjectURL 將內容轉換為可以展現的 URL (Uniform ResourceLocator,統一資源定位符,也稱為網頁地址)，進而可以被Canvas訪問。二進位數據文件轉換由瀏覽器內核自身實現的，不同的瀏覽器的實現方式不相同。
[0077]在步驟S24中，瀏覽器使用Image對象來加載處理好的二進位數據文件。
[0078]在可執行腳本中Image對象可以通過設置src屬性來加載任何類型的URL資源，不局限於圖片。
[0079]在步驟S25中，瀏覽器使用Canvas繪圖接口將上述加載的二進位數據文件繪製為網頁並展示該網頁。
[0080]其中，Canvas元素是一個白板，直到在它上面「繪製」一些可視內容。由於canvas只是一個HTML標記，因此它的顯示方式只是包含在標記中。
[0081]以下用一段代碼作為上述優選實施例的完整事例。
[0082]
【權利要求】
1.一種瀏覽器網頁的渲染處理方法，其特徵在於，包括: 將需展示的網頁數據轉換為字符串後，寫入瀏覽器可執行腳本的變量中； 將所述字符串轉換成二進位數據文件； 調用所述瀏覽器的繪圖接口，將所述二進位數據文件繪製為網頁。
2.如權利要求1所述的渲染處理方法，其特徵在於，所述將所述字符串轉換成二進位數據文件，包括: 使用二進位大對象Blob對象將所述字符串轉換成二進位數據文件。
3.如權利要求1所述的渲染處理方法，其特徵在於，所述調用所述瀏覽器的繪圖接口，將所述二進位數據文件繪製為網頁，包括: 將所述二進位數據文件轉換成可被所述瀏覽器的繪圖接口訪問的網絡資源對象； 調用所述瀏覽器的繪圖接口，將所述網絡資源對象繪製為網頁。
4.如權利要求3所述的渲染處理方法，其特徵在於，所述將所述二進位數據文件轉換成可被所述瀏覽器的繪圖接口訪問的網絡資源對象，包括: 使用創建對象統一資源定位符createObjectURL接口將所述二進位數據文件轉換成可被所述繪圖接口訪問的網絡資源對象。
5.如權利要求3所述的渲染處理方法，其特徵在於，所述調用所述瀏覽器的繪圖接口，將所述網絡資源對象繪製為網頁，包括: 調用所述瀏覽器可執行腳本中的`圖像Image對象加載所述網絡資源對象； 使用所述瀏覽器的Canvas繪圖接口，將所述網絡資源對象繪製為網頁。
6.一種瀏覽器網頁的渲染處理裝置，其特徵在於，包括: 第一處理模塊，用於將需展示的網頁數據轉換為字符串後，寫入瀏覽器可執行腳本的變量中； 第二處理模塊，用於將所述字符串轉換成二進位數據文件； 網頁繪製模塊，用於調用所述瀏覽器的繪圖接口，將所述二進位數據文件繪製為網頁。
7.如權利要求6所述的渲染處理裝置，其特徵在於，所述第二處理模塊包括: 處理單元，用於使用Blob對象將所述字符串轉換成二進位數據文件。
8.如權利要求6所述的渲染處理裝置，其特徵在於，所述網頁繪製模塊包括: 轉換單元，用於將所述二進位數據文件轉換成可被所述瀏覽器的繪圖接口訪問的網絡資源對象； 繪製單元，用於調用所述瀏覽器的繪圖接口，將所述網絡資源對象繪製為網頁。
9.如權利要求8所述的渲染處理裝置，其特徵在於，所述轉換單元包括: 轉換子單元，用於使用createObjectURL接口將所述二進位數據文件轉換成可被所述瀏覽器的繪圖接口訪問的網絡資源對象。
10.如權利要求8所述的渲染處理裝置，其特徵在於，所述繪製單元包括: 調用子單元，用於調用所述瀏覽器可執行腳本中的Image對象加載所述網絡資源對象； 繪製子單元，用於使用所述瀏覽器的繪圖接口，將所述網絡資源對象繪製為網頁。
11.一種終端設備，其特徵在於，終端設備包括有存儲器，以及一個或者一個以上的程序，其中一個或者一個以上程序存儲於存儲器中，且經配置以由一個或者一個以上處理器執行所述一個或者一個以上程序包含用於進行以下操作的指令: 將需展示的網頁數據轉換為字符串後，寫入瀏覽器可執行腳本的變量中； 將所述字符串轉換成二進位數據文件； 調用所述瀏覽器的繪圖接口，`將所述二進位數據文件繪製為網頁。
【文檔編號】G06F9/44GK103513987SQ201310430513
【公開日】2014年1月15日 申請日期:2013年9月18日 優先權日:2013年9月18日
【發明者】任遠, 姚麗梅, 王宗妮 申請人:小米科技有限責任公司