整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
为了不再被疑似涉嫌低俗，我只能给大家提供这种图片了，耐得住寂寞才能学有所成！吸引人的东西未必珍贵。
昨天我们学习了《HTML表单元素初识1——零基础自学网页制作》（目录在结尾），大家通过学习对HTML页面中的表单元素的基本写法已经非常熟悉了。同时也学会了通过变换<input/>标签中的type属性的值为表单赋予不同的功能，例如输入文本和建立多选表单。期间，对name与value这两个属性的作用与特点进行了阐释。今天我们继续学习新的表单内容。
建立单选表单：单选表单把<input/>标签的type属性修改为"radio"（收音机），为什么单选表单使用"收音机"这个词呢？其实道理很简单，收音机调频旋钮是对应角度对应相应调频，不可能一个角度对应两个调频，所以选这个就不能选其他的表单中的type属性使用"radio"这个词表示，是不是很形象。
示例代码如下：
<form>
最高学历：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>硕士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>因为描写的是最高学历，一般人最高学历只有一个，不可能又是学士又是博士，因此使用单选表单。
向服务器提交时，name叫做"education"（教育），value对应不同层次。
页面效果如下：
大家可以点点试试，每次只能有一个被选中。如图：
综合练习：到这为止，我们把之前零散的代码拼凑一下看看效果吧！
<!DOCTYPE HTML>
<html>
<head>
<title>表单 </title>
</head>
<body>
<form>
会员名称：
<input type = "text" placeholder = "请输入英文或汉语拼音" name="memberName"/><br>
会员密码：
<input type = "text" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br>
确认密码：
<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
<hr>
<form>
兴趣爱好：
<br>
<input type = "checkbox" name = "hobby" value = "reading"/>读书
<input type = "checkbox" name = "hobby" value = "film"/>电影
<input type = "checkbox" name = "hobby" value = "painting"/>绘画
<input type = "checkbox" name = "hobby" value = "music"/>音乐
<br>
最高学历：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>硕士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>
</body>
</html>页面效果如下：
密码输入：我们在使用上述表单输入密码时发现，密码时实时显示在输入框中，这一点是不安全的，如图：
如何让密码隐藏呢？其实看过上一篇中type属性列表的小伙伴肯定猜到了，把type从"text"改为password。示例代码如下：
会员密码：
<input type = "password" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br>
确认密码：
<input type = "password" name="confirmPassWord"/><br>页面效果如下：
上传文件：使用type="file"可以上传文件！
示例代码如下：写在"submit"的上面即可。
<input type = "file"/><br><input type = "submit" value = "submit"/>页面效果如下：
点击"浏览"看下效果：
神奇！
使用图片制作按钮：将type="image"即可，代码如下：
<input type = "image" src = "img/示例图片/submit.jpg"/><br>页面效果如下：用一个src导入图片即可。
示例图片：路径自行设置即可！
为表单设置一个重置按钮：如果用户打算重置表单内容后从新填写，我们可以给他这样一个按钮：
<input type="reset" /><br>页面如图所示：
大家要注意的是这个"重置"按钮的作用范围仅仅是它所在的<form></form>标签之间！
举个例子，如图：
下面我们点击"重置"后效果如下：
form1中的内容没有被清空，"重置"按钮所在的form2内容被清空了！
type属性值讲解我们到此结束了，hidden值这里先不给大家介绍，以后有机会再细说。
button值以后在JavaScript部分还会细说，这里也先略过。
除了<input/>外，还有其他一些标签，例如<select>或<textarea>等有趣且实用的标签，我们明天再学习吧！
今天的内容先到这里。希望大家看完之后可以写写代码进行实操。代码这种东西即使再简单，写过和没写过的体会也是不一样的。这个部分的代码使用"文本编辑器"就可以实践。具体操作请详见《》。
碎片化的知识其实对人并没有多大作用，但是我们的时间在现代化的生活节奏中被撕地越来越碎，因此我希望大家可以利用碎片时间来学习完整的知识，所以，以短篇的形式，每天20分钟左右，通过积少成多的办法为大家提供零基础页面制作的教程体系是我的主要目的。希望大家学有所成！
喜欢我的教程的小伙伴请关注我，点赞也会让我充满动力！
喜欢的小伙伴请关注和转发，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
言
目前，教学、教研各种内容线上沉淀、展示丰富多彩，但线上内容“线下化”能力不足或过分依赖人力，比如，线上练习题组卷后以PDF形式分发给学生，家长希望将考试、练习题目打印后，学生带到学校去做（高中生使用手机等电子设备的时间有限），线上各类分析报告以PDF形式分享给学生/家长等。
从业务方面看，不同业务线的多个业务场景都有输出PDF的诉求，如果各业务线自己设计、实现符合自身业务场景的具体方案，除调研、开发工作量较大之外，还会有重复调研，踩坑的情况。
从技术角度看，线上内容转PDF的内容源头来自于H5富文本内容，业界内以此为基础的PDF生成方案多种多样，也各有优劣，比如：
方案对比-表格-1
因此，我们综合了各种PDF生成方案并总结了在探索讲义生成PDF过程中的经验，抽象出了一套通用的，可复用的能力供各业务线快速利用，基本方案和优劣如下：
最终方案-表格-2
目 标
旨在提供一套以H5为载体的PDF通用生成方案，这套方案有如下特点：
这套方案可分为两个核心部分，页面展示侧 - Medusa，PDF生成侧 - Hydra
页面展示侧 - Medusa
我们页面展示侧的通用能力——Medusa，是基于Paged.js的二次封装，并以NPM包形式提供给业务方使用。Medusa可对任何HTML进行分页、并根据配置添加页眉、页脚等，最终将处理后的HTML渲染到页面中。Medusa封装并简化了对PDF格式的配置，可覆盖绝大多数业务场景，使得各业务场景将更多精力投入其自身业务逻辑的开发。
之所以选择Pagedjs为基础开发我们自己的SDK，是因为它是目前我们能找到的唯一开源的、具有HTML内容分页，样式处理的前端库，同时我们也在讲义中经过了长期的摸索与沉淀。
接下来将详细介绍Paged.js原理、Medusa支持的功能与使用方法。
一 Paged.js是如何工作的
Paged.js包含了 3 个大模块
这里将主要介绍 Previewer 和 Chunker，因为我们的二次开发和维护不涉及到Polisher。
Previewer
Previewer 的工作非常简单，但我们会主要利用它封装我们的Medusa，初始化一个Previewer对象，Previewer初始化了Chunker和Polisher对象：
Medusa-代码-1
再调用Previewer的preview()方法，preview()方法做了两件事：
Medusa-代码-2
当chunker.flow结束，即可在浏览器看到整个页面处理完之后的样子。
Chunker
首先，Chunker解析、预处理需要分页的HTML，为其添加一些必要的属性
Medusa-代码-3
然后创建容纳所有页(pages)的容器，并挂载到renderTo容器下(默认Body)，以备组织后续的所有页：
Medusa-代码-4
接着，chunker创建了一个page模版，以便增加页面使用：
Medusa-代码-5
其中，TEMPLATE是Pagedjs内部创建页面时所使用的基础模版。
Medusa-代码-6
接下来，chunker进入了渲染+分页过程（这个过程我们不会在二次开发中做修改，但需要了解其基本思路以便在出问题时能有解决思路），这个过程在循环一个迭代器（*layout），迭代器一直在做3件事：
原则：
寻找overflow时会将尽可能多的内容节点插入内容区域，这里，“尽可能多”分为几种情况，比如：
步骤：
Pagedjs遵循了如下步骤去寻找overflow：
两个前置条件：
i. 从需要处理的内容第一个节点开始，判断是否 node.left >= contentArea.right || node.top >= contentArea.bottom
Medusa-代码-7
ii.如果不满足，则判断 node.right <= contentArea.right && node.bottom <= contentArea.bottom
Medusa-代码-8
iii.如果不满足，那说明有子节点overflow了，则继续深入其子节点查找即可。
3.使用模版添加新的页面，并从BreakToken处继续上述动作。
二 Medusa支持的功能及使用方法
基于Paged.js，Medusa支持了如下功能，并为业务方提供了更加简洁、定制化的配置。
下方是调用Medusa的代码示例：
Medusa-代码-9
1.1 动态页面分页能力
Medusa核心功能，可将连续的HTML页面转化成一页页PDF样式的HTML。
1.2 单页模版配置 -> 生成能力
通过Grid布局，Paged.js将一个单页模版分为多个区域，整体分为2个大的部分：
业务方通过简单的配置，即可还原UI设计稿中的PDF样式，例子如下图：
1.2.1 base
页面基础配置是对每页的。支持纸型或页面宽高、内容区域margin、padding、背景及水印的设置。
在封装Medusa时，Medusa将读取传入的页面模版配置、静态页内容配置，并将样式上的配置解析并转化为Previewer可理解的样式内容，比如页面宽高的设置：
Medusa-代码-10
将被转化为：
Medusa-代码-11
1.2.2 surround
2. 目前支持3种类型的surround item:
example:
Medusa-代码-12
1.3 前/后置静态页面
业务方可通过如下方式配置静态页面的具体内容：
Medusa-代码-13
其中，传入的React JSX Element将会被这样处理：
Medusa-代码-14
处理完成后，将HTML String拼接到页面模版中，再插入分页后内容的前后。
PDF生成侧 - Hydra：
页面展示侧为PDF生成做好了页面的准备，对于PDF生成侧，需要做的工作就更纯粹了，业务方除了请求生成PDF，定期检查PDF生成的进度，无需做任何额外工作。
1.整体流程：
PDF生成是CPU和内存密集型的，由于页面内容的不确定性，也意味着页面渲染时间与生成PDF的时间都是不确定的，因此整体PDF生成的链路被设计成是异步的，如下图：
整体流程上，业务方在请求生成PDF时，会先在后端做一条记录，后端再将任务发送给Node服务，即Hydra；
在生成PDF时， 第 1 步是做页面上的准备，一个生成任务可能有多个URL页面需要生成PDF，所以我们预先启动对应URL数量的PPTR Page，页面都启动完成后，进入下一步；
第 2 步：渲染页面，这个过程中，如果请求是包含多个URL的，这些页面会同步渲染，在所有页面渲染完成后，进入下一步。
第 2.5 步，如果是需要生成连续页码的一整个PDF，还会做额外的一个动作：页码矫正，通过页码矫正，可以将同步渲染的每个页面，按照其之前页面的页码数修正，以保证整体PDF的页码的连贯。
第 3 步，通过PPTR Page的能力将页面转换为PDF buffer，如有必要，再将生成的PDF buffer拼接到一起生成一整个PDF，或者将每个PDF buffer都生成一个PDF，压缩成zip文件。
第 4 步，文件上传OSS，最终返回OSS CDN链接。
2.请求生成PDF：
业务侧请求将对应页面生成PDF的时，只需传入如下字段：
Hydra-代码-1
3.PDF生成过程：
正如在整体流程中所述，PDF生成侧，我们借助 PPTR 的能力打开页面并生成PDF流。
在页面调用 Medusa 分页、组装能力时，所有内容分页组装完成后会向body中插入了一个额外的DOM以标识该页面处理完成：
Hydra-代码-2
这是为了 Hydra 感知页面渲染完成所做的准备，当生成服务的 PPTR 等到该DOM出现时，则表示页面成功渲染并处理完成了：
Hydra-代码-3
此后，在上面已经提到过，对于需要将多个页面生成的PDF拼接成一个PDF的情况，在生成PDF之前需要做一个重要的动作，即页码矫正，原因如下：
并且我们不希望页面的处理是串行的，因为串行势必导致速度较慢，生成时间长。
这个问题的解决方案如下：
1. 对于每个页面都启用一个page，并同时处理
2. 每个页面处理完成后（pdfLastDOM出现），通过Page.$eval()来统计页数并记录:
Hydra-代码-4
3. 计算出页面中分页之后每一个页面的起始页码，以及所有页面的页码总和
4. 再修改页码容器样式的 counterReset 值即可，其后续页码可自递增。
Hydra-代码-5
5. 之后，再通过 Medusa 在页面window对象中Polyfill的相关配置，比如需要生成的PDF的单页宽、高以生成PDF流。
Hydra-代码-6
6. 最后如有必要，通过pdf-lib拼接这些 pdfBuffer 即可。
Hydra-代码-7
7. PDF生成完成后，上传OSS并返回URL链接
4.性能、稳定性保证：
在整体方案落地前，我们对服务进行了多次性能测试：
以下载题目为例，在4个容器，每个容器 3C 12G 的配置下的并行处理能力如下：
对于 20 道题目，每个PDF生成任务在 15 页左右，平均 1 分钟内能完成 280 个任务的处理。
对于 40 道题目，每个PDF生成任务在 30 页左右，平均 1 分钟内能完成 105 个任务的处理。
对于 60 到题目，每个PDF生成任务在 40 页左右，平均 1 分钟内能完成 54 个任务的处理。
同时，根据 Hydra 服务的整体的处理能力，后端通过任务队列的形式帮助我们保证服务不被瞬间的突刺流量击垮。
已接入/正在接入的相关业务线及场景：
目前，公司有 5 大业务线，8 个场景已经完全接入我们的能力用于 H5 转 PDF，如下是错题本、内容资料库接入后生成的PDF样例：
错题本：
内容资料库试卷：
未来展望
目前整体的PDF生成方案已经能够满足大多数场景和内容，但依然有可改进空间。
HTML的流式布局要求我们必须手动的对内容分页，才能添加页眉，页脚等（即Mdusa做的工作），正因为如此，在处理复杂的内容时，可能会出现一些问题：比如，遇到复杂表格时，由于表格可能会有多种多样的行、列合并，同时表格单元格内的内容也可以多种多样，在分页过程中，Medusa内部的PagedJS并不能完美的处理对于长、且复杂的表格的分割，因此可能遇到分割后表格单元格缺失、错乱或宽高错误的问题，这些问题在讲义中体现较明显。
我们仍在持续关注与研究复杂DOM内容的分割问题，会尝试加以优化和改进PagedJS的能力，同时，我们也以另外一种思路设计了自己的DOM分页器方案，但经过评估，由于实现比较复杂，成本较高，暂时没有投入开发资源。
不过，我们相信，未来我们一定能以更完美的方式分割DOM以生成更高质量的PDF。
作者:高源、陈欣博
来源:微信公众号:高途技术
出处:https://mp.weixin.qq.com/s/c_N7jdNklrNFKR_Cub2Tgg
延伸提问 怎样处理 移动端 1px 被 渲染成 2px 问题
局部处理
全局处理
1 禁⽌使⽤ iframe （阻塞⽗⽂档 onload 事件）
2 禁⽌使⽤ gif 图⽚实现 loading 效果（降低 CPU 消耗，提升渲染性能）
3 使⽤ CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）
4 对于⼀些⼩图标，可以使⽤base64位编码，以减少⽹络请求。但不建议⼤图使⽤，⽐较耗 费 CPU
⼩图标优势在于 (减少 HTTP 请求 /避免⽂件跨域 /修改及时⽣效 )
5 ⻚⾯头部的会阻塞⻚⾯（因为 Renderer进程中 JS 线程和渲染线程是互斥的）
6 ⻚⾯中空的 href 和 src 会阻塞⻚⾯其他资源的加载 (阻塞下载进程)
7 ⽹⻚ gzip ， CDN 托管， data 缓存 ，图⽚服务器
8 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端⽤变量保存AJAX请求结 果，每次操作本地变量，不⽤请求，减少请求次数
9 ⽤ innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能
10 当需要设置的样式很多时设置 className ⽽不是直接操作 style
11 少⽤全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作
12 图⽚预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
13 对普通的⽹站有⼀个统⼀的思路，就是尽量向前端优化、减少数据库操作、减少磁盘 IO
IE : trident 内核
Firefox ： gecko 内核
<head lang=”en”>
*请认真填写需求信息，我们会在24小时内与您取得联系。
