一種基于WebKit的瀏覽器頁面顯示方法及其裝置制造方法及圖紙

本發明專利技術公開了一種基于WebKit的瀏覽器頁面顯示方法及其裝置。該方法包括步驟：1）向服務器發送頁面請求；2）本次請求的資源在本機如果有緩存且未過期則直接布局渲染，如果沒有，從服務器下載頁面資源，下載的同時，WebKit中的布局管理器對所請求的頁面進行布局渲染；3）在所述布局渲染完成后，繪制并顯示頁面。本發明專利技術在使用嵌入式系統及性能一般的硬件環境的瀏覽器瀏覽頁面時，能夠減少頁面下載時間，減少用戶在使用過程中的不流暢感，優化用戶體驗。

【技術實現步驟摘要】
本專利技術屬于互聯網
，尤其涉及一種基于WebKit的瀏覽器頁面顯示方法及其裝置。
技術介紹
在WebKit中，主要通過Webcore和JavaScriptCore處理接收到的內容,創建版面樣式,顯示文本、圖片、表格單元和其他數據類型的內容。一個Http請求在WebKit中的主要流程如下用戶從瀏覽器界面開始輸入URL地址，然后界面把URL發送到渲染進程，渲染進程再進行處理，把網絡連接地址變成一個資源的消息，通過IPC機制把消息發送到資源下載進程。下載進程中的函數把消息變成一個網絡下載請求，創建一個下載任務，完成設置 定時器、啟動下載任務等一系列操作，并向服務器發送下載請求。瀏覽器不斷的向服務器發送下載請求直到資源下載完全或下載超時為止，服務器響應HTTP請求后返回給本地HTML/XHTML源數據。如果是第一次請求并順利訪問，服務器會在響應HTTP請求后返回為200的狀態，同時會返回給瀏覽器一些headers集合(例如Last-Modified和Etag等)和相應請求資源，瀏覽器接收到這些信息后會將資源緩存在本地目錄中并保存這些頭(headers)信息，當瀏覽器獲得返回給本地的HTML/XHTML數據后，通過DOM (Document ObjectModelMEHTML文本解析成DOM樹。當用戶請求的網頁里面包含JavaScript腳本，并隨HTML文件一起傳送到客戶端瀏覽器上時，其中HTML文本中的JavaScript將由JavaScriptCore解析執行。通過布局管理器Layout對DOM樹中的可視元素排版，分配位置、高度、寬度，再由CSS(Cascading Style Sheet)規定輸出的特性，比如顏色、字體等,通過渲染(Render)進行視覺化表達，最終繪制(Paint)顯示給客戶端用戶。WebKit對一個網頁首先下載資源，然后進行布局，最后在屏幕上繪制，這是三步完成的，也就是布局(Layout)和繪制(Paint)是分開的，這是因為，如果在繪制步驟之前沒有執行過布局步驟，那么圖形庫將不知道在哪里寫字或顯示圖像。其中布局管理器Layout負責確定Render樹(渲染樹)中每個葉子和中間節點的位置。在Layout過程結束以后，WebKit啟動繪制(Paint)過程,負責把Render樹中各個葉子節點,在相應的位置繪制出來。WebKit把具體繪制的工作，交給第三方圖形工具庫去完成。常用的第三方圖形工具庫包括QT, GTK+, ffx, Skia, Cairo 等等。Layout過程是根據瀏覽器要顯示的頁面大小而定的，也就是，下載下來的HTML文件和相應資源后觸發相應操作進行布局，布局完成后再繪制(Paint)到瀏覽器的頁面上，當同一網頁第二次請求或有刷新動作時，布局管理器Layout就要進行一次布局，然后再Paint到頁面上。Layout是一個計算量很繁重的過程,主要體現在估算完每個Render Tree節點的寬度尤其是高度以后，需要相應調整這個節點的前輩節點以及左鄰右舍兄弟節點的位置。當重復請求同一頁面或刷新時，瀏覽器向服務器又發送一遍請求并下載相同資源，以及Layout完成后，布局出的效果是完全一樣的，但這一過程多做很多冗余的工作，頻繁占有系統資源，也會給用戶帶來瀏覽頁面不順暢的感覺。
技術實現思路
為了克服上述缺陷，本專利技術提供一種基于WebKit的瀏覽器頁面顯示方法，包括I)向服務器發送頁面請求；2)從服務器下載頁面資源，下載的同時，WebKit中的布局管理器對所請求的頁面進行布局渲染；3)在所述布局渲染完成后，繪制并顯示頁面。具體為在所述布局渲染完成后，觸發一個事件，該事件啟動繪制過程。所述布局渲染的步驟進一步包括把從服務器返回的HTML文本解析生成DOM樹， 同時生成Render樹,使得DOM樹和Render樹是同時增長的。DOM樹和Render樹的生成步驟具體包括把DOM樹中的可視元素排版，分配位置、高度、寬度，再由CSS規定輸出的特性，由渲染器進行視覺化表達，生成Render樹。所述輸出的特性包括顏色、字體。其中，當所請求的頁面中包含JavaScript腳本,并隨HTML文本一起從服務器返回到客戶端瀏覽器上時，所述HTML文本中的JavaScript腳本由JavaScriptCore解析并執行。所述基于WebKit的瀏覽器頁面顯示方法進一步包括步驟4)接收用戶對同一頁面的再次請求；5)判斷步驟2)中對頁面資源的下載是否完全；6)如果下載完全，則判斷所述下載時從服務器接收的expires字段設置的時間是否過期，以及判斷HTTP響應期限是否超時，如果expires時間未過期、且兩次頁面請求之間的時間間隔未超過HTTP響應期限，那么不向服務器發送再次下載頁面請求，而是返回成功狀態，結束頁面請求流程；7)如果expires時間已過期、或者兩次頁面請求之間的時間間隔已超過HTTP響應期限，那么向服務器發送再次下載頁面請求；8)向服務器發送上次下載頁面資源時接收的Last-Modified和Etag字段內容；9)如果再次請求下載的頁面資源未被修改，則向布局管理器發送網頁未更新狀態消息，布局管理器根據該網頁未更新狀態消息，不釋放內存中已生成的DOM樹和Render樹，而是直接觸發啟動繪制過程的事件，進行頁面繪制操作；10)如果再次請求下載的頁面資源已被修改，則釋放內存中已生成的DOM樹和Render樹,重新生成修改后的DOM樹和Render樹,并重新繪制頁面。其中，當步驟4)中的對同一頁面的再次請求來自于F5快捷鍵刷新時，跳過對expires時間和HTTP響應期限的判斷，當下載完全時，直接向服務器發送再次下載頁面的請求。本專利技術還提供了一種基于WebKit的瀏覽器頁面顯示裝置，該裝置包括初次頁面請求模塊，用于向服務器發送頁面請求；初次頁面下載模塊，用于從服務器下載頁面資源；布局渲染模塊，用于在下載的同時，使得WebKit中的布局管理器對所請求的頁面進行布局渲染；以及繪制模塊，用于在所述布局渲染完成后，繪制并顯示頁面。所述繪制模塊進一步包括觸發模塊，用于在所述布局渲染完成后，觸發一個事件，該事件啟動繪制過程。其中所述布局渲染模塊進一步包括樹生成模塊，用于把從服務器返回的HTML文本解析生成DOM樹，同時生成Render樹，使得DOM樹和Render樹是同時增長的。所述樹生成模塊更具體地用于把DOM樹中的可視元素排版，分配位置、高度、寬度，再由CSS規定輸出的特性，由渲染器進行視覺化表達，生成Render樹。所述輸出的特性包括顏色、字體。其中，當所請求的頁面中包含JavaScript腳本,并隨HTML文本一起從服務器返回到客戶端瀏覽器上時，所述HTML文本中的JavaScript腳本由JavaScriptCore解析并執行。所述基于WebKit的瀏覽器頁面顯示裝置進一步包括接收模塊，用于接收用戶對同一頁面的再次請求； 第一判斷模塊，用于判斷初次頁面下載模塊中對頁面資源的下載是否完全；成功狀態返回模塊，用于如果下載完全，則判斷所述下載時從服務器接收的expires字段設置的時間是否過期，以及判斷HTTP響應期限是否超時，如果expires時間未過期、且兩次頁面請求之間的時間間隔未超過HTTP響應本文檔來自技高網...

【技術保護點】
一種基于WebKit的瀏覽器頁面顯示方法，其特征在于，該方法包括以下步驟：1）向服務器發送頁面請求；2）從服務器下載頁面資源，下載的同時，WebKit中的布局管理器對所請求的頁面進行布局渲染；3）在所述布局渲染完成后，繪制并顯示頁面。

【技術特征摘要】
1.一種基于WebKit的瀏覽器頁面顯示方法，其特征在于，該方法包括以下步驟 O向服務器發送頁面請求； 2)從服務器下載頁面資源，下載的同時，WebKit中的布局管理器對所請求的頁面進行布局渲染； 3)在所述布局渲染完成后，繪制并顯示頁面。2.如權利要求I所述的方法，所述布局渲染的步驟進一步包括 把從服務器返回的HTML文本解析生成DOM樹，同時生成Render樹，使得DOM樹和Render樹是同時增長的。3.如權利要求I所述的方法，其中，當所請求的頁面中包含JavaScript腳本，并隨HTML文本一起從服務器返回到客戶端瀏覽器上時，所述HTML文本中的JavaScript腳本由JavaScriptCore解析并執行。4.如權利要求2所述的方法，其中DOM樹和Render樹的生成步驟具體包括 把DOM樹中的可視元素排版，分配位置、高度、寬度，再由CSS規定輸出的特性，由渲染器進行視覺化表達，生成Render樹。5.如權利要求4所述的方法，其中所述輸出的特性包括顏色、字體。6.如權利要求I所述的方法，所述步驟3)具體包括 在所述布局渲染完成后，觸發一個事件，該事件啟動繪制過程。7.如權利要求I所述的方法，進一步包括步驟 4)接收用戶對同一頁面的再次請求； 5)判斷步驟2)中對頁面資源的下載是否完全； 6)如果下載完全，則判斷所述下載時從服務器接收的expires字段設置的時間是否過期，以及判斷HTTP響應期限是否超時，如果expires時間未過期、且兩次頁面請求之間的時間間隔未超過HTTP響應期限，那么不向服務器發送再次下載頁面請求，而是返回成功狀態，結束頁面請求流程； 7)如果expires時間已過期、或者兩次頁面請求之間的時間間隔已超過HTTP響應期限，那么向服務器發送再次下載頁面請求。8.如權利要求7所述的方法，進一步包括 8)向服務器發送上次下載頁面資源時接收的Last-Modified和Etag字段內容； 9)如果再次請求下載的頁面資源未被修改，則向布局管理器發送網頁未更新狀態消息，布局管理器根據該網頁未更新狀態消息，不釋放內存中已生成的DOM樹和Render樹，而是直接觸發啟動繪制過程的事件，進行頁面繪制操作； 10)如果再次請求下載的頁面資源已被修改，則釋放內存中已生成的DOM樹和Render樹,重新生成修改后的DOM樹和Render樹，并重新繪制頁面。9.如權利要求7所述的方法，其中，當步驟4)中的對同一頁面的再次請求來自于F5快捷鍵刷新時，跳過對expires時間和HTTP響應期限的判斷，當下載完全時，直接向服務器發送再次下載頁面的請求。10.一種基于WebKit的瀏覽器頁面顯示裝置，其特征在于，該裝置包括 初次頁面請求模塊，用于向服務器發送頁面請求； ...

【專利技術屬性】
技術研發人員：陳宇，鄢斌，
申請(專利權)人：中科方德軟件有限公司，中國科學院軟件研究所，
類型：發明
國別省市：