淺談Html的內容加載及JS執行順序

事跟我說他用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文檔的接收和預處理

網絡請求處理：當用戶輸入URL或點擊鏈接時，瀏覽器發起HTTP請求，服務器響應并返回HTML文件。此過程中，瀏覽器需要處理DNS查詢、建立TCP連接等底層網絡通信操作。
預解析優化：為了提高性能，現代瀏覽器在主線程解析HTML之前會啟動一個預解析線程，提前下載HTML中鏈接的外部CSS和JS文件。這一步驟確保了后續渲染過程的順暢進行。

解析為DOM樹

詞法分析和句法分析：瀏覽器的HTML解析器通過詞法分析將HTML文本標記轉化為符號序列，然后通過句法分析器按照HTML規范構建出DOM樹。每個節點代表一個HTML元素，形成了多層次的樹狀結構。
生成對象接口：生成的DOM樹是頁面元素的結構化表示，提供了操作頁面元素的接口，如JavaScript可以通過DOM API來動態修改頁面內容和結構。

CSS解析與CSSOM樹構建

CSS文件加載與解析：瀏覽器解析HTML文件中的<link>標簽引入的外部CSS文件和<style>標簽中的內聯CSS，生成CSSOM樹。CSSOM樹反映了CSS樣式的層級和繼承關系。
CSS屬性計算：包括層疊、繼承等，確保每個元素對應的樣式能夠被準確計算。這些計算過程為后續的布局提供必要的樣式信息。

JavaScript加載與執行

阻塞式加載：當解析器遇到<script>標簽時，它會停止HTML的解析，轉而先加載并執行JavaScript代碼。這是因為JS可能會修改DOM結構或CSSOM樹，從而影響已解析的部分。
異步和延遲加載：為了不影響頁面的初步渲染，可以采用async或defer屬性來異步加載JS文件，這樣可以在后臺進行JS的加載和執行，而不阻塞HTML解析。

渲染樹的構建

合并DOM樹和CSSOM樹：有了DOM樹和CSSOM樹后，瀏覽器將它們組合成渲染樹，這個樹只包含顯示界面所需的DOM節點及對應的樣式信息。
不可見元素的排除：渲染樹會忽略例如<head>、<meta>等不可見元素，只關注<body>內的可視化內容。

布局計算（Layout）

元素位置和尺寸確定：瀏覽器從渲染樹根節點開始，遞歸地計算每個節點的精確位置和尺寸，這個過程也被稱為“回流”或“重排”，是后續繪制的基礎。
布局過程的優化：現代瀏覽器會盡量優化布局過程，例如通過流式布局的方式減少重復計算，確保高效地完成布局任務。

繪制（Paint）

像素級繪制：繪制是一個將布局計算后的各元素繪制成像素點的過程。這包括文本、顏色、邊框、陰影以及替換元素的繪制。
層次化的繪制：為了高效地更新局部內容，瀏覽器會將頁面分成若干層次（Layer），對每一層分別進行繪制，這樣只需更新變化的部分。

因此，我們開發中要注意以下幾點：

避免過度使用全局腳本：盡量減少使用全局腳本或者將它們放在文檔底部，以減少對HTML解析的阻塞。
合理組織CSS和使用CSS預處理器：合理組織CSS文件的結構和覆蓋規則，利用CSS預處理器進行模塊化管理。
利用瀏覽器緩存機制：通過設置合理的緩存策略，減少重復加載相同資源，提升二次訪問的體驗。
優化圖片和多媒體資源：適當壓縮圖片和優化多媒體資源的加載，減少網絡傳輸時間和渲染負擔。

綜上所述，瀏覽器解析HTML文件是一個復雜而高度優化的過程，涉及從網絡獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發者需要深入理解這些步驟，以優化網頁性能和用戶體驗。通過合理組織HTML結構、優化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執行，可以顯著提升頁面加載速度和運行效率。

號持續更新前端面試題和答案......

以下是一些HTML基礎面試題：

請解釋一下HTML是什么以及它的作用。
什么是HTML標簽（Tag）？舉例說明幾個常見的HTML標簽及其作用。
HTML中的塊級元素（Block-level elements）和內聯元素（Inline elements）有什么區別？請舉例說明。
請解釋一下HTML5和HTML之間的區別。
HTML中的元數據（Metadata）是什么？請舉例說明幾個常見的HTML元數據標簽。
HTML中的超鏈接（Hyperlink）是什么？請解釋一下如何創建超鏈接。
HTML中的表單（Form）是什么？請解釋一下如何創建一個基本的表單。
HTML中的圖像（Image）是如何插入的？請解釋一下如何在HTML中插入圖像。
請解釋一下HTML中的無序列表（Unordered List）和有序列表（Ordered List）的區別，并舉例說明。
HTML中的特殊字符（Special Characters）是什么？請舉例說明如何使用特殊字符。
HTML中的表格（Table）是什么？請解釋一下如何創建一個簡單的HTML表格。
HTML中的注釋（Comment）是什么？請解釋一下如何在HTML中添加注釋。
HTML中的DOCTYPE是什么？請解釋一下DOCTYPE的作用和用法。
HTML中的元素（Element）和標簽（Tag）有什么區別？請解釋一下它們之間的關系。
HTML中的語義化（Semantic HTML）是什么？請解釋一下語義化的重要性和如何實現語義化。

HTML5中的新特性有哪些？請舉例說明其中幾個新特性及其作用。
HTML中的元素可以有哪些全局屬性（Global Attributes）？請解釋一下其中幾個全局屬性的作用。
HTML中的表單元素有哪些常見的類型（Type）？請解釋一下其中幾個類型的作用。
HTML中的音頻（Audio）和視頻（Video）是如何嵌入的？請解釋一下如何在HTML中嵌入音頻和視頻。
HTML中的元素可以有哪些事件屬性（Event Attributes）？請解釋一下其中幾個事件屬性的作用。
HTML中的語義化標簽（Semantic Tags）有哪些？請解釋一下其中幾個語義化標簽的作用。
HTML中的響應式設計（Responsive Design）是什么？請解釋一下如何使用HTML實現響應式設計。
HTML中的地理定位（Geolocation）是什么？請解釋一下如何使用HTML獲取用戶的地理位置信息。
HTML中的離線存儲（Offline Storage）是什么？請解釋一下如何使用HTML實現離線存儲。
HTML中的元素可以有哪些媒體屬性（Media Attributes）？請解釋一下其中幾個媒體屬性的作用。
HTML中的元素可以有哪些表單屬性（Form Attributes）？請解釋一下其中幾個表單屬性的作用。
HTML中的可訪問性（Accessibility）是什么？請解釋一下如何使用HTML實現可訪問性。
HTML中的SVG是什么？請解釋一下SVG在HTML中的使用方法和優勢。
HTML中的IFrame是什么？請解釋一下IFrame的作用和用法。
HTML中的字符編碼（Character Encoding）是什么？請解釋一下字符編碼的作用和常見的字符編碼方式。

在線咨詢

上一篇：HTML 簡介
下一篇：魯科版高中化學必修二《蛋白質》優質課教案

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

淺談Html的內容加載及JS執行順序

您的項目需求