Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "how to solve the webapp page scrolling stutter problem in html5", the content is detailed, the steps are clear, and the details are handled properly. I hope that this "how to solve the webapp page scrolling stutter problem in html5" article can help you solve your doubts.

When the mobile browser scrolls the current page (and possibly zooms the page), due to the default behavior is blocked, the page is forced to rest, resulting in poor user experience and feeling that the scrolling page has a sense of standstill.

To be more specific: because the cancelable property of the touchstart event object is true, that is, its default behavior can be blocked by the listener through the preventDefault () method. But the browser cannot know in advance whether a listener will call preventDefault (). All it can do is wait for the listener to execute the default behavior, and the listener execution is time-consuming, some even time-consuming, which can lead to page stutters. Even if the listener is an empty function, it will produce a certain stutter, after all, the execution of the empty function will take time.

UseCapture parameter of addEventListener

Basic concept: xxx.addEventListener (event name, function (xxx) {xxx}, useCapture).

The first parameter represents the event name (without on, such as "click"); the second parameter represents the function to receive event handling; and the third parameter is useCapture.

Let's take a look at what this thing means, and it's more intuitive to give a direct example.

Please click var level1 = document.getElementById ("level1"); var level2 = document.getElementById ("level2"); var level3= document.getElementById ("level3"); var info = document.getElementById ("info"); outDiv.addEventListener ("click", function () {infos _ clean] + = "level1" + "

";}, false); middleDiv.addEventListener (" click ", function () {info [XSS _ clean] + =" level2 "+"

";}, false); inDiv.addEventListener (" click ", function () {info [XSS _ clean] + =" level3 "+"

";}, false)

According to the above code, this useCapture is the effect of true and false:

When all false is used, the trigger sequence is: level3, level2, level1

When all true is used, the trigger sequence is: level1, level2, level3

When level1 is true and others are false, the trigger sequence is: level1, level3, level2

When level2 is true and others are false, the trigger sequence is: level2, level3, level1

When level3 is true and others are false, the trigger sequence is: level3, level2, level1

When level1 is false and others are true, the trigger sequence is: level2, level3, level1

When level2 is false and others are true, the trigger sequence is: level1, level3, level2

When level3 is false and others are true, the trigger sequence is: level1, level2, level3

From the above results, the following conclusions are drawn:

The trigger sequence of true is always before false.

If multiple are true, the outer layer triggers before the inner layer

If multiple are false, the inner layer is triggered before the outer layer.

Passive property to control event behavior

The mode of use is as follows

AddEventListener ('event name', function (xxx) {xxx}, {capture: false, passive: false, once: false})

All three properties are Boolean switches, and the default value is false.

Capture: equivalent to the previous useCapture parameter

Once: this means that the listener is disposable and is automatically removeEventListener off after one execution.

Passive: touch event for webapp

It is understood that 80% of the scrolling event listeners will not block the default behavior when using events in mobile browsers, that is to say, in most cases, browsers are waiting for nothing. So, the passive listener was born, and passive means "obedient", which means it doesn't say no about the default behavior of events. When the browser knows that a listener is passive, it can execute the JavaScript code in the listener and the browser's default behavior in both threads.

Read here, this "how to solve the webapp page scrolling stutter problem in html5" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.