Подробное объяснение решения проблемы зависания прокрутки страниц веб-приложения.

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

Более конкретное объяснение: поскольку атрибут cancelable объекта события touchstart имеет значение true, то есть его поведение по умолчанию может быть предотвращено прослушивателем с помощью метода PreventDefault(). Но браузер не может заранее знать, вызовет ли прослушиватель функцию предотвращения Default(), все, что он может сделать, — это дождаться завершения выполнения прослушивателя, прежде чем выполнять поведение по умолчанию. Выполнение прослушивателя занимает много времени, а некоторые даже очень. -using. Это приведет к зависанию страницы. Даже если слушателем является пустая функция, произойдет определенная задержка. В конце концов, выполнение пустой функции также потребует времени.

Основная концепция: xxx.addEventListener('имя события', функция(xxx){xxx}, useCapture).

Первый параметр представляет имя события (за исключением, например, щелчка); второй параметр представляет функцию для получения обработки события; третий параметр — useCapture.

Давайте посмотрим, что это означает. Будет более интуитивно понятно привести прямой пример.

 <div id=level1> <div id=level2> <div id=level3>Нажмите здесь</div> </div></div><div id=info></div> 

 var level1 = document.getElementById(level1);var level2 = document.getElementById(level2);var level3= document.getElementById(level3);var info = document.getElementById(info);outDiv.addEventListener(click, function () { info.innerHTML += level1 + <br> }, false);middleDiv.addEventListener(click, function () { info.innerHTML += level2 + <br> }, false); inDiv.addEventListener(click, function () { info.innerHTML += level3 + <br>; }, false);

Согласно приведенному выше коду, давайте посмотрим на эффект useCapture как true и false:

Если все ложны, порядок срабатывания следующий: уровень3, уровень2, уровень1.

Если все верно, порядок срабатывания следующий: уровень1, уровень2, уровень3.

Когда уровень1 истинен, а другие ложны, порядок срабатывания следующий: уровень1, уровень3, уровень2.

Когда уровень2 является истинным, а другие — ложными, порядок срабатывания следующий: уровень2, уровень3, уровень1.

Когда уровень 3 — истина, а другие — ложь, порядок срабатывания следующий: уровень 3, уровень 2, уровень 1.

Когда уровень 1 имеет значение «ложь», а другие — «истина», порядок срабатывания следующий: уровень 2, уровень 3, уровень 1.

Когда уровень2 имеет значение «ложь», а другие — «истина», порядок срабатывания следующий: уровень1, уровень3, уровень2.

Когда уровень 3 имеет значение «ложь», а другие — «истина», порядок срабатывания следующий: уровень 1, уровень 2, уровень 3.

Из приведенных выше результатов можно сделать следующие выводы:

Порядок срабатывания true всегда перед false;

Если несколько значений верны, внешний уровень запускается раньше внутреннего уровня;

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

Как его использовать

 addEventListener('имя события', функция(xxx){xxx}, {захват: ложь, пассив: ложь, один раз: ложь})

Все три свойства являются переключателями логического типа, а значения по умолчанию — false.

capture: эквивалент предыдущего параметра useCapture;

Once: это означает, что прослушиватель является одноразовым и будет автоматически удаленEventListener после однократного выполнения;

Пассивный: используется для сенсорных событий веб-приложения.

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

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