前端质量总结

最近面试频频被问到如何保证前端质量问题，个人认为这是一个很难以描述齐全的东西。于是乎，只能尽量把自己能想到的点都记录下来，供大家参考，欢迎留言补充。

我眼中的质量，应该从以下几个方面去考虑：

1，安全：参考安全总结：前端安全思考_对前端安全的思考_iceggy的博客-CSDN博客

2，性能

2.1 代码层面：

。css放头部，js放尾部，因为css不会阻塞dom的渲染，而js会

。尽量减少内联样式的使用。js中尽量少操作dom。样式一次性加载完。防止二次渲染

。字体图标代替图片图标

。按需加载，局部刷新

。图片响应式，惰性加载

。善用事件委托；降低css复杂度

。减少js请求，webpack减包，异步打包

2.2 存储

。善用浏览器缓存，避免重复加载

。静态资源使用CDN

。文件压缩（webpack压缩插件）（比如：使用 url-loader 和 image-webpack-loader 对图片进行转化和压缩处理，采用 image-webpack-loader 压缩后，再对比较小的图片根据 url-loader 来进转化为 base64 格式，可以有效减少打包文件的体积和图片的 http 请求数量）

。使用webworkers，使用其他工作线程从而独立于主线程之外，它可以执行任务而不干扰用户界面

。ssr服务端渲染

2.3 请求

。善用防抖节流机制，缓存技术，减少http请求。

。使用http2

。预加载，异步加载（async）

3，可用性（可维护性，可靠性）

代码去重，命名语义化，注释有意义。将没用的元素设为不可见，减少dom深度，

（vue/react）虚拟dom：

• 将整个用户 UI 渲染到虚拟 DOM 中。
• 计算之前虚拟 DOM 和当前虚拟 DOM 表示形式之间的差异。
• 根据变化差异更新真实 DOM

(angular)增量dom：

使用真实 DOM 来定位代码更改

内存中不会有任何真实 DOM 的虚拟表示来计算差异，真实 DOM 仅用于与新 DOM 树进行差异比较。

增量 DOM 概念背后的主要思想是将每个组件编译成一组指令。然后，这些指令用于创建 DOM 树并对其进行更改

增量 DOM 拥有 Tree Shaking 特性：是指在编译目标代码时移除上下文中未引用代码的过程

增量dom与虚拟dom比较：

   增量dom不会生成真实 DOM 的副本；应用程序 UI 没有变化，增量 DOM 就不会分配任何内存，极大地节省设备的内存使用，差异计算减少了内存使用，但是更耗时。

具体见：增量 DOM 与虚拟 DOM 的对比使用 - 云+社区 - 腾讯云

合理使用硬件加速。风格统一。

webview: 借用浏览器的外壳实现兼容性（webview是原生系统，用于用于移动端 APP 嵌入(Embed) Web 技术，方式是内置了一款高性能webkit内核浏览器。）

如何保证

人为保证：定期代码codereview；熟记编码规范；定期保持代码迭代优化和重构

规范保证：指定内部审核规范，开发规范，自检自验规范和问题回归规范。配置规范规则在代码提交规则中，如eslint。

工具保证：利用自动化工具，做好自动化测试，善于利用开源工具进行代码规范扫描

流程保证：开发流程，转测流程，上线流程，回滚流程