Глубокое понимание проблем памяти и производительности JavaScript.

Как быстро приступить к работе с VUE3.0: Введите

рекомендации по обучению: Учебное пособие по JavaScript

1. Что такое память и производительность JavaScript. Поскольку

обработчики событий могут взаимодействовать в современных веб-приложениях, многие разработчики ошибочно используют их большое количество на странице. В JavaScript количество обработчиков событий на странице напрямую связано с общей производительностью страницы. Причин много, например: ① каждая функция является объектом и занимает место в памяти. Чем больше объектов, тем хуже производительность. ② Количество посещений DOM, необходимое для указанного обработчика событий, сначала приведет к задержке во всем; взаимодействие со страницами.

2. Поговорим о проблемах с производительностью InnerHTML?

1. Используйте отрицательный учебный материал InnerHTML

для (пусть значение значений) {
	ul.innerHTML += '<li>${value}</li>';}

Этот код неэффективен, потому что для каждой итерации необходимо задать параметр indexinnerHTML один раз. Мало того, для каждого цикла сначала необходимо прочитать файл InnerHTML, и это так. скажем, к внутреннему HTML необходимо обращаться дважды за один цикл.

2. Как решить

let itemsHtml = "";for(let value ofvalues){
	itemsHtml += '<li>${value</li>';}ul.innerHTML = itemsHtml

После этой модификации эффективность будет намного выше. :
ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');

3. Как решить проблему слишком большого количества кнопок?

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

<ul id="myGirls">
	<li id="girl1">Биби Донг</li>
	<li id="girl2">Юнь Юнь</li>
	<li id="girl3">Medusa</li></ul>

Содержит три элемента списка, которые должны выполнять определенное действие при нажатии. Обычный способ — указать три обработчика событий:

let item1 = document.getElementById("girl1). ");let item2 = document.getElementById("girl2");let item3 = document.getElementById("girl3");item1.addEventListener("click",(event) => {
	console.log("Я Биби Донг!");})item2.addEventListener("click",(event) => {
	console.log("Я Юньюн!");})item3.addEventListener("click",(event) => {
	console.log("Я Медуза!");})

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

let list = document.getElementById("myGirls");list.addEventListener("click",(event) => {
	пусть цель = event.target;
	переключатель (target.id) {
		случай «девушка1»:
			console.log("Я Биби Донг!");
			перерыв;
		случай «девушка2»:
			console.log("Я Юн-юн!");
			перерыв;
		случай «девушка3»:
			console.log("Я Медуза!");
			перерыв;
	}})

4. В чем преимущества делегирования событий?

• Объект документа доступен в любое время, и вы можете в любой момент добавить к нему обработчик событий (не дожидаясь DOMContentLoaded или событий загрузки) и использовать его для обработки всех событий определенного типа на странице. Это означает, что пока страница отображает кликабельные элементы, она будет работать без задержек.

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

• Уменьшите объем памяти, необходимый для всей страницы, и улучшите общую производительность.

5. Удаление обработчиков событий.

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

1. Удаление элементов с обработчиками событий,

например удаление узлов с помощью метода DOM removeChild() или replaceChild(). Самый распространённый вариант — использование InternalHTML для замены определённой части страницы целиком. В настоящее время, если на элементе, удаленном с помощью InternalHTML, имеется обработчик событий, он не будет нормально очищаться программой сбора мусора.
Поэтому, если вы знаете, что элемент будет удален, вам следует вручную удалить его обработчик событий, например btn.onclick = null;//删除事件处理程序. Делегирование событий также может помочь решить эту проблему. заменен на внутреннийHTML, не добавляйте обработчик событий к элементу, просто добавьте его в узел более высокого уровня.

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

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

6. Как решить проблему бесконечного цикла, вызванную динамическим добавлением p в цикл?

Выражение

let ps = document.getElementsByTagName("p");for(let i = 0;i<ps.length;++i){
	let p = document.createElement("p");
	document.body.appendChild(p);}

Выражение

let ps = document.getElementsByTagName("p");for(let i = 0,len=ps.length;i<len;++i){
	let p = document.createElement("p");
	document.body.appendChild(p);}

Первая строка выражения ① получает HTMLCollection, содержащую все элементы <p> в документе. Поскольку эта коллекция создается в режиме реального времени, каждый раз, когда вы добавляете на страницу новый элемент <p> , а затем выполняете запрос к этой коллекции, там будет еще один элемент. Поскольку браузер не хочет сохранять коллекцию каждый раз при ее создании, он будет обновлять коллекцию при каждом посещении. Каждый цикл будет оценивать i < ps.length , что означает запрос на получение всех элементов <p> . Поскольку новый элемент <p> создается и добавляется в документ внутри тела цикла, значение ps.length также будет увеличиваться каждый раз в цикле. Поскольку оба значения будут увеличиваться, i никогда не будет равно ps.length , поэтому выражение ① вызовет бесконечный цикл.
В выражении ② инициализируется переменная len, содержащая длину набора, поскольку len содержит длину набора в начале цикла, и это значение не будет динамически расти по мере увеличения набора ( for循环中初始化变量处只会初始化一次), поэтому можно избежать проблемы бесконечного цикла, которая появляется в выражении ①.
Если вы не хотите инициализировать переменную, вы также можете использовать обратную итерацию:

выражение

let ps = document.getElementsByTagName("p");for(let i = ps.length-1;i>=0;--i ){
	let p = document.createElement("p");
	document.body.appendChild(p);}

7. Карта разума JavaScript

Рекомендации по теме: Учебник по JavaScript.

Вышеизложенное представляет собой углубленное понимание проблем памяти и производительности JavaScript. Для получения дополнительной информации обратите внимание на другие соответствующие статьи на китайском веб-сайте PHP!