Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Hi, I’m Ken

Author: Please call me Ken Link: juejin.cn/user/109118… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the content and pictures of the article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the home page).

This blog is suitable for just contactJSAnd the friends who want to review after a long time.

🌊🌈

The following is part 8 of the BOM

8.4 JavaScript execution mechanism

JavaScript timers can perform asynchronous operations. For example, if multiple timers are set at the same time and each timer executes a piece of code after 3 seconds, the code in these timers will be executed after 3 seconds. JavaScript timers, while not as powerful as multithreading in Java, can meet most of your needs in development.

This section explains the execution mechanism of JavaScript

8.4.1 single-threaded

One of the hallmarks of the JavaScript language is single-threaded, which means you can only do one thing at a time. This is because JavaScript, as a scripting language, was created to handle user interactions in pages and manipulate the DOM. For example, DOM elements cannot be added and deleted at the same time. Instead, they should be added first and then deleted.

Single-threaded means that all tasks need to be queued until the first one is finished before the next one is executed. The problem with this is that if Javascript takes too long to execute, it will render the page incoherently, causing the page rendering load to feel blocked.

Case: demonstration,

console.log(1);

setTimeout(function() {
console.log(3);
}, 5000);

console.log(2);
Copy the code

Execute the above code, and on the console you’ll see that the program prints 1, 2, and then prints 3 after 5 seconds. As you can see, when the setTimeout() method is called, it completes immediately and then executes the following code, printing 2 in the console. The function passed in for setTimeout() will execute after 5 seconds. Operations like this are called asynchronous operations. This asynchronously executed function is called a callback function, and its timing is determined by a timer.

8.4.2 Synchronous and Asynchronous

In order to make better use of the computing power of multi-core CPUS, HTML5 proposes the Web Worker standard, which allows JavaScript scripts to create multiple threads. The concept of synchronous and asynchronous JavaScript was introduced.

  • The so-called synchronization is the execution of a task after the completion of the previous task, and the execution sequence of the program is consistent with the order of the task, synchronous. For example, the simultaneous practice of cooking, boiling water to cook rice, etc. after boiling water, then to cut vegetables, stir-fry vegetables.
  • Asynchrony means doing one thing while doing something else. Take cooking as an example. The asynchronous approach is to chop and fry vegetables while boiling water for cooking.

Synchronous tasks are executed on the main thread, forming an execution stack, while asynchronous tasks are realized through callback functions. Generally speaking, there are three types of asynchronous tasks. The first type is common events, such as click and resize. The second is resource loading, such as load, error, etc. The third type is timers, such as setlnterVal () and setTimeout().

8.4.3 Execution mechanism

When the timer is set to 0, it raises the question of whether the callback passed for the timer takes precedence, or the code after setTimeout().

Example code is as follows:

console.log(1);

setTimeout(function() {

console.log(3);
}, 0);

for(var i = 0, str = ' '; i < 900000; i++) {
str += i;
// Use string concatenation to slow down execution time
}

console.log(2);
Copy the code

After the above code is executed, the output sequence is 1, 2, and 3. Obviously, the callback function passed for the timer is executed last. To reduce contingency, lines 5 through 7 slow down the execution time, but the end result is still 3 final output.

In JavaScript, the synchronization task is priority, they will be put into execution stack, and asynchronous task (callback function) is put one task queue, once all the synchronization task execution in the execution stack, the system will read task queue in order of the asynchronous task, then be read asynchronous task will be over in a wait state, Enter execution stack and start execution.

Because the main thread of JavaScript repeatedly acquires, executes, retrieves, and executes tasks, this mechanism is called an Event Loop.

8.5 location object

The Location object is special. It is both a property of the Window object and a property of the Document object. The window Location is the same as document.location, they refer to the same object. The Location object not only provides information related to the currently displayed document, but also provides the URL for the user to get and set the form.

8.5.1 COMPOSITION of URL

Location objects are related to urls, so before we learn about location objects, let’s take a look at the composition of urls. Each web page file accessed on the Internet has an access marker that uniquely identifies its access location so that browsers can access it. This access marker is called Unifom Resoure Loator (URL).

The URL contains the network protocol, host name of the server, port number, resource name string, parameter, and anchor point, as shown in the following example:

/ / sample 1
protocol://host[:port]/path/[?query]fragment

/ / sample 2
http://www.example.com:80/web/index.html?a=3&b=4#res
Copy the code

URL Composition description

All the parts instructions
protocol Network protocols, such as HTTP, FTP, mailto, etc
host The host name of the server, for examplewww.example.com
port Port number. If omitted, use the default port number of the protocol. For example, the default HTTP port number is 80
path Light path, e.g. “/web/index.html”
query Arguments are key-value pairs separated by ampersands, such as “A =3&b=4”
fragment Anchor points, such as “#res”, represent anchor points inside the page

8.5.2 Common attributes of location

The location object in the BOM provides methods to change the URL that the current user accesses in the browser, and to load, reload, and replace new documents.

The search attribute provided by the location object returns parameters in the URL, which are usually used to pass in query criteria such as page number, search keyword, sorting method, and so on when querying information from the server. In addition to the search property, the location object also provides other properties to get or set the components of the corresponding URL address, such as the server host name, port number, URL protocol, and the full URL address.

Location The property of the object

attribute instructions
location.search Returns (or sets) the query portion (“? “The part after)
location.hash Return the anchor part of a URL (starting with “#”)
location.host Returns the hostname and port of a URL
location.hostname Returns the hostname of the URL
location.href Returns the full URL
location.pathname Returns the pathname of the URL
location.port Returns the port number used by a URL server
location.protocol Returns a URL protocol

🌊🌈

HTML Getting Started Guide learning Column “Finished” :

A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms Ken’s introduction to HTML and CSS (16) _ Multimedia Technology (17) _ Multimedia technology challenge the minimum time to bring you into HTML (18) challenge the minimum time to bring you into HTML (20)

Javascript Getting Started Guide Learning Column “In update” :

Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (2) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (3) the share | JS dry Recommended collection 】 challenge the shortest time take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (5) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (6) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (7) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (eight) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (nine) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (10) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (11) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (12) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (13) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (14) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (15) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (16) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (17) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (18) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (19) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (20) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (21) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (22) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (23) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (24) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (25) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (26)

🌊🌈 About postscript:

Thank you to meet hello I am Ken personal wechat: WLPChaojiBang Have questions please feel free to communicate with me, a person can go fast, but a group of people can go farther! “Attention” : improve learning efficiency! 👍🏻 : original is not easy, appropriate encouragement! ⭐ : Collect articles, review the old and learn the new! 💬 : Comment exchange, common progress!