[發明專利]一種網頁渲染方法及裝置

有效

• 申請號: 201610318589.9
• 申請日: 2016-05-12
• 公開（公告）號: CN107368497B
• 公開（公告）日: 2022-09-13
• 發明（設計）人: 曹剛
• 申請（專利權）人: 中興通訊股份有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957
• 代理公司: 廣州嘉權專利商標事務所有限公司 44205
• 代理人: 洪銘福

本發明實施例提供了一種網頁渲染方法及裝置，所述方法包括：獲取網頁的主資源文件，解析所述主資源文件得到所述網頁的CSS文件個數N，所述N為大于0的整數；在所述N大于預設閾值的情況下，獲取第i個CSS文件時，解析所述第i個CSS文件，獲取所述第i個CSS文件對應的第i個解析結果，所述i取值為1、……、N；根據當前已獲取的第1到第i個解析結果進行布局處理，獲取布局結果i；根據所述布局結果i，對所述網頁進行繪制顯示。

技術領域

本發明涉及計算機領域，尤其涉及一種網頁渲染方法及裝置。

背景技術

目前，瀏覽器對網頁進行渲染的效果主要是依賴于網頁自身的層疊樣式表(Cascading Style Sheets，CSS)，所述CSS用于提供網頁的樣式結構(例如輸入框的位置和大小等)。大部分情況下，瀏覽器對網頁進行渲染的過程如下：瀏覽器接收到網頁主資源后，解析主資源得到需要繼續加載的CSS文件的序列，并按照該序列依次加載這些CSS文件，瀏覽器每接收到一個CSS文件就對該CSS文件進行樣式解析，然后按照解析結果進行布局處理，等所有CSS文件對應的接收、解析、布局過程結束后，瀏覽器才會根據最后的布局結果進行網頁的繪制，并在瀏覽窗口顯示出繪制完成的網頁。

上述渲染過程中，瀏覽器要等所有CSS文件對應的接收、解析、布局過程結束后，才會根據最后的布局結果進行網頁的繪制，如果CSS文件較多，瀏覽器接收完成所有的CSS就需要耗費較長的時間，且還要進行所有CSS文件的解析和對應的網頁布局后才進行網頁的繪制，這就會導致瀏覽器在加載網頁時出現白屏并等待很長時間才出現網頁畫面的情況。

為了避免出現長時間的白屏現象，現有一種常見的優化方法是瀏覽器接收到網頁主資源后，不等CSS文件的接收、解析、布局，而是直接根據主資源按照缺省樣式對應的布局結果進行網頁的繪制和顯示，等完成所有的CSS文件解析后的樣式布局后，再重新進行網頁繪制和顯示。

上述優化方法雖然可以避免出現長時間的白屏現象，但是，采用缺省樣式對應的布局結果對網頁進行繪制，容易出現布局混亂的網頁，如網頁上有亂碼等。

發明內容

為解決現有存在的技術問題，本發明實施例提供一種網頁渲染方法及裝置，可以即避免長時間的白屏又避免布局混亂。

為達到上述目的，本發明實施例的技術方案是這樣實現的：

一種網頁渲染方法，所述方法包括：

獲取網頁的主資源文件，解析所述主資源文件得到所述網頁的CSS文件個數N，所述N為大于0的整數；

在所述N大于預設閾值的情況下，獲取第i個CSS文件時，解析所述第i個CSS文件，獲取所述第i個CSS文件對應的第i個解析結果，所述i取值為1、……、N；

根據當前已獲取的第1到第i個解析結果進行布局處理，獲取布局結果i；

根據所述布局結果i，或者，確定所述第i個解析結果對應的第i組標簽元素，在所述第i組標簽元素中包括預設的大范圍標簽元素或所述i等于所述N時，對所述網頁進行繪制顯示。

上述方案中，所述根據當前已獲取的第1到第i個解析結果進行布局處理，獲取布局結果i，包括：

確定所述第i個解析結果對應的第i組標簽元素；

在所述第i組標簽元素中包括預設的大范圍標簽元素或者所述i等于所述N時，根據當前已獲取的第1至i個解析結果進行布局處理，獲取布局結果i。

上述方案中，所述方法還包括：

在所述第i組標簽元素不包括預設的大范圍標簽元素且所述i不等于所述N時，存儲所述第i個解析結果。

上述方案中，所述方法還包括：