淘宝前端团队：HTML 压缩服务治理

Posted 2021-04-30 优才网

缘由

笔者最近在研究如何实现页面 html 及内联 JS/CSS 的实时压缩功能。

首先笔者尝试了在前端模块中扫描内联的 JS/CSS 并压缩，这样还可以集成至前端模块的上传工具中。观察了一段时间发现这样无法处理模板中的 JS/CSS，造成很多遗漏的 JS/CSS 不能压缩。

于是笔者转而考虑对页面进行实时 HTML 压缩，这次考察了坑过许多 Node.js 开发者的 html-minifier 模块。该模块同时包含内联 JS/CSS 的压缩功能，功能是十分丰富的。不幸的是，很快笔者发现该模块应用在线上服务器环境极为不稳定，一场 HTML 压缩服务治理的探索就这样开始了。

CPU 100%

笔者先对少量页面进行了 HTML 及内联 JS/CSS 压缩测试，发现效果还不错。随后开始寻找更多页面样板进行尝试，很快遇到了第一个坑，“html-minifier 压缩部分 HTML 片段会导致 CPU 100%”。

案例如下：

很明显，案例中有 HTML 语法错误，而 html-minifier 依赖 HTML 语法树的解析，对不合理的输入未做异常处理导致 CPU 100%。恰恰这样的语法错误是前端用户经常不小心写出来的，所以笔者不能无视。提 Issue 给模块作者，得到的回复是 html-minifier 不能处理非法 HTML，没有改进计划。

这里笔者评估自己没精力独立修复此问题，因此想到了一个绕开此问题的办法，使用 vm 模块在独立的上下文处理压缩任务，并设置超时时间。

测试该方案有效，vm 在指定的时间内完不成任务会抛出 ScriptTimeout 异常，再也不会直接导致 CPU 100% 了。

Node.js 的 vm 模块提供了一个独立的 JS 执行上下文，但并不是独立的进程，因此它并不是进程安全的。这里笔者只用来避免 JS 上下文里的 CPU 100%，vm 完全可以胜任。

要了解更多 vm 模块知识可以参考官方文档：

不标准的异常信息

html-minifier 奇葩的是，遇到不标准 HTML 并非都会 CPU 100%，部分案例还是可以抛出异常的。比如下面这种：

<p>hi\n<!--

此时，html-minifier 抛出一个 Parse Error 的“异常”，但是这个异常是字符串对象，而不是 Error 对象。如果你需要对 Error 对象做分类处理或其它包装，需要注意这个问题。

速度慢

测试发现，页面的 HTML 压缩会花费 300-500ms，而页面的渲染时间一般在 100ms 以内。如此低的性能在实时渲染性能要求较高的应用中是不可接受的。

因此笔者为了追求更快的压缩速度，尝试了如下优化方法：

• 舍弃部分不是不太关键的功能。比如页面的内联 CSS 很少，就可以关闭内联 CSS 的压缩功能。经测试，移除内联 CSS 压缩可以节省 100ms 的时间。

• 内存管理优化，更少的 GC 是高效压缩的保障。观察发现在遇到 Node.js 进行大量内存回收时，HTML 压缩时间会变成平常的 4-5 倍。内存问题笔者在 Node.js 0.12.x/4.x 都有遇到，一旦出现问题，会对稳定性及性能产生很大影响。

总结

在优化 HTML 压缩的过程中，笔者解决了稳定性问题，但是没有从根本上解决性能问题。后续会考察最近新发现的 minimize 模块，该模块号称适合集成至线上服务器环境，因此比较重视压缩性能。缺点是该模块还在快速发展中，截止到截稿时，其 JS 压缩插件还未发布。

来源：http://taobaofed.org/blog/2015/11/12/html-minify-service/

优才学院介绍：

优才学院，中国IT职业教育O2O创新品牌。开设有Web、JS方向全栈直播课程，android、UI线下就业课程。目前已培养全栈工程师500+，他们就职于腾讯、百度、滴滴、美丽说、友宝、中青龙图、锤子科技、途牛等知名企业，并且大部分学员在其企业担任要职，自主创业者也不在少数。如果你想提升技能或者进入名企，欢迎参加优才学院全栈课程学习。

开班通知：

▶Android 零基础线下就业班将在11月30日开课

▶UI 零基础线下就业班将在12月7日开课

届时7大校区（北京、郑州、西安、成都、南京、广州、武汉）将同时开班。

↙点击下方“阅读原文”了解课程详情