Эта статья предназначена только для размышлений. У Сяо Цзяня недостаточно времени, чтобы попрактиковаться и изложить общие идеи.

Давайте сначала подведем итог, каковы методы обработки:

1. ленивая загрузка(Ленивая загрузка)
2. Обработка слияния операций DOM
3. виртуальный список
4. Загрузка партиями
5. Упростите структуру DOM
6. Оптимизировать ресурсы
7. Web Workers
8. Оптимизация работы пользователей
9. дифференциальное обновление
10. Серверный рендеринг
11. Оптимизация анимации
12. Покадровый рендеринг
13. Асинхронные обновления
14. WebAssembly
15. ускорение графического процессора

ленивая загрузка

представлять

"ленивая загрузка"（Lazy Загрузка), также известная как отложенная загрузка, — это технология, оптимизирующая время загрузки веб-страниц или приложений. существовать В рамках этой стратегии,Содержание толькосуществоватьЗагружается и отображается при необходимости,Обычно относится к тому моменту, когда пользователь прокручивает раздел контента, который не требует немедленной загрузки.,Эта часть контента только что начала загружаться。Этот метод может улучшить скорость загрузки страницы.、Уменьшите первоначальную загрузку ресурсов и Улучшите пользовательский опыт особенно важен.

Характеристики ленивой загрузки:

1. Уменьшите время начальной загрузки：проходитьотложить загрузкуна страниценекритические ресурсызагрузка（Как изображение、видео、рекламировать、Невидимый контент и т. д.）,Время первой загрузки страницы может быть значительно сокращено,Пользователи могут быстрее видеть содержимое страницы и взаимодействовать с ним.
2. Экономьте ресурсы：Загружайте только то, что видят пользователи,МожетЭкономьте пропускную способность и ресурсы сервера,Выгодно как для пользователей, так и для серверов.,Особенно, когда стоимость трафика дорогая, а сетевое соединение плохое.
3. Улучшите пользовательский опыт：пользовательНе нужно ждать загрузки всех элементовВот и всеиспользоватьвеб-сайт,тем самым снижая показатель отказов,Повышайте удовлетворенность и вовлеченность пользователей.
4. SEO-оптимизация：Хотя Ленивая загрузкаверноSEOПогруженныйсуществоватьизнегативное влияние,Поскольку сканеры поисковых систем могут не иметь возможности загружать и индексировать отложенно загружаемый контент.,Но необходима правильная настройка и оптимизация.,напримериспользоватьIntersection Observer API,Убедитесь, что контент существует и может быть загружен при доступе к нему сканерам.,Этот эффект можно уменьшить.

выполнить

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

• использоватьIntersection Observer API для определения того, попадает ли элемент в видимую область.
• На основе события прокрутки в сочетании с информацией о положении элемента определяется, нужно ли его загружать.
• использовать компонент или директиву отложенной загрузки современного внешнего интерфейса, предоставляемую платформой.,нравитьсяVueизv-lazy、ReactизlazyиSuspenseждать。

Расширять

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

1. Предварительная загрузка ключевых ресурсов：Хотя Ленивая загрузка推迟Понятнонекритические ресурсызагрузка,Но для ключевых ресурсов,Например, ключевое изображение контента, видимое на первом экране страницы или данные.,должны гарантировать, что они загружаются как можно быстрее,Чтобы пользователи не видели неполные и пустые страницы.
2. заполнительизиспользовать：существоватьдо загрузки ресурса,Можетиспользовать适когдаиззаполнитель（нравиться加载анимация、低质количество图像预览ждать）Приходить提供更好изпользовательский опыт, чтобы предотвратить беспокойство пользователей, вызванное внезапными изменениями макета страницы.
3. Доступность：убеждаться Отложенная загрузка不встреча破坏веб-сайтиз无障碍性。Например,Программа чтения с экрана для слабовидящих пользователейиспользовать,Необходимо гарантировать, что контент отложенной загрузки существует и может корректно загружаться и читаться при доступе.
4. Тестируйте и проверяйте：существовать不同из设备и网络环境下测试Ленивая загрузкаизвыполнить,Убедитесь, что существование работает должным образом во всех ситуациях.,Особенно существуют недорогие устройства и медленные сетевые среды.
5. В сочетании с современным Браузеристическим характером：Например,использоватьloading="lazy"свойствовыполнить图片иiframeиз Ленивая загрузка,этоВстроенная поддержка отложенной загрузки,упрощенныйвыполнить,И обеспечивает лучшую совместимость и производительность.
6. Мониторинг влияния на производительность：использовать Инструменты мониторинга производительности（нравитьсяGoogle Маяк) оценить Отложенная загрузкаверновеб-сайт性能из影响,Убедитесь, что цель оптимизации достигает,И скорректируйте свою стратегию, чтобы устранить любые потенциальные проблемы с производительностью.

Обработка слияния операций DOM

представлять

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

выполнить

использоватьDocumentFragment:

• DocumentFragmentэтоОблегченный узел DOM,Может использоваться как временный контейнер для хранения нескольких узлов DOM. Вы можете применить все изменения в DocumentFragment.,Затем добавьте его в дерево DOM за один раз.,этот методПерекомпоновка и перерисовка будут запускаться только один раз.。 Эта вещьСобственный APIподдерживать,详细Понятно解Может参考掘金这一篇博客：juejin.cn/post/695249…

var fragment = document.createDocumentFragment();
for (let i = 0; i < items.length; i++) {
    var element = document.createElement('div');
    element.textContent = 'Item ' + i;
    fragment.appendChild(element);
}
document.body.appendChild(fragment);

Минимизируйте прямое манипулирование DOM.:

• Минимизируйте количество прямых модификаций DOM.,Если вам нужно применить несколько изменений,МожетСначала рассчитайтеконечное состояние,Затем примените эти изменения,иНе меняя один за другим。
• Для изменения стиля,Можетпроходить Изменить имя классаилиstyle.cssTextи不да单独из样式свойство,чтобы уменьшить количество перерисовок и перекомпоновок.

Пакетное чтение с последующей пакетной записью:

• Браузер оптимизирует непрерывное чтение и запись DOM. Если вы чередуете чтение и запись,Браузер может потребовать несколько перекомпоновок,Рекомендуемый метод — сначала выполнить все операции чтения DOM.,Затем выполните все операции записи DOM.,или ВОЗСервер напрямую возвращает визуализированную строку HTML.。

использоватьrequestAnimationFrame:

• Для тех, кому необходимо часто обновлять DOM,Например, обновление элементов в событии прокрутки анимацииилисуществовать.,использоватьrequestAnimationFrameубеждатьсясуществовать Браузериз下一个重绘之前Выполнение обновлений DOM,Это позволяет избежать ненужной перекомпоновки и перерисовки.,这也да下面Воля要提到из“Покадровый рендеринг”

requestAnimationFrame(() => {
  // Выполнение обновлений DOM
});

Используйте современные интерфейсные фреймворки:

• Современные фреймворки внешнего интерфейса (например, React、Vue、Angular）Уже внутривыполнить ПонятноВиртуальный DOM,Они могут рассчитать наименьший набор изменений DOM в памяти.,а затем применить эти изменения,Это может значительно сократить прямые операции с DOM.,Улучшите производительность.

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

представлять

виртуальный список（Virtual List）это своего родаЭффективно отображать большие объемы элементов данныхизвнешний Технология оптимизации производительности интерфейса. Когда у тебя есть тысячи данных, нужен существованиевнешний. интерфейс При отображении в списке,нравиться果Рендеринг всех элементов данных непосредственно в DOM приведет к значительному снижению производительности.。 виртуальный список Технологии могут решить эту проблему,它из核心思想даРендеринг только элементов данных в пределах видимой области пользователя в данный момент времени.,Вместо рендеринга всего списка.

Принцип можно условно разделить на следующие пункты:

1. Рендеринг видимых элементов：виртуальный списокОтрисовывайте только те элементы, которые видны пользователю,Когда пользователь прокручивает список,Компонент вычисляет текущий видимый диапазон,и толькорендеринг这个范围内из项目。 Представьте себе, что у вас существует большая библиотека с тысячами книг. Но насколько хватает глаз, можно увидеть лишь десятки книг. виртуальный Список похож на администратора библиотеки. Когда вы стоите в определенном месте библиотеки, администратор приносит вам только те книги, которые вы видите, а не все книги во всей библиотеке. Когда вы перейдете в другую часть библиотеки, администратор снова принесет вам книги из этой зоны в зависимости от вашего нового местоположения. Таким образом, независимо от того, сколько книг находится в библиотеке, администратору нужно управлять только теми книгами, которые вы в данный момент видите.
2. Переработка и повторное использование DOM：когдаданные Когда элемент прокручивается из поля зрения,виртуальный списокЭлементы DOM этих элементов будут переработаны.,исуществовать新из可视данныекогда элемент попадает в поле зренияПовторно используйте эти элементы DOM,这样Может大大уменьшатьDOMдействоватьизколичество。 Продолжая приведенную выше метафору, когда вы идете из одной части библиотеки в другую, вы не можете читать книги в двух местах одновременно. Библиотекарь заменит ненужные вам книги и доставит их вам на новое место. существоватьвиртуальный В списке «вернуть ее на место» эквивалентно переработке элементов DOM, а «получить новую книгу» эквивалентно повторному использованию элементов DOM. Это уменьшает общее количество книг (элементов DOM), которыми необходимо управлять, тем самым повышая эффективность.
3. Динамический расчет：виртуальный список Компоненты будутДинамический расчет и регулировка высоты прокрутки контейнера прокрутки,чтобы гарантировать, что поведение прокрутки соответствует реальному объему данных,为пользователь提供准确из滚动体验。 Если книжная полка в библиотеке передвижная и администратор регулирует высоту книжной полки в зависимости от желаемого расположения книг, чтобы вы всегда чувствовали, что все книги у вас под рукой, то процесс аналогичен виртуальному. списокиз Динамический расчет。 виртуальный список рассчитает правильный размер и положение текущего содержимого, которое должно отображаться, и отрегулирует высоту контейнера прокрутки так, чтобы поведение прокрутки выглядело и ощущалось так, как будто существующее обрабатывает все данные, хотя на самом деле отображает только часть содержимого.

Преимущества

1. Улучшения производительности：проходитьуменьшатьрендерингизDOMколичество,виртуальный список существенно снижает нагрузку на Браузер,Улучшена производительность рендеринга,Особенно, когда существование имеет дело с большими объемами данных.
2. Быстрый ответ：пользователь滚动列表час,Интерфейс можетБыстрый ответ,Потому что необходимо обработать и рендерить лишь небольшое количество элементов данных.
3. Оптимизация использования памяти：уменьшатьсуществоватьDOMсерединарендерингизданные项количество也иметь в видуиспользоватьменьше памяти,Особенно для картинок и других ресурсоемких элементов списка.

выполнить

псевдокод:

class VirtualList {
  constructor(container, options) {
    this.container = container; // Элемент контейнера, например div
    this.itemHeight = options.itemHeight; // Высота каждого элемента списка
    this.renderAhead = options.renderAhead || 0; // Количество дополнительных элементов рендеринга для более плавной прокрутки.
    this.items = options.items; // Полный список данных
    this.totalHeight = this.items.length * this.itemHeight; // общая высота
    this.visibleCount = Math.ceil(this.container.clientHeight / this.itemHeight); // Количество видимых элементов

    this.container.addEventListener('scroll', () => this.handleScroll());
    this.render();
  }

  handleScroll() {
    this.render(); // Ререндеринг каждый раз при прокрутке
  }

  render() {
    const scrollTop = this.container.scrollTop; // Получить текущую позицию прокрутки
    const startIndex = Math.floor(scrollTop / this.itemHeight) - this.renderAhead; // Рассчитать стартовый индекс
    const endIndex = startIndex + this.visibleCount + this.renderAhead * 2; // Вычислить конечный индекс

    // создавать фрагменты документов для объединения операций DOM
    const fragment = document.createDocumentFragment();
    for (let i = Math.max(0, startIndex); i <= Math.min(endIndex, this.items.length - 1); i++) {
      const item = this.items[i];
      const div = document.createElement('div');
      div.style.height = `${this.itemHeight}px`;
      div.textContent = `Item ${item}`; // Предположим, что каждый элемент представляет собой простой текст.
      fragment.appendChild(div);
    }

    // Опорожните контейнер и добавьте новые элементы.
    this.container.innerHTML = '';
    this.container.appendChild(fragment);

    // Отрегулируйте высоту контейнера в соответствии с общей высота
    this.container.style.height = `${this.totalHeight}px`;
  }
}

// использовать Пример：
const list = new VirtualList(document.getElementById('listContainer'), {
  itemHeight: 30,
  items: Array.from({ length: 10000 }, (_, i) => `Item ${i}`), // Генерировать много данных
});

Этот код демонстрирует очень простой виртуальный список заполнения:

• Конструкторconstructor初始化基本свойствои事件监听。
• handleScrollметодсуществовать Срабатывает при прокрутке контейнера,Используется для воссоздания элементов в видимой области.
• renderметод计算когда前应该显示哪些项目,и обновляет DOM, чтобы отразить эти изменения.

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

Загружать партиями

представлять

На самом деле, это тоже можно отнести к категории ленивая. загрузка之середина。 Пакетная загрузка данных, также известная как постраничная загрузка или загрузка по требованию, — это метод, обычно используемый во внешней разработке для оптимизации обработки и представления больших объемов данных. Эта технология позволяет приложениямЗагрузка данных шаг за шагом,Вместо того, чтобы загружать их все сразу,从и提升应用из响应速度ипользовательский опыт。 например：прокатная загрузка。

• Первоначальная загрузка небольших объемов данных：когдапользователь首次访问应用час,Загрузите только небольшую часть данных (например.,Первая страница списка или первые несколько пунктов (данные).
• Загружайте больше данных по требованию：随着пользовательиз交互（нравиться滚动到列表底部или Нажмите“загрузить больше”кнопка）,Приложение постепенно загружает больше данных.

выгода:

1. Улучшите производительность：уменьшать初始加载изданныеколичество,Заставьте приложения загружаться и отвечать быстрее.
2. Уменьшить потребление ресурсов：Загрузка по требованиюданныеуменьшать Понятно服务器из压力и网络资源из消耗。
3. Улучшите пользовательский опыт：пользователь不需要ждать待вседанные加载完成Вот и всеначинать浏览,提升Понятнопользовательский опыт。

выполнить

1. Серверная поддержка：убеждаться后端Поддержка API分页или Получайте партиямиданные,Обычно вам необходимо указать такие параметры, как номер страницы (page) и количество страниц на странице (pageSize).
2. Данные внешнего запроса：внешний интерфейссуществовать При необходимости отправьте запрос на получение данных, передав соответствующие параметры пейджинга.
3. Загрузка, инициируемая пользователем：根据пользователь行为（нравиться滚动、Нажмите и т. д.), чтобы запустить загрузку дополнительных данных.
4. Обновить вид интерфейса：Воля加载из新данные追加到когда前данные列表из末尾,и обновите представление.

псевдокод:

let currentPage = 1;
const pageSize = 10;

function loadInitialData() {
    fetchData(currentPage, pageSize).then(appendDataToView);
}

function loadMoreData() {
    currentPage += 1;
    fetchData(currentPage, pageSize).then(appendDataToView);
}

function fetchData(page, size) {
    // Инициировать сетевой запрос для получения данных
    return fetch(`/api/data?page=${page}&size=${size}`).then(response => response.json());
}

function appendDataToView(data) {
    // Добавьте полученные данные в представление
    data.forEach(item => {
        const element = document.createElement('div');
        element.textContent = item.content; // Предположим, что элемент данных имеет поле содержимого.
        document.getElementById('dataList').appendChild(element);
    });
}

// Предположим, есть кнопка для загрузки дополнительных данных.
document.getElementById('loadMoreBtn').addEventListener('click', loadMoreData);

// Начальная нагрузка
loadInitialData();

Упростите структуру DOM

Упростите структуру DOM — это одна из ключевых стратегий оптимизации производительности внешнего интерфейса.

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

Вот несколько распространенных способов Упростить структуру DOM:

1. Избегайте глубокой вложенности：过深изDOM结构встреча影响页面изрендерингэффективность。应尽количество避免不必要из层级嵌套,Например,Вы можете использовать тот же макет и стиль с меньшим количеством элементов-оберток.
2. Удалите ненужные элементы упаковки.：经常Может看到Некоторый空изили ВОЗ没有实际作用из<div>или<span>элементы, используемые для макетаили ВОЗ样式修饰,Все это можно оптимизировать. использовать псевдокласс CSS или более продвинутые методы макетирования (такие как Flexbox или Grid) могут сократить использование таких элементов.
3. Используйте CSS для замены пустых и чистых элементов макета DOM.：много раз,我们МожетпроходитьCSSиз能力（нравиться伪元素、рамка、тень、модель макета и т. д.), чтобы заменить те элементы DOM, которые используются только для визуального представления.
4. Разумное использование формы：仅когда呈现表格данныечасиспользовать<table>,и избегайте использования таблиц для макета,Поскольку макет таблицы приведет к замедлению браузеррендеринга.
5. Оптимизируйте динамически генерируемый контент：дляпроходитьJavaScript动态生成и添加到页面из内容,Должно ли Уведомление контролировать количество и сложность генерируемых элементов DOM,Не перестраивайте всю структуру каждый раз при обновлении.
6. использовать семантический HTML：РазумныйиспользоватьHTML5提供из语义化标签（нравиться<article>、<section>、<nav>、<aside>ждать）,Это не только может сделать структуру DOM более понятной.,Это также помогает улучшить доступность веб-сайта и эффективность SEO.
7. уменьшатьiframeизиспользовать：<iframe>встреча创建额外из文档环境,Увеличьте сложность страницы. Только тогда, когда действительно существует необходимость встраивания внешнего контента в страницу.,талантиспользоватьiframe,И постарайтесь сократить их количество.

Оптимизация ресурсов

1. Сжатие ресурсов：
   1. CSS-сжатие：移除所有多余из空格、Комментарий,Сократите имена и идентификаторы классов CSS.,использоватьсуществовать线工具нравитьсяCSSMinifier。
   2. Сжатие JavaScript：удалить不必要из字符、Комментарий,использовать линейные инструменты, такие как UglifyJSилиTerser, для сжатия.
   3. Сжатие изображения：использовать工具нравитьсяTinyPNGилиImageOptim减Маленький图片文件尺寸,Сжатие без потерь и сжатие с умеренными потерями.
2. Объединение ресурсов：
   1. CSS-слияние：Конвертировать несколькоCSS文件合и为一个文件,Уменьшите количество HTTP-запросов.
   2. Слияние JavaScript：Сходным образом,Объединение нескольких файлов JavaScript,чтобы уменьшить запросы.
3. использование кэша：
   1. кеш браузера：проходить设置合适изCache-Controlголова,делатькеш статические ресурсы браузера.
   2. Кэш сервера：Настройка политики кэширования сервера,Например, заголовок ETagiliLast-Modified.,Оптимизировать Запрос на ресурс.
4. Асинхронная загрузка：
   1. асинхронный скрипт：использовать<script async>Загрузка некритичных скриптов,Избегайте блокировки рендеринга。
   2. сценарий задержки：использовать<script defer>Скрипт отложенной загрузки,до тех пор, пока анализ документа не будет завершен.
5. CDNиспользовать：
   1. Статическое распределение ресурсов：использоватьCDNРаспределяйте статические ресурсы,Например, изображения, CSS, JavaScript.,Серверы, расположенные близко к географическому местоположению пользователя, предоставляют данные.,Уменьшите задержку.
   2. Кэширование контента：использоватьCDNиз缓存策略,Улучшите скорость доступа к ресурсам.
6. Оптимизация шрифтов：
   1. Подмножество шрифтов：只包含网页所需из字符,Уменьшите размер файла шрифта.
   2. Выбор формата：приоритетиспользоватьWOFF2Формат,Принимая во внимание эффективность сжатия и совместимость.
7. Отложенная загрузка：
   1. Ленивая загрузка изображений：когда图片进入视口часталант加载,МожетиспользоватьIntersection Observer APIвыполнить。
   2. iframe отложенная загрузка：такой же,Отложите загрузку содержимого iframe, которое не требуется немедленно.
8. Ключевая оптимизация CSS：
   1. Встроенный критический CSS：ключрендеринг路径上изCSSвстроенный вHTMLсередина,Ускорьте первый рендеринг.
   2. Избегайте блокировки рендеринга：убеждаться加载非关键CSSНе блокирует страницурендеринг。
9. Приложение современного формата：
   1. Формат изображения：использоватьWebPилиAVIFФормат替代传统изJPEGиPNG,Оптимизируйте баланс качества и размера.
   2. формат видео：длявидео,использовать современные технологии кодирования, такие как H.264 и VP9.
10. Мониторинг производительности：
    1. использоватьLighthouse：обычныйиспользоватьGoogle Lighthouse проводит анализ производительности и получает предложения по оптимизации.
    2. ПрименитьWebPageTest：использоватьWebPageTestруководить更深入из性能анализироватьи监测。

Web Workers

представлять

Web Workers Предоставляет возможность запуска операции сценария в фоновом потоке. Этот сценарий не зависит от других сценариев и не влияет на производительность страницы. использовать Web С помощью Workers вы можете выполнять трудоемкие или трудоемкие задачи, не замораживая пользовательский интерфейс. Web О Workers много информации, я просто дам вам здесь краткое изложение. Если вам нужна подробная информация, вы можете обратиться к другим статьям или выполнить поиск в Браузер. 我推荐一篇Приходить自百度某团队из博客：juejin.cn/post/713971…

Функции

1. Параллельное выполнение：Web Workers бегатьсуществовать与основная тема分离из За кулисами线程середина,Позволяет выполнять параллельные вычисления,без блокировки и замедления пользовательского интерфейса.
2. Запускайте независимо：Workers существуют работает в независимом глобальном контексте и не влияет на производительность главной страницы.
3. Взаимодействие данных：основная темаи Workers 之间Можетпроходить传递消息из方式交换данные,Эти сообщения будут копироваться во время передачи.,а не делиться.
4. предел：Web Workers Невозможно получить доступ DOM Узел, также нельзя использовать window или document Методы объекта. Они в основном используются для исполнения и UI Не связан с вычислительно интенсивными и трудоемкими задачами.

сцена

1. обработка изображений：существовать图像编辑应用середина,Web Workers Может использоваться для выполнения сложной обработки. алгоритм изображений, не вызывая задержек интерфейса.
2. большие вычисления данных：существовать需要иметь дело с大количестводанныеиз应用середина,Например, анализ или вычислительно интенсивные задачи.,Web Workers Это можно сделать в фоновом режиме, не затрагивая внешний вид. ответ интерфейса.
3. обработка данных в реальном времени：для需要实часиметь дело сданныеиз应用,Например, игры или интерактивная графика.,Web Workers Могут выполнять обработку данных в фоновом режиме, обеспечивая плавность работы пользователя. опыт。

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

выполнить

Создайте работника:

// Создайте Worker,worker.js этосуществовать Worker Скрипты, выполняемые в потоках
var myWorker = new Worker('worker.js');

существовать worker.js войдите, напишите Worker Что должен делать поток:

// существовать worker.js в файле
self.addEventListener('message', function(e) {
  var data = e.data;
  // иметь дело сданные  var result = processData(data);
  // Отправьте результаты обратно в основной поток
  self.postMessage(result);
});

function processData(data) {
  // Логика обработки данных
  return data; // Вернуть обработанные данные
}

существоватьосновная темасередина与 Worker Взаимодействие:

// К Worker 发送данные
myWorker.postMessage({ a: 1, b: 2 });

// получить от Worker новости
myWorker.addEventListener('message', function(e) {
  console.log('Получено от Worker новости:', e.data);
});

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

принцип

Web Workers из大概принципна основеМногопоточная среда, предоставляемая браузером,允许开发ВОЗсуществовать За кулисами Параллельное выполнениеJavaScriptкод,иНе блокирует основной поток。

1. изоляция потока：Web Workers существовать в фоновом потоке, полностью изолированном от основного потока. Это означает, что они имеют собственный контекст выполнения и глобальную область действия и не могут напрямую обращаться к глобальным переменным или пользовательскому интерфейсу в основном потоке.
2. механизм передачи сообщений：основная тема с Worker Связь между механизмом передачи сообщения. Эти сообщения не передаются непосредственно в процессе доставки, а копируются с помощью алгоритма структурированного клонирования. Этот механизм обеспечивает целостность данных и безопасность потока.
3. управляемый событиями：Worker Связь с основным потоком основана на событиях. Основной потокиспользовать postMessage направление метода Worker Отправляйте сообщения и слушайте message события для получения Worker сообщение отправлено обратно. Аналогично, Рабочий Сам также провожу мониторинг message события для полученияосновная темановости,ииспользовать postMessage чтобы ответить.
4. среда выполнения：хотя Workers Не могут напрямую манипулировать DOM, могут выполнять почти весь код JavaScript, включая таймеры, использовать запросы XHR (хотя есть некоторые ограничения), использовать Fetch. API и т. д.
5. Загрузка ресурсов：Workers Можно импортировать внешние скриптыиспользовать importScripts() функций, что позволяет им использовать больше библиотек и инструментов для выполнения задач.
6. контроль жизненного цикла：основная тема Может随час创建и终止 Workers,использовать terminate() Метод завершается немедленно Worker исполнение, не дожидаясь его естественного завершения.
7. Независимое влияние на производительность：потому что Worker существовать За кулисами线程середина执行,Таким образом, он не блокирует взаимодействие пользователя с UI-рендерингом даже при выполнении интенсивных вычислений.,Это улучшает отзывчивость и производительность приложений.

Расширять

Говоря об этом,Мне вспоминается «многопоточность» Node.,Его суть также заключается в моделировании многопоточных операций на основе другого подпроцесса.,Суть вроде бы однопоточная.

Следующее обсуждение взято из Интернета: Node.js Многопоточность отличается от многопоточности в традиционных серверных языках, таких как Java и C++. Node.js Концепция дизайна заключается в однопоточном неблокирующем вводе-выводе, что делает его очень эффективным при обработке большого количества одновременных соединений. Однако, чтобы в полной мере использовать многоядерные процессоры и параллельно обрабатывать ресурсоемкие задачи, Node.js Для имитации «многопоточности» предусмотрены некоторые механизмы:

1. Child Processes:
   • Node.js Можетпроходить child_process модуль создает дочерние процессы, которые могут запускать программы Node.js или любую другую программу. Дочерний процесс выполняется независимо, а основной процесс Node может взаимодействовать с ним через IPC (межпроцессное взаимодействие). Хотя это не является многопоточным в традиционном понимании, но может балансировать на разных ядрах. выполнение Задача。
2. Кластерный модуль:
   • Кластерный модуль позволяет создавать несколько процессов Node.js (называемых рабочими процессами). Главный процесс (основной поток) может управлять этими рабочими процессами.,и распределять к ним входящие соединения,выполнить балансировку нагрузки. Каждый рабочий процесс независим,существовать Запуск в собственном экземпляре V8,Имеет собственный цикл событий.
3. Worker Threads:
   • Node.js 12 представил Worker Threads Обеспечивает функциональность, близкую к традиционной многопоточности. и child_process Разный, Рабочий Threads Разрешить общую память (проходить SharedArrayBuffer), разные потоки выполняют JavaScript и существуют в одном и том же процессе Node.js. Это делает обмен данными и обмен данными более эффективными, а также уменьшает проблему Уведомления потоков. Безопасность.

Хотя Node.js Предлагал такое Параллельное механизм выполнения кода, но они отличаются от многопоточности в традиционных серверных языках (таких как потоки в Java, std::thread в C++) существовать и восстанавливаться. Существует JavaилиC++, многопоточность — это встроенный язык анализа и среда выполнения, который может напрямую создавать потоки и управлять ими, и эти потоки совместно используют ресурсы процесса. Эти характеристики Node.js больше основаны на создании существующих процессов и рабочих потоков. Необходимо учитывать вопросы связи и совместного использования ресурсов между различными процессами и потоками.

Node.js Он основан на однопоточной модели цикла событий для обработки асинхронных операций, что означает, что основной поток выполнения Node.js является однопоточным. Так называемая «многопоточность» на самом деле представляет собой два основных механизма: Node.js Средняя симуляция восстановления:

1. Child Processes:
   • проходить child_process Дочерний процесс, созданный модулем, на самом деле является полностью независимым процессом, созданным на уровне операционной системы. Каждый дочерний процесс имеет свой собственный экземпляр V8 и независимый поток выполнения. выполнение,Но межпроцессное взаимодействие (IPC) требует дополнительных накладных расходов. Хотя эти подпроцессы могут вычисляться параллельно,Но они не разделяют память и контекст выполнения.,Каждый процесс полностью независим.
2. Worker Threads:
   • worker_threads Модуль предоставляет возможность создавать несколько потоков в одном процессе Node.js. здесь каждый Worker Потоки могут выполнять независимый файл JavaScript и совместно использовать определенное пространство памяти (проходить SharedArrayBuffer）,Параллельное Выполнение миссии. Хотя это ближе к многопоточности в традиционном смысле, каждый Worker Темы по-прежнему являются независимой средой выполнения, имеет собственный экземпляр V8 и цикл событий.

Подводя итог, Node.js Основная логика приложения выполняется в отдельном основном потоке, полагаясь на цикл событий для обработки неблокирующих операций ввода-вывода. когда дело доходит до CPU Для интенсивных задач Node.js проходить child processes или worker threads Выбор имеет возможности параллельной обработки, аналогичные многопоточности, но это не меняет Node.js По своей сути существование основано на однопоточном цикле событий.

Оптимизация работы пользователей

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

дифференциальное обновление

нравиться果你看过VueиReactчастьпринципвыполнить,Тогда ты должен знатьdiffСравните эту операцию,Если вы этого не понимаете, вы можете поискать.

представлять

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

такойданные覆盖式更新то естьПолное обновление,всеВсе нужно перерисовывать。

Учитесь и применяйте,大количестводанныеизdiffверно比Может配合上方изWeb WorkersДавайте оптимизируем дальше！

характеристика

1. Сравнение данных：Когда данные обновляются,Система сравнит старые и новые данные.,определить, какие именноданные发生Понятно变化。这个比较过程в целомдана основе某种形式из Виртуальный DOM (например, Виртуальный в React DOM) или другой механизм контрастирования данных.
2. Минимизируйте манипуляции с DOM：По результатам сравнения,Обновляются только элементы DOM, соответствующие тем данным, которые действительно изменились. Это точное обновление позволяет избежать полной перерисовки.,Уменьшена нагрузка Браузера.,Повышена эффективность рендеринга.
3. Пакетное обновление：существовать Некоторыйвыполнитьсередина,Система может собирать все изменения данных за определенный период времени.,Затем вычислите разницу за один раз и обновите DOM.,Это может еще больше сократить количество операций DOM.
4. Виртуальный DOM：существовать Некоторый Современные фреймворки внешнего интерфейса (например, React、Vue）середина,дифференциальное обновлениедапроходить Виртуальный DOM приходит на выбор. Этот метод предполагает сохранение копии дерева DOM в памяти, и при обновлении данных сначала существует виртуальный Примените изменения к DOM, а затем рассчитайте старый и новый виртуальный. различия между DOM и применять эти различия к реальному DOM.
5. пользовательский опыт：потому чтоуменьшать Понятно不必要изDOMдействовать,дифференциальное обновление может значительно улучшить скорость и плавность ответа страницы, Улучшите пользовательский опыт。
6. Использование ресурсов：дифференциальное обновление策略更高效地использовать Понятно计算资源,Особенно, когда существование имеет дело с большими наборами данных и сложными интерфейсами.,Это может существенно снизить нагрузку на Браузер.

Серверный рендеринг

представлять

Серверный рендеринг（Server-Side Рендеринг (SSR) — это технология, которая генерирует полный HTML-код страницы на сервере, а затем отправляет его клиенту (Браузер). Клиент загружает отображаемый HTML-контент, не дожидаясь загрузки и выполнения всего JavaScript для визуализации содержимого страницы. . 也то естьСерверная часть отображает HTML-код во внешнем интерфейсе.,我们изVueиReactдаSPAпрограмма,рендеринг全дасуществоватьклиент,Если контента слишком много, скорость загрузки будет медленной и зависающей.,И если данные большие,Плохая конфигурация клиента,那就更да难搞Понятно。 такУ нас непосредственно существующий сервер выдаст рендеринг страницы,Это значительно снизит нагрузку на клиента.,рендеринг естественно быстрый,Суть РСБ заключается в перекладывании бремени,Перенесите нагрузку с клиента на сервер. и且SSR оптимизирован для SEO, SPA – наоборот.。

VueиReact也有自己изSSRрамка,分别даNuxtиNext,尤其даNextОчень простой в использовании。

принцип

1. страница запроса：когдапользователь请求一个网页час,Запрос сначала отправляется на сервер.
2. Создать HTML：Сервер выполняет логику приложения,Посетите библиотеку данных или вызовите API, чтобы получить необходимые данные.,Затем заполните данные в шаблоне,Создайте полную HTML-страницу.
3. Отправить ответ：生成изHTML页面随后作为响应发送给клиент,После того, как клиент получит HTML,Браузеррендеринг отображается пользователю.
4. Поглощение клиента：существоватьклиент,После загрузки и выполнения JavaScript,Веб-страница часто становится полностью интерактивным приложением. Этот процесс называется «Гидратация».,существоватьпосле этого,Взаимодействие со страницей будет осуществляться клиентским JavaScript.

преимущество:

1. Улучшите производительность：SSRМожет加快首次页面加载час间,Потому что то, что получает Браузер, — это уже хороший HTML.,Пользователи могут быстрее видеть содержимое страницы.
2. Оптимизируйте SEO：搜索引擎更容易抓取и索引Серверный рендерингиз页面,Потому что они могут напрямую анализировать созданный HTML.,без необходимости выполнения JavaScript.
3. лучшая доступность：потому что内容直接существоватьHTMLсередина,Даже если существующий JavaScript отключен или еще не был выполнен,Пользователи также могут видеть основное содержимое страницы.

недостаток:

1. Нагрузка на сервер：Динамика сервера необходима для каждого запроса страницы.Создать HTML, который может увеличить нагрузку на сервер и время ответа.
2. сложность разработки：维护同一应用изклиенти服务器端рендеринг逻辑可能встреча增加开发иотлаживатьиз复杂性。
3. предел：и非所有изWebЗаявки можно получить по адресуSSRсередина受益,Особенно те приложения, которые являются высокоинтерактивными.,Клиентский рендеринг может быть более подходящим выбором.

Оптимизация анимации

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

1. использоватьCSSанимацияи非JavaScriptанимация：
   • CSSанимация обычно работает лучше, чем JavaScriptанимация.,Потому что Браузер умеет оптимизировать CSS-анимацию,Такие как существуют в нужное время, используют аппаратное ускорение.
   • использоватьtransitionиanimationсвойство Приходить定义анимация,и不даJavaScriptизsetIntervalилиsetTimeout。
2. Воспользуйтесь преимуществами аппаратного ускорения：
   • для некоторых объектов недвижимости,нравитьсяtransformиopacity,Браузер Можетиспользоватьускорение графического процессорарендеринг вместо того, чтобы полагаться исключительно на процессор. Это может значительно улучшить производительность анимации.
   • Избегайте свойств, вызывающих перекомпоновку и перерисовку в существующей анимации.,нравитьсяwidth、height、margin、topждать。
3. использоватьrequestAnimationFrame（rAF）：
   • использоватьrequestAnimationFrameконтролироватьанимация,и不даsetIntervalилиsetTimeout。requestAnimationFrameвстречасуществовать Браузер Выполняется перед перерисовкойанимациякод,Тем самым обеспечивая плавность анимации.
4. Упростите анимированные элементы：
   • Уменьшите количество и сложность элементов анимации. Больше элементов означает больше вычислений и рендеринга.,Это может снизить производительность анимации.
   • Используйте простые формы и избегайте чрезмерных деталей.
5. Оптимизировать время выполнения анимации：
   • Не позволяйте анимации работать дольше, чем необходимо. Длительная анимация не только потребляет больше ресурсов процессора и графического процессора, но также может отвлекать усилия пользователя.
6. Избегайте одновременного запуска нескольких анимаций.：
   • Чем больше анимации работает одновременно,Тем больше влияние на производительность. если возможно,Попробуйте уменьшить количество одновременно работающих анимаций.,или объединяет несколько анимаций в одну.
7. Тестируйте и анализируйте：
   • используйте инструменты разработчика Браузера для анализа производительности анимации. Уведомление Узнайте, не стала ли анимация причиной большого количества перерисовок и перекомпоновок,И есть ли узкие места в производительности.
   • существуют, проверено на разных устройствах и Браузеранимация,Убедитесь, что они могут бесперебойно работать в различных средах.

Покадровый рендеринг

представлять

На самом деле это содержит оптимизацию существования. анимация, но я все равно прихожу один на место. Покадровый рендеринг（Frame-by-frame анимация) — это технология анимации, в которой каждый кадр представляет собой независимую рендеринг. Этот метод часто используется для комплексной оптимизации анимации, такой как традиционная анимация или анимация высокоинтерактивных веб-приложений. существоватьWeb开发середина,Покадровый рендерингобычно относится кпроходитьJavaScriptОбновление покадровоанимациясостояние,这МожетпроходитьrequestAnimationFrameПриходитьвыполнить,Обязательно обновляйте кадр анимации перед каждым розыгрышем Браузера.

выполнить

let currentFrame = 0;
const totalFrames = 60; // Допустим, в анимации всего 60 кадров.

function updateAnimation() {
  // Обновите статус анимации, здесь просто увеличьте номер кадра.
  currentFrame++;

  // существует здесь обновляет DOMилиCanvas, чтобы отразить состояние анимации текущего кадра.
  // Например, изменение положения и угла поворота элемента и т. д.
  updateDOMForCurrentFrame(currentFrame);

  // Если анимация не закончилась, запросите следующий кадр, чтобы продолжить обновление.
  if (currentFrame < totalFrames) {
    requestAnimationFrame(updateAnimation);
  }
}

function updateDOMForCurrentFrame(frame) {
  // Обновите DOM на основе текущего кадра, вот лишь пример
  const element = document.getElementById('animated-element');
  // Предполагая, что анимация является мобильным элементом, она перемещается на 1 пиксель каждый кадр.
  element.style.transform = `translateX(${frame}px)`;
}

// начинатьанимация
requestAnimationFrame(updateAnimation);

существуют В этом примере:

• updateAnimation функцияда每帧执行изфункция,Это обновит статус анимации.,И существование называется каждый раз перед тем, как Браузер перерисовывает.
• updateDOMForCurrentFrame функция根据когда前帧Приходить更新DOMилиCanvas。существовать这个例子середина,Он просто добавляет один элемент в каждый кадр.КДвигайтесь вправо1px。
• использовать requestAnimationFrame(updateAnimation) начинатьанимацияцикл。requestAnimationFrame встречасуществовать Браузер Вызывается перед следующей перерисовкойupdateAnimationфункция,Таким образом обновляется покадровая анимация.

Такой Подровый рендерингиз方式让анимация开发ВОЗ有更大из控制权,Можно комплексную настройку анимационного эффекта,При этом обеспечьте плавность анимации.

принцип

мы знаем,анимация и видео фактически разбиты на кадры.,Люди, знакомые с фотографией и анимацией, возможно, хорошо знают об этом.,Частота кадров определяет, насколько плавным будет видео.,Например, мой IQOO11S,существовать, когда частота обновления экрана составляет 60 Гц,Когда приложение прерывает анимацию, переход становится недостаточно плавным, видимым невооруженным глазом.,Но когда я установил частоту 144 Гц, все стало очень, очень плавно.

То же самое касается анимации и рендеринга в браузере.

Покадровый Принцип рендеринга основан на вычислении и рендеринге анимации одну за другой для создания непрерывного эффекта анимации. существует Веб-среда, Покадровый рендерингобычно зависит отrequestAnimationFrame（rAF）метод Приходитьвыполнить。这里да其背后из Некоторый关键принцип：

1. Синхронизация времени：
   • requestAnimationFrameвызов一个функция Приходить更新анимацияисуществоватьв следующий раз Браузер Выполняется перед перерисовкой。这иметь в виду您изанимациярамка с Браузериз刷新率（Обычно 60 раз в секунду, то есть один кадр каждые 16,67 миллисекунды.）синхронный,Таким образом максимально эффективно используется мощность рендеринга каждого кадра.,Убедитесь, что анимация плавная.
2. Оптимизация браузера：
   • использоватьrequestAnimationFrameруководитьанимацияиметь в виду Браузерспособен оптимизироватьанимацияиз性能,Уменьшите и избегайте искажений макета и ненужных перерисовок.,Потому что Браузер знает, что вы намерены создавать анимацию.,И можно оптимизировать для этого.
   • Когда вкладка не на переднем плане,Браузер也встреча自动уменьшатьrequestAnimationFrameиз回调频率,для экономии вычислительных ресурсов и электроэнергии.
3. Обновление статуса кадра：
   • существовать в каждом кадре,Ваш код должен рассчитать и обновить следующее состояние анимации. Это может включать перемещение положения, изменение цвета, изменение размера и т. д. Потому что вы обновляетесь на каждом кадре.,Таким образом, можно создавать очень плавные и сложные анимационные эффекты.
4. рекурсивный вызов：
   • requestAnimationFrameв целомсуществовать被вызовизфункция内部再次вызов自己,Создайте рекурсивный цикл. Это позволяет Браузерсуществовать еще раз выполнить логику обновления анимации перед следующей перерисовкой.,Продолжайте продвигать последовательность анимации.
5. Вопросы производительности：
   • потому чтоrequestAnimationFrameда与Браузериз刷新率синхронныйиз,Это позволяет избежать чрезмерных кадров между обновлениями экрана.,Сократите растрату ресурсов,И обеспечить плавное визуальное восприятие.

Как получить 16,67 мс?

Асинхронные обновления

Проще говоря,Старайтесь не блокировать браузер。 для异步就不多说Понятно,JavaScriptда异步玩из非常出色из语言,Маленькая Джейн была ленива.

WebAssembly

представлять

WebAssembly (часто сокращенно Wasm) — это новый формат кода, созданный для Интернета, который позволяет реально запускать программы на веб-страницах со скоростью, аналогичной скорости машинного кода. WebAssembly Разработанный для работы с JavaScript, он призван стать альтернативой для веб-разработчиков, особенно в приложениях, чувствительных к производительности. Я мало что знаю об этом и на самом деле не сталкивался с этим, но помню, что он может компилировать другие языки в формат WebAssembly и выполнять его в существующем Браузер, что позволяет добиться очень высокой производительности обработки.

Функции

1. высокая производительность：WebAssembly Обеспечивая производительность, близкую к скорости собственного выполнения, это позволяет выполнять код WebAssembly напрямую с меньшими преобразованиями.
2. Безопасность：WebAssembly 维持ПонятноWebиз Безопасностьхарактеристика,Весь код WebAssembly существует и выполняется в изолированной среде.,Это гарантирует, что работа кода не вызовет угроз безопасности системы.
3. портативный：WebAssembly кодда以二进制Формат分发,Это делает его очень портативным,Может работать на разных Браузерах и платформах.,без модификации.
4. Взаимодействие с JavaScript：WebAssembly Разработан для беспрепятственной работы с JavaScript.,Позволяет разработчикам использовать JavaScript и WebAssembly в одном приложении.,Используйте соответствующие преимущества.
5. Независимый от языка：ХотяWebAssembly 本身不да一种编程语言,Но он предоставляет цель компиляции,Он позволяет компилировать несколько языков (таких как C, C++, Rust и т. д.) в формат WebAssembly и выполнять их в существующем Браузер.

сцена

• разработка игр：проходитьиспользоватьWebAssembly,разработка игры могут преобразовать существующие высокие производительность игрового и графического движка, перенесенная на веб-платформу.
• Аудио и видео кодек：WebAssemblyМожет用于加速видеоиз编解码过程,Обеспечьте более плавное воспроизведение.
• рендеринг графики：WebAssemblyизвысокая Характеристика производительности идеальна для рендеринга, требующего большого количества вычислений графики миссии.
• Вычислительные приложения：任何需要大количество计算из应用,Например, анализ данных или физическое моделирование.,Все могут извлечь выгоду из использования WebAssembly.

использовать

Хотя WebAssembly обычно необходимо скомпилировать после написания на поддерживаемом языке программирования.,Но ниже приведен упрощенный обзор процесса.,Никакого конкретного кода, но описаны общие шаги от C до WebAssembly:

1. Напишите свою программу на C или других языках.
2. используйте цепочки инструментов, такие как Emscripten, компилируйте код в файлы WebAssembly (.wasm).
3. существоватьна веб-страницепроходитьJavaScriptвызовWebAssemblyмодуль,Наряду с обычными объектами и функциями JavaScript используйте.

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

Я еще не пробовал это,Просто узнал это,Поэтому мне сложно писать псевдокод.,Если вам интересно, вы можете проверить другую информацию.

ускорение графического процессора

представлять

ускорение графического Процессор относится к использованию графических процессоров (GPU) для ускорения рендеринга. графики и неграфические вычислительные процессы для повышения производительности приложений. существоватьWebНаправления развития,ускорение графического Процессор часто используется для ускорения рендеринга графики и анимации веб-страниц, обеспечивая более плавный и отзывчивый пользовательский интерфейс. опыт。

1. рендеринг графики：существовать传统изрендеринг В процессе построения графиков большую часть задач выполняет центральный процессор (ЦП). ускорение графического процессора позволяет переложить эти задачи на графические процессоры, оптимизированные для графических вычислений, тем самым увеличивая скорость и эффективность рендеринга.
2. CSS3-переходы и анимация：современный Браузер Можетиспользоватьускорение графического процессораCSS3из变换（transforms）ианимация,Сюда входят масштабирование, вращение, такие операции, как перемещение (перевод).
3. Холст и WebGL：Web技术нравитьсяCanvas 2D и WebGL также могут использовать преимущества ускорения. графического процессора для повышения производительности графической отрисовки, что особенно важно для игр и приложений с интенсивным использованием графики.
4. слой композиции：когда网页изнекоторыйчасть被Браузер识别为Может独立于其他часть变化час,Их можно продвигать в слой композиции (композитные слои).,И независимо от рендеринга на GPU,Тем самым улучшая общую эффективность рендеринга.

использовать

МожетпроходитьнекоторыйCSSсвойство Приходить提示Браузериспользоватьускорение графического процессора特定元素изрендеринг：

1. Использовать свойства CSS с аппаратным ускорением：Воляtransform: translateZ(0)илиtransform: translate3d(0, 0, 0)применяется к элементам,Может Создайте新изслой композиции, хотя сама трансформация не имеет визуальных изменений.
2. использоватьwill-changeсвойство：CSSизwill-changeсвойство Может用Приходить告知Браузер某个元素预计встреча有变化（нравитьсяанимация）,Браузер можно оптимизировать заранее.

Уведомление

1. Потребление ресурсов：Хотяускорение графического процессора Может Улучшите производительность, но чрезмерное использование или неправильное использование также могут потреблять больше ресурсов и даже снижать производительность. Например, создание слишком большого количества слоев композиция может увеличить потребление памяти.
2. совместимость：不同设备и Браузерверноускорение графического Уровень поддержки процессора может различаться, поэтому для обеспечения совместимости требуется тестирование.
3. отлаживать：开发ВОЗ工具нравитьсяChromeизLayers面板Может用Приходить查看页面изслой композицию, помогая разработчикам понять и оптимизировать ускорение графического процессораизиспользовать。

Эпилог

Первая статья в новом году окончена. Давайте остановимся на этом. Моя печатающая рука онемела. Если можете, поставьте мне лайк. Если вам нужно перепечатать, не забудьте поставить подпись Сяоцзянь и указать источник! Быть оригинальным непросто, спасибо за поддержку.

Кстати, я рекомендую два крупномасштабных решения по оптимизации рендеринга данных для каскадного потока:

1. водопад потокиспользоватьвиртуальный список Оптимизация производительности：juejin.cn/post/716607…
2. 关于双列водопад поток布局из优化思考：juejin.cn/post/692163…
3. водопад поток优化：juejin.cn/post/732797…