[發明專利]一種用于預渲染的網頁顯示方法

在審

• 申請號: 201911022667.0
• 申請日: 2019-10-25
• 公開（公告）號: CN110851683A
• 公開（公告）日: 2020-02-28
• 發明（設計）人: 陳奕博
• 申請（專利權）人: 陳奕博
• 主分類號: G06F16/951
• 分類號: G06F16/951;G06F16/957;G06F16/958
• 代理公司: 西安弘理專利事務所 61214
• 代理人: 王丹

本發明公開了一種用于預渲染的網頁顯示方法，本發明將項目中不經常變化的頁面進行預渲染，也就是在構建項目的時候，打包項目之前按照路由的層級進行動態渲染，輸出對應的html，本申請的技術方案能夠減少網頁開發工作量，提高網頁開發的效率。web瀏覽器繼而針對多個鏈接中的每個鏈接取回與鏈接相關聯的網頁，并且在用戶對查看取回的網頁的任何選擇之前渲染它們。瀏覽器繼而接收用戶對預覽鏈接的選擇，并且在內容區域中顯示與預覽的鏈接相關聯的渲染的網頁。

技術領域

本發明屬于前端開發技術領域，具體涉及一種用于預渲染的網頁顯示方法。

背景技術

隨著互聯網的快速發展，網絡用戶的數量不斷增加，網絡設備也是層出不窮，為了針對不同用戶日益增長的瀏覽體驗需求，顯示設備也是在不斷的變化，最突出的就是顯示器的分辨率由最開始的單一固定演變成了現在的多種多樣。但這樣就給網頁的開發者帶來了額外的開發工作量。網頁的開發者的工作重心應該是完成頁面的功能，和樣式美化上，給用戶能夠帶來享受式的觀看體驗，而這些不應該包括組件的大小，及各組件之間的比例問題上。

例如，開發者在開發一個網頁時，往往在開發完成或者開發途中需要停下功能的開發，來根據自己的屏幕的特點去不斷的網頁的感官體驗，其中組件的樣式已經有現有的各種UI框架所實現，進而使調試組件的大小，調試各組件之間的間距成為開發者最常見冗余工作。主流前端框架都是單頁面應用，數據采用ajax異步請求的方式從后端請求，然后在前端渲染。項目編譯后只有一個index.html文件，并且內容只剩下js和css的引用，不方便抓取html文件，非常不利于seo。因此，現有技術還有待于改進和發展。雖然有些UI框架已經將組件的大小，間距集成到了框架樣式里面，但開發中往往并不能滿足用戶和開發者對于網頁美感的需求，開發者往往需要根據自己的屏幕重新修改網頁的排版和比例。一般為了適應不同的屏幕大小，開發者一般需要進行自適應的網頁開發，而這又是一件繁瑣又不討好的工作，并且每個頁面都需要做一遍調整工作，無疑給開發者帶來了很多不必要的工作量?，F有一些開發工具開發者可以直接操作排版，如控件大小等，但是這樣的開發工具形成的樣式大小值基本都是固定的大小值，而這又很難適應大眾不同顯示的需求。

發明內容

本發明的目的在于提供一種用于預渲染的網頁顯示方法，解決了現有技術中存在的網頁前端排版固定化，無法滿足用戶的不同要求的問題。

本發明所采用的技術方案是：一種用于預渲染的網頁顯示方法，包括以下步驟：

步驟1：預先進行基礎配置,獲得數據項的集合，所述集合包括到網頁的鏈接；

步驟2：針對多個所述鏈接中的每個鏈接取回與所述鏈接相關聯的網頁；

步驟3、在所述瀏覽器的用戶對查看取回的頁面做出任何選擇之前渲染取回的網頁；

步驟4、對指定頁面進行預渲染配置，并開啟預渲染；構建項目，在配置的生成目錄下生成文件夾；

步驟5、通過不同路由返回對應的html文件；

步驟6：接收所述用戶對預覽鏈接做出的選擇；以及在所述內容區域中顯示與預覽的鏈接相關聯的渲染的網頁；

步驟7：獲取根據網頁內容進行解析所生成的DOM樹；計算所述DOM樹中各可見節點相對于網頁窗口的比例值；

步驟8：將所述DOM樹中各可見節點的大小根據所述比例值進行設定以作為預渲染樹，從而使瀏覽器根據所述預渲染樹進行網頁呈現。

預渲染是以與用戶界面中用戶不可見的選項卡關聯的方式執行的，并且還包括響應于導航至該網絡地址的輸入，用所述選項卡中的已渲染內容來替換當前可視的選項卡中的內容。

將html文件保存于所述生成目錄下。

數據項的所述集合包括來自博客服務的文本消息，所述文本消息具有到網頁的至少一個鏈接。