link元素也會阻塞DOM解析
阿新 • • 發佈：2019-01-07
今天, 我們都瞭解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 |
<!DOCTYPEhtml>
<html>
<head>
<metacharset=utf-8/>
<title>Hangtest</title>
<script>
// script in head to debug
state change |
測試
我建立了一個簡單的延遲service, 它執行在Node上因此不用擔心他會阻塞整個機器(相反php的sleep會使整個伺服器阻塞)
當你不能看到console的輸出時, 要確定DOM何時被讀取的最好方法就是監聽readystatechange事件. 因此在我的測試中, 我引入了一些指令碼來告訴我DOM到了哪個狀態了, 並且我可以看到link元素是否阻塞了.