Эта статья участвует в "Боевой рекорд оптимизации производительности"Тема заявки на доклады
предисловие
Для оптимизации производительности веб-страницы первое, о чем мы думаем, это начать с JavaScript. Но этот горшок js значит не читал 😂, а в чем причина не js? Содержание статьи невелико, если вы внимательно его прочитаете, я думаю, оно будет вам полезно.
в самом проектеReact、Vue、AngularБыли использованы три основных фреймворка, и эффективность их разработки не вызывает сомнений, но в некоторых сценариях их производительность действительно неудовлетворительна. Если вы столкнулись с таким сценарием, пожалуйста, оставьте сообщение ниже, чтобы обсудить.
давайте посмотрим это вместе实际项目中遇到的此类性能瓶颈是如何处理的!
задний план
项目基于VUE，由于业务要求需要长列表渲染(不能做动态加载和虚拟列表)，
列表数据过多时滚动条的scrollTop达到5w+ ,
同时页面中每一列的一些元素通过websocket实时更新。
在首屏加载、页面滚动、筛选等交互时，页面发生比较严重的卡顿问题
Прежде всего, давайте начнем оптимизировать соответствующие части js.
1. 筛选部分使用服务端渲染
2. 低频使用的隐藏元素全部v-if
3. 列表每列的元素标签尽可能减少
4. 部分交互方法优化，部分使用了jquery 原生化
5. Vue computed 中高频触发的方法写到vuex中按需触发(服务端渲染时也需要使用)
6. 每列的悬浮组件前置（提升到列表父级组件）
7. 事件委托（减少每列的事件绑定）
...
После оптимизации общая производительность была улучшена, но когда количество списков велико, прокручиваемый список все еще может ощущаться явным отставанием.
Два предложения css для решения проблемы зависания при прокрутке страницы
По сути, заморозка страниц — это своего рода пользовательский опыт.Как судить о качестве этого опыта, поFPS(frame per second), то есть сколько повторных рендеров можно выполнить за одну секунду, а частота обновления дисплея вообще 60Гц (в
Вы можете проверить это в настройках дисплея компьютера), браузер будет автоматически обновлять анимацию в соответствии с этой периодичностью. Время рендеринга каждого кадра не может превышать 16,66 мс (1000 мс/60).В реальной разработке страницы с частотой 30-60 кадров в секунду будут относительно плавными.
посредством следующихchrome devtoolУстраните проблему с Caton вPerformancePanel 10s рекордное время работы:
В браузере вы можете очень четко видеть время каждого кадра через кадры, и самый длинный кадр почти1 с (намного больше 16,67 мс).
Как показано выше,update layer treeа такжеPaintЗаняло 71,2% времени, что это? Почему так долго? Буквально означает обновление дерева слоев и отрисовки, что на самом деле представляет собой перестановку и перерисовку, с которой знакомы наши интерфейсные программисты.
非常需要注意的一点是：一个元素的重排通常会带来一系列的反应，甚至触发整个文档所有元素的重排和重绘，性能代价是非常高昂的。
Как проверить, есть ли элементы, связанные с RedRaw? Как избежать?
Мы можем управлять страницей с помощью следующих настроек, и перерисованная область будет выделена зеленой рамкой на странице.
После расследования было обнаружено, что есть две основные ситуации, которые вызывают цепочку перерисовки и перекомпоновки страницы, что приводит к зависанию страницы при прокрутке:
case1: box-shadow的阴影区域和固定定位有交叉关系时。
Например, левая навигация — это фиксированное позиционирование, правая сторона — это часть списка, а box-shadow добавляется к внешнему элементу списка, Когда его заштрихованная область и фиксированное позиционирование пересекаются. Фиксированное позиционирование при прокрутке вызовет перерисовку через тень окна, Косвенно вызывает перерисовку всех элементов в правом списке.
Исправлено: прокрутка списка стала плавной после удаления свойства box-shadow.
case2: websocket实时更新列表中某行中某个元素的数据时，整个列表发生重绘。
Чтобы решить эту проблему, мы должны сначала понять иерархическую проблему веб-страниц.
Есть два фактора, вызывающих эту проблему, один из которых заключается в том, что использование анимации при изменении данных приводит к перерисовке элементов на одном уровне.
Исправление 1. Удалите атрибут анимации (недоступно из-за бизнес-требований).
Исправление 2: добавьте относительное позиционирование элемента и установите уникальное значение z-index. Создает для элемента отдельную иерархию, чтобы при отображении элемента браузером не запускалась цепочка перерисовок.
Во время устранения неполадок вы можете снизить скорость ЦП, установив следующие параметры для проверки проблемы:
Суммировать
选择不对，努力白费。В оптимизации производительности мы часто игнорируем важность CSS, заставляя его идти все дальше и дальше по пути оптимизации, и, наконец, ничего. Если у вас есть такой же опыт, пожалуйста, оставьте сообщение для обсуждения.
总之在开发过程中严谨的把控好自己的每一行代码，在面对复杂的问题时，多分析和查阅资料，当遇到性能瓶颈问题时，可以多用chrome devtool上的相关设置进行快速定位。
Если вы нашли ошибки в статье, пожалуйста, укажите на них. Если вы найдете это полезным, пожалуйста,点赞、关注Большое спасибо за вашу поддержку.Я искренне надеюсь расти и прогрессировать вместе со всеми вами.Большое спасибо!
автор:
tager
Адрес связанной статьи:https://juejin.cn/user/4353721776234743/posts
Авторские права принадлежат автору. Для коммерческих перепечаток, пожалуйста, свяжитесь с автором для получения разрешения, а для некоммерческих перепечаток, пожалуйста, укажите источник.