Несколько практических навыков для оптимизации производительности небольших программ

Всем привет, меня зовут Чжан Вэньсюань, это мой шестой обмен

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

Оценка эффективности страницы мини-программы

Из-за специфики среды разработки апплета мы не можем использовать инструменты разработки Chrome или некоторые зрелые инструменты тестирования производительности (например, Lighthouse), чтобы оценить производительность страницы, как обычные веб-страницы, но WeChat официально предоставляет инструмент оценки производительности, нажмитездесьДетали инструмента можно просмотреть.

Оценка опыта — это функция для оценки опыта мини-программы, которая будет проверять в режиме реального времени во время выполнения мини-программы, анализировать некоторые области, которые могут привести к негативному опыту, обнаруживать любые проблемы и давать предложения по оптимизации.

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

Данные в setData слишком велики

В нашей функции есть функция прокрутки вниз для загрузки.До оптимизации наш подход такой

<!--只阐述逻辑，非真实代码-->

// 1: 初始一个list，存储列表数据
data = startList
// 2: 监听滚动事件，滚动到底部获取新数据，并追加到list尾部,最后重新setData
onReachBottom:()=>{
    const {list} = this.data
    fetchNewData().then((res)=>{
        list.push(res.list);
        this.setData({list})
    }
}

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

путь к данным setData

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

let o = obj;
this.setData({
    'o.属性'：value
})

或者
let a = array;
this.setData({
    'array[0].text':value
})

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

// 1.通过一个二维数组来存储数据
let feedList = [[array]];

// 2.维护一个页面变量值，加载完一次数据page++
let page = 1

// 3.页面每次滚动到底部，通过数据路径更新数据
onReachBottom:()=>{
    fetchNewData().then((newVal)=>{
        this.setData({
            ['feedList[' + (page - 1) + ']']: newVal,
        })
    }
}
// 4.最终我们的数据是[[array1],[array2]]这样的格式，然后通过wx:for遍历渲染数据

Слишком много запросов изображения за короткое время (отложенная загрузка изображения)

Это должно быть легко понять, то есть, когда страница визуализируется, одновременно отправляется слишком много запросов изображений, что приводит к слишком большому количеству HTTP-запросов одновременно. инициируются одновременно, и однократно сексуально инициированные http-ссылки также ограничены.Например, браузер Chrome ограничен максимум 6 одновременно.

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

Обычная практика - пройтиgetBoundingClientRect()Получите положение элемента, затем сравните его с положением прокрутки страницы, если он появится в представлении, он будетimgпоказывать. Есть 2 проблемы с этим подходом

Сам вызов метода getBoundingClientRect() может легко привести к изменению порядка страниц.
Часто инициируется прослушивание самого события прокрутки. Хотя его можно уменьшить с помощью дросселирования, все же легко увеличить ненужную обработку кода.

IntersectionObserver

На самом деле, WeChat предоставляетIntersectionObserverобъект.

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

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

let data = list;

<img class="img-{{index}}" wx:for="{{data}}"></img>

data.forEach((item,index)=>{
    this.createIntersectionObserver().relativeToViewport.observe(`.img-${index}`,res=>{
        if (res.intersectionRatio > 0){
            this.setData({
                item.imgShow:true
            })
        }
    })
})

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

Изображение слишком велико, а область отображения слишком мала.

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

обработка изображений CDN

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

Роль ключевых значений в рендеринге списка

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

Создайте документ со структурой wxml в виртуальный номер vdom
Страница имеет новое взаимодействие, генерирует новый номер vdom, а затем сравнивает его со старым номером, чтобы увидеть, где есть изменение, и внести соответствующие изменения (удалить, переместить, обновить значение) и другие операции.
Наконец, vdom преобразуется в реальную структуру страницы.

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

Если значение ключа не указано, оно будет обработано по индексу массива по умолчанию, что вызовет путаницу в значениях некоторых компонентов поля ввода, таких как input.

Соответствующий тестовый код можно просмотреть:wxkey

можно увидеть

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

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

Наконец, посмотрите наши результаты:

Код опыта:

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

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