Так как никто не ответил на это, я запишу то, что я сделал, возможно, это не лучший способ сделать это, так что имейте это в виду!
Я открыл инструменты разработчика и настроил новый профиль для скорости сети, где задержка составляла 1000 мс, а скорость - 50 кб / с. (где написано онлайн рядом с отключением кеша, щелкните здесь и перейдите в Custom ›Add ...).
Это фактически дает вам время увидеть, что происходит на странице по мере загрузки ресурсов.
Затем я перешел на вкладку рендеринга и включил мигание краски, области сдвига макета и границы слоя.
Затем я просто наблюдал за загрузкой страницы с этим искусственным замедлением.
При этом сразу стало очевидно, что у меня было боковое меню, загружаемое через AJAX, но когда оно загружалось, оно было примерно на 1 пиксель шире из-за границы на нем, поэтому весь основной раздел немного сдвинулся влево.
Невозможно заметить невооруженным глазом, но действительно очевидно с помощью описанного выше метода. Этого не произошло в автоматических тестах, поскольку это было (своего рода) состояние гонки в браузере, которое зависело от порядка загрузки (с использованием async для скриптов, поскольку я выполняю другие манипуляции в стороне), а PSI был согласован.
Я надеюсь, что это поможет кому-то, пока кто-нибудь не предложит лучший способ определения основной причины сдвига макета.
Обновлять
Как указано в комментариях, убедитесь, что вы тестируете также разные размеры экрана.
person
Graham Ritchie
schedule
21.07.2020
