天下午举行的上海市政府新闻发布会上传出消息，今天，上海“一网通办”总门户、“随申办”移动端及健康云平台同步上线了本市“解除医学措施查询系统”和“企业复工人员网上登记系统”。通过“企业复工人员网上登记系统”，可以为各企业提供复工人员信息的在线填报服务，企业也可指定填报人员在线进行填报，从而全面掌握各企业复工人员动态健康信息，进一步加强各区域对复工企业人员的属地化管理，为各企业的内部防控工作有效开展提供支撑，提升企业内部防控工作水平。

市大数据中心主任朱宗尧介绍，这一系统的填报主体是企业，填报渠道为PC端和移动端。法人用户可以使用上海CA法人“一证通”登录“一网通办”总门户或“随申办”移动端，也可登录健康云平台进行填报。为帮助企业落实疫情防控主体责任，便于企业了解返岗人员健康信息，健全企业与所在地区疫情联防联控、群防群治机制，本市所有计划复工企业，都要在“企业复工人员网上登记系统”填报，并作为企业复工备案核查的条件。已经复工复产的企业也要填报，并及时填报变化情况。

依托本市大数据资源平台，“企业复工人员网上登记系统”对接健康云平台数据，通过数据赋能，提供员工返沪日期、员工是否为风险人员信息等，转变表格填报方式，实现了大部分填写要素项的自动预填，实现一次填报、多次复用，努力使每一家企业及其员工从填表转变为补表、审表，提高了填报效率。特别是对于一些用工人员较多的企业，开发了二维码，员工可通过扫码，由系统自动采集信息、自动汇总上报，最大限度降低企业填报负担，为企业加强疫情防控，合理安排复工复产提供支撑。

这样一个登记系统，企业和员工究竟要如何使用呢？别急，我们整理了一份操作指南，“手把手”教你使用：

一、通过“一网通办”总门户PC端网站在线进行填报

（一）登录总门户后选择在线填报入口

【企业用户】

企业填报人员使用CA法人“一证通”登录“一网通办”总门户PC端网站（http://zwdt.sh.gov.cn），通过以下四种方式进入“企业复工人员网上登记系统”进行填报。

1.进入首页“一网通办”新冠肺炎防控专栏，通过选择“服务企业”版块的“企业复工人员网上登记”服务入口进行填报（如下图）。

2.点击首页右上角的企业名称，进入企业专属网页，通过选择“企业复工人员网上登记”的服务入口进行填报。

3.通过首页“智能推荐”版块的“企业复工人员网上登记”服务入口进行填报。

4.通过在首页搜索框内输入“企业复工人员网上登记”的关键字进行智能检索，在检索结果中选择快捷服务入口进行填报。

【个人用户】

“企业复工人员网上登记系统”目前同步提供了支持个人用户的在线填报，企业的法定代表人可作为企业填报人员，通过个人实名用户登录“一网通办”总门户PC端网站后进入“企业复工人员网上登记系统”进行填报。

（二）通过电子表单在线填报复工信息

为加强各企业防控主体责任落实，各企业应如实填报人员复工信息，以保障系统采集正确、属实的数据，确保各区域的属地化防控工作高效开展。为最大限度减少各企业所需填写的信息，企业复工人员网上登记系统对接健康云平台数据，提供员工返沪日期、员工是否为风险人员信息，为企业加强疫情防控，合理安排复工复产提供支撑。

1.填写基本信息

企业使用CA法人“一证通”登录后，系统会将“企业名称、社会信用代码、联系人、联系方式、生产经营地址”等企业基本信息项进行自动预填。

【企业基本信息说明】

●“生产经营地址”信息将由系统默认自动预填各企业的注册登记地址，如实际经营地址与注册登记地址不同的企业可进行修改。如企业在本市范围多个行政区内拥有多个不同的生产经营地址，如开设连锁店、分店等等，可通过添加其他经营地址进行补充。拥有多个生产经营地址的企业应如实填报其他生产经营地址信息，以确保对应所属区域的属地化防控工作高效有序开展。

●“计划或实际复工时间”需企业根据复工情况如实填报，针对已复工的企业需填写实际复工的时间，针对未复工的企业需填写计划复工的时间。

2.填写人员信息

系统将根据后台相关数据，对企业名下的员工清单进行初始化，企业可根据实际情况对人员清单进行调整，对于隶属于本企业下但未在本企业缴纳社保的人员，如签署临时用工合同或在外省市缴纳社保的人员，可选择“添加员工”按钮增加相关人员。

【企业人员信息说明】

人员信息包括“姓名、身份证号、居住地址、是否已复工、返沪日期、计划或实际复工日期、所属经营地”等人员信息项。其中，姓名、身份证号、居住地址、所属经营地（下拉选择）等信息将由系统根据后台数据自动进行预填。企业填报人员可点击“修改”按钮对预填信息进行修改，并同时补全剩余复工信息。

●“是否已复工”代表该人员目前是否已经复工，针对已复工的人员请在“是否已复工”一栏选择“是”，并在“计划或实际复工日期”一栏选择实际复工日期，针对未复工的人员请在“是否已复工”一栏选择“否”，并在“计划或实际复工日期”一栏选择计划复工日期。

●“返沪日期”代表该人员的抵沪日期，通过对接健康云平台数据，自动填充提供员工返沪日期。针对目前暂未返沪的人员，请留白“返沪日期”一栏，无需填写日期，待人员明确返沪日期后及时进行更新。

●“所属经营地”代表该员工具体工作所在地，如企业添加了其他经营地，则企业人员可在“所属经营地”一栏可以下拉进行选择，将企业人员与对应的生产经营地址进行关联。

3.确认人员信息

企业填报人员应如实进行填报并逐条确认各员工的相关复工信息，同时，为方便企业填报，系统提供了批量确认的功能。企业填报人员可选择当前页面的多条人员复工信息进行批量确认。

注：仅当企业填报人员完成确认后，各企业人员复工信息方可生效，作为有效填报的复工信息。

4.更新人员信息

当人员复工信息发生变化后，企业填报人员应第一时间对系统内的人员信息进行修改更新，点击“修改”按钮即可对各人员复工信息进行修改。

5.导出人员信息

为方便企业填报人员管理本企业的人员信息，系统提供了人员复工信息的批量导出功能，供企业查看统计。

注：请企业填报人员妥善保管导出的本企业人员批量复工信息。

6.检索人员信息

系统提供了快速检索功能，方便企业查找人员信息，企业填报人员可在搜索栏内输入人员姓名的关键字并点击“查找”按钮进行快速检索。

7.删除人员信息

系统自动预填的企业名下人员信息仅供企业填报人员参考，企业填报人员可通过本企业人员的实际情况，对不符合的人员信息进行删除。选中对应需要删除的人员信息，点击“删除”按钮即可删除。

（三）通过上传模板批量填报复工信息（仅支持PC端填报）

【批量上传导入】

针对名下员工较多的企业，系统提供了通过上传模板批量填写复工信息的功能。企业填报人员可点击“下载申报模板”按钮下载统一格式的模板，按格式要求批量补全人员复工信息，并点击“上传人员信息”按钮将模板上传，系统将自动导入模板内的人员信息，企业填报人员可对导入的人员信息进行确认并修改。

【批量上传修改】

当人员复工信息发生变化后，企业填报人员可重新下载系统内先前批量上传的人员复工信息模板并进行修改，修改后重新提交上传更新。

二、通过“随申办”移动端各渠道入口在线进行填报（目前已于“随申办”APP上线，后续将于“随申办”其他各渠道同步上线）

【选择入口】

企业填报人员以个人实名用户登录“随申办”移动端各渠道，通过以下三种方式进入移动端“企业复工人员网上登记系统”进行填报。

1.进入“我”或“随申办”频道，通过选择“一网通办”新冠肺炎防控专栏“服务企业”版块的“企业复工人员网上登记”服务入口进行填报。

2.进入“随申办”频道，通过在热门服务中选择“企业复工人员网上登记”的服务入口进行填报。

3.通过在搜索框内输入“企业复工人员网上登记”的关键字进行智能检索，在检索结果中选择快捷服务入口进行填报。

【填报要求】

“随申办”移动端在线填报要求同PC端，详见PC端部分。

三、通过“随申办”移动端扫描二维码进行在线填报（推荐名下员工较多的企业通过该方式进行填报）

为最大限度减轻企业填报人员的负担，系统提供了“企业员工扫码填报”的方式，方便企业进行填报。由企业填报人员通过进入“一网通办”总门户PC端或“随申办”移动端的“企业复工人员网上登记系统”生成并下载填报二维码，由各企业员工实名登录“一网通办”移动端“随申办”各渠道，通过扫描所属企业的填报二维码进行本人的复工信息填报，提交后由企业填报人员负责统一进行核实确认。

注：“随申办”移动端各渠道包括APP、微信小程序及支付宝小程序。其中，“随申办”APP（即“随申办”市民云APP）可在IOS或安卓的各大应用商店下载，“随申办”微信或支付宝小程序可在微信或支付宝端内通过搜索“随申办”进行添加。

（一）通过系统生成填报二维码

企业填报人员通过登录“一网通办”总门户PC端或“随申办”移动端的企业复工人员网上登记系统，点击“下载员工填报二维码”按钮，生成各企业唯一的填报二维码，各企业可通过内部渠道将二维码分发给各企业人员。

（二）通过移动端扫码进行填报

由各企业员工通过登录移动端“随申办”APP、“随申办”微信小程序或“随申办”支付宝小程序，通过以下三种方式选择“企业复工人员扫码填报”服务，通过扫描系统生成的填报二维码进行本人填报。

1.进入“我”或“随申办”频道，通过选择“一网通办”新冠肺炎防控专栏“服务个人”版块的“企业复工人员扫码填报”服务入口进行填报。

2.进入“随申办”频道，通过在热门服务中选择“企业复工人员扫码填报”的服务入口进行填报。

3.通过在搜索框内输入“企业复工人员扫码填报”的关键字进行智能检索，在检索结果中选择快捷服务入口进行填报。

（三）填写本人的企业复工信息

进入“企业复工人员扫码填报”服务后，通过扫描系统生成的填报二维码进行本人填报，“随申办”移动端的本人填报要求与PC端企业填报人员的填报要求相同。

【企业人员信息说明】

人员信息包括“姓名、身份证号、居住地址、是否已复工、返沪日期、计划或实际复工日期、所属经营地”等人员信息项。其中，姓名、身份证号、居住地址、所属经营地（下拉选择）等信息将由系统自动进行预填。企业员工可对预填信息进行修改，并同时补全剩余复工信息，确认无误后进行提交。

为最大限度减少各企业所需填写的信息，企业复工人员网上登记系统对接健康云平台数据，提供员工返沪日期、员工是否为风险人员信息，为企业加强疫情防控，合理安排复工复产提供支撑。

●“返沪日期”代表该人员的抵沪日期，请企业填报人员根据员工的实际返沪日期填写。通过对接健康云平台数据，自动填充提供员工返沪日期。针对目前暂未返沪的人员，请留白“返沪日期”一栏，无需填写日期，待人员明确返沪日期后及时进行更新。

●“所属经营地”代表该员工具体工作所在地，如企业填报人员在PC端添加了多个经营地，则企业人员可在“所属经营地”一栏可以下拉进行选择，与本人所属的生产经营地址进行关联。

（四）对企业人员信息进行确认

企业人员完成本人填报提交后，各企业人员的复工信息将同步汇总至所属企业名下，企业填报人员在“一网通办”总门户PC端或“随申办”移动端登录后可进入企业复工人员网上登记系统进行逐一核实确认，与实际情况不符的，可进行修改。

（五）及时并动态更新复工信息

企业员工完成填报后，如本人复工发生变化，应及时联络所属企业填报人员获取最新填报二维码，通过“随申办”各渠道的“企业复工人员扫码填报”服务及时并动态更新本人复工信息，系统默认自动预填企业员工本人首次填报的所有复工信息，企业人员根据本人实际情况进行修改。

四、通过健康云平台入口在线进行填报

企业填报人员可通过登录健康云平台，进入“上海新型肺炎公共服务平台”“来沪人员健康登记”服务栏目，选择“企业复工人员网上登记系统”，点击“企业复工登记管理系统”进行在线填报（如下图）。

此外，市大数据中心提醒，如遇到操作困难，用户还可拨打“一网通办”技术支持热线021-38919099进行进一步咨询（服务时间：9:00-17:00）。

栏目主编：张骏 文字编辑：吴頔 图片编辑：项建英

家好，我是皮皮。

前言

对于前端来说，HTML 都是最基础的内容。

今天，我们来了解一下 HTML 和网页有什么关系，以及与 DOM 有什么不同。通过本讲内容，你将掌握浏览器是怎么处理 HTML 内容的，以及在这个过程中我们可以进行怎样的处理来提升网页的性能，从而提升用户的体验。

一、浏览器页面加载过程

不知你是否有过这样的体验：当打开某个浏览器的时候，发现一直在转圈，或者等了好长时间才打开页面……

此时的你，会选择关掉页面还是耐心等待呢？

这一现象，除了网络不稳定、网速过慢等原因，大多数都是由于页面设计不合理导致加载时间过长导致的。

我们都知道，页面是用 HTML/CSS/JavaScript 来编写的。

• HTML 的职责在于告知浏览器如何组织页面，以及搭建页面的基本结构；
• CSS 用来装饰 HTML，让我们的页面更好看；
• JavaScript 则可以丰富页面功能，使静态页面动起来。

HTML由一系列的元素组成，通常称为HTML元素。HTML 元素通常被用来定义一个网页结构，基本上所有网页都是这样的 HTML 结构：

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

其中：

• html元素是页面的根元素，它描述完整的网页；
• head元素包含了我们想包含在 HTML 页面中，但不希望显示在网页里的内容；
• body元素包含了我们访问页面时所有显示在页面上的内容，是用户最终能看到的内容;

HTML 中的元素特别多，其中还包括可用于 Web Components 的自定义元素。

前面我们提到页面 HTML 结构不合理可能会导致页面响应慢，这个过程很多时候体现在<script>和<style>元素的设计上，它们会影响页面加载过程中对 Javascript 和 CSS 代码的处理。

因此，如果想要提升页面的加载速度，就需要了解浏览器页面的加载过程是怎样的，从根本上来解决问题。

浏览器在加载页面的时候会用到 GUI 渲染线程和 JavaScript 引擎线程（更详细的浏览器加载和渲染机制将在第 7 讲中介绍）。其中，GUI 渲染线程负责渲染浏览器界面 HTML 元素，JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。

由于 JavaScript 在执行过程中还可能会改动界面结构和样式，因此它们之间被设计为互斥的关系。也就是说，当 JavaScript 引擎执行时，GUI 线程会被挂起。

以网易云课堂官网为例，我们来看看网页加载流程。

（1）当我们打开官网的时候，浏览器会从服务器中获取到 HTML 内容。

（2）浏览器获取到 HTML 内容后，就开始从上到下解析 HTML 的元素。

（3）<head>元素内容会先被解析，此时浏览器还没开始渲染页面。

我们看到<head>元素里有用于描述页面元数据的<meta>元素，还有一些<link>元素涉及外部资源（如图片、CSS 样式等），此时浏览器会去获取这些外部资源。除此之外，我们还能看到<head>元素中还包含着不少的<script>元素，这些<script>元素通过src属性指向外部资源。

（4）当浏览器解析到这里时（步骤 3），会暂停解析并下载 JavaScript 脚本。

（5）当 JavaScript 脚本下载完成后，浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后，控制权会交回给渲染引擎，渲染引擎继续往下解析 HTML 页面。

（6）此时<body>元素内容开始被解析，浏览器开始渲染页面。

在这个过程中，我们看到<head>中放置的<script>元素会阻塞页面的渲染过程：把 JavaScript 放在<head>里，意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面。

到这里，我们就明白了：如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，用户体验会变得很糟糕。

因此，对于对性能要求较高、需要快速将内容呈现给用户的网页，常常会将 JavaScript 脚本放在<body>的最后面。这样可以避免资源阻塞，页面得以迅速展示。我们还可以使用defer/async/preload等属性来标记<script>标签，来控制 JavaScript 的加载顺序。

百度首页

三、DOM 解析

对于百度这样的搜索引擎来说，必须要在最短的时间内提供到可用的服务给用户，其中就包括搜索框的显示及可交互，除此之外的内容优先级会相对较低。

浏览器在渲染页面的过程需要解析 HTML、CSS 以得到 DOM 树和 CSS 规则树，它们结合后才生成最终的渲染树并渲染。因此，我们还常常将 CSS 放在<head>里，可用来避免浏览器渲染的重复计算。

二、HTML 与 DOM 有什么不同

我们知道<p>是 HTML 元素，但又常常将<p>这样一个元素称为 DOM 节点，那么 HTML 和 DOM 到底有什么不一样呢？

根据 MDN 官方描述：文档对象模型（DOM）是 HTML 和 XML 文档的编程接口。

也就是说，DOM 是用来操作和描述 HTML 文档的接口。如果说浏览器用 HTML 来描述网页的结构并渲染，那么使用 DOM 则可以获取网页的结构并进行操作。一般来说，我们使用 JavaScript 来操作 DOM 接口，从而实现页面的动态变化，以及用户的交互操作。

在开发过程中，常常用对象的方式来描述某一类事物，用特定的结构集合来描述某些事物的集合。DOM 也一样，它将 HTML 文档解析成一个由 DOM 节点以及包含属性和方法的相关对象组成的结构集合。

三、DOM 解析

我们常见的 HTML 元素，在浏览器中会被解析成节点。比如下面这样的 HTML 内容：

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <a href='xx.com'>我的超链接</a>
        <h1>页面第一标题</h1>
    </body>
</html>

打开控制台 Elements 面板，可以看到这样的 HTML 结构，如下图所示：

在浏览器中，上面的 HTML 会被解析成这样的 DOM 树，如下图所示：

我们都知道，对于树状结构来说，常常使用parent/child/sibling等方式来描述各个节点之间的关系，对于 DOM 树也不例外。

举个例子，我们常常会对页面功能进行抽象，并封装成组件。但不管怎么进行整理，页面最终依然是基于 DOM 的树状结构，因此组件也是呈树状结构，组件间的关系也同样可以使用parent/child/sibling这样的方式来描述。同时，现在大多数应用程序同样以root为根节点展开，我们进行状态管理、数据管理也常常会呈现出树状结构。

四、事件委托

我们知道，浏览器中各个元素从页面中接收事件的顺序包括事件捕获阶段、目标阶段、事件冒泡阶段。其中，基于事件冒泡机制，我们可以实现将子元素的事件委托给父级元素来进行处理，这便是事件委托。

如果我们在每个元素上都进行监听的话，则需要绑定三个事件;(假设页面上有a,b,c三个兄弟节点)

function clickEventFunction(e) {
  console.log(e.target === this); // logs `true`
  // 这里可以用 this 获取当前元素
}
// 元素a,b,c绑定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);

使用事件委托，可以通过将事件添加到它们的父节点，而将事件委托给父节点来触发处理函数：

function clickEventFunction(event) {
  console.log(e.target === this); // logs `false`
  // 获取被点击的元素
  const eventTarget = event.target;
  // 检查源元素`event.target`是否符合预期
  // 此处控制广告面板的展示内容
}
// 元素1绑定
element1.addEventListener("click", clickEventFunction, false);

这样能解决什么问题呢？

• 绑定子元素会绑定很多次的事件，而绑定父元素只需要一次绑定。
• 将事件委托给父节点，这样我们对子元素的增加和删除、移动等，都不需要重新进行事件绑定。

常见的使用方式主要是上述这种列表结构，每个选项都可以进行编辑、删除、添加标签等功能，而把事件委托给父元素，不管我们新增、删除、更新选项，都不需要手动去绑定和移除事件。

如果在列表数量内容较大的时候，对成千上万节点进行事件监听，也是不小的性能消耗。使用事件委托的方式，我们可以大量减少浏览器对元素的监听，也是在前端性能优化中比较简单和基础的一个做法。

注意:

0. 如果我们直接在document.body上进行事件委托，可能会带来额外的问题;
1. 由于浏览器在进行页面渲染的时候会有合成的步骤，合成的过程会先将页面分成不同的合成层，而用户与浏览器进行交互的时候需要接收事件。此时，浏览器会将页面上具有事件处理程序的区域进行标记，被标记的区域会与主线程进行通信。
2. 如果我们document.body上被绑定了事件，这时候整个页面都会被标记;
3. 即使我们的页面不关心某些部分的用户交互，合成器线程也必须与主线程进行通信，并在每次事件发生时进行等待。这种情况，我们可以使用passive: true选项来解决

五、总结

我们了解了 HTML 的作用，以及它是如何影响浏览器中页面的加载过程的，同时还介绍了使用 DOM 接口来控制 HTML 的展示和功能逻辑。我们了解了DOM解析事件委托等相关概念。

创意ui设计工作室~做程序员用得起的ui设计