Link and @ inport explanation and script execution sequence discussion, link @ inport

Link and @ inport explanation and script execution sequence discussion, link @ inport

Let's talk about the similarities and differences between the two.

Both of them can reference the external CSS method. Currently, mainstream browsers support both of them (ps: @ import is proposed by CSS2.1), but there are some differences:

1. link is An XHTML tag. In addition to loading CSS, you can also define other transactions. @ import belongs to the CSS category and can only load CSS or be used in css code.

The link tag defines the relationship between the document and external resources. The most common purpose is to link the style sheet and the browser tag icon.

It mainly has several available attributes.

Href: url of the connected external document

Media: Specifies the devices on which the linked document will be displayed. Mainstream browsers support "screen", "print", and "all"

Rel: Specifies the relationship between the current document and the linked document. Currently, only stylesheet and icon support better, where icon refers to the external link document as the browser label icon.

Sizes: html5 new feature, specifying the size of the linked resource. This property can accept multiple values separated by spaces. Applies only to rel = "icon ". The values are any (the specified icon is scalable) andHeightxwidth.For example, the following example defines the label icon

<link rel="icon" href="http://www.w3school.com.cn/i/demo_icon.ico" type="image/gif" sizes="16x16">

Type: Specifies the MIME type of the linked document. The most common MIME type is "text/css ". MIME Type reference

　　

@ Import references external documents in css code and can only be placed at the beginning of the Code. For example, the following example does not work.

<style type="text/css">  .panel{    width:1000px;  }  @import url(extra.css);</style>

Change

<style type="text/css">  @import url(extra.css);  .panel{    width:1000px;  }</style>

 

2: When link References CSS, it is loaded simultaneously when the page is loaded (in the order of requests); @ import requires that the page be loaded after it is fully loaded.

This involves a concept. All referenced files in the Code are loaded only after the file is loaded. Example

<style type="text/css">  @import url(extra.css);</style><script type="text/javascript">  document.write("<script src='extra.js'><\/script>");</script><script src="jquery.js"></script><link rel="stylesheet" type="text/css" href="test.css"><script type="text/javascript" src='test.js'></script> 

The loading sequence is jquery. js-> test.css-> test. js-> extra.css-> extra. js. Extra.css and extra. js are typical examples of referencing files in code.

Note: The sequence style. The same is true for js scripts.

There is a principle that the priority order of scripts (whether embedded in html or external scripts) is the order of reference, not the order of loading, in addition, the necessary condition for executing the Code is that the script with the reference order in the forefront has been loaded. (In fact, the code execution in the script is only executed after all the scripts are loaded, the Context Environment for code execution in different scripts is different, which will be analyzed in detail below ).

Example

<script type="text/javascript">    document.write("<script src='extra.js'><\/script>");</script><script type="text/javascript" src='test.js'></script> <script type="text/javascript">    a();</script><script src="new.js"></script>

//extra.jsfunction a(){    alert("extra")}alert("extra1")//test.jsfunction a(){    alert("test");}alert("test1");setTimeout(a,1000);//new.jsfunction a(){    alert("new")}alert("new1")

The reference order is

Extra. js-> test. js-> new. js.

In the displayed dialog box

Alert ("extra1")-> alert ("test1")-> alert ("test")-> alert ("new1")-> alert ("test ")

The code execution sequence is the same as the reference sequence.

　　

The principle of the browser's function execution is to scan the script in sequence to put all the processes to be executed into the processing queue and execute them in sequence with the execution context.

For example, when running to a () of the local js, function a in the context environment is function a () {alert ("test ")}. After setTimeout (a, 1000) is executed, function a carries the Context Environment (function a () {alert ("test")}) to another place, wait until the time interval expires before it is placed into the execution queue. This is why alert ("test") is popped up.

We expand again in extra. define a function B () {a () ;}in js, and then execute B () after the local js calls a (); the result should be the pop-up alert ("test "), this is because function a () {alert ("test")} In the context environment at this time ")}.

　　

The request sequence and overwrite of css can also be described in the preceding description. The overwriting sequence is the same style that will be referenced after being referenced first (of course, this refers to the style reference except the inline style)

 

3: link supports using Javascript to control DOM to change styles. @ import does not.

Because link also belongs to DOM elements, @ import is supported by css style sheets.

4: Usage

@ Import

@import "style.css"@import url(style.css) @import url("style.css")

@ Import url(style.css) is recommended)

　　

If you think this article is good, click [recommendation] in the lower right corner ]!