Учитесь у крупных интернет-компаний и применяйте определенные правила предварительной проверки кода с четырех точек зрения: формат кода, ошибки в коде, привычки в коде и оптимизация кода.
1. Формат кода
Проблемы с форматированием кода можно решить с помощью автоматизированных инструментов.
- Настройки форматирования VSCode
- Стандартные правила eslint (например, правила eslint, введенные Airbnb или компаниями) + хаски (локальная проверка перед фиксацией)
- Удаленная проверка конвейера непрерывной интеграции (включение кэша, инкрементная проверка)
2. Ошибка кода
2.1 Есть ли код, который может вызвать утечку памяти?
对于 SPA 应用，用户无需刷新浏览器，所以要想确保垃圾回收生效，我们需要在组件对应生命周期里做主动销毁。
- 存在不必要的全局变量且未及时解除引用
全局变量，除非你关闭窗口或者刷新页面，才会被释放，如果缓存大量数据，很可能导致内存泄露。
一般来说，直接绑定在vue实例上即可，组件销毁时该实例也会销毁；但没有绑定在vue实例上的一定要主动销毁。
- 闭包内部变量未被销毁
- 计时器是否及时清理
- 监听事件是否有解绑
- 第三方库的销毁函数，在页面卸载时也需要调用，比如EventBus：
- v-if 指令导致的内存泄露
2.2 Есть ли обработка исключений для асинхронных операций?
- 异步操作拿接口请求来说，大家都知道的是，使用 promise 时要有.catch处理。但使用 async/await 时，有 .catch 处理的，也有try...catch处理的使用方法。这里推荐使用 .catch。原因在于：
- 可以控制接口请求出错后，**是否要阻塞后续业务逻辑执行**。
- .catch 里的 error 能明确知道是接口请求导致的错误，而**不需要再对 error 进行分类判断**，是接口200返回后的业务逻辑处理报错还是接口报错。
Определение того, является ли нулевое значение 2.3, тип, определяющий, вызывается ли функция
2.4 Если еще бессмысленное наличие или утечка блока при условии
2.5 Есть бессмысленные блоки catch
2.6 Содержит ли код угрозы безопасности?
2.7 Жесткое кодирование
3. Кодовые привычки
3.1 Вложенность if-else не может превышать 4 уровня
3.2 Don't repeat yourself
3.3 Не изменяйте напрямую прототип объекта (или прототип функции, массива и т. д.)
3.4 Вложенная настройка Не рекомендуется более 3 вложенных слоев обратного вызова
3.5 Функция не должна превышать 80 строк
3.6 Отображение логики через код, минимизация комментариев и нормализация комментариев
3.7 Удалить закомментированный бесполезный код
3.8 Удалите ненужные журналы отладки console.log
3.9 Уменьшение количества комментариев, отключающих eslint
3.10 Код группировки с пустыми строками
3.11 Соглашения об именах
3.12 Чрезмерный код, связанный с небизнес-логикой (например, сообщение более 10 строк, смешанное с бизнес-логикой)
3.13 Улучшите документ README и подробно объясните меры предосторожности
3.14 Попробуйте использовать экспорт вместо экспорта по умолчанию для экспорта, чтобы добиться загрузки по требованию
В-четвертых, оптимизация кода
4.1 Избегайте большого количества прямых манипуляций с узлами dom
4.2 Избегайте использования удаления
delete 操作符并不会释放内存，而且会使得附加到对象上的hidden class失效，让对象变成slow object。
（hidden class是V8为了优化属性访问时间而创建的隐藏类）
链接参考 https://juejin.cn/post/6844903918804172814
4.3 Ссылается на ненужный пакет npm
4.4 Попробуйте использовать изображения адресов CDN
4.5 Сторонние подключаемые модули, которые могут использовать адреса CDN для уменьшения размера пакета
4.6 Используйте защиту от сотрясения и регулирование для частой обработки событий (запросов и т. д.)
4.7 Многоэлементная привязка событий, такая как бесконечный каскадный поток, использует прокси-сервер событий для сокращения использования памяти.
4.8 Анимация уменьшает перекомпоновку и перерисовку
使用transform代替left,top等值的改变
根据浏览器的渲染流程，如果引起元素位置大小的改变，需要重新进行布局计算，然后重新生成位图，交给GPU渲染展示
而transform的改变不会对元素的位置大小产生改变，而是使用已经生成的位图，对它进行旋转，缩放，移动。