Обычный код CSS будет иметь лишь незначительные проблемы с типографикой или совместимостью пользовательского интерфейса. Но здесь мы собираемся поделиться интересной строкой CSS, которая может напрямую убить вашу страницу Chrome :)
повторяющийся
- Откройте немного более сложную страницу в Chrome, напримерЗнай почтиилиНаггетс
- Откройте инструменты разработчика для страницы
<body>добавить стильstyle: "width:1px; height:1px; transform:scale(10000)" - Полюбуйтесь использованием памяти в диспетчере задач до сбоя Chrome
На самом деле, эта машина имеет только 8 ГБ памяти, но это не важно. И пусть красная емкость линии JS коллапс, чем CSS, более мощная :)
история
Обнаружение этой строки кода связано со странным явлением, когда наш проект редактора реализует регулировку размера холста: когда пользователь настраивает размер холста,Chrome зависает до тех пор, пока соотношение старых и новых размеров превышает определенный диапазон.
Хотя эту проблему трудно вызвать путем работы обычных пользователей, последствия, вызванные ею, действительно серьезны. При устранении неполадок мы сначала рассмотрели возможность блокировки JS и чрезмерной перерисовки DOM, но ни одна из них не была проблемой. Переломным моментом является вывод FPS Meter в инструменте рендеринга отладчика:
Здесь память графического процессора заполнена. Хотя этот намек теперь явно связан с аппаратным ускорением, мы не смогли точно определить его связь с конкретным кодом без соответствующего опыта. До тех пор, пока мы случайно не просмотрели введение композитинга в документ по дизайну Chrome, мы обнаружили поведение: Blink сопоставляет узлы DOM с деревом рендеринга LayoutObject, и каждый узел в этом дереве теоретически может иметь контекст для бэкенда рендеринга. Чтобы сэкономить ресурсы, Chrome выполнит их объединение перед рендерингом. В настоящее время элементы с позиционированием CSS (такие как абсолютное позиционирование и преобразование) не могут быть объединены, что вызовет дополнительные накладные расходы на видеопамять.
Основываясь на подсказке этой информации, мы использовали инструмент Layout для отладки страницы в то время, и мы нашли особое место:
Рисунок самый большой прямоугольник Слой при общей отладке DOM не виден, поэтому мы предполагаем, что виновником является слишком большой размер ОЗУ. Основываясь на этой информации, мы, наконец, нашли очень широкую, высокую, но разумную шкалу значений, которую можно изменить, преобразовав очень большой узел DOM в логику, ограничив его потолок масштаба, чтобы решить проблему: мы можем легко найти шкалу значений и окончательное отношение соответствия с O (N^2), и только 100-кратное увеличение между пикселями имеет число пикселей 10000. Поэтому при крупномасштабном перерасходе памяти/видеопамяти возможно (разумеется, работу тайлинга будет выполнять браузер, так что это не соответствует реальной ситуации в общем случае, у Safari/Firefox на этот раз проблем нет). Наконец, чтобы добавить ошибку в Chrome, см.#894115
Суммировать
Следует отметить, что из-за отсутствия глубокого понимания ядра браузера приведенные выше идеи по отладке, скорее всего, будут неточными. Краткое содержание:
- Аппаратное ускорение имеет свою цену, и лучше знать, где она стоит.
- В документации браузера скрыто много интересного
- Некоторые непопулярные функции средств отладки на самом деле очень мощные, можно пробовать чаще
Надеюсь, вы меня поправите, спасибо XD
редактировать: кажется, что не все устройства должны присутствовать, что разочаровывает студентов, которые слишком хороши, чтобы повесить трубку. Для студентов, которые хотят воспроизвести с большей уверенностью, есть варианты использования, которые легче воспроизвести проблему в ссылке на ошибку.
edit-2: команда Chrome может воспроизвести и назначить эту проблему, см.#894115