事跟我說他用jQuery取不到頁面上隱藏元素input的值,他的html頁面大概內容如下。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
<title>淺談Html頁面內容執行順序</title>
<script type="text/javascript">
var userId = $('#hiddenUserId').val();
var contextPath = $('#hiddenContextPath').val();
var userName = $('#hiddenUserName').val();
</script>
</head>
<body>
<input type="hidden" id="hiddenUserId" value="101" />
<input type="hidden" id="hiddenContextPath" value="/web" />
<input type="hidden" id="hiddenUserName" value="小明" />
</body>
</html>
頁面中的JS腳本在head中,JS腳本要讀取的input在body中。瀏覽器對html頁面內容的加載是順序加載,也就是在html頁面中前面先加載,因此當加載到JS腳本時,input還沒有加載到瀏覽器中。JS是一種解釋性的腳本,也是從上而下順序執行,由于這段JS代碼是立即執行的,所以當JS在執行的時候,讀取不到input的值。
最直接的修改方法是把JS放到網頁的最下面執行。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
<title>淺談Html頁面內容執行順序</title>
</head>
<body>
<input type="hidden" id="hiddenUserId" value="101" />
<input type="hidden" id="hiddenContextPath" value="/web" />
<input type="hidden" id="hiddenUserName" value="小明" />
<script type="text/javascript">
var userId = $('#hiddenUserId').val();
var contextPath = $('#hiddenContextPath').val();
var userName = $('#hiddenUserName').val();
</script>
</body>
</html>
把JS放到網頁的最下面,這樣在JS執行的時候,網頁內容都已經加載完畢。把JS放在網頁的最下面方法并不是最好的解決方法,大部分情況JS并不是總能放在網頁的最下面。這時可以用window的onload事件,onload事件在整個頁面都加載完成后才觸發,可以把JS腳本放在onload里面執行。不同瀏覽器onload事件添加方式也不一樣。
IE下事件:
window.attachEvent('onload', function(){
var userId = $('#hiddenUserId').val();
var contextPath = $('#hiddenContextPath').val();
var userName = $('#hiddenUserName').val();
});
Chrome/Firefox等DOM標準事件:
window.addEventListener('load', function(){
var userId = $('#hiddenUserId').val();
var contextPath = $('#hiddenContextPath').val();
var userName = $('#hiddenUserName').val();
});
由于不同瀏覽器的事件添加方式不一樣,jQuery為我們提供了通用的初始化方法,該方法在頁面加載完成時觸發。
$(function(){
var userId = $('#hiddenUserId').val();
var contextPath = $('#hiddenContextPath').val();
var userName = $('#hiddenUserName').val();
});
上面方法本質就是添加onload監聽事件。
最終修改后的頁面
能大家都知道,js執行會阻塞DOM樹的解析和渲染,那么css加載會阻塞DOM樹的解析和渲染嗎?接下來,我就來對css加載對DOM樹的解析和渲染的影響做一個測試。
為了完成本次測試,先來科普一下,如何利用chrome來設置下載速度
. 打開chrome控制臺(按下F12),可以看到下圖,重點在我畫紅圈的地方
點擊我畫紅圈的地方(No throttling),會看到下圖,我們選擇GPRS這個選項
. 點擊我畫紅圈的地方(No throttling),會看到下圖,我們選擇GPRS這個選項
這樣,我們對資源的下載速度上限就會被限制成20kb/s,好,那接下來就進入我們的正題
. 這樣,我們對資源的下載速度上限就會被限制成20kb/s,好,那接下來就進入我們的正題
用代碼說話:
<!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function h () { console.log(document.querySelectorAll('h1')) } setTimeout(h, 0) </script> <link rel="stylesheet"> </head> <body> <h1>這是紅色的</h1> </body> </html>
假設: css加載會阻塞DOM樹解析和渲染
假設結果: 在bootstrap.css還沒加載完之前,下面的內容不會被解析渲染,那么我們一開始看到的應該是白屏,h1不會顯示出來。并且此時console.log的結果應該是一個空數組。
實際結果:如下圖
css會阻塞DOM樹解析?
由上圖我們可以看到,當css還沒加載完成的時候,h1并沒有顯示,但是此時控制臺輸出如下
可以得知,此時DOM樹至少已經解析完成到了h1那里,而此時css還沒加載完成,也就說明,css并不會阻塞DOM樹的解析。
css加載會阻塞DOM樹渲染?
由上圖,我們也可以看到,當css還沒加載出來的時候,頁面顯示白屏,直到css加載完成之后,紅色字體才顯示出來,也就是說,下面的內容雖然解析了,但是并沒有被渲染出來。所以,css加載會阻塞DOM樹渲染。
個人對這種機制的評價
其實我覺得,這可能也是瀏覽器的一種優化機制。因為你加載css的時候,可能會修改下面DOM節點的樣式,如果css加載不阻塞DOM樹渲染的話,那么當css加載完之后,DOM樹可能又得重新重繪或者回流了,這就造成了一些沒有必要的損耗。所以我干脆就先把DOM樹的結構先解析完,把可以做的工作做完,然后等你css加載完之后,在根據最終的樣式來渲染DOM樹,這種做法性能方面確實會比較好一點。
由上面的推論,我們可以得出,css加載不會阻塞DOM樹解析,但是會阻塞DOM樹渲染。那么,css加載會不會阻塞js執行呢?
同樣,通過代碼來驗證.
<!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> console.log('before css') var startDate = new Date() </script> <link rel="stylesheet"> </head> <body> <h1>這是紅色的</h1> <script> var endDate = new Date() console.log('after css') console.log('經過了' + (endDate -startDate) + 'ms') </script> </body> </html>
假設: css加載會阻塞后面的js運行
預期結果: 在link后面的js代碼,應該要在css加載完成后才會運行
實際結果:
由上圖我們可以看出,位于css加載語句前的那個js代碼先執行了,但是位于css加載語句后面的代碼遲遲沒有執行,直到css加載完成后,它才執行。這也就說明了,css加載會阻塞后面的js語句的執行。詳細結果看下圖(css加載用了5600+ms):
結論
由上所述,我們可以得出以下結論:
因此,為了避免讓用戶看到長時間的白屏時間,我們應該盡可能的提高css加載速度,比如可以使用以下幾種方法:
原理解析
那么為什么會出現上面的現象呢?我們從瀏覽器的渲染過程來解析下。
不用瀏覽器使用的內核不同,所以他們的渲染過程也是不一樣的。目前主要有兩個:
webkit渲染過程
Gecko渲染過程
從上面兩個流程圖我們可以看出來,瀏覽器渲染的流程如下:
從流程我們可以看出來
DOMContentLoaded
對于瀏覽器來說,頁面加載主要有兩個事件,一個是DOMContentLoaded,另一個是onLoad。而onLoad沒什么好說的,就是等待頁面的所有資源都加載完成才會觸發,這些資源包括css、js、圖片視頻等。
而DOMContentLoaded,顧名思義,就是當頁面的內容解析完成后,則觸發該事件。那么,正如我們上面討論過的,css會阻塞Dom渲染和js執行,而js會阻塞Dom解析。那么我們可以做出這樣的假設
我們先對第一種情況做測試:
<!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> document.addEventListener('DOMContentLoaded', function() { console.log('DOMContentLoaded'); }) </script> <link rel="stylesheet"> </head> <body> </body> </html>
實驗結果如下圖:
從動圖我們可以看出來,css還未加載完,就已經觸發了DOMContentLoaded事件了。因為css后面沒有任何js代碼。
接下來我們對第二種情況做測試,很簡單,就在css后面加一行代碼就行了
<!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> document.addEventListener('DOMContentLoaded', function() { console.log('DOMContentLoaded'); }) </script> <link rel="stylesheet"> <script> console.log('到我了沒'); </script> </head> <body> </body> </html>
實驗結果如下圖:
我們可以看到,只有在css加載完成后,才會觸發DOMContentLoaded事件。因此,我們可以得出結論:
以上,就是所有內容。歡迎關注我們的專欄,接收最新最有趣的前端內容。
本文由云+社區發表。作者:嘿嘿嘿
*請認真填寫需求信息,我們會在24小時內與您取得聯系。