[發(fā)明專利]一種HTML內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript合并方法

有效

• 申請?zhí)枺?/td>: 201810537662.0
• 申請日: 2018-05-30
• 公開（公告）號: CN108762732B
• 公開（公告）日: 2019-06-11
• 發(fā)明（設(shè)計(jì)）人: 楊開森;任睿
• 申請（專利權(quán)）人: 南京焦點(diǎn)領(lǐng)動云計(jì)算技術(shù)有限公司
• 主分類號: G06F8/20
• 分類號: G06F8/20;G06F8/38
• 代理公司: 南京瑞弘專利商標(biāo)事務(wù)所(普通合伙) 32249
• 代理人: 陳建和

本發(fā)明公開了一種HTML內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript合并方法，其特征在于，通過自定義FreeMarker標(biāo)簽，設(shè)置收集及匯總內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript的占位點(diǎn)及變更原始內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript標(biāo)簽，并根據(jù)兩類標(biāo)簽內(nèi)容收集與否做差異化解析處理。達(dá)到更簡單且靈活的方式對可收集和不可收集做區(qū)分，增加頁面渲染過程中對不同形式內(nèi)容處理的便利性；針對能收集匯總的內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript的內(nèi)容在以設(shè)置的占位處匯總并解析，針對不能收集匯總的內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript在原始位置解析，實(shí)現(xiàn)在保證渲染效果的同時(shí)也能保證較快的渲染速度的效果。

技術(shù)領(lǐng)域

本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，特別是涉及一種HTML內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript合并方法。

背景技術(shù)

FreeMarker是一個(gè)模板引擎，即一種基于模板和要改變的數(shù)據(jù)，用來生成輸出文本(HTML網(wǎng)頁，電子郵件，配置文件，源代碼等)的通用工具。這種方式通常被稱為MVC(模型視圖控制器)模式，對于動態(tài)網(wǎng)頁來說，是一種特別流行的模式，它能幫助從開發(fā)人員(Java程序員)中分離出網(wǎng)頁設(shè)計(jì)師(HTML設(shè)計(jì)師)。FreeMarker協(xié)助HTML設(shè)計(jì)師無需再面對模板中的復(fù)雜邏輯，即使在沒有技術(shù)人員參與修改或重新編譯HTML代碼時(shí)，也能修改HTML頁面的樣式。

當(dāng)網(wǎng)頁基于組件模塊化渲染時(shí)，各個(gè)組件HTML內(nèi)容會出現(xiàn)零碎的與組件相關(guān)聯(lián)的內(nèi)聯(lián)CSS(即CSS樣式代碼直接寫在<sctyle>xxx</style>這一標(biāo)簽間)和內(nèi)聯(lián)JavaScript(即JavaScript樣式代碼直接寫在<script>xxx</script>這一標(biāo)簽間)，通常內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript會不規(guī)律地分散在HTML頁面中。內(nèi)聯(lián)CSS能有效減少HTTP請求，提升頁面性能，緩解服務(wù)器壓力。由于瀏覽器加載完CSS才能渲染頁面，因此能防止CSS文件無法讀取而造成“頁面裸奔”的現(xiàn)象。

由于內(nèi)聯(lián)形式的CSS和JavaScript均散落在HTML代碼中，導(dǎo)致因此當(dāng)技術(shù)人員瀏覽網(wǎng)頁源碼時(shí)，會因?yàn)檫@樣不簡潔的代碼界面而導(dǎo)致閱讀困難，因此,出于本能,地會想要將這些代碼進(jìn)行收集合并再做統(tǒng)一處理。此外，瀏覽器在解析HTML頁面時(shí)，在遇到大量分散的內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript時(shí)將會影響渲染HTML頁面速度；再者，IE6-IE9版本瀏覽器只解析31個(gè)style標(biāo)簽中的內(nèi)聯(lián)CSS，其余的內(nèi)聯(lián)CSS瀏覽器不會解析，這樣將導(dǎo)致頁面樣式丟失，影響頁面呈現(xiàn)效果。

為保證HTML界面的渲染速度和效果，現(xiàn)有解決方案大多數(shù)是通過解析整個(gè)HTML代碼(即利用正則表達(dá)式解析或者利用HTML解析庫解析)，分析出所有內(nèi)聯(lián)CSS(內(nèi)聯(lián)style標(biāo)簽)/內(nèi)聯(lián)JavaScript(內(nèi)聯(lián)script標(biāo)簽)，然后統(tǒng)一地將HTML頁面中所有內(nèi)聯(lián)CSS收集到頁頭，將所有內(nèi)聯(lián)JavaScript收集到頁底比如處理內(nèi)聯(lián)CSS的方式是：將原有的<sctyle>xxx</style>標(biāo)簽位置替換為空，然后將<sctyle></style>標(biāo)簽包含的內(nèi)容合并后追加到頁頭中或者替換頁頭中預(yù)定義的占位符。然而這樣收集、合并的方式實(shí)際僅僅是簡單的字符串替換實(shí)施的靈活性不強(qiáng)，也不便于對這些收集后的內(nèi)聯(lián)CSS/內(nèi)聯(lián)JavaScript按照業(yè)務(wù)邏輯進(jìn)行二次處理。

再者，由于在HTML頁中并非所有內(nèi)聯(lián)CSS要統(tǒng)一收集和處理，比如有些內(nèi)聯(lián)CSS在被收集后輸出到頁面上時(shí)需要排序處理，有些內(nèi)聯(lián)CSS內(nèi)容之后需要被替換，因此統(tǒng)一收集和處理的方案對于單個(gè)/多個(gè)內(nèi)聯(lián)CSS個(gè)性化處理能力差，不方便拓展。

因此，需要一種配置簡單且靈活性強(qiáng)，在保證頁面渲染效果的同時(shí)也能保證高效的渲染速度的HTML內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript的方法。

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

本發(fā)明所要解決的技術(shù)問題是克服現(xiàn)有技術(shù)的不足，提供一種HTML內(nèi)聯(lián)CSS和內(nèi)聯(lián)JavaScript合并方法。