【CodeComplete】前端代码维护总结

我们公司的前端只负责页面（React、Vue、weex、QuickApp），处于数据流动的最下游。一般来说，数据越最密集的地方（数据库），虽然不是 Bug 最多的地方，但一定是 Bug 最致命的地方，所以单单是为了「维护」，公司就需要每个星期开会讨论方案、运维经常加班、客服找开发者开喷。

拿到下金蛋的鹅后，往后的照料丝毫不能马虎。

策略的选取

先确定两个规律：

1. 系统由多个部分或者多个层次组成。理论上多个层次的代码优化，能让让提升叠加到系统上（比如框架 Vue1 升级到 Vue2 速度提升到2倍，加上我让页面表格渲染速度变成2倍，那么整个页面到速度就变成了4倍）。
2. 一般来说系统会符合「2/8原则」，也就是说最重要的核心代码只占 20%。

也就是说，减少维护成本的最有效做法就算平时行善积德，做好数据、业务、组件的「解耦分层」，这样就能：

• 有效提升找到 Bug 的效率。
• 各个层次分开改进，方便切入代码的优化。

最好当然是防患于未然。真要找不到 Bug，那就得用辅助工具来帮助定位问题和改进。

优化的工具

一般按照以下几种功能来分类：

• 查找问题工具

  • 专业调试工具。网页端有 Chrome 浏览器这个强大的工具，针对所有的浏览器线程都有专业的调试工具，Performance、Network、Menory 板块，火焰图、帧率监测、console 等方法都是你的好帮手。
  • 客户端监测。网页的监测，比如 Sentry 就能捕获错误，并上传到服务器进行分析。财大气粗的可以使用 Fundbug 之类的专业平台，服务包括了网页、小程序、QuickApp 等等。
  • 服务器监测。这方面我了解比较少，不过一般运维人员会搭建，告知 Bug 的环境和平台，就能通过日志快速定位问题。

• 优化性能的工具

  • 更高性能平台

    • 增加服务器性能。最简单粗暴的方案，一群后台人员焦头烂额都解决不了的性能瓶颈，最后通过每个月增加 1000 元支出来增加服务器性能解决了。
    • 使用新型平台。比如计算一些复杂算法可以通过 H5 浏览器的 WebWorkers 进行，不过这样就丢失了兼容性（万恶的 IE8，不过如果做手机平台的话就可以不用考虑这个问题）。

  • 更优秀的算法。

    • 基础算法。不用多介绍，排序、查找。掌握设计模式、数据结构和算法，走遍天下都不怕。
    • 优质设计。基础一点就是 JS 优化三把斧：缓存、近作用域、减少 DOM 操作，高级一点就是天猫的 DOM 掏空合并、Goolge 的 DOM 复用。