加載網(wǎng)頁的方法及裝置制造方法
【專利摘要】本發(fā)明是關(guān)于一種加載網(wǎng)頁的方法及裝置，包括：獲取預先定義的腳本樣式文件；根據(jù)所述腳本樣式文件自動生成級聯(lián)樣式表CSS樣式；通過所述CSS樣式描述所加載網(wǎng)頁中的超文本標記語言HTML元素。本公開中通過采用較少腳本語言代碼定義的腳本樣式文件就可以編譯出不同的CSS樣式，因此可以提高CSS樣式的生成效率，相應降低了瀏覽器加載網(wǎng)頁時對HTML元素的描述繁瑣度，提高了網(wǎng)頁加載速度。
【專利說明】加載網(wǎng)頁的方法及裝置

【技術(shù)領(lǐng)域】
[0001]本公開涉及計算機網(wǎng)絡【技術(shù)領(lǐng)域】，尤其涉及加載網(wǎng)頁的方法及裝置。

【背景技術(shù)】
[0002]瀏覽器通過顯示網(wǎng)頁服務器或檔案系統(tǒng)內(nèi)的文件，包括文字、圖像、視頻影像等，實現(xiàn)用戶與這些文件的互動。上述文件格式通常為HTML (Hyper Text Markup Language,超文本標記語言)文件，瀏覽器加載網(wǎng)頁的過程，實際上是加載HTML文件的過程，HTML文件由若干嵌套的HTML元素組成,每個HTML元素可以通過若干(Cascading Style Sheets,級聯(lián)樣式表)樣式進行描述。
[0003]相關(guān)技術(shù)中，通常采用CSS語言編寫CSS樣式，CSS樣式可以包括字體、顏色、間距等，以便通過CSS樣式描述HTML元素的不同屬性，但是由于CSS語言是一種低級語言，其不支持集成、變量、條件判斷等功能，因此，通過CSS樣式對HTML元素進行描述時，可能需要將多個CSS樣式進行組合，才能對某個HTML元素進行描述，而對于不同HTML元素，即使其具有相同屬性，也要分別編寫CSS樣式。因此，為了描述不同HTML元素，需要預先生成大量的CSS樣式，這些CSS樣式均通過開發(fā)者手動編寫，導致CSS樣式的生成效率不高，相應的，瀏覽器加載網(wǎng)頁時對HTML元素的描述過程繁瑣，使得網(wǎng)頁加載速度變慢。


【發(fā)明內(nèi)容】

[0004]本公開提供加載網(wǎng)頁的方法及裝置，以解決相關(guān)技術(shù)中生成CSS樣式的效率較低，導致HTML元素描述過程繁瑣的問題。
[0005]根據(jù)本公開實施例的第一方面，提供一種加載網(wǎng)頁的方法，包括:
[0006]獲取預先定義的腳本樣式文件；
[0007]根據(jù)所述腳本樣式文件自動生成級聯(lián)樣式表CSS樣式；
[0008]通過所述CSS樣式描述所加載網(wǎng)頁中的超文本標記語言HTML元素。
[0009]可選的，所述根據(jù)所述腳本樣式文件自動生成CSS樣式包括:
[0010]對所述腳本樣式文件進行本地編譯生成若干CSS樣式；
[0011]將所述CSS樣式保存到CSS樣式列表中。
[0012]可選的，所述通過所述CSS樣式描述所加載網(wǎng)頁中的HTML元素包括:
[0013]在加載網(wǎng)頁的HTML文件時，獲取所述HTML文件中的HTML元素聲明的樣式類型；
[0014]根據(jù)所述樣式類型從所述CSS樣式列表中查找目標CSS樣式；
[0015]將查找到的目標CSS樣式應用到所述HTML元素上。
[0016]可選的，所述根據(jù)所述腳本樣式文件自動生成CSS樣式包括:
[0017]將所述腳本樣式文件嵌入到瀏覽器庫中；
[0018]在加載網(wǎng)頁的HTML文件時，獲取所述HTML文件中的HTML元素聲明的樣式類型；
[0019]根據(jù)所述樣式類型，實時編譯所述瀏覽器庫中的腳本樣式文件生成目標CSS樣式。
[0020]可選的，所述通過所述CSS樣式描述所述網(wǎng)頁中的HTML元素包括:
[0021]將編譯生成的目標CSS樣式應用到所述HTML元素上。
[0022]可選的,所述腳本樣式文件包括:通過JavaScript生成的JS樣式文件。
[0023]根據(jù)本公開實施例的第二方面，提供一種加載網(wǎng)頁的裝置，包括:
[0024]獲取單元，用于獲取預先定義的腳本樣式文件；
[0025]生成單元，用于根據(jù)所述腳本樣式文件自動生成級聯(lián)樣式表CSS樣式；
[0026]加載單元，用于通過所述CSS樣式描述所加載網(wǎng)頁中的超文本標記語言HTML元素。
[0027]可選的，所述生成單元包括:
[0028]本地編譯子單元，用于對所述腳本樣式文件進行本地編譯生成若干CSS樣式；
[0029]樣式保存子單元，用于將所述CSS樣式保存到CSS樣式列表中。
[0030]可選的，所述加載單元包括:
[0031]第一類型獲取子單元，用于在加載網(wǎng)頁的HTML文件時，獲取所述HTML文件中的HTML元素聲明的樣式類型；
[0032]樣式查找子單元，用于根據(jù)所述樣式類型從所述CSS樣式列表中查找目標CSS樣式；
[0033]第一樣式應用子單元，用于將查找到的目標CSS樣式應用到所述HTML元素上。
[0034]可選的，所述生成單元包括:
[0035]樣式嵌入子單元，用于將所述腳本樣式文件嵌入到瀏覽器庫中；
[0036]第二類型獲取子單元，用于在加載網(wǎng)頁的HTML文件時，獲取所述HTML文件中的HTML元素聲明的樣式類型；
[0037]實時編譯子單元，用于根據(jù)所述樣式類型，實時編譯所述瀏覽器庫中的腳本樣式文件生成目標CSS樣式。
[0038]可選的，所述加載單元包括:
[0039]第二樣式應用子單元，用于將編譯生成的目標CSS樣式應用到所述HTML元素上。
[0040]可選的,所述腳本樣式文件包括:通過JavaScript生成的JS樣式文件。
[0041]根據(jù)本公開實施例的第三方面，提供一種加載網(wǎng)頁的裝置，包括:
[0042]處理器；
[0043]用于存儲處理器可執(zhí)行指令的存儲器；
[0044]其中，所述處理器被配置為:
[0045]獲取預先定義的腳本樣式文件；
[0046]根據(jù)所述腳本樣式文件自動生成級聯(lián)樣式表CSS樣式；
[0047]通過所述CSS樣式描述所加載網(wǎng)頁中的超文本標記語言HTML元素。
[0048]本公開的實施例提供的技術(shù)方案可以包括以下有益效果:
[0049]與相關(guān)技術(shù)中直接采用CSS語言生成CSS樣式不同，本公開實施例利用高級腳本語言具有的高級功能預先定義腳本樣式文件，并根據(jù)這些腳本樣式文件自動生成CSS樣式，由于腳本樣式文件采用高級腳本語言定義，因此可以充分利用高級語言的繼承、判斷、變量聲明等功能，因此在描述不同HTML元素時，無需預先生成大量的CSS樣式，而是通過采用較少腳本語言代碼定義的腳本樣式文件就可以編譯出不同的CSS樣式，因此可以提高CSS樣式的生成效率，相應降低了瀏覽器加載網(wǎng)頁時對HTML元素的描述繁瑣度，提高了網(wǎng)頁加載速度。
[0050]本公開實施例基于預先定義的腳本樣式文件，可以先在本地編譯成若干CSS樣式，以便瀏覽器在加載網(wǎng)頁時，可以直接調(diào)用這些CSS樣式對HTML元素進行描述，進一步提高網(wǎng)頁加載速度。
[0051]本公開實施例基于預先定義的腳本樣式文件，瀏覽器也可以在網(wǎng)頁加載過程中，實時編譯腳本樣式文件，以對HTML元素進行描述，雖然相關(guān)技術(shù)中有通過對CSS語言進行擴展的特定語目編寫CSS樣式，例如，less語目，sass語目等，但是米用上述語目定義的CSS樣式無法由瀏覽器直接運行，而由于瀏覽器上提供了腳本樣式文件的運行，因此本公開定義的腳本樣式文件可以應用在不同瀏覽器加載網(wǎng)頁的過程中，編譯方式靈活。
[0052]本公開實施例中的腳本樣式文件可以是通過JavaScript生成的JS樣式文件，JavaScript是一種解釋性腳本語言，其可以直接由瀏覽器調(diào)用，且廣泛應用在HTML網(wǎng)頁上，因此JS樣式文件便于定義，通過JS樣式文件生成各種CSS樣式，可以有效提高CSS樣式的生成效率。
[0053]應當理解的是，以上的一般描述和后文的細節(jié)描述僅是示例性和解釋性的，并不能限制本公開。

【專利附圖】

【附圖說明】
[0054]此處的附圖被并入說明書中并構(gòu)成本說明書的一部分，示出了符合本公開的實施例，并與說明書一起用于解釋本公開的原理。
[0055]圖1是本公開根據(jù)一示例性實施例示出的一種加載網(wǎng)頁的方法流程圖。
[0056]圖2是本公開根據(jù)一示例性實施例示出的另一種加載網(wǎng)頁的方法流程圖。
[0057]圖3是本公開根據(jù)一示例性實施例示出的另一種加載網(wǎng)頁的方法流程圖。
[0058]圖4是本公開根據(jù)一示例性實施例示出的一種加載網(wǎng)頁的裝置框圖。
[0059]圖5是本公開根據(jù)一示例性實施例示出的另一種加載網(wǎng)頁的裝置框圖。
[0060]圖6是本公開根據(jù)一示例性實施例示出的另一種加載網(wǎng)頁的裝置框圖。
[0061]圖7是本公開根據(jù)一示例性實施例示出的另一種加載網(wǎng)頁的裝置框圖。
[0062]圖8是本公開根據(jù)一示例性實施例示出的另一種加載網(wǎng)頁的裝置框圖。
[0063]圖9是本公開根據(jù)一示例性實施例示出的一種用于加載網(wǎng)頁的裝置的一結(jié)構(gòu)示意圖。

【具體實施方式】
[0064]這里將詳細地對示例性實施例進行說明，其示例表示在附圖中。下面的描述涉及附圖時，除非另有表示，不同附圖中的相同數(shù)字表示相同或相似的要素。以下示例性實施例中所描述的實施方式并不代表與本公開相一致的所有實施方式。相反，它們僅是與如所附權(quán)利要求書中所詳述的、本公開的一些方面相一致的裝置和方法的例子。
[0065]在本公開使用的術(shù)語是僅僅出于描述特定實施例的目的，而非旨在限制本公開。在本公開和所附權(quán)利要求書中所使用的單數(shù)形式的“一種”、“所述”和“該”也旨在包括多數(shù)形式，除非上下文清楚地表示其他含義。還應當理解，本文中使用的術(shù)語“和/或”是指并包含一個或多個相關(guān)聯(lián)的列出項目的任何或所有可能組合。
[0066]應當理解，盡管在本公開可能采用術(shù)語第一、第二、第三等來描述各種信息，但這些信息不應限于這些術(shù)語。這些術(shù)語僅用來將同一類型的信息彼此區(qū)分開。例如，在不脫離本公開范圍的情況下，第一信息也可以被稱為第二信息，類似地，第二信息也可以被稱為第一信息。取決于語境，如在此所使用的詞語“如果”可以被解釋成為“在……時”或“當……時”或“響應于確定”。
[0067]瀏覽器加載網(wǎng)頁的過程，實際上是加載HTML文件的過程，HTML文件由若干嵌套的HTML元素組成，HTML元素可以包括網(wǎng)頁標題、網(wǎng)頁段落等，每個HTML元素通過若干CSS樣式進行描述，CSS樣式的描述對象即為HTML元素，CSS樣式包括屬性和值，例如，color表示屬性為“顏色”，而black表示顏色的屬性值為“黑色”。在加載網(wǎng)頁過程中，瀏覽器需要找到HTML元素聲明的CSS樣式應用到該HTML元素上，以便使HTML元素呈現(xiàn)出預設效果。
[0068]CSS語言是一種常用的樣式設計語言，相關(guān)技術(shù)中，通過CSS語言編寫CSS樣式，由于CSS語言是一種低級語言，因此采用該語言生成CSS樣式的效率不高，本公開實施例可以采用高級腳本語言，高級腳本語言可以由瀏覽器由直接解釋運行，例如，高級腳本語言可以是JavaScript, JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言，本公開可以通過JavaScript定義CSS樣式，從而可以有效提高CSS樣式的生成效率。
[0069]如圖1所示，圖1是根據(jù)一示例性實施例示出的一種加載網(wǎng)頁的方法流程圖，該方法可以用于終端瀏覽器中，包括以下步驟:
[0070]在步驟101中，獲取預先定義的腳本樣式文件。
[0071]本實施例中的腳本樣式文件可以具體為通過JavaScript生成的JS樣式文件。JavaScript作為一種面向?qū)ο蟮母呒壵Z言,可以通過其預先定義用于生成CSS樣式文件的JS樣式文件，由于JavaScript具有繼承、條件判斷、變量聲明等功能，因此可以通過較少的代碼量生成JS樣式文件，相應提高CSS樣式的生成效率。
[0072]在步驟102中，根據(jù)腳本樣式文件自動生成級聯(lián)樣式表CSS樣式。
[0073]本公開可以預先在本地編譯CSS樣式，可以包括:對腳本樣式文件進行本地編譯生成若干CSS樣式，將CSS樣式保存到CSS樣式列表中。
[0074]本公開也可以在瀏覽器加載網(wǎng)頁過程中實時編譯CSS樣式，可以包括:將腳本樣式文件嵌入到瀏覽器庫中，在加載網(wǎng)頁的HTML文件時，獲取HTML文件中的HTML元素聲明的樣式類型，根據(jù)樣式類型，實時編譯瀏覽器庫中的腳本樣式文件生成目標CSS樣式。
[0075]在步驟103中，通過CSS樣式描述所加載網(wǎng)頁中的超文本標記語言HTML元素。
[0076]如果步驟102中在本地編譯CSS樣式，則本步驟中可以在加載網(wǎng)頁的HTML文件時，獲取HTML文件中的HTML元素聲明的樣式類型,根據(jù)樣式類型從CSS樣式列表中查找目標CSS樣式，將查找到的目標CSS樣式應用到HTML元素上。
[0077]如果步驟102中在瀏覽器加載網(wǎng)頁過程中實時編譯CSS樣式，則本步驟中可以將編譯生成的目標CSS樣式直接應用到所述HTML元素上。
[0078]由上述實施例可見，與相關(guān)技術(shù)中直接采用CSS語言生成CSS樣式不同，本公開實施例利用高級腳本語言具有的高級功能預先定義腳本樣式文件，并根據(jù)這些腳本樣式文件自動生成CSS樣式，由于腳本樣式文件采用高級腳本語言定義，因此可以充分利用高級語言的繼承、判斷、變量聲明等功能，因此在描述不同HTML元素時，無需預先生成大量的CSS樣式，而是通過采用較少腳本語言代碼定義的腳本樣式文件就可以編譯出不同的CSS樣式，因此可以提高CSS樣式的生成效率，相應降低了瀏覽器加載網(wǎng)頁時對HTML元素的描述繁瑣度，提高了網(wǎng)頁加載速度。
[0079]如圖2所示，圖2是根據(jù)一示例性實施例示出的一種加載網(wǎng)頁的方法流程圖，該方法可以用于終端瀏覽器中，包括以下步驟:
[0080]在步驟201中，獲取預先定義的JS樣式文件。
[0081]本實施例中采用JavaScript預先定義用于生成CSS樣式文件的JS樣式文件,例如，style, js。由于JavaScript具有繼承、條件判斷、變量聲明等功能，因此可以通過較少的代碼量生成JS樣式文件，相應提高CSS樣式的生成效率。
[0082]在第一個示例中，采用JavaScript的繼承功能字義JS樣式文件:
[0083]可以先定義一個父類的JS樣式文件:
[0084]

【權(quán)利要求】
1.一種加載網(wǎng)頁的方法，其特征在于，包括: 獲取預先定義的腳本樣式文件； 根據(jù)所述腳本樣式文件自動生成級聯(lián)樣式表CSS樣式； 通過所述CSS樣式描述所加載網(wǎng)頁中的超文本標記語言HTML元素。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述根據(jù)所述腳本樣式文件自動生成CSS樣式包括: 對所述腳本樣式文件進行本地編譯生成若干CSS樣式； 將所述CSS樣式保存到CSS樣式列表中。
3.根據(jù)權(quán)利要求2所述的方法，其特征在于，所述通過所述CSS樣式描述所加載網(wǎng)頁中的HTML元素包括: 在加載網(wǎng)頁的HTML文件時，獲取所述HTML文件中的HTML元素聲明的樣式類型； 根據(jù)所述樣式類型從所述CSS樣式列表中查找目標CSS樣式； 將查找到的目標CSS樣式應用到所述HTML元素上。
4.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述根據(jù)所述腳本樣式文件自動生成CSS樣式包括: 將所述腳本樣式文件嵌入到瀏覽器庫中； 在加載網(wǎng)頁的HTML文件時，獲取所述HTML文件中的HTML元素聲明的樣式類型； 根據(jù)所述樣式類型，實時編譯所述瀏覽器庫中的腳本樣式文件生成目標CSS樣式。
5.根據(jù)權(quán)利要求4所述的方法，其特征在于，所述通過所述CSS樣式描述所述網(wǎng)頁中的HTML元素包括: 將編譯生成的目標CSS樣式應用到所述HTML元素上。
6.根據(jù)權(quán)利要求1至5任意一項所述的方法，其特征在于，所述腳本樣式文件包括:通過JavaScript生成的JS樣式文件。
7.一種加載網(wǎng)頁的裝置，其特征在于，包括: 獲取單元，用于獲取預先定義的腳本樣式文件； 生成單元,用于根據(jù)所述腳本樣式文件自動生成級聯(lián)樣式表CSS樣式； 加載單元，用于通過所述CSS樣式描述所加載網(wǎng)頁中的超文本標記語言HTML元素。
8.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述生成單元包括: 本地編譯子單元,用于對所述腳本樣式文件進行本地編譯生成若干CSS樣式； 樣式保存子單元，用于將所述CSS樣式保存到CSS樣式列表中。
9.根據(jù)權(quán)利要求8所述的裝置，其特征在于，所述加載單元包括: 第一類型獲取子單元，用于在加載網(wǎng)頁的HTML文件時，獲取所述HTML文件中的HTML元素聲明的樣式類型； 樣式查找子單元，用于根據(jù)所述樣式類型從所述CSS樣式列表中查找目標CSS樣式； 第一樣式應用子單元，用于將查找到的目標CSS樣式應用到所述HTML元素上。
10.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述生成單元包括: 樣式嵌入子單元，用于將所述腳本樣式文件嵌入到瀏覽器庫中； 第二類型獲取子單元，用于在加載網(wǎng)頁的HTML文件時，獲取所述HTML文件中的HTML元素聲明的樣式類型； 實時編譯子單元，用于根據(jù)所述樣式類型，實時編譯所述瀏覽器庫中的腳本樣式文件生成目標CSS樣式。
11.根據(jù)權(quán)利要求10所述的裝置，其特征在于，所述加載單元包括: 第二樣式應用子單元，用于將編譯生成的目標CSS樣式應用到所述HTML元素上。
12.根據(jù)權(quán)利要求7至11任意一項所述的裝置，其特征在于，所述腳本樣式文件包括:通過JavaScript生成的JS樣式文件。
13.一種加載網(wǎng)頁的裝置，其特征在于，包括: 處理器； 用于存儲處理器可執(zhí)行指令的存儲器； 其中，所述處理器被配置為: 獲取預先定義的腳本樣式文件； 根據(jù)所述腳本樣式文件自動生成級聯(lián)樣式表CSS樣式； 通過所述CSS樣式描述所加載網(wǎng)頁中的超文本標記語言HTML元素。
【文檔編號】G06F17/30GK104133844SQ201410302936
【公開日】2014年11月5日 申請日期:2014年6月27日 優(yōu)先權(quán)日:2014年6月27日
【發(fā)明者】江岱霖, 潘俊, 任遠 申請人:小米科技有限責任公司