Understanding and Usage of JavaScript

(1) What is JavaScript?

JavaScript is a scripting language designed specifically for interacting with web pages and consists of three parts: ( 1).ECMAScript: Provides core language functions. (2). Document Object Model (DOM): Provides methods and interfaces for accessing and operating web content (3). Browser Object Model (BOM): Provides methods and interfaces for interacting with the browser

(2)HTML code execution

(Principles of modern browsers)

　

Author: Qian Duoduo
Link:
Source: Zhihu
Copyright belongs to the author. For commercial reprinting, please contact the author for authorization. For non-commercial reprinting, please indicate the source.

1. Is html downloading and execution synchronous?

Conclusion: It depends on the situation.

This description of html execution is inaccurate. The so-called execution includes several stages of parseHTML, layout, and paint. download, parseHTML/parseCSS/executeJS, layout, and paint are all in different processes.

parseHTML/parseCSS are parallel. After they are completed together, layout generates a rendering tree and then paint is rendered. Executing JS will return to the layout stage.

A. If the network speed is fast enough and the content is transmitted quickly, parse+layout+paint will be executed later.

B. In a weak network environment, modern browsers are optimized for slow network speeds and will try to render the received content in advance, which will cause the page to be seen on the PC. The condition of a piece of display.

The principle of C.chunk is similar. Each chunk breakpoint may trigger parsing and rendering.

D. Some browsers will also optimize the first screen. During the download process, parse+layout will be constantly tried. If the layout calculates that the content exceeds the first screen, it will paint the content so that the user can see the first screen content first.

Because most processes are parallel, they will be relatively complex. It is meaningless to discuss them on a case-by-case basis. It is better to understand them in principle.

2. Are the downloading and rendering of the css file synchronous? Or should it be downloaded first and then rendered?

I am not sure whether parseCss will be lexically analyzed simultaneously during the download process, but it is possible It is very flexible. After all, it is a lossless optimization solution.

But in the end, it must be downloaded and then laid out to generate a rendering tree and then rendered.

3. Are the downloading and execution of css files and the downloading and execution of html files synchronized?

In parallel. However, you need to pay attention to some restrictions. For example, the maximum number of concurrent requests under a domain name is 6. Any more requests must be serialized.

4. Is the loading of graphics synchronized with the download/execution of html files, audio and video, and other resources?

Same as above.

5. Is the downloading and execution of js files and the downloading and execution of html files synchronous or asynchronous? What if async and defer are used?

Download, but not executeJS

6. Is it possible for html files/pictures/css files/js files to be downloaded at the same time?

Normally.

7. Is it possible for html/css files/js files to be executed at the same time?

You will understand after reading the above article: html parse and css parse are parallel Yes, layout and paint will be done after both are completed. New css mounting will delay layout and paint. js parse will block html parse, so the subsequent layout and paint will not be executed at the same time.

##(3).Use JavaScript in html

3.1<script>Element<strong></script>

<script>Six attributes of the element: <p> 1. async: Asynchronous loading of attributes, optional. Only valid for external scripts, it means downloading the script immediately, but does not hinder other operations on the page <p> . <p> 2. charset: character encoding attribute, optional. The default is UTF-8 encoding, which mainly represents the character set of the <p> code specified through the src attribute. Most browsers will ignore its value, so there is no need to use it. <p> 3.defer: Script delay attribute, optional. Used to delay the execution time of the script until the entire HTML document has been parsed and displayed. It is only valid for external script files. <p> 4.language: script type attribute, not part of the standard, <p>deprecated. Most browsers <p><span style="background-color: #ff0000;"> will ignore this attribute and there is no need to use it. 5.src: Link external file attributes, optional. Represents an external file containing code to be executed. Note that <p> Once the src attribute is set, the JavaScript code written in the script element may be invalid. <p> 6. type: script type attribute, required. The default value is text/javascript, which can be regarded as the alternative attribute of language<p> , indicating the content type (also called mime type) used to write the code. <p><p>Note: Do not appear </script>

anywhere in the code3.2 Label position

<script>There are two placement positions: (1)<head>middle (2)<body>middle</script>

(1) : It is a general practice to place it in

(2) : When placed in , the browser must download and parse the js program The page content will not be displayed until it is completed, causing a certain delay (the page content will not be displayed until is encountered). Therefore, the web program puts the js code into

3.3 Delay script

defer Tag: Join defer The js program will not start executing until the entire page has been downloaded and parsed

Note: The

3.4 Document Mode

It is recommended to use:

3.5

nbsp;html>


    <meta>
    <title></title>


<noscript>
    <p>本浏览器不支持script</p>
</noscript>


触发条件：1.浏览器不支持脚本
　　　　　　2.浏览器支持脚本，但是脚本被禁用

The above is the detailed content of Understanding and Usage of JavaScript. For more information, please follow other related articles on the PHP Chinese website!