HTML相关
1.什么是DOCTYPE，有何作用？
DOCTYPE是浏览器的文档类型声明，它告诉浏览器使用什么HTML的版本去解析HTML，如果没有使用，那么浏览器会使用怪异模式（混杂模式）去解析CSS代码，否则则使用标准模式（严格模式）去对CSS代码进行解析。怪异模式下浏览器会使用自己的解析方式进行解析。而标准模式下则会使用W3C的标准。标准模式和怪异模式的区别主要有以下几点：
- CSS盒模型：标准模式下盒子的宽高等于内容的宽高，怪异模式下盒子的宽高等于内容的宽高+padding+border。
- 行内元素在垂直方向上的对齐方式（vertical-align）：标准模式下为基线（base）对齐，怪异模式下为底部（bottom）对齐。
- 标准模式下设置行内元素的宽高无效，怪异模式下可以设置行内元素的宽高。
- 标准模式下可以使用margin: 0 auto;设置元素的水平居中，在怪异模式下该设置无效。
行内元素：行内元素的宽高等于内容的宽高，对其设置宽高无效，多个行内元素共处一行，行内元素有span，a，i等。 块级元素：块级元素单独一行，可以对其设置宽高。块级元素有p，div，h1~h6，ul，ol等。 行内块元素：即有行内元素的特征也有块级元素的特征，宽高为内容的宽高，不单独一行，可以对其设置宽高。主要有input，img等。
2.HTML5的新特性
- 新增语义化标签：header，footer，nav，main，section等。
- 对多媒体的支持：img标签以及通过background-image设置背景图片，video标签，audio标签。
- 新增canvas和svg标签。
- 对WebSocket的支持，WebSocket是长连接的全双工通信协议，客户端与服务器端的通信开销小，速度快。
- 新增表单的input类型：date，datetime，color，email等。
- 新增拖拽drag的相关api，对拖拽提供支持。
- 新增WebWorker，相当于另起一个线程去执行js代码，使js代码的解析不会阻碍页面的渲染。
- 新增WebStorage：localstorage，sessionstorage。
- 地理定位，提供了获取地理定位的接口。
- history对象：pushState和ReplaceState（两个核心api）其次还有back，go，forword。
3.说说对HTML语义化的理解
HTML的语义化其实就是使用正确的标签去表示相应的内容，进而增强代码的可读性，在HTML5中也新增了header，footer，nav，section等语义化标签。同时HTML语义化也有利于进行搜索引擎优化（SEO）以及更好的支持各种终端，比如无障碍阅读和有声小说等。
4.iframe的作用以及优缺点
优点：iframe可以在一个网页中内嵌一个其他的网页，降低开发成本，增强网页的复用性。如果是在同源的条件下，网页可以与内嵌的网页之间进行通讯。同时，iframe是异步加载的，不会影响到网页的渲染。
缺点：爬虫程序可能无法获取到iframe所展示的内容，不利于搜索引擎优化。同时iframe会阻塞主页面的onload事件。
5.cookie，sessionStorage和localStorage的区别
| cookie | sessionStorage | localStorage | |
|---|---|---|---|
| 存储数据的大小 | 4kb左右 | 一般不会低于5MB | 一般不会低于5MB |
| 过期时间 | 可以对其进行自定义设置 | 当网页或选项卡关闭后失效 | 永久有效 |
| 是否会随着http进行发送 | 会 | 否 | 否 |
| 作用范围 | -任意窗口 | 当前窗口 | 任意窗口 |
| 由谁初始化 | 客户端或者服务器 | 客户端 | 客户端 |
总结：
cookie和sessiionStorage/localStorage的区别：
主要是用法上的区别，cookie一般是用于用户身份验证的，如果后端返回一个具有set-cookie的响应头，浏览器会自动设置cookie，将cookie保存在本地的硬盘中，之后在同一域名下发起http请求时浏览器会自动携带这个cookie的数据发送到服务端。而sessionStorage/localStorage是用于浏览器存储数据的。此外，cookie所存储的数据量比较小一般在4kb左右，而sessiionStorage/localStorage存储的数据量比较大，一般至少为5MB。
sessionStorage和localStorage的区别：
localStorage是持久化存储，会存储在本地的硬盘上。而sessionStorage不是持久化存储，当浏览器关闭或者标签页关闭就会失效，会存储在浏览器的内存中。所以localStorage的作用范围是所有窗口，而sessionStorage的作用范围只是在所打开的窗口。
6.cookie，session和token的区别和联系
三者都是为了进行用户身份验证的，cookie所存储的数据量比较小，一般为4kb左右，且cookie存储在用户浏览器本地硬盘中，安全性不高，当服务端设置set-cookie的http响应头的属性后，浏览器会自动设置cookie，并在每次请求中都加上所设置的cookie，不需要额外的操作。而session是存储在服务器端的（一般是redis），没有数据大小的限制，安全性比较高，其实现是通过设置cookie的键名为sessionId实现的，通过cookie发往前端。所以当session设置的比较多的化会影响服务器的性能。
token：token使用起来比较方便，前端在获取到后可以存储到本地并使用各种方式发送到后端（放到Url中，放到post的请求体中，放入cookie中）。且数据量比较小。token主要包含三部分：用户标识，token生成的时间以及签名（通过用户标识和生成时间生成的一个hash值）。使用这种token，服务端还需要根据用户标识去查数据库。还有一种token的生成算法：jwt，其主要分为三部分：header：token的生成算法以及加密算法，负载（token所存储的数据），签名：根据header，负载以及加密算法所生成的一个hash值。使用这种token的生成方式，因为已经包含用户信息了，是不需要再查询数据库的。签名的作用主要就是用于后端确定token的信息是否被篡改了，如果被篡改了，则使用被篡改的header和负载所生成的签名于原有的签名肯定是不同的。
7.meta viewport是做什么的，怎么写？
viewport是适配移动端的，可以控制视口的大小和缩放比例。
<meta name="viewport" content="width=device-width,initial-scale=1,maximim-scale=1">
content参数如下：
- width：宽度（device-width）
- height：高度（device-height）
- initial-scale：初始缩放比例
- minimum-scale：最小缩放比例
- maximum-scale：最大缩放比例
- user-scalable：是否允许用户进行缩放（yes/no）
8.前端跨页面通信的几种方式（同源）
- localStorage：在设置localStorage时会触发storage回调函数，可以使用这种方法进行跨页面通信。
- cookie：cookie所保存的数据也是可以在不同的标签页进行共享的。
- indexeddb：indexeddb设计被用来存储数据量比较大的数据，其所存储的数据也是可以进行跨页面共享的。
- Broadcast Channel：Broadcast Channel提供了一个用于广播数据的消息通道。
- Service Worker以及Shared Worker：可以在后台运行js脚本，可以通过js脚本实现消息的广播。
9.Canvas模糊产生的原因及解决
canvas模糊问题产生的原因：
-
在使用canvas时，通常会设置canvas的width，height属性以及style标签中的width，height属性。canvas中的宽高属性代表canvas绘制画布的宽高，而style标签中的宽高代表实际浏览器渲染的宽高，如果两者不对应，canvas就会进行缩放，进而导致绘制的图像模糊。
-
如果绘制的像素不足1px，canvas就会对不足1px的部分进行填充（比如取周围颜色的平均值），进而导致绘制的图像模糊。比如绘制一个1px的线，它会向左向右分别绘制0.5px，这样就是导致像素的填充，进而使绘制的图像模糊。
-
跟高清设备有关。比如在普通设备下设备的物理像素比为1:1那么没有问题，如果在高清设备下比如物理像素比变为1.5:1，即一个css像素对应1.5个物理像素，那么就会进行缩放导致绘制的图像模糊。解决的办法：
- 根据设备像素比对canvas的长宽进行等比缩放，之后对canvas的绘制上下文也进行等比缩放。
- 根据设备像素比对canvas的长宽进行等比缩放，但不对canvas的绘制上下文进行等比缩放，在绘制每个元素时对每个元素进行等比缩放（这样操作起来比较麻烦）。
