[发明专利]一种HTML内联CSS和内联JavaScript合并方法

说明书

本发明公开了一种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合并方法。