Построение интерфейсной системы знаний Шуцзяна (часть 1)

внешний интерфейс
❝

Frontier: Желаю Nuggets успешного обновления... Мистер Шуцзян - отморозок. Разобравшись, я обнаружил, что есть еще много пунктов знаний, которые недостаточно прочны. Детская обувь имеет возможность регулярно пересматривать и пересматривать себя, и разобраться в своей системе знаний. Кроме того, индустрия развлечений постоянно меняется, поэтому мы должны не только укреплять базовые знания, но и поддерживать любопытство к изучению новых вещей. Как я построил свою собственную систему знаний? (Специальный алгоритм неисправен) ⏰ Эта глава состоит из двух глав вверх и вниз, а это совместное использование является предыдущей главой.

❞

1. Система знаний Vue

1.1 Основные принципы

1.1.1 Vnode

❝

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

❞
  • Как генерировать виртуальные узлы? :createElement()Для углубленного практического обучения вы можете прочитать, что ранее писал джемРазработка динамических форм от 0 до 1
  • Как Vnode обнаруживает изменения и обновляет представление?diff算法

🌲 Дополнительное чтение:

1.1.2 nextTick

❝

Целью nextTick является отсрочка вызова callback-функции до следующего раза, когда дом обновит данные, другими словами, дом не будет обновляться сразу после изменения данных, потому что обновление дома асинхронно и не может быть получен синхронным кодом.Необходимо использовать NextTick.Получено в цикле событий (обновление Dom во Vue асинхронно)

❞ 
this.msg = "Hello world."
✅ this.$nextTick(() => {
    this.msg2 = this.$refs.msgDiv.innerHTML
  })
🚫 this.msg3 = this.$refs.msgDiv.innerHTML

🌲 Дополнительное чтение:

1.1.3 MVVM

❝

Полное название MVVM: Model-View-View-Model Предыстория его рождения в том, что в традиционной архитектуре MVC отсутствует роль парсинга данных, а M, V, C и т.д. анализ данных, поэтому он специально разработан для анализа данных.Родился новый класс: ViewModel, который в основном используется для связывания модели и представления, изменения данных для обновления представлений и изменения представления для обновления данных

❞

🌲 Дополнительное чтение:

1.1.4 Принцип двусторонней привязки

❝

Как упоминалось в предыдущем разделе, mvvm по сути представляет собой двустороннюю привязку данных vue.Он объединяет режим издатель-подписчик в режиме разработки посредством перехвата данных, который в основном включает следующие шаги.

❞
  • 1. Превратить данные в наблюдаемые: пройтиObject.defineProperty()Установите метод установки и метод получения свойства для отслеживания изменений данных и сбора зависимостей через метод получения, а каждый метод установки является наблюдателем.Object.defineProperty()Практика может читать варенье из дереваКак лучше управлять интерфейсом APIУпоминается (Vue3.0 используетProxyальтернатива)
  • 2. Добавить подписчика Watcher и добавить подписчика сообщений Dep (при изменении данных уведомить всех подписчиков)
  • 3. Реализовать компиляцию

🌲 Дополнительное чтение:

1.1.5 API, связанный с Vue

❝

Vue предоставляет некоторые часто используемые API, включая глобальные, жизненный цикл, состав, свойство экземпляра и др. Вы можете просмотреть все официальные коллекции API vue.Документация

❞
  • Глобальный API: например.Vue.use( plugin )Используется для глобальных справочных плагинов, в частности, с использованием читаемого дерева.
  • API композиции: например.project/injectИспользуется, чтобы компонент-предок мог вводить зависимость всем своим потомкам.
  • API свойства экземпляра: например.vm.$refsПолучить все элементы DOM и экземпляры компонентов, которые содержат зарегистрированные атрибуты ref

🌲 Дополнительное чтение:

1.2 управление состоянием vuex

❝

Vuex — это инструмент управления состоянием, специально разработанный для приложений Vue.js. Он использует метод централизованного хранения для записи состояния компонентов. Один объект содержит все состояние на уровне приложения, и каждое приложение будет содержать только один экземпляр хранилища. Но модульность может использоваться для управления дифференциацией

❞

1.2.1 Модульное управление состоянием

❝

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

❞

🌲 Дополнительное чтение:

1.2.2 Управление постоянством

❝

Мы можем использовать постоянство состояния для достижения кешированного состояния, потому что данные vuex хранятся в памяти. Когда мы обновляем страницу, память будет удалена. Если мы хотим постоянно хранить некоторые данные, нам нужно полагаться наlocalstorgeилиvuex-persistedstate

❞
  • Ручное использование локального хранилища HTML5 (localstorge)
  • Используйте плагин vuex-persistedstate

🌲 Дополнительное чтение:

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

1.2.3 Пять атрибутов vuex

  • состояние: основные данные vuex, используемые для хранения переменных

  • геттер: данные, полученные из базовых данных (состояния), эквивалентные вычисляемому свойству состояния.

  • мутация: метод отправки обновленных данных, который должен быть синхронным (используйте действие, если он асинхронный).

  • Действие: действие отправляет мутацию и может содержать любую асинхронную операцию, но не может напрямую изменить состояние.

  • модули: модульность vuex, упомянутая в главе 1.2.1

1.3 vue-router

❝

Большинство приложений SPA используют интерфейсную маршрутизацию для управления переходами между страницами. Благодаря переключению URL-адресов представление страницы обновляется без запроса сервера. Приложения Vue неотделимы от vue-router. Используемые знания включают следующие пункты

❞
  • В чем разница между режимом хеширования и режимом истории?
  • Как должен осуществляться перехват маршрутизации?
  • Как маршрутизация обеспечивает модульное управление?
  • Как работают компоненты кэша поддержки активности?

Чтобы узнать больше о vue-router, вы можете прочитать Tree Jam's🌲 Внешняя маршрутизация этих вещей

1.4 Разработка компонентов

❝

Разработка компонентов Vue заключается в извлечении и инкапсуляции компонентов с высокой степенью повторного использования путем отделения и отделения фрагментов кода с высокой частотой повторного использования от бизнес-кода.

❞
  • Каковы три важные причины для компонентов Vue?props、事件 和 slots
  • Как взаимодействуют компоненты?
  • Как использовать компонентный слот Vue?
  • Какую роль миксины могут играть в компонентах?
  • Что такое компоненты высшего порядка Vue?

1.4.1 Коммуникация и передача значений между компонентами

❝

Связь компонентов Vue может быть: отношения дочерний-родительский, отношения дочерний-предок и родственные отношения. Различные отношения также означают разные способы, в основном в том числе следующие способы:

❞
  • $parent与$children
  • $emit
  • bus $eventBus: шина событий, черезна завершение доставки и приема
  • provide与inject
  • props 与 $refs

🌲 Дополнительное чтение:

1.4.2 Слот слот

❝

Из официального введения Vue: элемент слота используется в качестве выхода для переноса содержимого дистрибутива.Простое понимание-это «занятие ямы».Подкомпонент занимает позицию заранее, а затем в соответствии с потребностями бизнеса сценарий, подкомпонент записывает соответствующую информацию

❞

🌲 Дополнительное чтение:

1.4.3 Миксин

❝

Миксины предоставляют очень гибкий способ распространения повторно используемой функциональности в компонентах Vue, и несколько компонентов могут совместно использовать данные и методы с помощью миксинов. В то же время вводятся компоненты миксина, а методы и свойства миксина также включаются в компонент и могут использоваться напрямую. Функция хука также будет вызываться в обоих (хук в миксине будет выполнен первым)

❞

Чтобы узнать больше о практике смешивания, вы можете прочитать Tree Sauce's🌲Вы освоили эти записи в исходном коде библиотеки компонентов?Использование миксина библиотеки компонентов в

1.4.4 Компоненты высшего порядка

❝

Компоненты более высокого порядка, также известные как HOC, описываются как способ совместного использования общей функциональности между компонентами без дублирования кода. Функция состоит в том, чтобы улучшить функцию компонента.Простое определение: вы передаете компонент методу, а затем возвращаете новый компонент, который является HOC

❞

🌲 Дополнительное чтение:

1.5 axios

❝

Приложения неотделимы от библиотеки запросов, и наиболее обсуждаемой библиотекой запросов в стеке технологий vue является axios.Axios — HTTP-клиент на основе Promise для браузеров и nodejs.Включая следующие знания.

❞
  • Как axios выполняет вторичную инкапсуляцию (перехватчик)?
  • Как управлять API с помощью axios?
  • Как axios отменяет запрос?
  • Как обновить токен с истекшим сроком действия в axios?

Об изучении первых трех можно прочитать в варенье из дерева.🌲 Как лучше управлять интерфейсом API

🌲 Дополнительное чтение:

1.6 vue-cli

❝

Vue-cli — это официальная основа Vue.Вы можете использовать Vue-cli для быстрой сборки проектов и предоставления готовой поддержки Babel, TypeScript, ESLint, модульного тестирования и т. д., упрощая развертывание, упаковку, кодирование. сканирование, модульное тестирование и другие процессы, необходимые знания включают в себя следующие пункты

❞
  • Как развернуть проект на основе vue-cli?
  • Как настроить vue.config.js для упаковки приложений с максимальной производительностью?
  • Как решить междоменную локальную разработку?

1.6.1 проект развертывания vue-cli

❝

Фронтенд-развертывание неотделимо от нескольких сред, включая локальную, фиктивную, разработку, тестирование, подготовку к производству, производство и т. д. Необходимо определить разные файлы конфигурации (управление API и т. д.) в соответствии с разными средами, а также необходимо чтобы определить скрипты компиляции (скрипты в packjson), вам также нужно обратить внимание на то, нужно ли модифицировать определение publicpath

❞

Чтобы узнать больше, вы можете прочитать «Соус из дерева».🌲 Развертывание проекта на базе Vue-cli 3x

🌲 Дополнительное чтение:

1.6.2 Настройка оптимальной упаковки

❝

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

❞
  • Оптимизировать по количеству запросов: (удалить предварительную выборку)
  • Извлечение общего кода, используйте cdn для загрузки: (config.externals)
  • Настроить сжатие кода

🌲 Дополнительное чтение:

1.6.3 Локальная разработка devServer

❝

Есть ли междоменные проблемы в локальной разработке? Мы можем сделать прокси-решение для ответа через конфигурацию devServer в vue.config.js! Как сделать? увидеть ниже

❞

🌲 Дополнительное чтение:

2. Система инженерных знаний

❝

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

❞

2.1 Git

❝

Как мы все знаем, git — это не только инструмент управления кодом, но и управление ветвями, проверка сообщений фиксации, запрос на включение и т. д.

❞

🌲 Дополнительное чтение:

2.2 Npm

❝

Толькоnpm installnpm на самом деле предоставляет множество функций, в том числе следующие часто используемые:

❞
  • npm publish: Управление аутсорсингом
  • npm link: используется для установления соединения между локальным проектом и локальным модулем npm, которое можно протестировать локально

🌲 Дополнительное чтение:

2.3 Инструменты сборки

❝

Многие интерфейсные инструменты для создания проектов включают Rollup, Webpack и Parcel.Однако в недавней бета-версии Vue.js 3.0 Ю Да упомянул небольшой инструмент vite, над которым он работал.Может ли vite заменить wepack?

❞
  • Webpack: Подходит для построения крупномасштабных проектов: в настоящее время веб-пакет имеет наиболее полную экологию, больше сценариев приложений, высокую популярность в сообществе, а также сильную экологию загрузчика и подключаемых модулей.
  • Rollup: подходит для упаковки библиотеки инструментов: каждый модуль можно упаковать в файл с Tree-shaking для удаления бесполезного кода и уменьшения размера кода, но он не имеет мощной экологии подключаемых модулей, как webpack, и его позиционирование больше подходит для focus Упаковка в библиотеке
  • Parcel: подходит для экспериментов: несмотря на отсутствие преимущества конфигурации, приложение может быть упаковано быстро и эффективно, но оно не имеет древовидной структуры, что приводит к большому выходному файлу.

🌲 Дополнительное чтение:

2.4 CI/CD и развертывание проекта

❝

Поскольку DevOps, непрерывная интеграция и непрерывная доставка (CI/CD) стали основным направлением развертывания проекта, развертывание внешнего интерфейса SPA-проекта должно быть упаковано 📦 приложениями, мы можем комбинировать Jenkins + Docker + Nginx для завершения, если это SSR. приложение, вам нужно использовать PM2 для процесса управления

❞

Чтобы узнать больше, вы можете прочитать «Соус из дерева».🌲 Фронтальная эксплуатация и развертывание обслуживания

🌲 Дополнительное чтение:

О серии DevOps и Engineering рекомендуетсяшаньюэ шаньюэКолонка брата

Система знаний 3 узлов

❝

Перед соусом из дерева я разобрал две серии интервью про узел.Заинтересованные детские ботиночки могут заценить.Что интервьюер спрашивает вас об узле (основы)иИнтервьюер спрашивает вас об узле (дополнительно). В то же время, для обычной работы узла и бизнес-сценариев система узлов Шуцзяна также относительно мала и будет скорректирована и дополнена в более поздний период.В настоящее время она может не подходить для детской обуви высокого класса.

❞

🌲 Дополнительное чтение:

4. Оптимизация производительности

4.1 Индекс производительности

❝

Показатели производительности используются для измерения производительности приложения путем получения данных и для отражения качества производительности с помощью данных.

❞

Мы также можем использовать маяк инструмента для тестирования нашего текущего приложения.

  • FCP: первый рисунок контента
  • FMP: Первый действительный розыгрыш
  • TTI: первое интерактивное время

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

🌲 Дополнительное чтение:

4.2 webpack

4.2.1 Разделение кода

❝

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

❞

использование веб-пакетаSplitChunksPluginДля дедупликации и разделения чанков в vue-cli 3 вам нужно всего лишь настроить splitChunks в chainWebpack в vue.config.js следующим образом:

🌲 Дополнительное чтение:

❝

Процитирую предложение: Суть разделения кода заключается в том, чтобы «выйти в онлайн напрямую из исходного кода»."и"«Упаковать как единый скрипт main.bundle.js» ** Между этими двумя крайними сценариями ищите промежуточное состояние, которое больше соответствует фактическому сценарию, и поменяйте приемлемое увеличение нагрузки на сервер на лучшее взаимодействие с пользователем.

❞
4.2.2 Сжатие UglifyJs
❝

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

❞

4.2.3 GIZP-сжатие

❝

Мы можем использовать плагин Compression-webpack-plugin для сжатия, который эквивалентен эффекту gzip.

❞

Мы настраиваем Webpack в vue.config.js под vue-cli 3 следующим образом:

4.2.4 Tree-shaking

❝

Tree-shaking, также известная как оптимизация tree-shaking, является оригинальной Tree-shaking, предназначенной для свертывания, представленной после веб-пакета 2. Используется для удаления бесполезного кода. А tree-shaking реализован на основе статических характеристик модулей ES6, а это значит, что tree-shaking можно использовать только в том случае, если вы используете модули ES6.

❞

🌲 Дополнительное чтение:

4.2.5 webpack-bundle-analyzer

❝

В среде разработки, производства или разработки мы хотим сравнить, проанализировать отчет для сравнения оптимизации производительности и определить, была ли улучшена производительность проекта vue.Настроив плагин webpack-bundle-analyzer, он может отображать все пакеты в графическом виде Размер соответствующих компонентов компонентов модуля, способ выполнения:npm run build --report

❞

🌲 Дополнительное чтение:

4.3 Nginx

❝

Оптимизация производительности Nginx учитывает следующие моменты:

❞
  • Как настроить gzip в nginx?
  • Как настроить, установив истекающий кеш?
  • Как оптимизировать производительность при балансировке нагрузки?

О систематическом обучении Nginx можно прочитать tree jamЭти вещи о Nginx

4.3.1 Gizp

❝

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

❞

4.3.2 Настройки кэша статических ресурсов

❝

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

❞

Допустим я хочу кешировать образы веб-приложения на неделю, тогда в nginx можно настроить следующее.После настройки ресурсы в течение недели будут обращаться только к ресурсам браузера, вместо запроса Nginx

4.3.3 Балансировка нагрузки

❝

Как мы все знаем, балансировщик нагрузки может повысить стабильность и скорость отклика веб-сайта за счет выделения других серверов пользователям, и существует четыре распространенных способа балансировки нагрузки, которые следует упомянуть здесь:响应时间来分配режим, который позволяет нескольким серверам соревноваться, находить самый быстрый и возвращать контент пользователю, конфигурация следующая

❞

🌲 Дополнительное чтение:

4.4 Другое

4.4.1 Предварительная выборка с предварительным запросом

❝

prefetch — это значение атрибута rel в элементе ссылки, определяя этот атрибут, браузер загружает ресурсы, которые могут быть использованы следующей страницей. Чтобы ускорить скорость загрузки следующей страницы, общий сценарий приложения находится в SSR. Загрузка ресурсов домашней страницы использует предварительную загрузку, а ресурсы других маршрутов, кроме домашней страницы, используют предварительную выборку. В чем разница между двумя ? смотреть вниз

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

🌲 Дополнительное чтение:

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

❝

Вы можете удалить предварительную загрузку и предварительную выборку в vue.config.js.

❞

Тотdns-prefetchЧто это? Это то же самое, что и предварительная выборка?

❝

Предположим, что теперь, когда мы посещаем Baidu baidu.com, на этот раз требуется, чтобы DNS сначала преобразовал доменное имя в соответствующий IP-адрес, что является очень трудоемким процессом. Вы можете использовать предварительную выборку DNS, чтобы проанализировать доменное имя ресурсов, необходимых для этой страницы, заранее преобразовать эти доменные имена в IP-адреса, когда браузер не используется, уменьшить количество DNS-запросов и выполнить предварительную выборку DNS.

❞ 
<link rel='dns-prefetch' href='http://baidu.com'>

4.4.2 отсрочка и асинхронность

❝

defer и async — это два атрибута в теге скрипта конфигурации. Сценарий использования — управлять загрузкой и выполнением скриптов, не блокируя синтаксический анализ дерева документов DOM на странице. В чем разница между ними?

❞
  • defer: Выполнять после рендеринга.После загрузки необходимо дождаться загрузки страницы перед выполнением кода
  • async: Выполнить после загрузки, скрипт будет автоматически выполнен после загрузки

🌲 Дополнительное чтение:

4.4.3 SSR и пререндеринг

❝

Рендеринг на стороне сервера SSR и предварительный рендеринг Prerender может решить проблему, заключающуюся в том, что время белого экрана слишком велико, и может повысить скорость отображения страницы в браузере, но предварительный рендеринг не рекомендуется.Если у вас слишком много маршрутов в вашем проекте, например, у вас 1000 статей, статью нужно пререндерить и выполнять один раз для каждого обновления, что нереально

❞

🌲 Дополнительное чтение:

4.4.4 Защита от сотрясений и дросселирование

❝

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

❞
  • 防抖 debounce: как следует из названия, это предотвращает дрожание.Применимые сценарии: запускать одну и ту же практику несколько раз за короткий период времени и ограничивать выполнение только одним разом.
  • 节流 throttle: Подобно управлению клапаном, клапан будет регулярно открываться.После того, как функция будет выполнена один раз, он не закроется в течение определенного периода времени и будет повторно активирован по истечении времени.

🌲 Дополнительное чтение:

4.5 Загрузка по требованию

❝

Перезагружайте в соответствии с потребностями просмотра.Например, на странице много картинок.Если после загрузки все картинки загружаются на страницу, это повлияет на производительность.Не было бы восхитительно прокручивать картинки до визуальной области, а затем загрузить их? Другой пример — длинный список с очень длинными данными, неограниченная загрузка DOM-данных, каждый раз перерисовка, что сильно влияет на производительность, создание контейнера на странице в виде визуальной области и отображение его в этой визуальной области Часть длинный список и то только в этой области разве это не ароматно?

❞

4.5.1 vue-lazyload

❝

Про vue-lazyload можно прочитать в tree jamРазговор о загрузке по запросу на интерфейсе — ленивая загрузка изображений

❞

4.5.2 Динамическая загрузка компонентов

❝

Про компонентную динамику можно прочитать в джеме дереваРазговор о загрузке интерфейса по требованию — загрузка компонентов по требованию.

❞

4.5.3 Виртуальный список

❝

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

❞

🌲 Дополнительное чтение:

Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~

1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨

Категории