Оптимизация производительности Vue SPA, достаточно прочитать эту статью

Vue.js
Оптимизация производительности Vue SPA, достаточно прочитать эту статью

задний план

Семейная корзина Vue2, Webpack, SPA, проект электронной коммерции

Недавно работал над онлайн-проектом**Оптимизация времени загрузки первого экрана** Доступ к большому количеству информации, но и более полное знание отделочного точка до обломки снова, планировалось сделать только обмен технологиями в команде, но тогда я подумал, что лучше поделиться напрямую, может быть, это Воля, для которых студенты будут немного помочь.

Что еще более важно, благодаря ограниченному уровню энергии, статья неизбежно будет недостаточно, она также облегчает обмен трактатом, в конце концов, совместно используют технологию, является прогрессивным процессом друг друга.

ключевой индикатор

Если рабочий хочет хорошо работать, он должен сначала заточить свои инструменты.

Прежде чем начать, давайте взглянем на ключевые показатели для измерения времени загрузки (взято из внешнего инструмента мониторинга ARMS от Ali):

ДОМ готов: domContentLoadEventEnd - fetchStart

Страница полностью загружена: loadEventStart - fetchStart

специфическийPerformanceTiming APIНе будем вдаваться в подробности, можете посмотретьДокументация MDN

Подводить итоги,domContentLoadedа такжеloadУзел времени запуска события должен быть как можно раньше

Так вот вопрос, как это сделать заранее? Не волнуйтесь, давайте сначала рассмотрим вопрос интервью

вопрос интервью

Друзья-фронтендеры, часто посещающие техническое сообщество, наверняка видели такой вопрос из интервью:

Что делает браузер после ввода URL-адреса из адресной строки браузера и нажатия Enter?

Основной проходящий ответ выглядит примерно так:

  1. Заголовки запроса сборки, браузеры проверяют на сильное кеширование
  2. Разрешение DNS, браузер проверяет кеш DNS, обращения к хосту и т. д.
  3. установить TCP-соединение
  4. Отправляет HTTP-запрос, сервер проверяет консультацию кэша
  5. Передача данных, в сценарии, о котором мы будем говорить, здесь должен быть файл html
  6. согласно сConnection：keep-aliveполе, чтобы определить, следует ли отключить TCP-соединение
  7. Браузер анализирует и отображает html.Если в html-файле есть такие ресурсы, как внешние ссылки js и css, повторите шаги 3-6.

наспосмотрите внимательноИ обнаружил, что проблема не проста, как если бы каждая из вышеперечисленных связана со скоростью и нагрузкой

Но хорошая новость в том, что кроме седьмого могут и другие**бросить горшок**Дайте партнерам по эксплуатации и техническому обслуживанию возможность продемонстрировать это

Хорошо, тогда давайте сосредоточимся на этом**Браузерный анализ и процесс рендеринга HTML**

Кроме того, это на самом деле вроде бы простая, но бесконечно большая тема, каждую из которых можно расширять и обсуждать очень много.

Например, многопроцессорная архитектура браузера, IPC, планирование потоков в процессе рендеринга.

Например, сильный кеш и кеш согласования, процесс разрешения DNS, рукопожатие TCP, общие заголовки запросов и даже точки знаний HTTP2 и т. д.

Но сегодня мы поговорим о **Оптимизация загрузки выше сгиба, поэтому мы заботимся только о рендеринге в процессе искорость загрузки**Связанный контент

Браузерный анализ и рендеринг файлов HTML

Браузер не распознает текст напрямую, поэтому ему нужно сначала проанализировать HTML в соответствии с правилами, а затем сгенерировать распознаваемую структуру данных, о чем мы поговорим далее**Процесс разбора**

1. Процесс анализа

1. Построение ДОМ

The DOM (Document Object Model) is an API that represents and interacts with any HTML or XML document. The DOM is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment).

DOMЭто API для описания HTML-документов, с помощью которого JS может напрямую манипулировать узлами документа.

После того, как браузер получит ответ сервера, если заголовок ответа содержитcontent-type: text/html, предполагается, что полученныйHTMLФайл, вызывающий поведение при синтаксическом анализе

Во-первых, в соответствии с форматом кодирования, указанным в файле, напримерcontent-type: charset=UTF-8, переведем поток байтов в символы, и то, что мы получим после лексического анализа, на самом деле является строковым содержимым, которое мы можем распознать невооруженным глазом,<html><head>......</head><body>......</body><html>

Затем после грамматического анализа строка преобразуется в один за другимToken,Такие как<head>,<body>д., и каждыйTokenВ середине, информация, такая как открытие или закрытие этикетки и текст, указывается для записи последующего, приходится сгенерировать.NodesОтношения отца и сына

Далее, согласно полученномуTokensСгенерировать информацию об узлеNodes, и, наконец, построитьDOM

2. Построение ЦСОМ

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.

а такжеDOMТакой же,CSSOMНабор API-интерфейсов, предоставляемых JS для динамического чтения стилей и управления ими.

Если ресурсы стилей также представлены в HTML, например, вставьте<link rel="stylesheet" href="demo.css">тег, браузер начнет загрузку http-потока в соответствии с приоритетом ресурса и создаст CSSOM сразу после завершения загрузки.

Построение CSSOM также требует лексического анализа, синтаксического анализа и, наконец, генерируетTokens

Далее будетTokensПеревести вstyleRules, каждыйstyleRuleсодержит селектор и набор свойств, все в одном файле CSSstyleRulesбудет вставлен в тот жеstyleSheetв объекте

Наконец, также генерируется информация об узле.Nodes, и, наконец, построитьCSSOM

Вроде бы процесс построения CSSOM очень похож на построение DOM, но задействованные алгоритмы парсинга разные.Рекомендую всем прочитать эти две статьи.Гамни много.После прочтения процесс построения DOM Дерево и дерево CSSOM должны быть в порядке, есть более глубокое понимание.

Посмотрите, как браузер строит дерево DOM из исходного кода Chrome.

Как рассчитать браузер из исходного кода Chrome CSS

До сих пор мы в основном разобрались с процессом парсинга файлов HTML в браузере, как показано на следующем рисунке:

HTML parse

Здесь необходимо добавить пункт знаний.Синтаксический анализ и рендеринг браузера завершаются в отдельном процессе рендеринга.В процессе рендеринга выполняется много потоков.Основной поток по сути представляет собой цикл, и он будет планировать каждый рабочий поток в в нужное время Разделение труда и кооперация, построение DOM и CSSOM осуществляется в отдельном Worker Thread, поэтому процесс построения идет параллельно и не блокирует друг друга

После сборки CSSOM браузер начинает рендеринг

Во-вторых, процесс рендеринга

1. Построить дерево компоновки

Прежде чем приступить к анализу, давайте взглянем на исходный код Chrome дляLayout так же какlayout Treeобъяснение

The purpose of the layout tree is to do layout (aka reflow) and store its results for painting and hit-testing. Layout is the process of sizing and positioning Nodes on the page.

Простое понимание состоит в том,layout, — это процесс вычисления информации о размере и положении каждого узла на странице, который мы часто называем перекомпоновкой.

при строительствеLayout Treeс цельюlayoutи сохранить информацию для последующего рисования

Собственно, построитьLayout Treeпроцесс должен пройтиDOM Tree, за исключением содержимого, которое не будет отображаться, напримерdisplay:none/contentsузел иheadузел, комбинированныйCSSOM Treeгенерация правила стиля в хитеLayout Object

Здесь стоит отметить еще один момент: процесс компоновки зависит от дерева DOM и дерева CSSOM, поэтому построение CSSOM не будет блокировать построение DOM, но в конечном итоге заблокирует отрисовку страницы.

2. макет

layoutНа самом деле этот процесс представляет собой серию очень сложных расчетов. В этой статье не будет подробно обсуждаться процесс расчета. Нам нужно только знать, что цель расчета в основном состоит в том, чтобы подтвердитьLayout TreeРазмер и положение различных узлов в конечной выходной модели блока, которая будет точно фиксировать точное положение и размер каждого элемента в окне просмотра, все относительные измерения будут преобразованы в абсолютные пиксели на экране.

3. краска

Как только компоновка завершена, браузер выдаетPaint Setupа такжеPaintсобытие, будетLayout TreeПреобразование в пиксели на экране

paintПроцесс еще более сложный, и энергичные студенты могут углубиться в исследования и исследования, но наша тема сегодня **Оптимизация скорости загрузки, на самом деле, это должно быть в основномПроцесс разбора**Прилагать усилия

Подумай об этом, если бы мы могли быстрее получить более компактныйDOM Treeа такжеCSSOM Tree,Последующий**процесс рендеринга** Будет ли он также улучшен соответствующим образом?

Сочетание теории с практикой

В предыдущей главе мы в основном разобрались с процессом парсинга и рендеринга браузера, но теорию освоили, как применить ее в нашем проекте? Во-первых, мы должны увидеть, как выглядит упакованный HTML из нашего проекта.

(Онлайн-код является секретным, поэтому давайте упакуем демо-версию Vue, чтобы увидеть)

<html lang="en">
 <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" href="/favicon.ico" />
  <title>demo</title>
  <link href="/js/about.c06f3b2f76de6a796643.js" rel="prefetch" />
  <link href="/css/app.877b7338.css" rel="preload" as="style" />
  <link href="/js/app.675cf67d3925ba86f862.js" rel="preload" as="script" />
  <link href="/css/app.877b7338.css" rel="stylesheet" />
 </head>
 <body>
  <noscript>
   <strong>We're sorry but router-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <script src="/js/app.675cf67d3925ba86f862.js"></script>
 </body>
</html>

Разбирать теги сверху вниз

синтаксический анализ головы

Мы обнаружили, что в голове есть теги meta, title, link.

Метатег — это контент, связанный с кодировкой, протоколом и областью просмотра, нам все равно, в основном смотрите по ссылке

Тег ссылки не будет блокировать последующий анализ тега, а связанный браузер ресурсов откроет сетевой поток для загрузки в соответствии с приоритетом.

Внимательные друзья могли заметить, что файлы, упакованные webpack в vue-cli, на самом деле имеют оптимизации для предварительной загрузки файлов:preloadа такжеprefetch, что на самом деле является маркером приоритета загрузки ресурсов

  • preload: Ресурсы, которые эта страница обязательно будет использовать, загружайте с высоким приоритетом и максимально улучшите скорость загрузки этой страницы.
  • prefetch: Ресурсы, которые могут быть использованы позже, с более низким приоритетом, загружаемые во время простоя браузера, для повышения скорости загрузки последующих рабочих страниц.
  • При этом ссылка также помечается какrel="stylesheet"Ресурсы CSS, загруженные с наивысшим приоритетом

Разобрать тело

Содержимое тела относительно простое, и для обработки используется тег noscript, за исключением того, что браузер не может распознать тег script, который в принципе не нужен в современных браузерах.

Затем есть пустой тег div с идентификатором приложения и тег скрипта.

Присмотревшись, мы можем обнаружить, что этот JS-файл на самом деле помечен preload в ссылке, которая является высокоприоритетным ресурсом, поэтому браузер фактически начал загружать его раньше, поэтому при разборе тега script браузер будет ждать. ресурс js будет загружен, поток JS вступит во владение, а поток UI будет смонтирован, то есть парсинг и рендеринг будут прерваны.После выполнения синхронного кода в JS, поток UI вступит во владение и продолжит парсинг и рендеринг.

Здесь важно обратить внимание на то, что после загрузки JS-ресурса он будет выполняться не сразу, а **должен дождаться загрузки и анализа предыдущего CSS** будет выполнено, почему это происходит?

Поскольку в CSS последние правила могут влиять на первые правила, поэтому CSSOM должен быть построен полностью, чтобы быть эффективным.

Предположим ситуацию, мы сначала устанавливаем размер шрифта в CSS как14pxПосле очередной смены16px, поэтому визуализируемый контент будет неточным, поэтому рендеринг должен дождаться сборки CSSOM перед запуском.

И JS может манипулировать DOM и CSSOM, поэтомуВыполнение JS должно дождаться завершения загрузки и синтаксического анализа CSS.

Это на самом деле очень и очень важный момент, потому что в нашем **критический путь рендеринга** Выше должен быть хотя бы один ресурс CSS. Время загрузки и парсинга этого ресурса в конечном итоге будет полностью отражено в нашем первом экранном времени. Например: если мы передаем CSS@importЕсли вводятся другие внешние стили, то JS не будет выполняться до загрузки и парсинга нового ресурса, поэтому, учитывая скорость первого экрана, не рекомендуется.@importимпорт внешних ресурсов стилей

Далее следует обработка закрывающих тегов, синтаксический анализ и рендеринг html завершены.

domContentLoaded

Давайте посмотрим на документацию MDN оdomContentLoadedОпределение события

когда начальныйHTMLПосле того, как документ полностью загружен и проанализирован,dOMContentLoadedСобытия запускаются без ожидания полной загрузки таблиц стилей, изображений и подкадров.

Согласно анализу в предыдущей главе, мы можем заключить три ситуации:

  • Без скрипта, с css

    В отсутствие тегов script, поскольку построение DOM и загрузка CSS выполняются параллельно, поэтомуdomContentLoadedСобытия могут запускаться сразу после создания DOM, не дожидаясь загрузки и анализа CSS.

  • Со скриптом, без css

    Когда тег скрипта проанализирован, поток GUI будет смонтирован, а DOM продолжит построение после выполнения кода синхронизации JS, и он будет запущен после завершения.

  • Есть скрипт, есть css

    При разрешении тега скрипта, браузер будет ожидать загрузки CSS и Parsing для завершения, и выполнить первый рендеринг, будет продолжать создавать DOM после выполнения кода синхронизации JS, а затем триггер

Обнаружили проблему? Скорость загрузки и парсинга ресурсов CSS будет напрямую влиятьdomContentLoadedУзел времени, когда запускается событие, повлияет на скорость загрузки первого экрана, поэтому мы должны сосредоточиться на оптимизации этого момента.Ускорить загрузку и парсинг ресурсов CSS

Точно так же загрузка и выполнение JS блокирует построение DOM, поэтому еще один момент, на котором мы должны сосредоточиться, — это оптимизация.Ускоряет загрузку и выполнение ресурсов JS

load

Мы также смотрим на документацию MDNloadОпределение события

Запускается, когда вся страница и все зависимые ресурсы, такие как таблицы стилей и изображения, завершили загрузку.loadмероприятие.

это сdomContentLoadedВ отличие от последнего, последний срабатывает, как только загружается DOM страницы, не дожидаясь загрузки зависимых ресурсов.

Другими словами, браузер не будет запускаться до тех пор, пока DOM не будет сконструирован и стили, изображения и асинхронно загруженные ресурсы, запущенные в DOM, не будут полностью загружены.loadсобытий, поэтому еще один важный момент для оптимизации:Ускорить загрузку ресурсов, смонтированных в DOM на первом экране

loadСобытие запускается, указывая на то, что страница полностью загружена, и на этом логика выборки в индикаторе производительности заканчивается.

Подводя итог, это не более чем три оптимизации

  • Ускорить загрузку и парсинг ресурсов CSS
  • Ускоряет загрузку и выполнение ресурсов JS
  • Ускорить загрузку ресурсов, смонтированных в DOM на первом экране

Далее мы изучим, как оптимизировать

критический путь рендеринга

На самом деле три ключевых момента оптимизации, которые мы обобщили, относятся к **критический путь рендеринга**

Критический путь отрисовки — это все пути, которые будет выполнять браузер при полной загрузке первого экрана, то есть парсинг HTML начинается до тех пор, покаloadЗапуск событий, каждый шаг которых содержит

Ускорьте загрузку и парсинг ресурсов CSS и JS

1. Более высокий приоритет загрузки

Мы можем дать ключевым ресурсам более высокий приоритет загрузки, например, установитьpreload, пусть браузер загружается раньше времени, вместо того, чтобы ждать, пока он загрузится, когда это действительно необходимо

Но в то же время следует отметить, что слишком многоpreloadНаоборот повлияет на загрузку ключевых ресурсов, т.к. количество TCP соединений под одним доменным именем браузера ограничено, например хром ограничен 6

Таким образом, некритические ресурсы пути рендеринга не могут быть установленыpreload

2. Меньший объем ресурсов

  • Включить сжатие.

    Gzip может значительно сжимать объем ресурсов и является простым и эффективным способом повышения производительности. Данные производственной среды показывают, что основной файл ресурсов размером 730 КБ можно сжать примерно до 210 КБ, и эффект замечательный.

  • Code Splitting

    В демо выше мы видим такой ресурс: <link href="/js/about.c06f3b2f76de6a796643.js" rel="prefetch" />

    В процессе упаковки Webpack ресурсы, введенные асинхронно, будут введены в отдельный файл фрагмента и будут загружены только тогда, когда файл необходимо выполнить, что является предпосылкой возможности разделения кода.

    1. Мы заходим на страницу в первый раз (например,Home), нет необходимости синхронно загружать другие страницы (например,About), поэтому мы можем полностью разделить ресурсы каждой отдельной страницы и загружать их, когда они действительно нужны. Таким образом, мы можем сделать ленивую загрузку маршрута, как показано в демо:

      // ...
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

      AboutКомпонент опирается наimport()Синтаксическая асинхронная загрузка,AboutКомпоненты будут упакованы в отдельные куски, если мы сначала посетимHomeстраница, вам не нужно загружать ее синхронноAboutресурс

    2. уточнить доHomeстраница, если мыHomeНа странице есть всплывающий компонентHomeModal, он будет отображаться только тогда, когда пользователь инициирует событие запроса.На самом деле нам не нужно синхронно загружаться при отображении первого экрана.HomeModalресурсы, такие как:

           <template>
       <div class="home">
         <div @click="showModal = !showModal">展示弹窗</div>
         <HomeModal v-if="loadModal" v-show="showModal">
       </div>
     </template>
     
     <script>
     const HomeModal = () => import('@/components/HomeModal.vue')
     export default {
       name: 'Home',
       components: {
         HomeModal
       },
       data() {
         return {
           showModal: false,
           loadModal: false,
         }
       },
       methods: {
         // 根据业务指定加载时机
         lazyLoadHomeModal () {
           this.loadModal = true
         }
       }
     }
     </script>

      дать в нужное времяv-ifустановлен вtrue,Vueна гореHomeModalКогда компонент используется, браузер будет асинхронно загружать ресурс и отображать его, а последующее отображение скрывает, что мы все еще можем пройтиv-showконтролировать

      Точно так же ресурсы, не связанные с пользовательским интерфейсом, могут по-прежнему загружаться асинхронно таким образом, например:

      const getCat = () => import('./cat.js')
// 根据业务指定加载时机
getCat()
  .then({ meow } => meow())

      Code Splitting — очень эффективный способ уменьшить объем ключевых ресурсов, но его нужно выбирать в соответствии с собственным бизнесом, и он не может быть излишним. Чтобы гарантировать, что асинхронная загрузка не может быть критическими ресурсами, и сформулируйте хорошую стратегию триггера времени загрузки.

    3. Библиотека пользовательского интерфейса загружается по запросу

      В вашем проекте могут быть ссылки на некоторые сторонние библиотеки пользовательского интерфейса, что значительно повысит эффективность разработки, но вы можете использовать только некоторые компоненты пользовательского интерфейса в библиотеке, поэтому их необходимо загружать по требованию. Метод настройки загрузки по требованию будет подробно описан в ридми каждой UI-библиотеки, вы можете ознакомиться с официальной документацией.

    4. Uglify

      Хороший отступ кода и верстка, несомненно, могут улучшить читаемость нашего кода, но при упаковке в код рабочей среды мы можем удалить такую ​​информацию, как бесполезные пробелы и уменьшить количество символов.Этот шаг обычно учитывается инструментами упаковки.

      Но мы по-прежнему можем выполнять много другой работы, например, проверять код.DeadCode, снято в производственной средеlog, удалить бесполезные стили и т.д. Поскольку бесполезные ресурсы будут занимать не только время загрузки нашего ресурса, но и время его анализа, поэтому этот шаг убивает двух зайцев одним выстрелом.

      Иногда мы используем base64 для загрузки ресурсов изображений в CSS, что имеет некоторые преимущества, но все же крайне не рекомендуется.

      Поскольку мы упоминали выше,CSS блокирует рендеринг, кодировка base64 сделает файл больше, а объем этой части файла в конечном итоге отразится в запакованном CSS файле, что излишне продлит экранное время, поэтому более рекомендуется вводить ресурсы изображения из CDN.

  • CDN-ускорение

    О преимуществах CDN не нужно говорить, это также ключевой момент оптимизации.

  • HTTP2

    Благодаря особенностям мультиплексирования HTTP2 послеCode SplittingФрагментированные ресурсы будут иметь лучшую производительность загрузки.

    О HTTP2 вы можете обратиться к этой статьеПодробное объяснение HTTP2

3. Более высокая скорость выполнения

У нас нет большого контроля над скоростью парсинга CSS, но лучшая и более совершенная структура стилей, несомненно, очень полезна.

В центре нашего анализа находится скорость выполнения JS, Поскольку наш проект использует Vue в качестве демонстрации, мы подробно проанализируем его с учетом всего жизненного цикла Vue.

Мы знаем, что в проекте Vue Webpack упакован какmain.jsДля входа, давайте посмотримmain.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

демоmain.jsЭто по-прежнему очень просто, но обычно вы можете добавить некоторую глобальную логику, такую ​​как глобальные компоненты, глобальныеFiltersРегистрация и некоторая бизнес-логика, которую, возможно, потребуется обрабатывать глобально, проверьте, нет ли лучшего способа обработки второстепенной логики.

Тогда мы должны посмотреть,new Vue()так же какmount()что делает функция

Нереально интерпретировать весь процесс Vue в одной статье, поэтому я поставилnew Vue()так же какmount()Части, которыми можно манипулировать при оптимизации производительности, перечислены в

  1. initState()

    вьюdataа такжеpropsУголов и отзывчивость данных выполняется в этом методе. Поэтому мы должны проверить, должны ли данные в нашем бизнесе должны быть отзывчивыми. Если это некоторые данные, которые не имеют ничего общего с пользовательским интерфейсом, не ставьте его вdataвнутри

  2. mount()

    Во Вью,mount()Суть в том, чтобы скомпилировать файл шаблона для генерацииRenderфункция, выполнениеRenderФункция генерирует виртуальный DOM и, наконец, генерирует реальный DOM в соответствии с виртуальным DOM и монтирует его на целевом узле.render: h => h(App), так что надо смотретьAPPкомпоненты

  3. APP

    <template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

    APPШаблон очень простой, на самом деле, согласноRouterподобрать для нас целевой компонент

    Но в нашем реальном делеAPPКомпоненты обычно не так просты.Если у вас есть другие компоненты, обратитесь к асинхронной загрузке некритических ресурсов, упомянутых в разделе выше.

  4. Router

    RrouterВ основном, чтобы соответствовать целевому компоненту для нас.Если компонент загружается асинхронно, ресурс будет запрошен после попадания. но мы знаемVue-RouterНа самом деле, некоторые функции-ловушки открыты для нас.Эта часть логики будет выполняться до того, как целевая страница будет фактически смонтирована, поэтому, если у нас есть трудоемкие или даже блокирующие операции в целевом компоненте или даже функция pre-hook смешанный в глобальном масштабе, пожалуйста, подумайте об этом Лучший способ ведения бизнеса.

  5. целевой компонент

    Целевой компонент — это единственная страница, которую мы хотим посетить. Фактически каждый компонент будет выполнятьсяVue.extend(), вы получаете экземпляр Vue, который включает в себя глобальные свойства, и последний целевой компонент также проходит через полный жизненный цикл Vue, но в это время Vue должен скомпилировать сложные файлы шаблонов на целевой странице и, наконец, смонтировать DOM к вышестоящему целевому узлу. Мы знаем, что манипулирование DOM очень дорого, поэтому мы должны подумать, нужно ли генерировать полную структуру DOM для первого рендеринга целевой страницы? Конечно не обязательно, на самом деле в индустрии есть очень хорошие решения:Скелетонный экран.

Здесь мы должны настоятельно Amway этот документ,Демистификация технологии Vue, автор очень подробно и методично проанализировал для нас логику выполнения исходного кода Vue2. Каждый раз, когда я смотрю на это, я получаю новый урожай. Я думаю, что каждый разработчик Vue должен прочитать исходный код Vue2, даже если Vue3.0 был выпущен, Но идеи остаются прежними.

Ускорить загрузку ресурсов, смонтированных в DOM на первом экране

В бизнес-сценарии, о котором мы говорим, когда ресурс, смонтированный в DOM, загружается, он запускаетload, то есть страница загружена не полностью до сюда

В прошлой главе мы говорили об использовании целевых страниц**Скелетонный экран**, простое и красивое отображение каркасного экрана, может обеспечить хорошее взаимодействие с пользователем, что более важно, структура DOM каркасного экрана может быть очень простой и не требует установки дополнительных ресурсов для нашегоdomContentLoadedа такжеloadОпережение времени запуска события очень помогает.

Если вы не хотите использовать каркасный экран, то вам необходимо подумать о том, как упростить скорость загрузки ресурсов, смонтированных в DOM первого рендеринга экрана, таких как использование эскизов, сжатие изображений, webp, CDN и т. д.

После экрана скелета

Мы сделали достаточно домашней работы и, наконец, значительно оптимизировали скорость первого экрана, по крайней мере, число ARMS выглядит намного красивее, и лидеры очень довольны.

Однако после скелетного экрана, хотя визуализированная страница после скелетного экрана не будет включена в первое экранное время, это все равно повлияет на взаимодействие с пользователем.Поэтому нам все еще нужно сосредоточиться на структуре DOM, связанной с нашим реальным бизнесом и продолжить оптимизацию.

наконец

Эта статья представляет собой скорее отчет об этой работе по оптимизации производительности, поэтому в ней много обобщений, и она не объясняет глубокие вещи простым языком.

Демистификация технологии Vue

критический путь рендеринга

От многопроцессорности браузера до однопоточности JS — наиболее полное сочетание операционного механизма JS.

(1.6w слов) Вопрос души браузера, сколько вы можете обрабатывать?

Подробное объяснение HTTP2

Посмотрите, как браузер строит дерево DOM из исходного кода Chrome.

Посмотрите, как браузер вычисляет CSS из исходного кода Chrome.

Документация MDN

Категории