本發(fā)明涉及WEB軟件前端技術(shù)領(lǐng)域，特別是涉及WEB前端CSS資源請(qǐng)求處理裝置。

背景技術(shù)：

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，用戶在各種智能電子設(shè)備上進(jìn)行網(wǎng)頁瀏覽來獲取所需的內(nèi)容。網(wǎng)頁提供者為了提升用戶體驗(yàn)，會(huì)對(duì)頁面的內(nèi)容進(jìn)行豐富化和個(gè)性化，以迎合用戶來達(dá)到提升用于體驗(yàn)的效果。

提升用戶體驗(yàn)最直接的方法就是豐富web前端資源的內(nèi)容；Web前端由Html、CSS、Javascript等元素組成，這些技術(shù)的應(yīng)用，使得網(wǎng)站在視覺、操作效果等方面得到很大的提升，但是另一方面，這些效果并不能在所有用戶所使用的智能電子設(shè)備上進(jìn)行兼容顯示，因?yàn)?，用戶所使用的瀏覽器、顯示設(shè)備以及顯示屏幕的分辨率等存在差異，上述web前端資源未必能做到全面的兼容。

目前，為了解決web前端資源兼容性的問題的方法主要有以下兩種：一種，為解決瀏覽器兼容性問題在引入的CSS(英文全稱Cascading Style Sheets，中文簡稱：層疊樣式表)文件中設(shè)置只有某種特定瀏覽器能夠識(shí)別的“偽類”，這樣特定瀏覽器就只能讀取這個(gè)“偽類”的樣式；另一種，為解決多顯示設(shè)備、多分辨率問題在頁面加載完成后，通過執(zhí)行一個(gè)腳本來判斷設(shè)備類型、分辨率大小來動(dòng)態(tài)引入對(duì)應(yīng)的CSS；為滿足用戶個(gè)性化需求，提供了若干皮膚允許用戶自行切換。

上述現(xiàn)有做法雖然可以在一定程度上解決前端資源兼容性的問題，但并不全面，例如，采用“偽類”的方式雖然可以一定程度上解決瀏覽器兼容問題，但目前市面上瀏覽器種類繁多，主流的IE6-IE11、Chrome、Firefox、Safari、360等加起來就有15種以上，“偽類”的數(shù)量大增，導(dǎo)致CSS過于臃腫，在互聯(lián)網(wǎng)發(fā)展的今天，這會(huì)導(dǎo)致網(wǎng)站的下行流量大增，增加服務(wù)器負(fù)擔(dān)影響用戶體驗(yàn)；再例如，動(dòng)態(tài)執(zhí)行腳本的方式可以解決跨設(shè)備的問題，但是由于是二段加載，部分客戶端會(huì)有較為明顯的卡頓，影響用戶體驗(yàn)。

綜上所述，如何使web前端資源能夠在用戶端實(shí)現(xiàn)全面兼容，并且不影響用戶體驗(yàn)，這是目前本領(lǐng)域技術(shù)人員所要解決的問題。

技術(shù)實(shí)現(xiàn)要素：

鑒于以上所述現(xiàn)有技術(shù)的缺點(diǎn)，本發(fā)明的目的在于提供一種WEB前端CSS資源請(qǐng)求處理裝置，用于解決如何使web前端資源能夠在用戶端實(shí)現(xiàn)全面兼容且不影響用戶體驗(yàn)的問題。

為實(shí)現(xiàn)上述目的及其他相關(guān)目的，本發(fā)明提供以下技術(shù)方案：一種WEB前端CSS資源請(qǐng)求處理裝置，應(yīng)用于一WEB服務(wù)器中，所述WEB前端CSS資源請(qǐng)求處理裝置包括：請(qǐng)求接收模塊，用于接收用戶端發(fā)送的頁面資源請(qǐng)求，頁面資源請(qǐng)求包含一用戶配置信息；資源選擇模塊，用于根據(jù)所述頁面資源請(qǐng)求確定對(duì)應(yīng)的頁面資源文件，以及根據(jù)所述用戶配置信息從預(yù)設(shè)的第一CSS文件和第二CSS文件中篩選出需要輸出到前端的CSS資源文件，并對(duì)所述CSS資源文件設(shè)定在頁面引入的順序；請(qǐng)求響應(yīng)模塊，用于將所述頁面資源文件和CSS資源文件返回所述用戶端。

優(yōu)選地，所述用戶配置信息包括當(dāng)前的登錄用戶信息、設(shè)備信息、分辨率信息以及當(dāng)前頁面的瀏覽器版本信息。

優(yōu)選地，所述CSS資源文件設(shè)定在頁面引入的順序?yàn)椋喊凑障到y(tǒng)級(jí)、用戶級(jí)、瀏覽器級(jí)、屏幕級(jí)、風(fēng)格級(jí)、頁面級(jí)順序進(jìn)行顯示輸出。

如上所述，本發(fā)明通過系統(tǒng)級(jí)定義全局樣式，用戶級(jí)定義針對(duì)某類用戶或者某個(gè)用戶的個(gè)性化樣式，瀏覽器級(jí)將各個(gè)瀏覽器的樣式分割成不同文件分而治之解決瀏覽器兼容問題，屏幕級(jí)定義各種大小顯示設(shè)備上的字體、間距、圖片等內(nèi)容，風(fēng)格級(jí)定義允許用戶切換的各種，頁面級(jí)定義了某個(gè)頁面特有的樣式擁有最高優(yōu)先級(jí)。根據(jù)CSS樣式規(guī)則，后輸出的資源在同名時(shí)具有高優(yōu)先級(jí)，即后輸出的樣式覆蓋先輸出的樣式。固能支持多顯示設(shè)備，又支持多分辨率、多瀏覽器，還能夠滿足用戶的個(gè)性化需求。

附圖說明

圖1為一種WEB前端CSS資源請(qǐng)求處理方法在一實(shí)施例中的流程圖。

圖2為一種WEB前端CSS資源請(qǐng)求處理裝置在一實(shí)施例中的原理圖。

具體實(shí)施方式

以下通過特定的具體實(shí)例說明本發(fā)明的實(shí)施方式，本領(lǐng)域技術(shù)人員可由本說明書所揭露的內(nèi)容輕易地了解本發(fā)明的其他優(yōu)點(diǎn)與功效。本發(fā)明還可以通過另外不同的具體實(shí)施方式加以實(shí)施或應(yīng)用，本說明書中的各項(xiàng)細(xì)節(jié)也可以基于不同觀點(diǎn)與應(yīng)用，在沒有背離本發(fā)明的精神下進(jìn)行各種修飾或改變。需說明的是，在不沖突的情況下，以下實(shí)施例及實(shí)施例中的特征可以相互組合。

見圖1，本實(shí)施例提供一種WEB前端CSS資源請(qǐng)求處理方法，其包括以下步驟：

步驟一，接收用戶端發(fā)送的頁面資源請(qǐng)求，頁面資源請(qǐng)求包含一用戶配置信息；

步驟二，根據(jù)所述頁面資源請(qǐng)求確定對(duì)應(yīng)的頁面資源文件，以及根據(jù)所述用戶配置信息從預(yù)設(shè)的第一CSS文件和第二CSS文件中篩選出需要輸出到前端的CSS資源文件，并對(duì)所述CSS資源文件設(shè)定在頁面引入的順序；

步驟三，將所述頁面資源文件和CSS資源文件返回所述用戶端。

具體的，所述用戶配置信息包括當(dāng)前的登錄用戶信息、設(shè)備信息、分辨率信息以及當(dāng)前頁面的瀏覽器版本信息。

具體的，所述CSS資源文件設(shè)定在頁面引入的順序?yàn)椋喊凑障到y(tǒng)級(jí)、用戶級(jí)、瀏覽器級(jí)、屏幕級(jí)、風(fēng)格級(jí)、頁面級(jí)順序進(jìn)行顯示輸出。

基于上述方案，一般由WEB服務(wù)器來響應(yīng)用戶在客戶端上頁面資源請(qǐng)求，WEB服務(wù)器預(yù)先設(shè)置有第一CSS文件和第二CSS文件，其中，第一CSS文件中預(yù)先儲(chǔ)存有適用于在各種顯示設(shè)備、瀏覽器以及顯示屏幕分辨率條件下的通用CSS樣式，而第二CSS資源文件中則儲(chǔ)存有各種與用戶信息相關(guān)的CSS資源文件，那么根據(jù)頁面資源請(qǐng)求中的用戶配置信息會(huì)分別從其中選擇對(duì)應(yīng)的CSS資源文件，然后與頁面資源一起返回至客戶端進(jìn)行顯示，這樣既能滿足用戶的體驗(yàn)需求，同時(shí)可以做到全面的兼容性顯示，而且不會(huì)造成服務(wù)器負(fù)擔(dān)。

例如，用戶在訪問一個(gè)門戶網(wǎng)站時(shí)，如果用戶沒有注冊(cè)為會(huì)員，那么頁面上所顯示的各種CSS資源文件是被保存在WEB服務(wù)器的第一CSS文件中，如果用戶注冊(cè)成為了該門戶網(wǎng)站的會(huì)員，并且擁有了自己的主頁，然后進(jìn)行了一些個(gè)性化的設(shè)置，那么這些個(gè)性化設(shè)置所對(duì)應(yīng)的CSS資源文件則保存在第二CSS文件中。

在另一實(shí)施例中，見圖2，根據(jù)本發(fā)明的另一方面，還提供了一種WEB前端CSS資源請(qǐng)求處理裝置，應(yīng)用于一WEB服務(wù)器3中，所述WEB前端CSS資源請(qǐng)求處理裝置2包括：請(qǐng)求接收模塊21，用于接收用戶端發(fā)送的頁面資源請(qǐng)求，頁面資源請(qǐng)求包含一用戶配置信息；資源選擇模塊22，用于根據(jù)所述頁面資源請(qǐng)求確定對(duì)應(yīng)的頁面資源文件，以及根據(jù)所述用戶配置信息從預(yù)設(shè)的第一CSS文件和第二CSS文件中篩選出需要輸出到前端的CSS資源文件，并對(duì)所述CSS資源文件設(shè)定在頁面引入的順序；請(qǐng)求響應(yīng)模塊23，用于將所述頁面資源文件和CSS資源文件返回所述用戶端。

具體的，所述用戶配置信息包括當(dāng)前的登錄用戶信息、設(shè)備信息、分辨率信息以及當(dāng)前頁面的瀏覽器版本信息。

具體的，所述CSS資源文件設(shè)定在頁面引入的順序?yàn)椋喊凑障到y(tǒng)級(jí)、用戶級(jí)、瀏覽器級(jí)、屏幕級(jí)、風(fēng)格級(jí)、頁面級(jí)順序進(jìn)行顯示輸出。

為了更好的闡述本發(fā)明提供的技術(shù)方案，下面將結(jié)合本發(fā)明在實(shí)際中的一具體應(yīng)用來予以進(jìn)一步說明。

步驟S101,建立一個(gè)缺省樣式的根目錄clientfiles,用來將所有系統(tǒng)自帶的資源同統(tǒng)一管理。在根目錄clientfiles下建立base、browsers、screens、theme目錄。其中base目錄中存放所有瀏覽器、屏幕、風(fēng)格、用戶均無關(guān)的標(biāo)準(zhǔn)通用樣式、腳本以及圖片；browsers目錄中僅存放用于解決瀏覽器兼容性的樣式、腳本以及圖片；screens目錄中僅存放用于不同顯示設(shè)備、分辨率的圖片、腳本以及圖片；theme目錄中包含了多種風(fēng)格，每種風(fēng)格包含各自的樣式、腳本以及圖片。base、browsers、screens、theme的各自子目錄下的CSS、js文件名需保持一致。建立一個(gè)COA系統(tǒng)特有的樣式根目錄COA結(jié)構(gòu)和clientfiles一致。建立完成后的目錄，如下所示：

步驟S102,是本發(fā)明實(shí)施例提供的系統(tǒng)級(jí)引入?yún)?shù)配置，系統(tǒng)的引入資源目錄用“，”隔開代表缺省情況下引入多套資源目錄，配置為clientfiels,COA代表引入系統(tǒng)級(jí)缺省樣式以及COA系統(tǒng)的特有樣式，詳述如下：

步驟S103,是本發(fā)明實(shí)施例提供的用戶登陸時(shí)寫入會(huì)話的信息清單，clientType在登陸時(shí)確定可以是pc、mobile、pad或其它設(shè)備；screenType代表了屏幕類型，如mi4，screen1080p等；skin為用戶的風(fēng)格，可以是已定義的任意風(fēng)格；roleType為登陸時(shí)的角色類型，如果為管理員則值為user。詳述如下：

步驟S104,是本發(fā)明實(shí)施例提供的頁面打開時(shí)的信息清單，clientType在登陸時(shí)確定可以是pc、mobile、pad或其它設(shè)備；screenType代表了屏幕類型，如mi4，screen1080p等；skin為用戶的風(fēng)格，可以是已定義的任意風(fēng)格；pageInclude為頁面級(jí)特別的引入資源。詳述如下：

步驟S105,根據(jù)S102、S103、S104得到的數(shù)據(jù)，按照引入順序在頁面上輸出資源。

首先根據(jù)系統(tǒng)配置SystemInclude、以及登陸的角色roleType判斷需要引入的系統(tǒng)級(jí)資源有clientfiles、coa。

然后根據(jù)頁面打開時(shí)的瀏覽器類型browserType判斷瀏覽器類型為IE8

然后根據(jù)用戶登錄時(shí)的客戶端類別clientType、分辨率screenType以及風(fēng)格skin判斷登陸的客戶端為pc，分辨率為screen1080p，風(fēng)格為deepMarine

然后根據(jù)頁面打開時(shí)的pageInclude判斷頁面的引入資源為Page.CSS

步驟S106，根據(jù)CSS的優(yōu)先級(jí)規(guī)則，后引入的資源優(yōu)先級(jí)高于先引入的資源，從而可以達(dá)到既支持多顯示設(shè)備，又支持多分辨率、多瀏覽器，還能夠滿足用戶的個(gè)性化需求。

上述應(yīng)用的原理可以概括為：首先將CSS樣式文件以及與其相關(guān)的圖片、字體等資源文件按照一種目錄結(jié)構(gòu)進(jìn)行存儲(chǔ)。在系統(tǒng)中記錄系統(tǒng)級(jí)引入資源，在用戶登錄系統(tǒng)時(shí)將登錄的設(shè)備、當(dāng)前瀏覽器的尺寸信息存儲(chǔ)到會(huì)話中，當(dāng)訪問某個(gè)頁面時(shí)，根據(jù)當(dāng)前系統(tǒng)的系統(tǒng)級(jí)引入資源、當(dāng)前的登錄用戶信息、設(shè)備信息、分辨率信息以及當(dāng)前頁面的瀏覽器版本信息，整理需要輸出到前端的CSS樣式文件以及相關(guān)資源，并按照系統(tǒng)級(jí)，用戶級(jí)，瀏覽器級(jí)，屏幕級(jí)，風(fēng)格級(jí)，頁面級(jí)順序，篩選后進(jìn)行輸出。

需要說明的是，上述具體應(yīng)用中，省樣式的根目錄clientfiles對(duì)應(yīng)上述實(shí)施例中的第一CSS文件,樣式根目錄COA對(duì)應(yīng)為上述實(shí)施例中的第二CSS文件。

具體的，所述用戶配置信息包括當(dāng)前的登錄用戶信息、設(shè)備信息、分辨率信息以及當(dāng)前頁面的瀏覽器版本信息。

具體的，所述CSS資源文件設(shè)定在頁面引入的順序?yàn)椋喊凑障到y(tǒng)級(jí)、用戶級(jí)、瀏覽器級(jí)、屏幕級(jí)、風(fēng)格級(jí)、頁面級(jí)順序進(jìn)行顯示輸出。

綜上所述，本發(fā)明通過系統(tǒng)級(jí)定義全局樣式，用戶級(jí)定義針對(duì)某類用戶或者某個(gè)用戶的個(gè)性化樣式，瀏覽器級(jí)將各個(gè)瀏覽器的樣式分割成不同文件分而治之解決瀏覽器兼容問題，屏幕級(jí)定義各種大小顯示設(shè)備上的字體、間距、圖片等內(nèi)容，風(fēng)格級(jí)定義允許用戶切換的各種，頁面級(jí)定義了某個(gè)頁面特有的樣式擁有最高優(yōu)先級(jí)。根據(jù)CSS樣式規(guī)則，后輸出的資源在同名時(shí)具有高優(yōu)先級(jí)，即后輸出的樣式覆蓋先輸出的樣式。固能支持多顯示設(shè)備，又支持多分辨率、多瀏覽器，還能夠滿足用戶的個(gè)性化需求。所以，本發(fā)明有效克服了現(xiàn)有技術(shù)中的種種缺點(diǎn)而具高度產(chǎn)業(yè)利用價(jià)值。

上述實(shí)施例僅例示性說明本發(fā)明的原理及其功效，而非用于限制本發(fā)明。任何熟悉此技術(shù)的人士皆可在不違背本發(fā)明的精神及范疇下，對(duì)上述實(shí)施例進(jìn)行修飾或改變。因此，舉凡所屬技術(shù)領(lǐng)域中具有通常知識(shí)者在未脫離本發(fā)明所揭示的精神與技術(shù)思想下所完成的一切等效修飾或改變，仍應(yīng)由本發(fā)明的權(quán)利要求所涵蓋。