天下午舉行的上海市政府新聞發(fā)布會上傳出消息，今天，上海“一網(wǎng)通辦”總門戶、“隨申辦”移動端及健康云平臺同步上線了本市“解除醫(yī)學(xué)措施查詢系統(tǒng)”和“企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)”。通過“企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)”，可以為各企業(yè)提供復(fù)工人員信息的在線填報服務(wù)，企業(yè)也可指定填報人員在線進(jìn)行填報，從而全面掌握各企業(yè)復(fù)工人員動態(tài)健康信息，進(jìn)一步加強(qiáng)各區(qū)域?qū)?fù)工企業(yè)人員的屬地化管理，為各企業(yè)的內(nèi)部防控工作有效開展提供支撐，提升企業(yè)內(nèi)部防控工作水平。

市大數(shù)據(jù)中心主任朱宗堯介紹，這一系統(tǒng)的填報主體是企業(yè)，填報渠道為PC端和移動端。法人用戶可以使用上海CA法人“一證通”登錄“一網(wǎng)通辦”總門戶或“隨申辦”移動端，也可登錄健康云平臺進(jìn)行填報。為幫助企業(yè)落實疫情防控主體責(zé)任，便于企業(yè)了解返崗人員健康信息，健全企業(yè)與所在地區(qū)疫情聯(lián)防聯(lián)控、群防群治機(jī)制，本市所有計劃復(fù)工企業(yè)，都要在“企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)”填報，并作為企業(yè)復(fù)工備案核查的條件。已經(jīng)復(fù)工復(fù)產(chǎn)的企業(yè)也要填報，并及時填報變化情況。

依托本市大數(shù)據(jù)資源平臺，“企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)”對接健康云平臺數(shù)據(jù)，通過數(shù)據(jù)賦能，提供員工返滬日期、員工是否為風(fēng)險人員信息等，轉(zhuǎn)變表格填報方式，實現(xiàn)了大部分填寫要素項的自動預(yù)填，實現(xiàn)一次填報、多次復(fù)用，努力使每一家企業(yè)及其員工從填表轉(zhuǎn)變?yōu)檠a(bǔ)表、審表，提高了填報效率。特別是對于一些用工人員較多的企業(yè)，開發(fā)了二維碼，員工可通過掃碼，由系統(tǒng)自動采集信息、自動匯總上報，最大限度降低企業(yè)填報負(fù)擔(dān)，為企業(yè)加強(qiáng)疫情防控，合理安排復(fù)工復(fù)產(chǎn)提供支撐。

這樣一個登記系統(tǒng)，企業(yè)和員工究竟要如何使用呢？別急，我們整理了一份操作指南，“手把手”教你使用：

一、通過“一網(wǎng)通辦”總門戶PC端網(wǎng)站在線進(jìn)行填報

（一）登錄總門戶后選擇在線填報入口

【企業(yè)用戶】

企業(yè)填報人員使用CA法人“一證通”登錄“一網(wǎng)通辦”總門戶PC端網(wǎng)站（http://zwdt.sh.gov.cn），通過以下四種方式進(jìn)入“企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)”進(jìn)行填報。

1.進(jìn)入首頁“一網(wǎng)通辦”新冠肺炎防控專欄，通過選擇“服務(wù)企業(yè)”版塊的“企業(yè)復(fù)工人員網(wǎng)上登記”服務(wù)入口進(jìn)行填報（如下圖）。

2.點擊首頁右上角的企業(yè)名稱，進(jìn)入企業(yè)專屬網(wǎng)頁，通過選擇“企業(yè)復(fù)工人員網(wǎng)上登記”的服務(wù)入口進(jìn)行填報。

3.通過首頁“智能推薦”版塊的“企業(yè)復(fù)工人員網(wǎng)上登記”服務(wù)入口進(jìn)行填報。

4.通過在首頁搜索框內(nèi)輸入“企業(yè)復(fù)工人員網(wǎng)上登記”的關(guān)鍵字進(jìn)行智能檢索，在檢索結(jié)果中選擇快捷服務(wù)入口進(jìn)行填報。

【個人用戶】

“企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)”目前同步提供了支持個人用戶的在線填報，企業(yè)的法定代表人可作為企業(yè)填報人員，通過個人實名用戶登錄“一網(wǎng)通辦”總門戶PC端網(wǎng)站后進(jìn)入“企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)”進(jìn)行填報。

（二）通過電子表單在線填報復(fù)工信息

為加強(qiáng)各企業(yè)防控主體責(zé)任落實，各企業(yè)應(yīng)如實填報人員復(fù)工信息，以保障系統(tǒng)采集正確、屬實的數(shù)據(jù)，確保各區(qū)域的屬地化防控工作高效開展。為最大限度減少各企業(yè)所需填寫的信息，企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)對接健康云平臺數(shù)據(jù)，提供員工返滬日期、員工是否為風(fēng)險人員信息，為企業(yè)加強(qiáng)疫情防控，合理安排復(fù)工復(fù)產(chǎn)提供支撐。

1.填寫基本信息

企業(yè)使用CA法人“一證通”登錄后，系統(tǒng)會將“企業(yè)名稱、社會信用代碼、聯(lián)系人、聯(lián)系方式、生產(chǎn)經(jīng)營地址”等企業(yè)基本信息項進(jìn)行自動預(yù)填。

【企業(yè)基本信息說明】

●“生產(chǎn)經(jīng)營地址”信息將由系統(tǒng)默認(rèn)自動預(yù)填各企業(yè)的注冊登記地址，如實際經(jīng)營地址與注冊登記地址不同的企業(yè)可進(jìn)行修改。如企業(yè)在本市范圍多個行政區(qū)內(nèi)擁有多個不同的生產(chǎn)經(jīng)營地址，如開設(shè)連鎖店、分店等等，可通過添加其他經(jīng)營地址進(jìn)行補(bǔ)充。擁有多個生產(chǎn)經(jīng)營地址的企業(yè)應(yīng)如實填報其他生產(chǎn)經(jīng)營地址信息，以確保對應(yīng)所屬區(qū)域的屬地化防控工作高效有序開展。

●“計劃或?qū)嶋H復(fù)工時間”需企業(yè)根據(jù)復(fù)工情況如實填報，針對已復(fù)工的企業(yè)需填寫實際復(fù)工的時間，針對未復(fù)工的企業(yè)需填寫計劃復(fù)工的時間。

2.填寫人員信息

系統(tǒng)將根據(jù)后臺相關(guān)數(shù)據(jù)，對企業(yè)名下的員工清單進(jìn)行初始化，企業(yè)可根據(jù)實際情況對人員清單進(jìn)行調(diào)整，對于隸屬于本企業(yè)下但未在本企業(yè)繳納社保的人員，如簽署臨時用工合同或在外省市繳納社保的人員，可選擇“添加員工”按鈕增加相關(guān)人員。

【企業(yè)人員信息說明】

人員信息包括“姓名、身份證號、居住地址、是否已復(fù)工、返滬日期、計劃或?qū)嶋H復(fù)工日期、所屬經(jīng)營地”等人員信息項。其中，姓名、身份證號、居住地址、所屬經(jīng)營地（下拉選擇）等信息將由系統(tǒng)根據(jù)后臺數(shù)據(jù)自動進(jìn)行預(yù)填。企業(yè)填報人員可點擊“修改”按鈕對預(yù)填信息進(jìn)行修改，并同時補(bǔ)全剩余復(fù)工信息。

●“是否已復(fù)工”代表該人員目前是否已經(jīng)復(fù)工，針對已復(fù)工的人員請在“是否已復(fù)工”一欄選擇“是”，并在“計劃或?qū)嶋H復(fù)工日期”一欄選擇實際復(fù)工日期，針對未復(fù)工的人員請在“是否已復(fù)工”一欄選擇“否”，并在“計劃或?qū)嶋H復(fù)工日期”一欄選擇計劃復(fù)工日期。

●“返滬日期”代表該人員的抵滬日期，通過對接健康云平臺數(shù)據(jù)，自動填充提供員工返滬日期。針對目前暫未返滬的人員，請留白“返滬日期”一欄，無需填寫日期，待人員明確返滬日期后及時進(jìn)行更新。

●“所屬經(jīng)營地”代表該員工具體工作所在地，如企業(yè)添加了其他經(jīng)營地，則企業(yè)人員可在“所屬經(jīng)營地”一欄可以下拉進(jìn)行選擇，將企業(yè)人員與對應(yīng)的生產(chǎn)經(jīng)營地址進(jìn)行關(guān)聯(lián)。

3.確認(rèn)人員信息

企業(yè)填報人員應(yīng)如實進(jìn)行填報并逐條確認(rèn)各員工的相關(guān)復(fù)工信息，同時，為方便企業(yè)填報，系統(tǒng)提供了批量確認(rèn)的功能。企業(yè)填報人員可選擇當(dāng)前頁面的多條人員復(fù)工信息進(jìn)行批量確認(rèn)。

注：僅當(dāng)企業(yè)填報人員完成確認(rèn)后，各企業(yè)人員復(fù)工信息方可生效，作為有效填報的復(fù)工信息。

4.更新人員信息

當(dāng)人員復(fù)工信息發(fā)生變化后，企業(yè)填報人員應(yīng)第一時間對系統(tǒng)內(nèi)的人員信息進(jìn)行修改更新，點擊“修改”按鈕即可對各人員復(fù)工信息進(jìn)行修改。

5.導(dǎo)出人員信息

為方便企業(yè)填報人員管理本企業(yè)的人員信息，系統(tǒng)提供了人員復(fù)工信息的批量導(dǎo)出功能，供企業(yè)查看統(tǒng)計。

注：請企業(yè)填報人員妥善保管導(dǎo)出的本企業(yè)人員批量復(fù)工信息。

6.檢索人員信息

系統(tǒng)提供了快速檢索功能，方便企業(yè)查找人員信息，企業(yè)填報人員可在搜索欄內(nèi)輸入人員姓名的關(guān)鍵字并點擊“查找”按鈕進(jìn)行快速檢索。

7.刪除人員信息

系統(tǒng)自動預(yù)填的企業(yè)名下人員信息僅供企業(yè)填報人員參考，企業(yè)填報人員可通過本企業(yè)人員的實際情況，對不符合的人員信息進(jìn)行刪除。選中對應(yīng)需要刪除的人員信息，點擊“刪除”按鈕即可刪除。

（三）通過上傳模板批量填報復(fù)工信息（僅支持PC端填報）

【批量上傳導(dǎo)入】

針對名下員工較多的企業(yè)，系統(tǒng)提供了通過上傳模板批量填寫復(fù)工信息的功能。企業(yè)填報人員可點擊“下載申報模板”按鈕下載統(tǒng)一格式的模板，按格式要求批量補(bǔ)全人員復(fù)工信息，并點擊“上傳人員信息”按鈕將模板上傳，系統(tǒng)將自動導(dǎo)入模板內(nèi)的人員信息，企業(yè)填報人員可對導(dǎo)入的人員信息進(jìn)行確認(rèn)并修改。

【批量上傳修改】

當(dāng)人員復(fù)工信息發(fā)生變化后，企業(yè)填報人員可重新下載系統(tǒng)內(nèi)先前批量上傳的人員復(fù)工信息模板并進(jìn)行修改，修改后重新提交上傳更新。

二、通過“隨申辦”移動端各渠道入口在線進(jìn)行填報（目前已于“隨申辦”APP上線，后續(xù)將于“隨申辦”其他各渠道同步上線）

【選擇入口】

企業(yè)填報人員以個人實名用戶登錄“隨申辦”移動端各渠道，通過以下三種方式進(jìn)入移動端“企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)”進(jìn)行填報。

1.進(jìn)入“我”或“隨申辦”頻道，通過選擇“一網(wǎng)通辦”新冠肺炎防控專欄“服務(wù)企業(yè)”版塊的“企業(yè)復(fù)工人員網(wǎng)上登記”服務(wù)入口進(jìn)行填報。

2.進(jìn)入“隨申辦”頻道，通過在熱門服務(wù)中選擇“企業(yè)復(fù)工人員網(wǎng)上登記”的服務(wù)入口進(jìn)行填報。

3.通過在搜索框內(nèi)輸入“企業(yè)復(fù)工人員網(wǎng)上登記”的關(guān)鍵字進(jìn)行智能檢索，在檢索結(jié)果中選擇快捷服務(wù)入口進(jìn)行填報。

【填報要求】

“隨申辦”移動端在線填報要求同PC端，詳見PC端部分。

三、通過“隨申辦”移動端掃描二維碼進(jìn)行在線填報（推薦名下員工較多的企業(yè)通過該方式進(jìn)行填報）

為最大限度減輕企業(yè)填報人員的負(fù)擔(dān)，系統(tǒng)提供了“企業(yè)員工掃碼填報”的方式，方便企業(yè)進(jìn)行填報。由企業(yè)填報人員通過進(jìn)入“一網(wǎng)通辦”總門戶PC端或“隨申辦”移動端的“企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)”生成并下載填報二維碼，由各企業(yè)員工實名登錄“一網(wǎng)通辦”移動端“隨申辦”各渠道，通過掃描所屬企業(yè)的填報二維碼進(jìn)行本人的復(fù)工信息填報，提交后由企業(yè)填報人員負(fù)責(zé)統(tǒng)一進(jìn)行核實確認(rèn)。

注：“隨申辦”移動端各渠道包括APP、微信小程序及支付寶小程序。其中，“隨申辦”APP（即“隨申辦”市民云APP）可在IOS或安卓的各大應(yīng)用商店下載，“隨申辦”微信或支付寶小程序可在微信或支付寶端內(nèi)通過搜索“隨申辦”進(jìn)行添加。

（一）通過系統(tǒng)生成填報二維碼

企業(yè)填報人員通過登錄“一網(wǎng)通辦”總門戶PC端或“隨申辦”移動端的企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)，點擊“下載員工填報二維碼”按鈕，生成各企業(yè)唯一的填報二維碼，各企業(yè)可通過內(nèi)部渠道將二維碼分發(fā)給各企業(yè)人員。

（二）通過移動端掃碼進(jìn)行填報

由各企業(yè)員工通過登錄移動端“隨申辦”APP、“隨申辦”微信小程序或“隨申辦”支付寶小程序，通過以下三種方式選擇“企業(yè)復(fù)工人員掃碼填報”服務(wù)，通過掃描系統(tǒng)生成的填報二維碼進(jìn)行本人填報。

1.進(jìn)入“我”或“隨申辦”頻道，通過選擇“一網(wǎng)通辦”新冠肺炎防控專欄“服務(wù)個人”版塊的“企業(yè)復(fù)工人員掃碼填報”服務(wù)入口進(jìn)行填報。

2.進(jìn)入“隨申辦”頻道，通過在熱門服務(wù)中選擇“企業(yè)復(fù)工人員掃碼填報”的服務(wù)入口進(jìn)行填報。

3.通過在搜索框內(nèi)輸入“企業(yè)復(fù)工人員掃碼填報”的關(guān)鍵字進(jìn)行智能檢索，在檢索結(jié)果中選擇快捷服務(wù)入口進(jìn)行填報。

（三）填寫本人的企業(yè)復(fù)工信息

進(jìn)入“企業(yè)復(fù)工人員掃碼填報”服務(wù)后，通過掃描系統(tǒng)生成的填報二維碼進(jìn)行本人填報，“隨申辦”移動端的本人填報要求與PC端企業(yè)填報人員的填報要求相同。

【企業(yè)人員信息說明】

人員信息包括“姓名、身份證號、居住地址、是否已復(fù)工、返滬日期、計劃或?qū)嶋H復(fù)工日期、所屬經(jīng)營地”等人員信息項。其中，姓名、身份證號、居住地址、所屬經(jīng)營地（下拉選擇）等信息將由系統(tǒng)自動進(jìn)行預(yù)填。企業(yè)員工可對預(yù)填信息進(jìn)行修改，并同時補(bǔ)全剩余復(fù)工信息，確認(rèn)無誤后進(jìn)行提交。

為最大限度減少各企業(yè)所需填寫的信息，企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)對接健康云平臺數(shù)據(jù)，提供員工返滬日期、員工是否為風(fēng)險人員信息，為企業(yè)加強(qiáng)疫情防控，合理安排復(fù)工復(fù)產(chǎn)提供支撐。

●“返滬日期”代表該人員的抵滬日期，請企業(yè)填報人員根據(jù)員工的實際返滬日期填寫。通過對接健康云平臺數(shù)據(jù)，自動填充提供員工返滬日期。針對目前暫未返滬的人員，請留白“返滬日期”一欄，無需填寫日期，待人員明確返滬日期后及時進(jìn)行更新。

●“所屬經(jīng)營地”代表該員工具體工作所在地，如企業(yè)填報人員在PC端添加了多個經(jīng)營地，則企業(yè)人員可在“所屬經(jīng)營地”一欄可以下拉進(jìn)行選擇，與本人所屬的生產(chǎn)經(jīng)營地址進(jìn)行關(guān)聯(lián)。

（四）對企業(yè)人員信息進(jìn)行確認(rèn)

企業(yè)人員完成本人填報提交后，各企業(yè)人員的復(fù)工信息將同步匯總至所屬企業(yè)名下，企業(yè)填報人員在“一網(wǎng)通辦”總門戶PC端或“隨申辦”移動端登錄后可進(jìn)入企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)進(jìn)行逐一核實確認(rèn)，與實際情況不符的，可進(jìn)行修改。

（五）及時并動態(tài)更新復(fù)工信息

企業(yè)員工完成填報后，如本人復(fù)工發(fā)生變化，應(yīng)及時聯(lián)絡(luò)所屬企業(yè)填報人員獲取最新填報二維碼，通過“隨申辦”各渠道的“企業(yè)復(fù)工人員掃碼填報”服務(wù)及時并動態(tài)更新本人復(fù)工信息，系統(tǒng)默認(rèn)自動預(yù)填企業(yè)員工本人首次填報的所有復(fù)工信息，企業(yè)人員根據(jù)本人實際情況進(jìn)行修改。

四、通過健康云平臺入口在線進(jìn)行填報

企業(yè)填報人員可通過登錄健康云平臺，進(jìn)入“上海新型肺炎公共服務(wù)平臺”“來滬人員健康登記”服務(wù)欄目，選擇“企業(yè)復(fù)工人員網(wǎng)上登記系統(tǒng)”，點擊“企業(yè)復(fù)工登記管理系統(tǒng)”進(jìn)行在線填報（如下圖）。

此外，市大數(shù)據(jù)中心提醒，如遇到操作困難，用戶還可撥打“一網(wǎng)通辦”技術(shù)支持熱線021-38919099進(jìn)行進(jìn)一步咨詢（服務(wù)時間：9:00-17:00）。

欄目主編：張駿 文字編輯：吳頔 圖片編輯：項建英

家好，我是皮皮。

前言

對于前端來說，HTML 都是最基礎(chǔ)的內(nèi)容。

今天，我們來了解一下 HTML 和網(wǎng)頁有什么關(guān)系，以及與 DOM 有什么不同。通過本講內(nèi)容，你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的，以及在這個過程中我們可以進(jìn)行怎樣的處理來提升網(wǎng)頁的性能，從而提升用戶的體驗。

一、瀏覽器頁面加載過程

不知你是否有過這樣的體驗：當(dāng)打開某個瀏覽器的時候，發(fā)現(xiàn)一直在轉(zhuǎn)圈，或者等了好長時間才打開頁面……

此時的你，會選擇關(guān)掉頁面還是耐心等待呢？

這一現(xiàn)象，除了網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速過慢等原因，大多數(shù)都是由于頁面設(shè)計不合理導(dǎo)致加載時間過長導(dǎo)致的。

我們都知道，頁面是用 HTML/CSS/JavaScript 來編寫的。

• HTML 的職責(zé)在于告知瀏覽器如何組織頁面，以及搭建頁面的基本結(jié)構(gòu)；
• CSS 用來裝飾 HTML，讓我們的頁面更好看；
• JavaScript 則可以豐富頁面功能，使靜態(tài)頁面動起來。

HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網(wǎng)頁結(jié)構(gòu)，基本上所有網(wǎng)頁都是這樣的 HTML 結(jié)構(gòu)：

<html>
    <head></head>
    <body></body>
</html>

其中：

• html元素是頁面的根元素，它描述完整的網(wǎng)頁；
• head元素包含了我們想包含在 HTML 頁面中，但不希望顯示在網(wǎng)頁里的內(nèi)容；
• body元素包含了我們訪問頁面時所有顯示在頁面上的內(nèi)容，是用戶最終能看到的內(nèi)容;

HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。

前面我們提到頁面 HTML 結(jié)構(gòu)不合理可能會導(dǎo)致頁面響應(yīng)慢，這個過程很多時候體現(xiàn)在<script>和<style>元素的設(shè)計上，它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。

因此，如果想要提升頁面的加載速度，就需要了解瀏覽器頁面的加載過程是怎樣的，從根本上來解決問題。

瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細(xì)的瀏覽器加載和渲染機(jī)制將在第 7 講中介紹）。其中，GUI 渲染線程負(fù)責(zé)渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負(fù)責(zé)處理 JavaScript 腳本程序。

由于 JavaScript 在執(zhí)行過程中還可能會改動界面結(jié)構(gòu)和樣式，因此它們之間被設(shè)計為互斥的關(guān)系。也就是說，當(dāng) JavaScript 引擎執(zhí)行時，GUI 線程會被掛起。

以網(wǎng)易云課堂官網(wǎng)為例，我們來看看網(wǎng)頁加載流程。

（1）當(dāng)我們打開官網(wǎng)的時候，瀏覽器會從服務(wù)器中獲取到 HTML 內(nèi)容。

（2）瀏覽器獲取到 HTML 內(nèi)容后，就開始從上到下解析 HTML 的元素。

（3）<head>元素內(nèi)容會先被解析，此時瀏覽器還沒開始渲染頁面。

我們看到<head>元素里有用于描述頁面元數(shù)據(jù)的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時瀏覽器會去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過src屬性指向外部資源。

（4）當(dāng)瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本。

（5）當(dāng) JavaScript 腳本下載完成后，瀏覽器的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎。當(dāng)腳本執(zhí)行完成后，控制權(quán)會交回給渲染引擎，渲染引擎繼續(xù)往下解析 HTML 頁面。

（6）此時<body>元素內(nèi)容開始被解析，瀏覽器開始渲染頁面。

在這個過程中，我們看到<head>中放置的<script>元素會阻塞頁面的渲染過程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁面。

到這里，我們就明白了：如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網(wǎng)頁長時間失去響應(yīng)，瀏覽器就會呈現(xiàn)“假死”狀態(tài)，用戶體驗會變得很糟糕。

因此，對于對性能要求較高、需要快速將內(nèi)容呈現(xiàn)給用戶的網(wǎng)頁，常常會將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁面得以迅速展示。我們還可以使用defer/async/preload等屬性來標(biāo)記<script>標(biāo)簽，來控制 JavaScript 的加載順序。

百度首頁

三、DOM 解析

對于百度這樣的搜索引擎來說，必須要在最短的時間內(nèi)提供到可用的服務(wù)給用戶，其中就包括搜索框的顯示及可交互，除此之外的內(nèi)容優(yōu)先級會相對較低。

瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規(guī)則樹，它們結(jié)合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在<head>里，可用來避免瀏覽器渲染的重復(fù)計算。

二、HTML 與 DOM 有什么不同

我們知道<p>是 HTML 元素，但又常常將<p>這樣一個元素稱為 DOM 節(jié)點，那么 HTML 和 DOM 到底有什么不一樣呢？

根據(jù) MDN 官方描述：文檔對象模型（DOM）是 HTML 和 XML 文檔的編程接口。

也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網(wǎng)頁的結(jié)構(gòu)并渲染，那么使用 DOM 則可以獲取網(wǎng)頁的結(jié)構(gòu)并進(jìn)行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現(xiàn)頁面的動態(tài)變化，以及用戶的交互操作。

在開發(fā)過程中，常常用對象的方式來描述某一類事物，用特定的結(jié)構(gòu)集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個由 DOM 節(jié)點以及包含屬性和方法的相關(guān)對象組成的結(jié)構(gòu)集合。

三、DOM 解析

我們常見的 HTML 元素，在瀏覽器中會被解析成節(jié)點。比如下面這樣的 HTML 內(nèi)容：

<html>
    <head>
        <title>標(biāo)題</title>
    </head>
    <body>
        <a href='xx.com'>我的超鏈接</a>
        <h1>頁面第一標(biāo)題</h1>
    </body>
</html>

打開控制臺 Elements 面板，可以看到這樣的 HTML 結(jié)構(gòu)，如下圖所示：

在瀏覽器中，上面的 HTML 會被解析成這樣的 DOM 樹，如下圖所示：

我們都知道，對于樹狀結(jié)構(gòu)來說，常常使用parent/child/sibling等方式來描述各個節(jié)點之間的關(guān)系，對于 DOM 樹也不例外。

舉個例子，我們常常會對頁面功能進(jìn)行抽象，并封裝成組件。但不管怎么進(jìn)行整理，頁面最終依然是基于 DOM 的樹狀結(jié)構(gòu)，因此組件也是呈樹狀結(jié)構(gòu)，組件間的關(guān)系也同樣可以使用parent/child/sibling這樣的方式來描述。同時，現(xiàn)在大多數(shù)應(yīng)用程序同樣以root為根節(jié)點展開，我們進(jìn)行狀態(tài)管理、數(shù)據(jù)管理也常常會呈現(xiàn)出樹狀結(jié)構(gòu)。

四、事件委托

我們知道，瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標(biāo)階段、事件冒泡階段。其中，基于事件冒泡機(jī)制，我們可以實現(xiàn)將子元素的事件委托給父級元素來進(jìn)行處理，這便是事件委托。

如果我們在每個元素上都進(jìn)行監(jiān)聽的話，則需要綁定三個事件;(假設(shè)頁面上有a,b,c三個兄弟節(jié)點)

function clickEventFunction(e) {
  console.log(e.target === this); // logs `true`
  // 這里可以用 this 獲取當(dāng)前元素
}
// 元素a,b,c綁定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);

使用事件委托，可以通過將事件添加到它們的父節(jié)點，而將事件委托給父節(jié)點來觸發(fā)處理函數(shù)：

function clickEventFunction(event) {
  console.log(e.target === this); // logs `false`
  // 獲取被點擊的元素
  const eventTarget = event.target;
  // 檢查源元素`event.target`是否符合預(yù)期
  // 此處控制廣告面板的展示內(nèi)容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);

這樣能解決什么問題呢？

• 綁定子元素會綁定很多次的事件，而綁定父元素只需要一次綁定。
• 將事件委托給父節(jié)點，這樣我們對子元素的增加和刪除、移動等，都不需要重新進(jìn)行事件綁定。

常見的使用方式主要是上述這種列表結(jié)構(gòu)，每個選項都可以進(jìn)行編輯、刪除、添加標(biāo)簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項，都不需要手動去綁定和移除事件。

如果在列表數(shù)量內(nèi)容較大的時候，對成千上萬節(jié)點進(jìn)行事件監(jiān)聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對元素的監(jiān)聽，也是在前端性能優(yōu)化中比較簡單和基礎(chǔ)的一個做法。

注意:

0. 如果我們直接在document.body上進(jìn)行事件委托，可能會帶來額外的問題;
1. 由于瀏覽器在進(jìn)行頁面渲染的時候會有合成的步驟，合成的過程會先將頁面分成不同的合成層，而用戶與瀏覽器進(jìn)行交互的時候需要接收事件。此時，瀏覽器會將頁面上具有事件處理程序的區(qū)域進(jìn)行標(biāo)記，被標(biāo)記的區(qū)域會與主線程進(jìn)行通信。
2. 如果我們document.body上被綁定了事件，這時候整個頁面都會被標(biāo)記;
3. 即使我們的頁面不關(guān)心某些部分的用戶交互，合成器線程也必須與主線程進(jìn)行通信，并在每次事件發(fā)生時進(jìn)行等待。這種情況，我們可以使用passive: true選項來解決

五、總結(jié)

我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁面的加載過程的，同時還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關(guān)概念。

創(chuàng)意ui設(shè)計工作室~做程序員用得起的ui設(shè)計