JS magic Hall: in-depth explanation of LINK elements and js magic link

JS magic Hall: in-depth explanation of LINK elements and js magic link

I. Preface

We generally use <link type = "text/css" rel = "stylesheet" href = "text.css"> to introduce an external stacked Style File, however, we do not know much about the specific meaning of each attribute of the LINK element and the loading behavior of resources. This article intends to go deeper.

Due to the large amount of content, the special directory is as follows:

2. Are there end tags?

Iii. Introduction to common attributes

Iv. Details about attribute disabled

1. Attribute and Property disabled

2. Will style files be loaded when disabled is set to true?

3. Will the onload, onerror, and onreadystatechange events be triggered when the value of disabled is true?

4. CSS Parsing

5. Rendering

V. Introduction to attribute rel

6. dynamically create LINK elements

VII. attributes and events related to resource Loading

8. Resource loading experiment

1. Conclusions under IE

2. Conclusions In Chrome

3. Conclusions under FF

IX. Summary

10. References

 

2. Are there end tags?

Maybe we often see two ways of writing

<! -- No end tag --> <link type = "text/css" rel = "stylesheet" href = "test.css"> <! -- Close the tag --> <link type = "text/css" rel = "stylesheet" href = "test.css"/>

See the official website for details:

In HTML, the <link> tag has no ending tag.
In XHTML, the <link> label must be properly disabled.

Iii. Introduction to common attributes

1. Attribute media: Specifies the display device (media type) applied to the style. The default value is all, and the screen and print values are supported by the browser. In addition, there are a bunch of values that become the de facto standard.

2. the HTML5 attribute sizes is used to specify the height and width of the webpage icon (Format: High x width or default value any). You must configure rel = "icons" at the same time, for example:

<link type="images/png" href="fsjohnhuang.png" rel="icons" sizes="16x16"/>

3. attribute type: the introduced resource MIME type. Note: text/css is not required.

Iv. Details about attribute disabled

The following content mainly refers to the details of Link element disable attribute in HTML, and adds some pitfalls that have been step on in practice.

1. Attribute and Property disabled(For more information about attributes and features, refer to JS magic Hall: attributes and features, which cannot be clearly understood.)

Because disabled is a standard Attribute, you can perform operations on it by using the property and getAttribute methods. For IE and Chrome, the two are synchronized. But for FF, the two are separated.

1. if LINK elements are introduced statically and disabled is set to true in Attribute mode, Attribute and Property are separated, in this case, the value of disabled operated by vertices in FF is still false (while that of IE and Chrome is true), and whether to apply it to element rendering is determined by the value of disabled operated by vertices, therefore, this method will still be applied to element rendering under FF, but will not be applied to element rendering on IE and Chrome.

<link type="text/css" rel="stylesheet" href="text.css" disabled="true"/>

2. when you need to introduce LINK elements statically or dynamically in FF, you must wait for the LINK element to be added to the rendering tree before you can modify disabled in the dot mode. Otherwise, the modification is invalid and the disabled value is always false.

// FF var link = document. createElement ('link'); link. rel = 'stylesheet '; link. href = 'test.css '; console. log (link. disabled); // falselink. disabled = true; console. log (link. disabled); // false // Add to the DOM tree, not added to the rendering tree document. body. appendChild (link); link. disabled = true; setTimeout (function (console. log (link. disabled); // false link. disabled = true; console. log (link. disabled); // true), 0 );

2. Will style files be loaded when disabled is set to true?

Only when Chrome disabled is true, style files are not loaded. Other browsers continue to Load file resources.

3. Will the onload, onerror, and onreadystatechange events be triggered when the value of disabled is true?

In FF, setting disabled to true in Attribute mode and modifying disabled to true before LINK elements are added to the rendering tree is invalid. Therefore, only onload and onerror events are triggered in FF mode. Other Browsers Do not trigger onload, onerror, and onreadystatechange events.

Because FF has the above features, you can set the disabled of the FF style to true by the following means.

<link id="test" type="text/css" rel="stylesheet" href="test.css" onload="this.disabled=true;"/>

4. CSS Parsing

First, we need to understand what CSS Parsing is?

After the style file is loaded successfully, add the style in the style file to the style sheet document. styleSheets. The style applied to element rendering is a subset of document. styleSheets.

Chrome will not load its style file for LINK elements whose disabled is true, so it cannot add styles in the file to document. styleSheets, or when Chrome dynamically modifies the disabled attribute from false to true. delete the style of the Style File in styleSheets. Other browsers add styles to document. styleSheets as long as the style file is loaded successfully, regardless of the disabled attribute value.

5. Rendering (the page elements and CSS attributes are displayed on the page in combination)

As long as the LINK element's point mode is disabled to true, the style rules associated with it do not take effect. (FF needs to go through the above special handling)

If you want to write style rules through style files, but want to use document. styleSheets extracts application styles as needed. Because Chrome does not directly load style files, it must be handled by the following means:

<link id="test" type="text/css" rel="stylesheet" href="test.css" onload="this.disabled=true;"/>

 

V. Introduction to attribute rel

The property rel specifies the relationship between the current document and the loaded resource.

1. Define the favorites icon of a website

<link rel="shortcut icon" href="http://paranimage.com/wp-content/themes/v5/images/favicon.ico" type="images/x-icon"/><link rel="icon" href="http://paranimage.com/wp-content/themes/v5/images/favicon.png" type="images/png"/>

The rel in IE must be a shortcut cut icon and the icon must be in. ico format. The rel of other browsers only needs to be written as an icon, and the icon does not necessarily need to be in. ico format.

2. Define the website icon on the Apple Desktop

<link rel="apple-touch-icon" href="http://paranimage.com/wp-content/themes/v5/images/apple-touch-icon.png" />

 3. RSS address and Pingback address

<link rel="alternate" type="application/rss+xml" title=" RSS Feed" href="rss.html" /><link rel="alternate" type="application/atom+xml" title="Atom Feed" href="atom.html" /><link rel="pingback" href="pingback.html" />

 

6. dynamically create LINK elements

There are two methods to dynamically create elements: the document. createElement method and innerHTML + firstChild method. For LINK elements, you can use innerHTML + firstChild to create LINK elements in IE9 + and other modern browsers ~ The document. createElement method is used to create the object. The following code is a simple implementation method:

Var $ = function () {// extract tagName, attributes overall, and innerHTML var rTag =/<([a-z] +) \ s * ([^>] *) (?: \/> |> ([^ <] *) <\/\ 1>)/ig, // extract the attribute key value rAttrs =/\ s * ([a-z] +) \ s * = ("| ') ([^'"] *) \ 2 \ s */ig; // IE9 + and DOM objects of other browsers generate factory var factory = document. createElement ('div '); return function (html) {var el = (factory. innerHTML = html, factory. firstChild); if (! El) {var baseInfo = rTag.exe c (html); try {el = document. createElement (baseInfo [1]); var innerHTML = baseInfo [baseInfo. length-1]; if (innerHTML! = Null & typeof innerHTML! = 'Undefined' & innerHTML! = '') El. innerHTML = innerHTML; var attrStr = baseInfo [2]; var groups; while (groups = rAttrs.exe c (attrStr) el. setAttribute (groups [1], groups [3]);} catch (e) {return null;} // reset the regular expression rTag. compile (rTag); rAttrs. compile (rAttrs);} return el ;};}();

 

VII. attributes and events related to resource Loading

Resource loading is, of course, the href attribute for determining the resource location, followed by the onload event and onerror event for whether the resource is successfully loaded. For IE5 ~ 8. There is an onreadystatechange event and the related readyState attribute.

Onload event, triggered after the resource is loaded (Note: even if the resource type does not match the type attribute value of The LINK element, the onload event will be triggered once the resource is loaded ).

Onerror event, triggered when the resource cannot be found (Note: IE5 ~ 11 This event will not be triggered in any situation)

Onreadystatechange event, IE5 ~ This event is triggered when the readyState changes under 10.

ReadyState attribute, used to indicate the current resource loading status of the link element. The default value is "uninitialized", the value is "loading", and the resource loading is "complete" (note: after a resource is loaded, the resource is not loaded successfully)

 

8. Resource loading experiment

In this experiment, we will create a LINK element and assign the following content to the href attributes: test.css, fsjohnhuang.png,: 0, empty string, blank string, //: 0, and javascript: void 0 and data: image/png, foo. And subscribe to the onload and onerror events of the img element, IE5 ~ 10 and subscribed to the onreadystatechange event ~ 11. Behavior Characteristics and Event Response latency in Chrome and FF. The lab statistics are as follows:

Test environment:

1. The test page address is http: // localhost: 9000/test.html.

2. The image fsjohnhuang.png size is 12 kb.

3. The size of test.css is 0 kb.

4. The LINK element has been added to the rendering tree. The rel attribute value is stylesheet and the disabled attribute is false (Note: if disabled is true under FF, the event will still be triggered)

The LINK element loads resources only when it is added to the rendering tree. The rel attribute value is valid (in Chrome, the value of disabled must be false ).

5. subscribe to events using DOM 0

Symbol description:

N/A indicates that this column event is not triggered

Href Attribute Value	Remarks	Chrome			FireFox			IE5 ~ 11
		Onload event	Onerror event	Remarks	Onload event	Onerror event	Remarks	IE11 Onload event	IE11 Onerror event	IE5 ~ 10 On Ready State Change	Remarks
Test.css	Valid URI, URI auto-completion is Http: // localhost : 9000/test.css	The first delay is 5 ms.	N/	The cache for subsequent reading is 0 ~ 1 ms	The first delay is 5 ms.	N/	The cache for subsequent reading is 0 ~ 1 ms	The first onload delay is 9 ms, and the subsequent read cache is 0 ~ 1 ms	N/	1. When loading for the first time Send onreadystate twice Change event, from "uninitialized"-> "loading"-> "Complete ". Then Trigger the onload event. 2. load from the cache later Resource. onreadystatechange is triggered first. Event, from "unitialized"-> "complete ". Then Send an onload event.
Fsjohnhuang.png	Valid URI, URI auto-completion is Http: // localhost : 9000/fsjohnhu Ang.png	The first delay is 4 ms.	N/	The cache for subsequent reading is 0 ~ 2 ms	N/	Latency: 3 ~ 7 ms	Resource not cached	Latency: 7 ~ 33 ms	N/	IE9 ~ Medium 10 Trigger onreadystatechange twice Event (latency 0 ~ 2 ms, 10 ~ 12 ms ), "Unintialized"-> "Loading"-> "Complete ", . Then Trigger onload event (Latency: 6 ~ 22 ms) does not cache Resources IE5 ~ Medium 8 1. The first load will initiate a request, Onreadystatechange will be triggered twice Event, "uninitialized "- > "Loading"-> "Complete ". Then Cache resources when the onload event is triggered; 2. Subsequent loading will be performed from the cache Reads resources and triggers onreadystatechange once. Event, "uninitialized" -> "Complete ". Then When the onload event is triggered.
: 0	Invalid URI, URI auto-completion is http: // localhost : 9000/: 0	N/	Latency: 6 ~ 300 ms	Initiate a network request and return the 404 HTTP status code	N/	Latency: 13 ~ 30 ms	Initiate a network request and return the 404 HTTP status code	The latency is about 10 ms.	N/	Trigger onreadystatechange twice Event (latency 0 ~ 2 ms, 10 ~ 12 ms ), "Unintialized"-> "Loading"-> "Complete", and then Trigger onload event (latency: 11 ~ 13 ms)	Initiate a network request and return the 404 HTTP status code
Empty string ,""	Invalid URI	N/	N/	Do not initiate a request	N/	N/	Do not initiate a request	The latency is 0 ~ 1 ms	N/	IE9 ~ Medium 10 1. The first load will only trigger onreadystatechange Event, and only from "Unitialized"-> "Loading "; 2. Load later, Trigger onreadystatechange twice first Event, and "Unitialized"-> "complete ", Then the onload event is triggered. IE5 ~ Medium 8 1. The first load will only trigger Onreadystatechange Event, and only from "Unitialized"-> "Loading "; 2. Load later, Trigger onreadystatechang E event, and "Unitialized"-> "complete ", And then trigger onload.	Do not initiate network requests
Blank string ,""	Invalid URI	N/	N/	Do not initiate a request	N/	Latency: 3 ~ 7 ms	The resource is not cached.	Latency: 5 ~ 22 ms	N/	IE9 ~ Medium 10 Onreadystatechange Event, "Uninitialized "- > "Loading"-> "Complete ". Then, the onload event is triggered. Resource not cached IE5 ~ Medium 8 1. The first load will initiate a request, Onreadystatechange will be triggered twice Event, "uninitialized "- > "Loading"-> "Complete ". Then Cache resources when the onload event is triggered; 2. Subsequent loading will be performed from the cache Reads resources and triggers onreadystatechange once. Event, "uninitialized" -> "Complete ". Then When the onload event is triggered.
//: 0	Invalid URI. It is automatically filled with http: //: 0/	N/	N/	Do not initiate a request	N/	Latency: 1 ~ 4 ms	The resource is not cached.	The latency is 0 ~ 1 ms	N/	IE9 ~ Medium 10 Trigger onreadystatechange twice Event (latency 0 ~ 2 ms, 5 ~ 8 ms), readyState All are "complete ", Then, when the onload event is triggered (Latency 5 ~ 9 ms) IE5 ~ Medium 8 Onreadystatechange Event (3 ms latency), readyState is "Complete ", Then Onload event (Latency 5 ~ 8 ms)	Resource not cached
Javascript: void 0	Invalid JavaScript URI Scheme	N/	The latency is 0 ~ 8 ms	Initiate a network request, but the browser will cancel the request	N/	The latency is 0 ~ 3 ms	Initiate a network request, but the browser will cancel the request	N/	N/	IE8 ~ Medium 10 Onreadystatechage will be triggered once Event (2 ~ 4 ms ), "Uninitialized" -> "Loading" IE5 ~ Medium 7 Each load will be set in 'Link. href = "Javascript: void 0 ";' "Cannot set href" is reported Attribute. Operation aborted Exception, but it will still Onreadystatechage Event (2 ~ 4 ms ), "Uninitialized"-> "loading"	The resource has been in the status of loading unfinished
Data: image/png, f	Invalid Data URI Scheme	The latency is 0 ~ 7 ms	N/	No network request is triggered	N/	The latency is 0 ~ 2 ms	No network request is triggered	The latency is 0 ~ 1 ms	N/	IE9 ~ Medium 10 Trigger two onreadystatechange events (latency 1 ~ 2 ms, 5 ~ 8 ms), readyState is "complete", and then when the onload event is triggered (latency 5 ~ 9 ms) IE5 ~ Medium 8 Trigger an onreadystatechange event (delay of 3 ms), readyState is "complete", and then when the onload event (delay of 5 ~ 8 ms)	No network request is triggered

Obtain the following rule from table data:

IE

1. onerror will never be triggered;

2. IE5 ~ The onload event in 8 is triggered only after the readyState is "complete" and the onreadystatechange event is triggered. For the readyState attribute and onreadystatechange event in IE11, refer to IE5 ~ If it can be converted to "complete", the onload event will be triggered.

3. for valid sample resources (such as test.css), load the readyState value from "uninitialized"-> "loading"-> "complete" for the first time, and then cache the resources. Read from the cache when the same resource is loaded, the value of readyState is from "uninitialized"-> "complete ".

4. For resources with different values of the mime and type.zip (for example, fsjohnhuang.png, blank string), IE9 ~ 11. Resources are not cached, And the readyState value ranges from "uninitialized"-> "loading"-> "complete", while IE5 ~ 8. The resource is cached. The value of readyState is from "uninitialized"-> "complete ".

5. For http uri Scheme resources with invalid paths (for example, 0), IE5 ~ 11. Resources are not cached. The readyState value ranges from "uninitialized"-> "loading"-> "complete ";

6. For empty strings, IE behavior is very strange, IE9 ~ The first time the value of readyState is loaded from "uninitialized"-> "loading", the second onreadystatechange event is triggered when the value is loaded, the value of readyState is from "unintialized"-> "complete"-> "complete ". IE5 ~ In 8, the first time the readyState value is loaded from "uninitialized"-> "loading", the onreadystatechange event is triggered after the subsequent loading, and the readyState value is from "unintialized"-> "complete ".

7. For //: 0, IE will cancel the network request, IE9 ~ The onreadystatechange event is triggered twice, and the value of readyState starts from "unintialized"-> "complete"-> "complete ". IE5 ~ An onreadystatechange event is triggered in 8, and the value of readyState is from "unintialized"-> "complete ".

8. For JavaScript URI Scheme resources (such as javascript: void 0), IE behavior is more unified, and an onreadystatechange event is triggered, and the readyState value is from "unintialized"-> "loading ". IE5 ~ 7. The href attribute cannot be set when a. href = 'javascript: void 0' is executed. Operation aborted.

9. for Data URI Scheme resources (such as data: image/png, f), the IE action is more unified, and the onreadystatechange event is triggered, and the readyState value is from "unintialized"-> "complete ". The difference is that IE9 ~ 10 trigger two events, IE5 ~ 8.

Under Chrome

1. Load and cache all valid ingress resources (such as test.css,fsjohnhuang.png), and then trigger the onload event;

2. Empty strings, blank strings, and //: 0 are not used;

3. The onerror event is triggered for http uri Scheme resources (such as: 0) with invalid paths;

4. For JavaScript URI Scheme resources (such as javascript: void 0), the browser will cancel its network request and trigger the onerror event;

5. For Data URI Scheme resources (such as data: image/png, f), the onload event is triggered no matter whether the resource is valid or not.

FF

1. Load and cache the resource (such as test.css) that matches the valid region and typefaces, and then trigger the onload event;

2. The onerror event is triggered when the values of the resource or resource dimensions are different from those of the typefaces (for example, fsjohnhuang.png,: 0, //: 0, blank string;

3. For null strings, It is not used;

4. For JavaScript URI Scheme resources (such as javascript: void 0), the browser will cancel its network request and trigger the onerror event;

5. For Data URI Scheme resources (such as data: image/png, f), if the resource is valid, the onload event is triggered. If the resource is invalid, the onerror event is triggered.