freebuf一、验证码现状
优化前，我们优先对现有验证码进行了分析，总结其存在的主要问题。
资源乱象
无节制的DOM及异步等待
移动端适配不规范
资源乱象
资源乱象是老旧工程普遍存在的问题，作为jQuery时代遗留下来的验证码工程，该现象同样存在。表1.1展现了旧版验证码资源文件情况，从表中可以看出，旧版验证码资源使用相对混乱，尤其是js/css资源，分散的多个小文件大大增加了HTTP请求数量。验证码的图片资源都是一些小图标，虽然前期的一些优化已经将这些小图标合并成雪碧图，但对于少量的小图标仍然有优化空间。
表1.1 验证码前端资源文件分布
无节制的DOM及异步等待
验证码拥有诸多定制化能力，包括弹出形式、多语言、主题色、头部和反馈按钮等，旧版验证码为了实现定制化能力进行了大量冗余的DOM操作，不仅消耗性能，而且加载过程会出现界面闪烁。同时旧版验证码为了解决一些异步等待的问题，引入了诸多定时器，看似无脑，却大大增加了逻辑复杂度，使得代码难以维护。
移动端适配不规范
旧版验证码未进行体系化的移动端适配，所有适配的样式均为js实时计算完成后写入DOM的style中，逻辑复杂。此前收到诸多用户反馈均与此适配方式有关，前端经常需要为了适配某一种机型而堆叠代码，苦不堪言。
面临着如此多的历史包袱，重构势在必行。
二、方案及技术选型
图2.1是验证码的前端框架，验证码的主要页面使用iframe加载，iframe隔离了业务页面，为验证码提供了更可控更干净的执行环境。业务页面接入时需要引入一个验证码的入口js，该js负责分配不同类型的验证码、创建iframe，并管理iframe与业务页面的通信。
图2.1 验证码前端框架
任何完全推翻原有架构的重构都是耍流氓。验证码重构的原则是保持原有的业务逻辑，只重构前端实现。因此本次重构将围绕绿色iframe部分进行，其他部分保持不变，这样既能保证业务平滑过渡，也能让原有测试样例完整覆盖。
一个项目能否具备良好的可维护性，前期技术选型尤为重要。重构前，基于对验证码整体功能的评估，最终将整体优化方案划分为3个部分。本文也将围绕这3个部分，讲述验证码前端性能优化的思考及方案。
资源合并
模块化
DOM操作优化
资源合并打包
图片、样式内联
规范移动端适配
引入flexible.js
rem自动换算
iframe内缩放问题
webview内适配问题
提升用户预期
三、资源合并
资源合并是一个很大的方向，不同的产品合并方式各不相同。如图3.1所示，是整个验证码的加载流程，绿框内的节点为本次优化需要关注的阶段。
图3.1 验证码加载流程
重构前我们对各阶段耗时进行了分析，其中DOM渲染和验证码主逻辑耗时占比相对较高，属于需要重点优化的部分。而验证码类型请求、iframe创建、iframe请求和图片加载与浏览器性能及服务端响应相关，因此暂时不进行优化，后期考虑预加载。
图3.2 验证码加载时间
3.1 模块化
从加载流程可以看出，验证码并不是一个简单的几十上百行代码就能实现的工程，复杂的逻辑需要分模块才能更好地管理团队分工和整体进度，模块化也有利于单元测试，保证工程的质量。然而，JavaScript并不是一种模块化编程语言，其模块化需要依赖额外的工具实现。早期的模块化有多种不同的写法，想要详细了解的读者可阅读阮一峰老师的《Javascript模块化编程（一）：模块的写法》。
模块化发展的中期，require.js和sea.js占据了模块化解决方案的半壁江山，这两个方案都是对模块化很好的实践。验证码将采用Node.js模块系统的CommonJS规范，借助webpack4将模块打包到一起。最终验证码工程中模块引用及导出相关的代码非常简单：
const module1 = require('./module1'); // ... function Captcha() {} // ... module.exports = Captcha;
模块化是资源合并的基础，这里的模块化不仅是将业务逻辑分模块加载，也包含了CSS、Icon等样式和图标。只有把所有资源均纳入到模块化管理中，配合webpack不同的loader，才能更细粒度地控制合并资源。
3.2 DOM操作优化
DOM操作是整个JavaScript执行周期中最耗时的操作之一，不合理的DOM操作不仅会触发页面大量的重排和重绘，还有可能导致页面假死。良好的DOM组织结构应该遵循不需要大量重排（Reflow），DOM修改尽量用重绘（Repaint）代替的原则。
转载请注明来自网盾网络安全培训，本文标题：《验证码前端性能分析及优化实践》
