一种HTML内联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合并方法。

为解决上述技术问题，本发明提供一种html内联css和内联javascript合并方法，其特征在于，通过自定义freemarker标签，设置收集及汇总内联css和内联javascript的占位点及变更原始内联css和内联javascript标签，并根据两类标签内容收集与否做差异化解析处理，具体步骤有：

步骤1：在html页面中任意选取一个位置，新建一个用于包裹html页面中内联css和内联javascript的基础freemarker标签，按照freemarker语法形式设置用于收集内联css和内联javascript的占位点、并为每一个占位点配置身份标识属性和收集限定属性；其中，所述收集内联css的占位点是用于标识汇总html页面中内联css的位置；所述收集内联javascript的占位点是用于标识汇总html页面中内联javascript的位置；

步骤2：定位html页面中所有内联css，并将所有内联css的标签“<style></style>”变更为freemarker标签的形式[@web_style][/@web_style]；定位html页面中所有内联javascript，并将所有内联javascript的标签“<script></script>”变更为freemarker标签的形式[@web_javascript][/@web_javascript]；在标签变更过程中，设置标签[@web_style][/@web_style]和[@web_javascript][/@web_javascript]的收集属性、收集顺序属性及收集点属性；其中，所述收集属性用于指明标签内容是否需要汇总收集；所述收集顺序属性用于指明标签内容的收集顺序；所述收集点属性用于指明标签内容的收集汇总位置，收集点属性值应与占位点标识保持一致；

步骤3：html页面渲染，具体渲染为通过解析出步骤1中的基础freemarker标签，依次识别html页面中用于收集内联css和内联javascript的占位点，以及基于freemarker形式编制的内联css标签和内联javascript标签；综合按照标签收集属性、收集顺序属性及收集点属性，决定是否收集合并内联css/内联javascript内容、收集顺序及收集位置；将内联css/内联javascript占位点替换为相对应收集汇总的标签内容，无收集需求的标签内容在原位置输出，形成基于内联css和内联javascript合并的html页面；

步骤4：按照新形成的html页面内容，对合并的内联css标签内容、合并的内联javascript标签内容同时集中处理，最终网页样式和动态效果在浏览器端输出和显示。

所述内联javascript占位点的设置划分为三类，即统计类、效果类和其他类；并依照渲染速度从快至慢按照效果类内联javascript占位点、其他类内联javascript占位点、统计类内联javascript占位点这一顺序从上至下排列。

所述占位点的收集限定属性是对靠近占位点的标签内容是否收集的限定，若收集限定属性值为“是”时，占位点只接收指定其作为收集点的标签内容；若收集限定属性值为“否”或未设定内容收集属性，占位点收集靠近其位置且没有指定收集占位点的标签内容。

所述步骤2中设置标签收集属性时，对标签内容是否收集取决于渲染网页的浏览器、网页渲染速度的要求、及html页面内容的代码整洁度；若用于渲染网页的浏览器的渲染速度慢，或某一个网页因需渲染大量内联css和内联javascript导致渲染速度慢，或html页面内因内联css和内联javascript代码散落不均而导致代码繁杂，上述任一个条件符合都将对标签内容做收集处理。

所述步骤3的html页面渲染具体包括：

步骤3-1：通过解析步骤1中建立的基础freemarker标签，进一步解析此标签内包含的内容；此标签会解析被包裹的html页面区域，当遇到html页面区域内的freemarker标签会依次进行内容解析；

步骤3-2：在解析页面内容过程中，遇到每一个内联css占位点标签，根据此标签的身份标识属性，在后台生成一个与当前解析到的内联css占位点相匹配的占位符，用于在下一阶段页面渲染出错时，判定html页面中出现错误的内联css占位点；遇到每一个javascript占位点标签，根据此标签的身份标识属性，在后台生成一个与当前解析到的内联javascript占位点相匹配的占位符，用于在下一阶段页面渲染出错时，判定html页面中出现错误的内联javascript占位点；

步骤3-3：在解析页面内容过程中，遇到每一个变更后的内联css标签，即[@web_style][/@web_style]，通过获取标签的收集属性值，判定此标签包含的内容是否收集汇总：如果标签的收集属性值显示为“收集”，则在内存中存储此标签内的内容后，删除html页面中当前解析到的[@web_style][/@web_style]和这一标签中包含的内容；如果标签参数显示为“不收集”，则直接在当前标签[@web_style][/@web_style]的位置输出css标签[style][/style]和标签内容；

步骤3-4：在解析页面内容过程中，遇到变更后的内联javascript标签

[@web_javascript][/@web_javascript]，通过获取标签的收集属性值，判定此标签包含的内容是否收集汇总：如果标签的收集属性值显示为“收集”，则在内存中存储此标签内的内容后，删除html页面中当前解析到的标签[@web_javascript][/@web_javascript]和这一标签中包含的内容；如果标签参数显示为“不收集”，则直接在当前标签

[@web_javascript][/@web_javascript]的位置输出原始css标签

[javascript][/javascript]和标签内容；

步骤3-5：针对步骤3-3中需要合并的内联css标签内容，根据标签

[@web_style][/@web_style]的收集点属性值，决定标签内容的合并去向和位置；如若收集点属性值有值，则根据收集点属性值指向的占位点，将此内联css标签内容置于指向的占位点内；如若收集点属性值无值，则默认将内联css标签内容放置在最后一个内联css占位点内；

针对3-4中需要合并的javascript标签内容，根据

[@web_javascript][/@web_javascript]的收集点属性值，决定标签内容的合并去向和位置；如若收集点属性值有值，则根据收集点属性值指向的占位点，将此内联javascript标签内容置于指向的占位点内；如若收集点属性值无值，则默认将内联javascript标签内容放置在最后一个内联javascript占位点内；

步骤3-6：经过上述步骤解析，最终形成并输出一个新的html文件：需要统一处理的内联css合并在一个标签[style][/style]内，需要统一处理的内联javascript合并一个标签[javascript][/javascript]内；需要单独或有个性化处理需求的内联css和内联javascript保留在原始位置。

所述步骤3中，当在页面渲染时出现错误，占位符将代替占位点出现在html页面中；进一步地，根据占位点和占位符间的匹配关系，定位设置出错的占位点。

所述内联css标签内容和内联javascript内联内容进入占位点内的顺序根据标签的收集顺序属性决定；如若收集属性值为空，则根据内联标签在原始html页面中的位置顺序决定。

本发明所达到的有益效果:(1)利用freemarker的特性，通过在html页面内以自定义freemarker标签的形式设置用于合并收集的占位点，及变更原始内联css和内联javascript标签，并根据css和javascript的内容和形式决定是否对内容收集汇总，实现以一种更简单且灵活的方式对可收集和不可收集做区分，增加页面渲染过程中对不同形式内容处理的便利性；

(2)通过在页面渲染阶段，针对能收集汇总的内联css和内联javascript的内容在以设置的占位处汇总并解析，针对不能收集汇总的内联css和内联javascript在原始位置解析，实现在保证渲染效果的同时也能保证较快的渲染速度。

附图说明

图1为本发明的示例性实施例的工作流程图；

图2为本发明的示例性实施例中原始的html文件内容示意图；

图3为本发明的示例性实施例中基于freemarker标签形式编制的html文件示意图；

图4为本发明的示例性实施例中新形成的html文件内容示意图。

具体实施方式

下面结合附图和示例性实施例对本发明作进一步的说明：

图2为本发明实施例中原始的html内容示意图，其中内联css标签<style></style>包含的内容有：body1{}、body2{}、body3{}和body4{}，内联javascript标签<script></script>包含的内容有：console.log(“1”)、console.log(“2”)、console.log(“3”)、console.log(“4”)、console.log(“5”)；现为了提高网页渲染速度，执行对html内容中部分内联css和内联javascript合并，具体步骤参照图1所示，具体流程包括：

步骤201：在html页面中任意选取一个位置，新建一个用于包裹html页面中内联css和内联javascript的基础freemarker标签，

[@phoenix_directive_pm_html][/@phoenix_directive_pm_html]，按照freemarker语法形式设置用于收集内联css和内联javascript的占位点、并为每一个占位点配置身份标识属性jumpname和收集限定forjump属性；

在本发明实施例的html页面中，在html页面的页头设置2个收集内联css的占位点，参见图3中的[@phoenix_directive_pm_stylesjumpname＝“bottom1”forjump＝“true”/]和[@phoenix_directive_pm_stylesjumpname＝“bottom2”/]，在html页面的页底设置2个收集内联javascript的占位点，参见图3中的[@phoenix_directive_pm_scripts

jumpname＝“bottom3”forjump＝“true”/]和[@phoenix_directive_pm_scripts

jumpname＝“bottom4”/]；

步骤202：定位html页面中所有内联css，并将所有内联css的标签<style></style>变更为freemarker标签形式[@web_style][/@web_style]；定位html页面中所有内联javascript，并将所有内联javascript的标签<script></script>变更为freemarker标签的形式[@web_javascript][/@web_javascript]；分别设置每一个标签

[@web_style][/@web_style]和[@web_javascript][/@web_javascript]的标签属性值，包括收集属性collect、收集顺序jumporder、收集点属性jumpto；

按照本发明实施例中对内联css标签内容body1{}的标签属性设置，body1{}将会被收集汇总，收集点位于bottom1，且在收集过程中，第一个收集；body3{}则是第二个收集；

步骤203：通过解析步骤201中建立的基础freemarker标签，进一步解析此标签内包含的内容；此标签会解析被包裹的body区域，当遇到body区域内的freemarker标签会依次进行页面内容解析；

步骤204：在解析页面内容过程中，遇到每一个内联css占位点标签

phoenix_directive_pm_styles，根据此标签的身份标识属性，在后台生成一个与当前解析到的内联css占位点相匹配的占位符<！--pm_style_placeholder_{uuid}-->，用于在下一阶段页面渲染出错时，判定html页面中出现错误的内联css占位点；解析遇到每一个javascript占位点标签phoenix_directive_pm_scripts，根据此标签在后台生成一个与当前解析到的内联javascript占位点相匹配的占位符，用于在下一阶段页面渲染出错时，判定html页面中出现错误的内联javascript占位点；

步骤205：在解析页面内容过程中，遇到变更后的每一个内联css标签，即

[@web_style][/@web_style]，通过获取标签参数collect值判定此标签包含的内容是否需要收集汇总：如果collect值为true，则表示收集，将标签内容存储，并将

[@web_style][/@web_style]和此标签包含的内容删除；如果collect值为false，则表示不收集，在直接在当前标签[@web_style][/@web_style]的位置输出标签[style][/style]和标签内容；

如图3所示为本发明实施例中基于freemarker标签形式编制的html页面内容示意图，以标签内容“body1”为例，显示包裹标签的收集属性值为true，将标签内容“body1”存储，清空标签[@web_style][/@web_style]和其包含的“body1”；以标签内容“body2”为例，显示包裹标签的收集属性值为false，保留原始位置的标签和其包含的“body2”，；

步骤206：在解析页面内容过程中，遇到变更后的每一个内联javascript标签

[@web_javascript][/@web_javascript]，通过获取标签参数collect值判定此标签包含的内容是否需要收集汇总：如果collect值为true，则表示收集，将标签内容存储；如果collect值为false，则表示不收集，在直接在原始位置直接输出标签内容；

步骤207：针对步骤206和步骤207中需要合并的内联css标签内容，根据

[@web_style][/@web_style]的jumpto属性值，所述jumpto属性值与步骤202设置的占位点标识参数保持一致，判定此标签内容的汇总收集点：如果jumpto有值，则按照jumpto指明的占位点，将此标签内容置于此占位点内；如果jumpto无值，将此标签内容置于最后一个内联css占位点内；

针对步骤205和步骤206中需要合并的内联javascriptcss标签内容，根据

[@web_javascript][/@web_javascript]的jumpto属性值，判定此标签内容的汇总收集点：如果jumpto有值，则按照jumpto指明的占位点，将此标签内容按照设置的收集顺序，置于此占位点内；如果jumpto无值，将此标签内容置于最后一个内联javascript占位点内；

以本发明是实施例中内联javascript标签内容console.log("5")为为例，根据设置的标签属性值，没有指定console.log("5")的收集位置，在收集过程中默认将console.log("5")收集到排列在最后一位的内联javascript占位点“bottom4”中；

步骤209：经步骤205-步骤207的解析和处理，形成并输出新的html文件，如图4所示，所有存在收集汇总需求的内联css合并在一个标签[style][/style]内，所有存在收集汇总需求的内联javascript合并在一个标签[javascript][/javascript]内；没有收集汇总需求的内联css和内联javascript仍保留在原始位置上；

步骤210：按照新形成的html文件内容，如图4所示，网页样式和动态效果在浏览器端输出和显示。

本发明主要用于提供一种html内联css和内联javascript合并方法，其有益效果是：

(1)本发明利用freemarker的特性，通过在html页面内以自定义freemarker标签的形式设置用于合并收集的占位点，及变更原始内联css和内联javascript标签，并根据css和javascript的内容和形式决定是否对内容收集汇总，实现以一种更简单且灵活的方式对可收集和不可收集做区分，增加页面渲染过程中对不同形式内容处理的便利性；

(2)本发明通过在页面渲染阶段，针对能收集汇总的内联css和内联javascript的内容在以设置的占位处汇总并解析，针对不能收集汇总的内联css和内联javascript在原始位置解析，实现在保证渲染效果的同时也能保证较快的渲染速度。

以上实施例不以任何方式限定本发明，凡是对以上实施例以等效变换方式做出的其它改进与应用，都属于本发明的保护范围。