JS Magic Hall: Link element in-depth explanation

First, preface

We generally use the <link type= "text/css" rel= "stylesheet" href= "Text.css" > to introduce an external cascading style file, but the specific meaning of each property of the link element, Resource loading behavior and so on, but do not know much, this article intends to go a little deeper.

Because of more content, the ad hoc directory of a lump:

Two, is there an end tag?

Introduction of common attributes

Four, attribute disabled detailed

1. Disabled of attribute and property

2. Disabled is true also load style files?

3. Disabled is true also triggers onload, onerror, and onreadystatechange events?

4. CSS Parsing

5. Rendering

Five, attribute rel introduction

Vi. dynamic creation of link elements

Vii. properties and events related to resource loading

Eight, the resource loading experiment

1. The conclusion under IE

2. The conclusions under Chrome

3. CONCLUSIONS under FF

Ix. Summary

X. Reference

Two, is there an end tag?

Maybe we often see two ways to do it.

<!--no end tag--><link type= "Text/css" rel= "stylesheet" href= "Test.css" ><!--closed label--><link type= " Text/css "rel=" stylesheet "href=" Test.css "/>

Reference website:

The,<link> tag does not have an end tag in HTML.

In XHTML, the,<link> tag must be properly closed.

Introduction of common attributes

1. Property Media, which specifies the display device (medium type) to which the style is applied, the default value is all, and the value screen (display) and print (printer) are supported by the browser. There's also a bunch of values that are standard for fact.

2. HTML5 Property sizes, to specify the page icon aspect (format: high x Width or default any ), you need to configure rel= "Icons" at the same time, example:

<link type= "Images/png" href= "fsjohnhuang.png" rel= "Icons" sizes= "16x16"/>

3. attribute type, the resource MIME type introduced, note: The TEXT/CSS must not be specified.

Four, attribute disabled detailed

The following is a reference to the content of the link element disable attribute in HTML, and complements some of the pits that have been stepped in the course of practice.

1. Attribute and property of the disabled(if you want to learn more properties, characteristics of the information can refer to the "JS Magic Hall: attributes, characteristics, silly points unclear")

Because disabled is a standard attribute, it can be manipulated by point-and GetAttribute-mode (Attribute). For IE and Chrome, the two are synchronized. But for FF, the two are separate.

1. For static introduction of the link element, and by attribute way set disabled to True, because the attribute and property is separate, at this time the FF under the point mode of operation disabled is still false (ie, Chrome is true), and whether or not it is applied to the element render is determined by the value of the point-action disabled, so it will still be applied to the element rendering under FF, but not to the element rendering on IE and chrome.

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

2. When you need to introduce a LINK element statically or dynamically in FF, you must wait for the link element to be added to the render tree before you can modify disabled by point, otherwise the modification is invalid and the disabled value is always false.

FF under var link = document.createelement (' link '); link.rel = ' stylesheet '; link.href = ' test.css '; Console.log ( link.disabled); falselink.disabled = True;console.log (link.disabled); false//joins the DOM tree and has not yet joined the render 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. Disabled is true also load style files?

Only chrome does not load the style file when disabled is true. Other browsers continue to load file resources.

3. Disabled is true also triggers onload, onerror, and onreadystatechange events?

The onload and OnError events are triggered only under FF, because disabled is set to TRUE under FF by attribute and disabled is not modified before the link element is added to the render tree. The onload, onerror, and onreadystatechange events are not triggered by other browsers.

Since the above features are present under FF, the disabled of the style under FF can be set to true by the following means.

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

4. CSS Parsing

The first thing to understand is what exactly is CSS parsing?

In fact, after the style file has been successfully loaded, the styles in the style file are added to the style sheet document.stylesheets. The style applied to the element rendering is a subset of Document.stylesheets.

Because the link element is true for disabled, Chrome will not load its style file, It is also not possible to add styles from the file to Document.stylesheets, or chrome to remove the style file from Document.stylesheets when the disabled property is dynamically modified from false to true. Other browsers will add styles to document.stylesheets, regardless of the disabled property value, as long as the style file is loaded successfully.

5. Rendering (page elements are combined with CSS properties to render to the page)

The style rules associated with the link element do not take effect as long as the disabled of the point method is true. (FF is subject to the above special treatment)

When you want to write style rules by using a style file, but want to extract the app style on demand by document.stylesheets, because Chrome takes the process of not loading the style file directly, it needs to be handled by the following means:

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

Five, attribute rel introduction

The attribute rel is used to specify the relationship between the current document and the loaded resource.

1. Define the Site Favorites icon

<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 must be shortcut icon, and the icon must be an . ico format. The other browser's rel is simply written as Icon , and the icon does not necessarily need to use the . 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"/ >

Vi. dynamic creation of link elements

There are generally two ways to create elements dynamically, namely the Document.createelement method and the Innerhtml+firstchild. For the link element, the link element can be created in ie9+ and other modern browsers using the Innerhtml+firstchild method, while in ie5~8 you need to create it using document.createelement. The following code is a simple implementation:

var $ = function () {//extract tagname, attributes overall and innerhtml var rtag =/< ([a-z]+) \s* ([^>]*) (?: \ />|> ([^<]*) <\/\1>)/ig,//Extract attribute key value rattrs =/\s* ([a-z]+) \s*= ("| ')   ([^ ' "]*) \2\s*/ig;   Ie9+ and other browsers DOM object Generation factory var factory = document.createelement (' div ');      return function (HTML) {var el = (factory.innerhtml = html, factory.firstchild);         if (!el) {var baseinfo = rtag.exec (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.exec (ATTRSTR)) El.setattribute (Groups[1], groups[3]);         } catch (e) {return null;         }//Reset regular expression rtag.compile (Rtag); Rattrs.cOmpile (Rattrs);   } return el; };} ();

Vii. properties and events related to resource loading

Resource loading is, of course, the href attribute that determines the location of the resource , followed by the OnLoad event and the OnError event where the resource was loaded successfully , and for ie5~8 there is a onreadystatechange event and associated C6>readystate Property

onload event, triggered when the resource is loaded (note: The onload event is triggered whenever a resource is loaded, even if the resource type does not match the value of the Type property of the link element).

OnError event that is triggered when a resource is not found (note: IE5~11 does not trigger the event in any case)

onreadystatechange Event, ie5~10 readystate change will trigger the event.

The ReadyState property that represents the current resource mount State of the link element, the default value is "uninitialized", the resource is loaded as "loading", and the resource is loaded as "complete" (Note: Resource load completion does not indicate that the resource was successfully loaded)

Eight, the resource loading experiment

This experiment creates a link element and assigns the following to its href attribute test.css, fsjohnhuang.png, : 0, empty string, blank string, //:0 , javascript:void 0 and Data:image/png,foo. and subscribe to the IMG elements of the onload and OnError events, IE5~10 also subscribed to the onReadyStateChange event, the statistical collation of its behavior in ie5~11, Chrome and FF and event response delay. The specific experimental statistics are as follows:

test Environment:

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

2. The size of the image fsjohnhuang.png is 12KB

3. The size of the TEST.CSS is 0KB

4. Link element has been added to the render tree, the Rel attribute value is Stylesheet,disabled property is False (note: FF Disabled is true, the event will still be triggered)

The link element loads the resource as long as it is added to the render tree, and the Rel attribute value is valid (disabled is also required to be false under Chrome).

5. Subscribing to events via Dom 0

Symbol Description:

N/A indicates that the column event does not trigger

HREF attribute value	Note	Chrome			FireFox			Ie5~11
		onload event	onerror event	remarks	OnLoad Event	onerror Event	remarks	IE11 onload event	IE11 onerror Events	ie5~10 on ready State change	remarks
test.css	Valid URI, URI Auto-complete for http://localhost : 9000/test.css	First time delay is 5ms	n/a	Subsequent read cache is 0~1ms	First time delay is 5ms	N/A	subsequent read cache is 0~1ms ,	First onload delay 9ms, subsequent read cache is 0~1ms	n/a	1.   First load, touch Two times onreadystate Change event, from "uninitialized", "Loading"-> "Complete". The onload event is then triggered by . 2. Subsequently, the Resource is loaded from the cache, and a onreadystatechange Event is triggered first, from "unitialized" to "complete". Then touch To send the OnLoad event.
fsjohnhuang.png	Valid URI, URI Auto-complete for http://localhost : 9000/fsjohnhu Ang.png	First time delay is 4ms	n/a	Subsequent read cache is 0~2ms	& nbsp N/a	delay is 3~7ms	resource not cached	delay is 7~33ms	n/a	Ie9~10   Trigger two onreadystatechange Event (Time delay 0~2ms, 10~12ms), "unintialized"-> "Loading"-> Complete, . The Then triggers the onload event (6~22ms)   does not cache the resource ie5~8 1. Initial load initiates a request, The onreadystatechange Event is triggered two times, "uninitialized"- > "Loading"-> "Complete". The Then triggers the onload event to cache the resource; 2. Subsequent loads read the resource from the cache , triggering a onreadystatechange event, "uninitialized" - > "Complete". The onload event is then triggered by .
: 0	Invalid URI, URI Auto-complete for http://localhost : 9000/:0	 N/A	delay for 6~300ms	Initiating network request, returning 404 HTTP status code	n/a	Delay for 13~30ms	Initiate network request, return 404 HTTP Status code	delay is around 10ms	n/a	Triggered two times onreadystatechange Event (Delay 0~2ms, 10~12ms), "unintialized"-> "Loading"-> " Complete ", and then trigger the OnLoad event in (delay 11~13ms)	initiate a network request, return 404 HTTP status code
empty string, ""	Invalid URI	n/a	n/a	do not initiate request	n/a	n/a	do not initiate request	delay is 0~1ms	n/a	ie9~10  1. First load, will only trigger onreadystatechange Event, and only from the "unitialized"-> "Loading"; 2. Subsequent loading, Trigger two onreadystatechange first Event, and from the "unitialized", "complete", And then trigger the OnLoad event ie5~8 1. First load, only triggers onReadyStateChange Event, and only from the "unitialized"-> "Loading"; 2. Subsequent loading, Trigger Onreadystatechang first time The E event, and from the "unitialized", "complete", And then trigger the onload thing	Do not initiate network requests
blank string,	Invalid URI	n/a	n/a	Do not initiate a request	n/a	delay is 3~7ms	does not cache resources	delay is 5~22ms	& nbsp N/a	ie9~10 Triggers a onreadystatechange event, "uninitialized"- > "Loading"-> "Complete". The Then fires the OnLoad event. Resources are not cached ie5~8 1. The first load will initiate the request, will trigger two onreadystatechange Events, "uninitialized" - > "Loading"-> "Complete". The Then triggers the onload event to cache the resource; 2. Subsequent loads read the resource from the cache , triggering a onreadystatechange event, "uninitialized" - > "Complete". The onload event is then triggered by .
//:0	Invalid URI, auto-complete for http://:0/	n/a	n/a	Do not initiate a request	n/a	delay is 1~4ms	Resources are not cached	delay is 0~1ms	n/a	ie9~10 Trigger two times onreadystatechange Event (Delay 0~2ms, 5~8ms), ReadyState Is "complete", Then triggers the onload event (delay 5~9ms) ie5~8 Triggers a onreadystatechange Event (time delay of 3ms), readystate "complete", and then triggers OnLoad event (Delay 5~8ms	does not cache resources
javascript:void 0	Invalid JavaScript URI Scheme	n/a	; delay is 0~8ms	initiating a network request, but the browser cancels the request	n/a	delay is 0~3ms	Initiate a network request, However, the browser cancels the request	n/a	n/a	ie8~10 Triggers a onreadystatechage Event (2~4MS), "uninitialized" , "Loading" ie5~7 in Every time the load is set ' link.href= ' javascript:void 0 ', ' ' cannot set href ' property. Aborted operation exception, but still Triggers once onreadystatechage Event (2~4MS), "uninitialized", "Loading"	Resources remain loaded in an incomplete state
Data:image/png,f	Invalid data URI Scheme	Delay is 0~7ms	N/A	Does not trigger network requests	N/A	Delay is 0~2ms	Does not trigger network requests	Delay is 0~1ms	N/A	In ie9~10 Trigger two onreadystatechange events (Delay 1~2ms, 5~8ms), readystate are "complete" and then trigger onload event (time delay 5~9MS) In Ie5~8 Triggers a onreadystatechange event (time delay of 3ms), readystate "complete", and then triggers the onload event (delay 5~8ms)	Does not trigger network requests

Get the following rules from tabular data:

ie under

1. OnError will never be triggered;

2. The onload events in Ie5~8 are triggered only after readystate is "complete" and onreadystatechange events are triggered, there are no readystate attributes and onReadyStateChange events in IE11 , the onload event is triggered by referring to the readystate in Ie5~8, which can be converted to "complete".

3. For a valid style resource (such as TEST.CSS), the first load of the readystate value is from "uninitialized", "Loading", "complete", then cache the resource, and subsequent reads from the cache when the same resource is loaded. The readystate value is from "uninitialized" to "complete".

4. For resources that do not match the value of the resource MIME type to the Type property (for example, Fsjohnhuang.png, blank string), ie9~11 does not cache the resource, and the readystate value is from "uninitialized" and "loading" "Complete", while ie5~8 caches the resource, readystate the value from "uninitialized" and "complete".

5. For invalid path HTTP URI scheme resources (such as: 0), IE5~11 will not cache the resource, readystate value from "uninitialized", "Loading", "complete";

6. For the empty string, ie behavior is very strange, ie9~10 first load readystate value from "uninitialized" and "loading", subsequent loading triggered two onreadystatechange events, And the readystate value is from "unintialized", "complete" and "complete". Ie5~8 first load readystate value from "uninitialized", "loading", subsequent loading triggers a onreadystatechange event, readystate value from "unintialized"- > "Complete".

7. For//:0,ie to cancel the network request, two onreadystatechange events are triggered in ie9~10, and the readystate value is from "unintialized", "complete" and "complete". The onReadyStateChange event is triggered in Ie5~8, and the readystate value is from "unintialized" and "complete".

8. For JavaScript URI scheme resources (such as javascript:void 0), ie behaves more uniformly, triggering one onreadystatechange event, and readystate value from "unintialized"- > "Loading". Ie5~7 will not be able to set the href attribute in execution a.href= ' javascript:void 0 ' times. The exception that the operation was aborted.

9. For data URI scheme resources (such as data:image/png,f), ie behaves more uniformly, triggering onreadystatechange events, and readystate values from "unintialized" Complete ". The difference is that ie9~10 triggers two events and ie5~8 fires once.

Under Chrome

1. For valid path resources (such as test.css,fsjohnhuang.png), load and cache them, and then trigger the OnLoad event;

2. For empty strings, blank strings, and//:0, do not act;

3. The HTTP URI scheme resource (for example: 0) for an invalid path triggers the onerror event;

4. For JavaScript URI scheme resources (such as Javascript:void 0), the browser cancels its network request, triggering the OnError event;

5. For data URI scheme resources (such as data:image/png,f), the onload event is triggered regardless of whether the resource is valid.

FF under

1. For a valid path resource and a resource type that matches the value of the type attribute (for example, TEST.CSS), it will be loaded and cached, then the OnLoad event is triggered;

2. The OnError event is triggered for an invalid path resource or resource type that does not match the value of the type attribute (such as fsjohnhuang.png,:0,//:0, blank string);

3. For an empty string, do not act;

4. For JavaScript URI scheme resources (such as Javascript:void 0), the browser cancels its network request, triggering the OnError event;

5. For the Data URI scheme resource (such as DATA:IMAGE/PNG,F), the resource is active and the onload event is triggered, and the onerror event is triggered if invalid.

JS Magic Hall: Link element in-depth explanation