Improved Web Response

Imagine that if a user triggers a click event on the page, the response delay is obvious, which is a frustrating thing. The cause of this problem is response delays.

Browser UI thread

Everyone knows the browser's UI thread, and most browsers are a separate process to handle the task. And this process is shared by two tasks, that is, JavaScript performs tasks and UI update tasks , which means that at any moment, only one of these two tasks can be executed. This causes the user interface to be " locked " and unable to respond to any action when JavaScript is executed. So it's important to control the running time of JavaScript.

In the browser, each JavaScript task and UI Update task is added to a queue, and the UI thread executes the tasks in the queue sequentially. Look at the following example

A click event is registered to the button in the code above, which results in two tasks when clicked. The first is the change of button appearance (button is pressed, this is a UI update task), the second is to execute the Handerclick function (JavaScript Task) , the following is the process of execution

The above can be seen when the button is clicked, the task status in the queue, and the execution process of the UI process.

　　Browser restrictions

　 Browser restrictions are taken to prevent malicious JavaScript programs from taking up the UI process indefinitely. This is often said to be a long time script limit, is actually a script timer. The browser sets a limit, and when the execution time reaches that limit, the browser terminates it. A dialog box may be displayed.

There are two ways to measure the time the program runs, the first is to count the total JavaScript statements, and the second is the total time that the statistics scripts run. Internet Explorer, in version 4th, set the default limit to 5 million statement, Firefox default limit is 10 seconds, this limit is stored in the browser configuration settings (enter About:config in the Address bar) key Name Dom.max_script_ Run_time,safari default limit is 5 seconds, this setting cannot be changed, but you can turn off this timing, Chrome does not have a separate long run script limit, instead of relying on its common crash detection system to handle such instances.

　　How long is "too long"?

If it's too long for JavaScript to run for a whole few seconds, what's the right time? It turns out that even a second is too long for a script to run. The total time (maximum) that a single JavaScript operation should use is 100 milliseconds. This figure is based on the study of Robertmiller in 1968.

More complicated is that some browsers do not put UI updates in the queue while JavaScript is running. For example, if you click a button while some JavaScript code is running, the browser may not put the UI update task that redraws the button pressed into the queue, nor will it put a JavaScript task launched by this button. The result is an unresponsive UI that behaves as "pending" or "Frozen."

　　Time slices with timers

　Despite your best efforts, there are some JavaScript tasks that cannot be completed in 100 milliseconds or less for complexity reasons. In this case, the ideal method is to give control of the UI thread so that the UI update can proceed. Giving up control means stopping the JavaScript run, updating the UI thread, and then continuing to run JavaScript. So the JavaScript timer came into our field of view.

The way the timer interacts with the UI thread helps break down long-running scripts into shorter fragments. Calling settimeout () or setinterval () tells the JavaScript engine to wait for a certain amount of time and then add the JavaScript task to the UI column. For example:

function greeting () {
Alert ("Hello world!");
}
SetTimeout (greeting, 250);

This code will insert a JavaScript task into the UI queue after 250 milliseconds to run the greeting () function. All other UI updates and JavaScript tasks are running before that point. Keep in mind that the second parameter indicates when a task should be added to the UI queue, not that the code will be executed at that time. This task must wait until other tasks in the queue are executed before it can be executed.

Timer accuracy

　　JavaScript timer delays are often inaccurate and slow down by about a few milliseconds. Just because you specify a timer delay of 250 milliseconds does not mean that the task will join the queue after the exact 250 milliseconds of calling settimeout (). All browsers try to be as accurate as possible, but usually slip in milliseconds, either fast or slow. For this reason, timers are not available to measure actual time.

On Windows systems, the timer resolution is 15 milliseconds, which means that a timer delay of 15 will be converted to 0 or 15 based on the last system time refresh. Setting the timer delay of less than 15 will cause the browser to lock in Internet Explorer, so the minimum value is suggested to be 25 milliseconds (actual time is 15 or 30) to ensure at least 15 millisecond delay.

Improved Web Response