一、前言                            

我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css"> 来引入外部层叠式样式文件,但LINK元素各属性的具体含义、资源加载行为等方面却了解不多,本文打算稍微深入一下。

由于内容较多,特设目录一坨:

二、到底有没有结束标签?

三、普通属性介绍

四、属性disabled详解

1. Attribute和Property的disabled

  2. disabled为true还会加载样式文件吗?

3. disabled为true还会触发onload、onerror和onreadystatechange事件吗?

4. CSS解析

  5. 渲染

五、属性rel介绍

六、动态创建LINK元素

七、与资源加载相关的属性和事件

八、资源加载实验

  1. IE下的结论

  2. Chrome下的结论

  3. FF下的结论

九、总结

十、参考

二、到底有没有结束标签?                    

也许我们常常会看到一下两种写法

<!-- 无结束标签 -->
<link type="text/css" rel="stylesheet" href="test.css">
<!-- 闭合标签 -->
<link type="text/css" rel="stylesheet" href="test.css"/>

参考官网可知:

在 HTML 中,<link> 标签没有结束标签。

在 XHTML 中,<link> 标签必须被正确地关闭。

三、普通属性介绍                          

1.  属性media ,指定该样式应用到的显示设备(媒介类型),默认值为all,还有值screen(显示器)和print(打印机)被浏览器支持。另外还有一堆为成为事实标准的值。

2.  HTML5属性sizes ,用于指定网页图标高宽(格式: 高x宽 或默认值 any ),需要同时配置 rel="icons" ,示例:

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

3.  属性type ,引入的资源MIME类型,注意:不规定必须为text/css。

四、属性disabled详解                       

下列内容主要参考《HTML中Link元素disable属性详解》的内容,并补充一些实践过程中踩过的坑。

1. Attribute和Property的disabled(若想了解更多属性、特性的信息可参考《JS魔法堂:属性、特性,傻傻分不清楚》

由于disabled属于标准属性,因此可以通过点方式(property)和getAttribute方式(Attribute)对其进行操作。对于IE和Chrome,两者是同步的。但对于FF来说两者是分离的。

1. 对于静态引入LINK元素,且通过Attribute方式设置disabled为true,由于Attribute和Property是分离的,此时FF下通过点方式操作的disabled依然为false(而IE、Chrome的则为true),而是否应用到元素渲染上则由点方式操作的disabled的值来决定,因此该方式在FF下依然会应用到元素渲染上,而在IE和Chrome上则不会应用到元素渲染上。

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

2. FF中需要静态或动态引入LINK元素时,都必须等LINK元素被添加到渲染树中后才可以通过点方式修改disabled,否则修改无效,disabled值一直为false。

// FF下
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'test.css';
console.log(link.disabled); // false
link.disabled = true;
console.log(link.disabled); // false
// 加入DOM树,还未加入渲染树
document.body.appendChild(link);
link.disabled = true;
setTimeout(function(
console.log(link.disabled); // false
link.disabled = true;
console.log(link.disabled); // true
), );

  2. disabled为true还会加载样式文件吗?

仅Chrome在disabled为true时,不加载样式文件。其他浏览器均依然继续加载文件资源。

  3. disabled为true还会触发onload、onerror和onreadystatechange事件吗?

  由于FF下通过Attribute方式设置disabled为true,和在LINK元素未加入渲染树前修改disabled为true均无效,因此仅FF下会触发onload和onerror事件。其他浏览器均不会触发onload、onerror和onreadystatechange事件。

由于FF下存在上述特性,因此可以通过如下手段设置FF下的样式的disabled为true。

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

  4. CSS解析

首先需要理解的是CSS解析到底是什么?

   其实就是在成功加载样式文件后,将样式文件中的样式添加到样式表document.styleSheets中。而应用到元素渲染的样式则为document.styleSheets的子集。

由于对于disabled为true的LINK元素,Chrome将不加载其样式文件,因此也无法将文件中的样式添加到document.styleSheets中;也只有Chrome在将disabled属性从false动态修改为true时,会从document.styleSheets中删除该样式文件的样式。其他浏览器只要成功加载样式文件就会将其中的样式添加到document.styleSheets中,无论disabled属性值是什么。

  5. 渲染(页面元素与CSS属性结合呈现到页面上)

只要LINK元素的点方式的disabled为true,那么它所关联的样式规则均不生效。(FF则需要经过上述的特殊处理)

对于想通过样式文件书写样式规则,但又想通过document.styleSheets按需提取应用样式的情况,由于Chrome采用直接不加载样式文件的处理方式,因此需要通过如下手段处理:

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

五、属性rel介绍                        

属性rel用于规定当前文档与被加载的资源之间的关系。

  1. 定义网站收藏夹图标

<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"/>

IE下rel必须为 shortcut icon ,而且图标必须为 .ico格式  。而其他浏览器的rel只需写为 icon ,图标不一定需要使用 .ico格式 。

2. 定义苹果桌面上的网站图标

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

3. RSS地址和Pingback地址

<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" />

六 、动态创建LINK元素                    

动态创建元素一般有两种方式,分别是document.createElement方法和innerHTML+firstChild。对于LINK元素,在IE9+和其他现代浏览器中可使用innerHTML+firstChild方式创建LINK元素,而在IE5~8中则需要使用document.createElement方式创建。下面代码为简单的实现方式:

var $ = function(){
// 提取tagName、attributes整体和innerHTML
  var rTag = /<([a-z]+)\s*([^>]*)(?:\/>|>([^<]*)<\/\>)/ig,
// 提取attribute的键值
rAttrs = /\s*([a-z]+)\s*=("|')([^'"]*)\\s*/ig;
// IE9+和其他浏览器的DOM对象生成工厂
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[]);
var innerHTML = baseInfo[baseInfo.length - ];
if (innerHTML !== null && typeof innerHTML !== 'undefined' && innerHTML !== '')
  el.innerHTML = innerHTML;
var attrStr = baseInfo[];
var groups;
while(groups = rAttrs.exec(attrStr))
  el.setAttribute(groups[], groups[]);
}
catch(e){
     return null;
}
// 重置正则表达式
rTag.compile(rTag);
rAttrs.compile(rAttrs);
} return el;
};
}();

七、与资源加载相关的属性和事件                  

资源加载首先当然是确定资源位置的 href属性 ,随之就是资源加载成功与否的 onload事件 和 onerror事件 ,对于IE5~8还多了一个 onreadystatechange事件 和与之相关的 readyState属性

onload事件 ,当资源加载完成后触发(注意:即使资源类型与LINK元素的type属性值不符,只要资源加载完成就会触发onload事件)。

onerror事件 ,当找不到资源时会触发(注意:IE5~11无论任何情况均不会触发该事件)

onreadystatechange事件 ,IE5~10下readyState变化就会触发该事件。

readyState属性 ,用于表示LINK元素当前的资源装载状态,默认值为"uninitialized",资源加载中为"loading",资源加载完成为"complete"(注意:资源加载完成不代表资源被成功加载)

八、资源加载实验                        

本次实验将创建 LINK元素 并对其的 href属性 分别赋予以下内容 test.css 、 fsjohnhuang.png 、 : 、 空字符串 、 空白字符串 、 //:0 、 javascript:void  和 data:image/png,foo 。并订阅img元素的onload和onerror事件,IE5~10下还订阅了onreadystatechange事件,统计整理其在IE5~11、Chrome和FF下的行为特点和事件响应延时。具体实验统计如下:

测试环境:

  1. 测试页面地址为http://localhost:9000/test.html

 2. 图片fsjohnhuang.png的大小为12KB

3. test.css的大小为0KB

4. LINK元素已加入渲染树,rel属性值为stylesheet,disabled属性为false(注意:FF下disabled为true,依然会触发事件)

    LINK元素加载资源的前提是加入到渲染树,rel属性值有效(Chrome下则还需要disabled为false)。

5. 通过DOM 0方式订阅事件

    符号说明:

   N/A 表示该列事件不触发

href属性值 备注 Chrome FireFox IE5~11
onload事件 onerror事件 备注 onload事件 onerror事件 备注

IE11

onload事件

IE11

onerror事件

IE5~10

on

ready

state

change

备注
test.css

有效URI,

URI自动补全为

http://localhost

:9000/test.css

 首次延时为5ms  N/A  后续读取缓存为0~1ms  首次延时为5ms  N/A 后续读取缓存为0~1ms   首次onload延时9ms,后续读取缓存则为0~1ms  N/A

1. 首次加载时,先触

发两次onreadystate

change事件,从"uninitialized"->"loading"->

"complete"。然后

触发onload事件。

2. 后续则从缓存中加载

资源,先触发一次onreadystatechange

事件,从"unitialized"->"complete"。然后触

发onload事件。

 
fsjohnhuang.png

有效URI,

URI自动补全为

http://localhost

:9000/fsjohnhu

ang.png

 首次延时为4ms  N/A  后续读取缓存为0~2ms  N/A  延时为3~7ms  不会缓存资源  延时为7~33ms  N/A

IE9~10中 

触发两次onreadystatechange

事件(延时0~2ms, 10~12ms),

"unintialized"->

"loading"->

"complete",

。然后

触发onload事件

(延时为6~22ms) 不会对资源进行缓存

IE5~8中

1.首次加载会发起请求,

会触发两次onreadystatechange

事件,"uninitialized"-

>"loading"->

"complete"。然后

在触发onload事件,缓存资源;

2.后续加载会从缓存

读取资源,触发一次onreadystatechange

事件,"uninitialized"

->"complete"。然后

在触发onload事件。

 
:0

无效URI,

URI自动补全为http://localhost

:9000/:0

 N/A  延迟为6~300ms  发起网络请求,返回404 HTTP状态码   N/A  延迟为13~30ms  发起网络请求,返回404 HTTP状态码  延迟为10ms左右  N/A

触发两次onreadystatechange

事件(延时0~2ms, 10~12ms),

"unintialized"->

"loading"->

"complete",然后在

触发onload事件(延时11~13ms)

  发起网络请求,返回404 HTTP状态码
空字符串,""  无效URI  N/A  N/A  不发起请求  N/A  N/A   不发起请求  延时为0~1ms  N/A

IE9~10中

1.首次加载,仅会触发onreadystatechange

事件,且仅从

"unitialized"->

"loading";

2.后续加载,

先触发两次onreadystatechange

事件,且从

"unitialized"->"complete",

然后再触发onload事件

IE5~8中

1.首次加载,仅会触发

onreadystatechange

事件,且仅从

"unitialized"->

"loading";

2.后续加载,

先触发一次onreadystatechang

e事件,且从

"unitialized"->"complete",

然后再触发onload事

 不发起网络请求
空白字符串,"    "  无效URI  N/A  N/A  不发起请求  N/A  延时为3~7ms  不会对资源进行缓存  延时为5~22ms  N/A

IE9~10中

触发一次onreadystatechange

事件,

"uninitialized"-

>"loading"->

"complete"。

然后在触发onload事件。不会缓存资源

IE5~8中

1.首次加载会发起请求,

会触发两次onreadystatechange

事件,"uninitialized"-

>"loading"->

"complete"。然后

在触发onload事件,缓存资源;

2.后续加载会从缓存

读取资源,触发一次onreadystatechange

事件,"uninitialized"

->"complete"。然后

在触发onload事件。

 
//:0  无效URI,会自动补全为http://:0/  N/A   N/A  不发起请求  N/A  延时为1~4ms  不会对资源进行缓存  延时为0~1ms  N/A

IE9~10中

触发两次onreadystatechange

事件(延时0~2ms, 5~8ms),readyState

均为"complete",

然后在触发onload事件

(延时5~9ms)

IE5~8中

触发一次onreadystatechange

事件(延时3ms),readyState为

"complete",

然后在触发

onload事件

(延时5~8ms)

不会缓存资源
javascript:void 0  无效的JavaScript URI Scheme  N/A  延时为0~8ms  发起网络请求,但浏览器会取消该请求  N/A  延时为0~3ms  发起网络请求,但浏览器会取消该请求  N/A  N/A

IE8~10中

会触发一次onreadystatechage

事件(2~4ms),

"uninitialized"

->"loading"

IE5~7中

每次加载均会在设置

`link.href=

"javascript:void 0";`

时会报“无法设置href

属性。已中止操作”的

异常,但后面依然会

触发一次onreadystatechage

事件(2~4ms),

"uninitialized"->"loading"

 资源一直处于加载未完成的状态
data:image/png,f  无效的Data URI Scheme  延时为0~7ms  N/A  不会触发网络请求  N/A  延时为0~2ms  不会触发网络请求  延时为0~1ms  N/A

IE9~10中

触发两次onreadystatechange事件(延时1~2ms, 5~8ms),readyState均为"complete",然后在触发onload事件(延时5~9ms)

IE5~8中

触发一次onreadystatechange事件(延时3ms),readyState为"complete",然后在触发onload事件(延时5~8ms)

 不会触发网络请求

从表格数据得到以下规律:

IE下

  1. onerror绝对不会被触发;

2. IE5~8中的onload事件均在readyState为"complete"且onreadystatechange事件触发后才触发,对于IE11中没有readyState属性和onreadystatechange事件,则参考IE5~8中的readyState,若能转换为"complete"则会触发onload事件。

3. 对于有效样式资源(如test.css),首次加载readyState值从"uninitialized"->"loading"->"complete",然后缓存资源;后续对加载同一资源时则从缓存读取,readyState值从"uninitialized"->"complete"。

4. 对于与资源MIME类型与type属性值不符的资源(如fsjohnhuang.png,空白字符串),IE9~11均不会对资源进行缓存,且readyState值从"uninitialized"->"loading"->"complete";而IE5~8则会对资源进行缓存,readyState值从"uninitialized"->"complete"。

5. 对于无效路径的HTTP URI Scheme资源(如:0),IE5~11均不会对资源进行缓存,readyState值从"uninitialized"->"loading"->"complete";

6. 对于空字符串,IE行为十分诡异,IE9~10中首次加载readyState值从"uninitialized"->"loading",后续加载则触发两次onreadystatechange事件,且readyState值从"unintialized"->"complete"->"complete"。IE5~8中首次加载readyState值从"uninitialized"->"loading",后续加载则触发一次onreadystatechange事件,readyState值从"unintialized"->"complete"。

7. 对于//:0,IE会取消网络请求,IE9~10中会触发两次onreadystatechange事件,且readyState值从"unintialized"->"complete"->"complete"。IE5~8中触发一次onreadystatechange事件,且readyState值从"unintialized"->"complete"。

  8. 对于JavaScript URI Scheme资源(如javascript:void 0),IE行为较为统一,均触发一次onreadystatechange事件,且readyState值从"unintialized"->"loading"。而IE5~7会在执行a.href='javascript:void 0'时报"无法设置href属性。已中止操作”的异常。

9. 对于Data URI Scheme资源(如data:image/png,f),IE行为较为统一,均会触发onreadystatechange事件,且readyState值从"unintialized"->"complete"。区别在于IE9~10触发两次事件,IE5~8触发一次。

   Chrome下

  1. 对于有效路径资源(如test.css,fsjohnhuang.png),均加载并缓存起来,然后触发onload事件;

2. 对于空字符串、空白字符串和//:0,均不作为;

3. 对于无效路径的HTTP URI Scheme资源(如:0),触发onerror事件;

4. 对于JavaScript URI Scheme资源(如javascript:void 0),浏览器会取消其网络请求,触发onerror事件;

  5. 对于Data URI Scheme资源(如data:image/png,f),不管资源是否有效均触发onload事件。

 FF下

  1. 对于有效路径资源且资源类型与type属性值匹配的(如test.css),将加载并缓存起来,然后触发onload事件;

2. 对于无效路径资源或资源类型与type属性值不匹配的(如fsjohnhuang.png,:0,//:0,空白字符串),则触发onerror事件;

3. 对于空字符串,则不作为;

4. 对于JavaScript URI Scheme资源(如javascript:void 0),浏览器会取消其网络请求,触发onerror事件;

  5.  对于Data URI Scheme资源(如data:image/png,f),资源有效则触发onload事件,无效则触发onerror事件。

九、总结                              

若有纰漏请各位指正,谢谢!

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4149793.html  ^_^肥子John

十、参考                              

http://www.w3help.org/zh-cn/causes/BX9021

http://www.w3school.com.cn/tags/tag_link.asp

JS魔法堂:LINK元素深入详解的更多相关文章

  1. 【转】Java魔法堂:String.format详解

    Java魔法堂:String.format详解     目录     一.前言    二.重载方法     三.占位符     四.对字符.字符串进行格式化     五.对整数进行格式化     六. ...

  2. MyBatis魔法堂:Insert操作详解(返回主键、批量插入)

    一.前言    数据库操作怎能少了INSERT操作呢?下面记录MyBatis关于INSERT操作的笔记,以便日后查阅. 二. insert元素 属性详解   其属性如下: parameterType  ...

  3. MyBatis魔法堂:Insert操作详解

    一.前言 数据库操作怎能少了INSERT操作呢?下面记录MyBatis关于INSERT操作的笔记,以便日后查阅. 二. insert元素 属性详解 其属性如下: parameterType:入参的全限 ...

  4. CSS魔法堂:Position定位详解

    一.Position各属性值详解   1.  static :默认值,元素将按照正常文档流规则排列.   2.  relative :相对定位,元素仍然处于正常文档流当中,但可以通过left.top. ...

  5. JS魔法堂:元素克隆、剪切技术研究

    一.前言 当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素,也可以通过克隆已有元素的方式来获取一个新元素.而在部分浏览器中,通过复制来获取新元素的效率 ...

  6. Java魔法堂:JUnit4使用详解

    目录                                                                                              1. 开 ...

  7. bash魔法堂:History用法详解

    Brief 又要敲那条长到没朋友的命令了,真心不再爱了... 有了history这条命令我想大家可以再爱一次了吧! >history 语法: history [n | -c | -raw his ...

  8. Java魔法堂:枚举类型详解

    一.前言 Java的枚举类型相对C#来说具有更灵活可配置性,Java的枚举类型可以携带更多的信息. // C# enum MyColor{ RED = , BLUE = } Console.Write ...

  9. Java魔法堂:String.format详解

      目录     一.前言    二.重载方法     三.占位符     四.对字符.字符串进行格式化     五.对整数进行格式化     六.对浮点数进行格式化     七.对日期时间进行格式化 ...

随机推荐

  1. 开始VS 2012中LightSwitch系列的第3部分:我该选择哪一个屏幕模板

    [原文发表地址]  Beginning LightSwitch in VS 2012 Part 3: Screen Templates, Which One Do I Choose? [原文发表时间] ...

  2. 人人都是 DBA(XV)锁信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  3. MapReduce实例浅析

    在文章<MapReduce原理与设计思想>中,详细剖析了MapReduce的原理,这篇文章则通过实例重点剖析MapReduce 本文地址:http://www.cnblogs.com/ar ...

  4. 一个App完成入门篇(四)- 完成反馈页面

    上一节中我们学会了如何通过点击不同按钮切换页面,这节专注于完成反馈页面的功能以及细节动画. 导入项目 添加新组件 同步新组件 完成页面布局 输入时加动画效果 弹出日期选择 直接引用UI页面 将要学习的 ...

  5. 源程序版本管理软件和项目管理软件,Github注册流程

    目前流行的源程序版本管理软件和项目管理软件:Microsoft TFS,Github,SVN,Coding 各自的优缺点: Microsoft TFS: 优点: tfs核心的,是对敏捷,msf,cmm ...

  6. Windows hosts (使用方法 && 不定期更新)

    Windows 系统hosts位于 C:\Windows\System32\drivers\etc\hosts 使用方法:删除原来的hosts文件(不放心可以剪切到其他路径备份),然后将本文链接里的h ...

  7. mybatis结合分页的使用及解析.

    首先说明: 这里分页是使用了SSM框架+ jsp 来做的, 当然分页还有其他的很多做法, 比如easyUI自带的分页效果. 但是这些原理都是很相似的, 再次只做为学习总结之用. 一, 效果图这里的截图 ...

  8. OutputCache属性详解(三)— VaryByHeader,VaryByCustom

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  9. 谷毅(WingKu)横空出世

    天空划出一道彩虹,谷毅(WingKu)横空出世,这里的产品全由本人开发制作,如有雷同不胜荣幸,欢迎前往下载使用,如果有啥建议或者使用当中遇到什么问题,也可在此留言评论~OK,开张啦~!以后每个产品会以 ...

  10. iOS---NSAutoreleasePool自动释放原理及详解

    前言:当您向一个对象发送一个autorelease消息时,Cocoa就会将该对象的一个引用放入到最新的自动释放池.它仍然是个正当的对象,因此自动释放池 定义的作用域内的其它对象可以向它发送消息.当程序 ...