link元素也会阻塞DOM解析

本文转载自http://www.jjlxx.com/blog/index.php/archives/8

今天, 我们都了解javascript是如何工作的. 我们知道script元素会阻塞渲染(实际是上阻塞解析, 因此延迟了渲染). 于是我们把script元素放到了文档末尾. 但是你知道link元素也会阻塞解析吗?

(document.write会影响DOM树, 因此解析需要确认这些是同步进行的)

在过去我们不太可能引用其他网站的css样式, 但是到了今天情况改变了. 现在我们可以使用提供字体的web service, 因此就需要在head元素中引用其他网站的service url作为css样式.

如果这个服务因为某些原因中断了, 你的页面也会受到影响. 我们一直混在javascript社区里工作来想办法避免这些问题, 现在我们需要在css这里做同样的事情了

 

例子

这个url演示了阻塞过程http://jsbin.com/agumu4/3/ – 要确定你开启了web console, 再刷新来看状态的变化

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< ! DOCTYPE html > < html > < head > < meta charset = utf - 8 / > < title > Hang test < / title > <script> // script in head to debug state change console . log ( 'doc state: ' + document . readyState ) ; document . onreadystatechange = function ( ) { & nbsp ; console . log ( 'doc state change: ' + document . readyState ) ; } ; </script> < link href = "http://hang.nodester.com/hang.css?5000" rel = "stylesheet" / > < / head > < body > & nbsp ; < p > Hello World < / p > < / body > < / html >

 

测试

我创建了一个简单的延迟service, 它运行在Node上因此不用担心他会阻塞整个机器(相反php的sleep会使整个服务器阻塞)

要测试的话就引用 http://hang.nodester.com/file.type?ms

例如 http://hang.nodester.com/foo.css?2000 将会返回一个css mime类型的文件, 并延迟2000ms

当你不能看到console的输出时, 要确定DOM何时被读取的最好方法就是监听readystatechange事件. 因此在我的测试中, 我引入了一些脚本来告诉我DOM到了哪个状态了, 并且我可以看到link元素是否阻塞了.