第一章 HTML
1. DOCTYPE有什么作用？区分严格、混杂模式有何意义？
<!DOCTYPE>声明位于文档最前面，告知浏览器的解析器用什么文档类型规范来解析这个文档。不存在或格式不对会导致文档以混杂模式呈现。意义：严格模式的排版和JS运行模式以该浏览器支持的最高标准运行，混杂模式下页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法正常工作（IE）。
2. 语义化的主要目的是什么？
可以让页面的内容结构化，便于浏览器解析和搜索引擎解析，提高代码的可维护度和可重用性。SEO是指和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息。爬虫依赖标签来确定上下文和各个关键字的权重。
3. HTML5有哪些新特性？
- 文档的类型声明不同
HTML5的文档声明相比传统HTML来说更为简便，有利于程序员快速阅读和开发。具体写法：<!DOCTYPE html>
- 新增语义化、结构化标签
传统HTML没有语义化、结构化标签，不方便阅读，不清楚哪里是网页头部、尾部。HTML5新增的语义化、结构化标签主要有：
| 网页或节的页眉/头部 | |
|---|---|
| 网页或节的页脚/尾部 | |
| 导航栏（一般集中放一些页面链接） | |
| 侧边栏 | |
| 网页中一段独立的“文章”，可独立阅读 | |
| 节，有主题的内容组（一般含有标题） | |
| 图片标题 | |
| 图片与图片标题的组合 | |
| 主内容 | |
| 时间 | |
| 视频 | |
| 选项列表 | |
| 包含 details 元素的标题 |
- 增强型表单，以便更好地控制与验证input
新增的input类型：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
新增表单属性（输入限制）：placehoder、required、pattern、autofocus、multiple、step、min/max、height/width
- 图像标签
新增
- 多媒体标签
新增
- 新增的一些功能性API
WebStorage本地存储，HTML5新增了两种客户端本地存储数据方法：
- localStorage：长期有效的数据存储。
- sessionStorage：只针对当前会话的数据存储。
地理定位，可使用getCurrentPosition()函数直接获取用户位置
WebSocket协议，能从客户端使用简单的语法推动消息到服务器，为客户端与服务端之间提供了一种全双工通信机制
requestAnimationFrame请求动画关键帧，把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般频率为每秒60帧
Drag 和 Drop拖放，抓取对象以后拖到另一个位置
【延伸考点】
- cookie、localStorage、sessionStorage区别？
cookie是服务器发给客户端的一种特殊认证信息，通常以文本的方式保存在客户端，始终在同源的http请求中携带（即使不需要），以供服务器验证当前浏览器用户身份，常见应用场景：验证用户身份、保存上次登录信息、统计浏览次数
sessionStorage和localStorage仅用于本地保存，不会自动把数据发给服务器
| 有期时间 | 作用域 | 存储大小 | 存储位置 | |
|---|---|---|---|---|
| cookie | 在过期时间前一直有效（即使浏览窗口器关闭） | domain本身以及domain下的所有子域名（跨域请求的 cookie在fetch时需要设置 withCredentials） | 不能超过4k | 浏览器端 |
| localStorage | 长期存储，浏览器窗口关闭数据不丢失（除非主动删除） | 所有同源窗口共享 | 虽有存储大小限制，但可达到5M或更大 | 浏览器端 |
| sessionStorage | 临时存储，当前浏览器窗口关闭后自动删除 | 不同浏览器窗口不共享 | 虽有存储大小限制，但可达到5M或更大 | 浏览器端 |
- WebSocket协议及实现原理？
HTTP协议有一个局限：通信只能由客户端发起，服务器端不能实时发送最新数据给客户端（具有被动性）
数据交互有两种模式：Push（推模式）、Pull（拉模式）
Push：客户端与服务端建立好网络长连接，服务器有相关数据，直接通过长连接通道推送到客户端
Pull：客户端主动向服务端发出请求，拉取相关数据
那怎么获取最新数据呢？ 传统有两种方式：轮询、长轮询
轮询：开启一个定时器，每隔一段时间调用Ajax请求一次数据
长轮询：本质也是轮询，不过是阻塞型（一直打电话，没收到就不挂电话），客户端发起连接后，如果没消息，就一直不返回Response给客户端，直到有消息才返回或超时。基于事件的触发，一个事件接一个事件。
而WebSocket协议只需要发送一次请求，只要服务器有最新数据就会自动发送给客户端，不用重复请求（类似天气预报，每当天气有变化则会自动更新最新天气状况）
WebSocket协议没有同源限制，客户端可与任意服务器通信，可用于解决跨域
实现原理：
WebSocket是一个应用层协议，必须依赖 HTTP 协议进行第一次握手 ，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 再无关联。WebSocket进行了HTTP握手 + 双工的TCP数据传输
协议以frame形式传输数据，会将一条消息分为几个frame，按照先后顺序传输。大数据可以分片传输，不用考虑到数据大小导致的长度标志位不足够的情况，可以边生成数据边传递消息，传输效率高
4. 常用的meta标签有哪些？
meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。
常用的meta标签：
（1）charset，用来描述HTML文档的编码类型
（2） keywords，页面关键词
（3）description，页面描述
（4）refresh，页面重定向和刷新
（5）viewport，适配移动端，可以控制视口的大小和比例
（6）搜索引擎索引方式
<meta charset="utf-8">
<meta name="keywords" content="关键词" />
<meta name="description" content="页面描述内容" />
<meta http-equiv="refresh" content="0;url=" /> //http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="robots" content="index,follow" />
5. 简述一下src和href的区别？
src ⽤于替换当前元素，href⽤于在当前⽂档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到⽂档内，例如 js 脚本，img 图⽚和 frame 等元素。 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图⽚和框架等元素也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加 那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使用link方式来加载css，而不是使⽤@import方式。
6. script标签中defer和async的区别
如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。
下图可以直观的看出三者之间的区别：
其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。
defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：
- async 属性： 给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。
- defer 属性： 给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。
7. 说一下 web worker
在 HTML 页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
如何创建 web worker：
若有收获，就点个赞吧
0 人点赞
