整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          淺談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文檔的接收和預處理

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

          解析為DOM樹

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

          CSS解析與CSSOM樹構建

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

          JavaScript加載與執行

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

          渲染樹的構建

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

          布局計算(Layout)

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

          繪制(Paint)

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

          因此,我們開發中要注意以下幾點:

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

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

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

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

          1. 請解釋一下HTML是什么以及它的作用。
          2. 什么是HTML標簽(Tag)?舉例說明幾個常見的HTML標簽及其作用。
          3. HTML中的塊級元素(Block-level elements)和內聯元素(Inline elements)有什么區別?請舉例說明。
          4. 請解釋一下HTML5和HTML之間的區別。
          5. HTML中的元數據(Metadata)是什么?請舉例說明幾個常見的HTML元數據標簽。
          6. HTML中的超鏈接(Hyperlink)是什么?請解釋一下如何創建超鏈接。
          7. HTML中的表單(Form)是什么?請解釋一下如何創建一個基本的表單。
          8. HTML中的圖像(Image)是如何插入的?請解釋一下如何在HTML中插入圖像。
          9. 請解釋一下HTML中的無序列表(Unordered List)和有序列表(Ordered List)的區別,并舉例說明。
          10. HTML中的特殊字符(Special Characters)是什么?請舉例說明如何使用特殊字符。
          11. HTML中的表格(Table)是什么?請解釋一下如何創建一個簡單的HTML表格。
          12. HTML中的注釋(Comment)是什么?請解釋一下如何在HTML中添加注釋。
          13. HTML中的DOCTYPE是什么?請解釋一下DOCTYPE的作用和用法。
          14. HTML中的元素(Element)和標簽(Tag)有什么區別?請解釋一下它們之間的關系。
          15. HTML中的語義化(Semantic HTML)是什么?請解釋一下語義化的重要性和如何實現語義化。
          1. HTML5中的新特性有哪些?請舉例說明其中幾個新特性及其作用。
          2. HTML中的元素可以有哪些全局屬性(Global Attributes)?請解釋一下其中幾個全局屬性的作用。
          3. HTML中的表單元素有哪些常見的類型(Type)?請解釋一下其中幾個類型的作用。
          4. HTML中的音頻(Audio)和視頻(Video)是如何嵌入的?請解釋一下如何在HTML中嵌入音頻和視頻。
          5. HTML中的元素可以有哪些事件屬性(Event Attributes)?請解釋一下其中幾個事件屬性的作用。
          6. HTML中的語義化標簽(Semantic Tags)有哪些?請解釋一下其中幾個語義化標簽的作用。
          7. HTML中的響應式設計(Responsive Design)是什么?請解釋一下如何使用HTML實現響應式設計。
          8. HTML中的地理定位(Geolocation)是什么?請解釋一下如何使用HTML獲取用戶的地理位置信息。
          9. HTML中的離線存儲(Offline Storage)是什么?請解釋一下如何使用HTML實現離線存儲。
          10. HTML中的元素可以有哪些媒體屬性(Media Attributes)?請解釋一下其中幾個媒體屬性的作用。
          11. HTML中的元素可以有哪些表單屬性(Form Attributes)?請解釋一下其中幾個表單屬性的作用。
          12. HTML中的可訪問性(Accessibility)是什么?請解釋一下如何使用HTML實現可訪問性。
          13. HTML中的SVG是什么?請解釋一下SVG在HTML中的使用方法和優勢。
          14. HTML中的IFrame是什么?請解釋一下IFrame的作用和用法。
          15. HTML中的字符編碼(Character Encoding)是什么?請解釋一下字符編碼的作用和常見的字符編碼方式。

          主站蜘蛛池模板: 国产在线观看一区二区三区| 在线电影一区二区三区| 国产一区二区精品久久91| 精品久久久久久中文字幕一区| 日韩人妻一区二区三区免费| 免费观看日本污污ww网站一区 | 欧洲精品免费一区二区三区| 久久国产一区二区三区| 一本色道久久综合一区| 精品国产一区二区三区久久狼| 国产成人午夜精品一区二区三区| 免费av一区二区三区| 国产免费一区二区三区不卡 | 一区二区乱子伦在线播放| 国产精品美女一区二区| 午夜影院一区二区| 国产电影一区二区| 精品无人乱码一区二区三区| 精品无码一区二区三区亚洲桃色| 久久一区二区精品综合| 亚洲视频在线一区| 精品一区二区三区无码免费视频| 亚洲一区二区女搞男| 国产高清不卡一区二区| 性无码一区二区三区在线观看| 国产精品伦一区二区三级视频 | 亚洲电影唐人社一区二区| 亚洲香蕉久久一区二区| 日韩一区二区三区射精| 福利国产微拍广场一区视频在线 | 国产一区二区三区播放| 色多多免费视频观看区一区| 日韩精品人妻av一区二区三区| 伦理一区二区三区| 日本精品一区二区三区在线观看| 精品视频无码一区二区三区| 在线欧美精品一区二区三区| 国产在线观看一区二区三区四区 | 亚洲AV噜噜一区二区三区| 精品国产天堂综合一区在线| 国产不卡视频一区二区三区|