事跟我說他用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監聽事件。
最終修改后的頁面
覽器解析HTML文件的過程是網頁呈現的關鍵步驟之一。具體介紹如下:
HTML文檔的接收和預處理
解析為DOM樹
CSS解析與CSSOM樹構建
JavaScript加載與執行
渲染樹的構建
布局計算(Layout)
繪制(Paint)
因此,我們開發中要注意以下幾點:
綜上所述,瀏覽器解析HTML文件是一個復雜而高度優化的過程,涉及從網絡獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發者需要深入理解這些步驟,以優化網頁性能和用戶體驗。通過合理組織HTML結構、優化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執行,可以顯著提升頁面加載速度和運行效率。
號持續更新前端面試題和答案......
以下是一些HTML基礎面試題:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。