你的前端代码多久没有检查过了？

代码检查很重要，原因有三：

避免低级bug：一些常见代码问题，如果在编译或运行前不能及时发现，代码中的语法问题会直接导致编译或运行时错误，影响开发效率和代码质量；

统一代码习惯：每一个团队或个人都会有一些代码规范或者代码习惯，为了便于后期维护和阅读，我们编写的代码也需要符合一定的格式规范；

保证线上代码质量：在版本管理中，我们需要在提交或发布之前自动执行一些代码检查工作，确保我们的代码符合最终版本要求。

前端代码审查清单是一个保证前端代码质量的审查清单。当我们在开发写代码的时候，总会各种各样的问题，自测的时候由于太熟悉自己的代码逻辑往往测试不够充分，无法发现问题。

前端代码审查清单就是为了解决这个问题！清单存放了一些常见的问题，当我们开发完成之后，对照清单思考一下这些问题在代码中是否遇到或者妥善处理，从而提高代码质量。

前端

前端安全

所有的用户可以在页面中输入信息的地方，是否做了防 XSS 以及特殊字符的过滤处理（检测正确的类型，长度，格式和范围）？

与后端接口交互，获取信息使用 GET 方式，传送信息使用 POST 方式。后端接口应对各项参数做校验。前端也要判断接口是否返回合法、正确。

开发与 DOM 操作有关的代码时，是否对 DOM 不存在或者被人为修改的情况做处理？

获取数据和信息时，是否对类型做过处理和转换并设置为空时的默认值？比如：var num = parseInt(Str);

在所有会发生错误的地方，是否编写了错误处理逻辑？比如：阻止继续执行、显示错误信息、记录错误日志和信息等。

代码里获取 window.location 相关属性的地方，是否对里面的 XSS 字符做了过滤处理？

前端性能

JS 代码是否尽量放在底部？CSS 代码是否尽量放在了顶部？

是否部署 CDN 或者开启了缓存功能？

上线或者发布前，是否对静态资源进行打包、压缩处理？

正确使用预加载、懒加载等技术手段提高性能。

是否对图片等资源进行压缩以及 CSS Sprite 处理？

代码质量

你的代码是否遵循团队要求的代码规范(大括号的位置，变量名和函数名，行的长度，缩进，格式和注释)？

是否有冗余代码没有注释掉或者删掉？例如：删除或者注释 console.log 避免低端 IE 报错等。

关键功能是否还有优化的空间？

代码是否简单易懂，逻辑清晰，模块化？

变量名是否简单易懂？是否拼写正确？

CSS 属性是否有拼写错误？

HTML 标签是否书写正确，是否嵌套正确？

JS 代码是否经过 JSLint 或者 ESLint 等工具校验？

是否将核心功能尽可能独立，从而避免其他功能出现问题影响到核心功能？

注释

是否在重要功能附近添加合适的注释？

注释是否包含了开发人员信息、开发时间、开发者联系方式以及相关功能说明？

换位思考，你能根据你的注释推断出下面代码的功能吗？

代码里是否还存在 TODO ？是否可以删掉或者完善功能？

可能产生意外情况的地方是否留下说明？

测试

代码逻辑是否正确、可用、符合需求？

在进行各种操作的时候，是否有报错出现？

是否有资源加载出错或者失败？

是否按照项目要求，使用相关设备以及浏览器进行测试和体验？

是否对边界条件以及看起来比较极端的情况做过测试？

故障处理

是否考虑过如果发生线上故障，如何做回滚处理？处理什么文件？

功能与功能之间是否足够独立？是否设置开关？当某个功能发生故障是否可以通过开关关掉？