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

技術領域

本發明涉及互聯網技術領域，特別是涉及一種HTML內聯CSS和內聯JavaScript合并方法。

背景技術

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

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

由于內聯形式的CSS和JavaScript均散落在HTML代碼中，導致因此當技術人員瀏覽網頁源碼時，會因為這樣不簡潔的代碼界面而導致閱讀困難，因此,出于本能,地會想要將這些代碼進行收集合并再做統一處理。此外，瀏覽器在解析HTML頁面時，在遇到大量分散的內聯CSS和內聯JavaScript時將會影響渲染HTML頁面速度；再者，IE6-IE9版本瀏覽器只解析31個style標簽中的內聯CSS，其余的內聯CSS瀏覽器不會解析，這樣將導致頁面樣式丟失，影響頁面呈現效果。

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

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

因此，需要一種配置簡單且靈活性強，在保證頁面渲染效果的同時也能保證高效的渲染速度的HTML內聯CSS和內聯JavaScript的方法。

發明內容

本發明所要解決的技術問題是克服現有技術的不足，提供一種HTML內聯CSS和內聯JavaScript合并方法。