возобновить
Написал обновленную статьюОптимизация производительности с отрицательного шага, Добро пожаловать всем, чтобы обратить внимание на просмотр, если у вас есть какие-либо успехи, я надеюсь, что вы можете пометить его.мой блог
задний план
После разработки страницы, как сделать так, чтобы страница работала быстрее и лучше, это важный показатель, позволяющий отличить технический уровень и видение программиста. Так что во время собеседования интервьюер всегда будет задавать вам вопрос, как оптимизировать работу?
Если ваш разум пуст в это время или, как я раньше, полагаясь на механическое запоминание или предыдущий опыт, ответьте на код сжатия, код пакета, карту спрайтов, cdn, прокси событий, это показывает, что вы все еще не заинтересованы в оптимизации производительности. Отсутствие общего, систематического мастерства, оптимизация производительности все еще находится в стадии добавления метода после того, как услышал об этом. Таким образом, невозможно улучшить производительность.
После безумного собеседования и расспросов о материалах на прошлой неделе я, наконец, накопил некоторый опыт и размышления. В это лучшее время набора я хотел бы поделиться им с вами. Надеюсь, вы сможете что-то получить. Если у вас есть какие-либо достижения, добро пожаловать, чтобы подписаться и пометитьблог,github
Что такое оптимизация производительности
С точки зрения внешнего интерфейса оптимизацию производительности можно разделить на два направления. С точки зрения пользователя, во-первых, страница загружается быстро, а во-вторых, страница удобна в использовании. Таким образом, исследование оптимизации производительности можно разделить на два направления: время загрузки страницы и эффективность работы страницы.
Сколько времени проходит от открытия браузера до рендеринга страницы?
Да, этот вопрос немного знаком, интервьюера чаще спрашивают, что произошло от открытия браузера до отрисовки страницы. На этот вопрос в интернете есть много ответов, и я не буду повторяться подробно. Основной процесс:
Разбор браузера -> кэш запросов -> запрос DNS -> установить ссылку -> запрос обработки сервера -> сервер отправляет ответ -> клиент получает страницу -> анализировать HTML -> построить дерево рендеринга -> начать отображать контент (время белого экрана) -> загрузка содержимого первого экрана завершена (время первого экрана) -> взаимодействие с пользователем (DOMContentLoaded) -> загрузка завершена (загрузка)
Очевидно, что если мы хотим оптимизировать время загрузки, нам нужно обдумать и обобщить каждый шаг здесь, избегая немного востока и немного запада.
Мониторинг времени загрузки страницы
Есть поговорка: если вы не можете это измерить, вы не можете этим управлять. Прежде чем оптимизировать эти ссылки, нам нужно знать, как отслеживать, сколько времени занимают эти ссылки.
Сначала порекомендуйте одинPerformanceTiming, Вы можете получить много данных, связанных с загрузкой страницы. Наиболее часто используются
DNS解析时间： domainLookupEnd - domainLookupStart
TCP建立连接时间： connectEnd - connectStart
白屏时间： responseStart - navigationStart
dom渲染完成时间： domContentLoadedEventEnd - navigationStart
页面onload时间： loadEventEnd - navigationStart
Если вы не используете этот API, вы можете использовать время, возвращаемое серверным рендерингом, или время, когда маршрут SPA отскакивает в качестве начальной точки, а такие события, как domContentLoaded и load, — в качестве конечной точки для записи. Или сразу в гугл аналитикс. Способов много, поэтому не буду вдаваться в подробности.
Точки оптимизации серверной части
Бэкенд-часть может оптимизировать кеш, время запроса DNS, время ссылки, время обработки запроса, время ответа и т. д.
Кэш не буду вдаваться в подробности.
Время запроса DNS можно оптимизировать с помощью httpdns или предварительной загрузки DNS, конвергенции доменных имен. Я все же написал статьюВведение в статьи о DNS и CDN
Фокус установления соединения — это long connection и мультиплексирование ссылок, keep-alive, long-polling, http-straming, websocket или другие протоколы, написанные самостоятельно, и лучше сразу перейти на http2. Чтобы оптимизировать ссылку, интерфейс также должен использовать cdn, карту спрайтов, слияние кода и другие средства для ресурсов.
Есть также много моментов, которые можно оптимизировать для обработки запросов сервера.Стоит отметить, что когда мобильный терминал обращается к странице на стороне ПК и ему необходимо перейти на страницу на стороне мобильного устройства, используйте переход 302 на стороне сервера вместо передний прыжок. Существует также включение hsts, требующее от браузеров использовать https для последующего доступа, сокращение ненужных переходов с http на https, а также предотвращение атак с удалением ssl и повышение безопасности.
Когда сервер отправляет ответ, вы можете использовать Transfer-Encoding=chunked, чтобы возвращать ответ несколько раз, и запрашивать bigpipe для определенных операций. Также есть уменьшение размера куки и так далее.
Точки оптимизации фронтальной части
Интерфейсная часть может оптимизировать время белого экрана, события первого экрана, время обмена и время завершения загрузки.
-Не закончено, продолжение следует-
ссылка на пост в блогеоптимизация веб-производительности (1),github, добро пожаловать, чтобы пометить и подписаться, спасибо!
Студенты, у которых есть время, также могут прочитать мою статьюЧто такое предварительное собеседование для крупного завода?, также должен помочь