HTTP/HTML/浏览器
说一下 HTML5 drag api
参考回答
- dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
- darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
- dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
- dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
- dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
- drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
- dragend：事件主体是被拖放元素，在整个拖放操作结束时触发
400 和 401、403 等常见状态码状态码
参考回答
列举最常见的即可
400 状态码：请求无效
产生原因： 前端提交数据的字段名称和字段类型与后台的实体没有保持一致
前端提交到后台的数据应该是 json 字符串类型，但是前端没有将对象 JSON.stringify 转 化成字符串。
解决方法：
对照字段的名称，保持一致性
将 obj 对象通过 JSON.stringify 实现序列化
401 状态码：
当前请求需要用户验证
403 状态码：
服务器已经得到请求，但是拒绝执行
404 状态码
请求的网页不存在
503 状态码
服务不可用
fetch 发送 2 次请求的原因
参考回答
fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功？ 原因很简单，因为你用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个 Options 请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的 请求。
Cookie、sessionStorage、localStorage 的区别
参考回答
共同点：都是保存在浏览器端，并且是同源的
Cookie：cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器
和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅
在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下, 存储的大小很小只有 4K 左右。 （key：可以在浏览器和服务器端来回传递，存储容量
小，只有大约 4K 左右）
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：
始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie
过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关
闭浏览器后消失，session 为一个回话，当页面不同即使是同一页面打开两次，也被视为
同一次回话）
localStorage：localStorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中
都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与
否都会始终生效）
补充说明一下 cookie 的作用：
保存用户登录状态。例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面 时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie 还可以设置 过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用户保 持登录状态的时间：常见选项有一个月、三个 月、一年等。
跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。 如果每次都需要选择所在地是烦琐的，当利用了 cookie 后就会显得很人性化了，系统能 够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区 的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一 样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使 用 cookie 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以 保存上一次访问的界面风格。
说一下 web worker
参考回答
在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后， 页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面你 的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就 不会阻塞主线程了。
如何创建 web worker：
检测浏览器对于 web worker 的支持性
创建 web worker 文件（js，回传函数等）
创建 web worker 对象
对 HTML 语义化标签的理解
参考回答
HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如 nav 表示导航条，类似的还有 article、header、footer 等等标签。
iframe 是什么？有什么缺点？
参考回答
定义：iframe 元素会创建包含另一个文档的内联框架
提示：可以将提示文字放在之间，来提示某些不支持 iframe 的浏览器
缺点：
会阻塞主页面的 onload 事件
搜索引擎无法解读这种页面，不利于 SEO
iframe 和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。
Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?
参考回答
Doctype 声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。
Cookie 如何防范 XSS 攻击
参考回答
XSS（跨站脚本攻击）是指攻击者在返回的 HTML 中嵌入 javascript 脚本，为了减轻这些
攻击，需要在 HTTP 头部做响应的配置set-cookie：
httponly-这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。
secure - 这个属性告诉浏览器仅在请求为 https（有SSL加密手段） 的时候发送 cookie。
结果应该是这样的：Set-Cookie=....
Cookie 和 session 的区别
参考答案
- cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
- cookie 不是很安全，别人可以分析存放在本地的 cookie 并进行 COOKIE 欺骗
- 考虑到安全应当使用 session。
- session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
- 考虑到减轻服务器性能方面，应当使用 cookie。
- 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个cookie。 HTTP 是一个无状态协议，因此 Cookie 的最大的作用就是存储 sessionId 用来唯一标识用 户。
一句话概括 RESTFUL
参考答案
就是用 URL 定位资源，用 HTTP 描述操作。
click 在 ios 上有 300ms 延迟，原因及如何解决？
参考答案
(1)粗暴型，禁用缩放
<meta name="viewport" content="width=device-width, user-scalable=no">
(2)利用 FastClick，其原理是： 检测到 touchend 事件后，立刻出发模拟 click 事件，并且把浏览器 300 毫秒之后真正出 发的事件给阻断掉
addEventListener 参数
参考答案
addEventListener(event, function, useCapture)
event 指定事件名；
function 指定要事件触发时执行的函数；
useCapture 指定事件是否在捕获或冒泡阶段执行。(false-冒泡，true-捕获)
http 常用请求头
参考答案
| 协议 | 说明 |
|---|---|
| Accept | 可接受的响应内容类型（Content-Types） |
| Accept-Charset | 可接受的字符集 |
| Accept-Encoding | 可接受的响应内容的编码方式。 |
| Accept-Language | 可接受的响应内容语言列表。 |
| Accept-Datetime | 可接受的按照时间来表示的响应内容版本 |
| Authorization | 用于表示 HTTP 协议中需要认证资源的认证信息 |
| Cache-Control | 用来指定当前的请求/回复中的，是否使用缓存机制。 |
| Connection | 客户端（浏览器）想要优先使用的连接类型 |
| Cookie | 由之前服务器通过Set-Cooki（e 见下文）设置的一个HTTP协议Cookie |
| Content-Length | 以 8 进制表示的请求体的长度 |
| Content-MD5 | 请求体的内容的二进制 MD5 散列值（数字签名），以 Base64 编码的结果 |
| Content-Type | 请求体的 MIME 类型 （用于 POST 和 PUT 请求中） |
| Date | 发送该消息的日期和时间（以 RFC 7231 中定义的"HTTP 日期"格式 |
| 来发送） | |
| Expect | 表示客户端要求服务器做出特定的行为 |
| From | 发起此请求的用户的邮件地址 |
| Host | 表示服务器的域名以及服务器所监听的端口号。如果所请求的端口是对应的服务的标准端口（80），则端口号可以省略。 |
| If-Match | 仅当客户端提供的实体与服务器上对应的实体相匹配时，才进行对应的操作。主要用于像 PUT 这样的方法中，仅当从用户上次更新某个资源后，该资源未被修改的情况下，才更新该资源。 |
| If-Modified-Since | 允许在对应的资源未被修改的情况下返回 304 未修改 |
| If-None-Match | 允许在对应的内容未被修改的情况下返回 304 未修改（ 304 NotModified ），参考 超文本传输协议 的实体标记 |
| If-Range | 如果该实体未被修改过，则向返回所缺少的那一个或多个部分。否则，返回整个新的实体 |
| If-Unmodified-Since | 仅当该实体自某个特定时间以来未被修改的情况下，才发送回应。 |
| Max-Forwards | 限制该消息可被代理及网关转发的次数。 |
| Origin | 发起一个针对跨域资源共享的请求（该请求要求服务器在响应中加入一个 Access-Control-Allow-Origin 的消息头，表示访问控制所允许的来源）。 |
| Pragma | 与具体的实现相关，这些字段可能在请求/回应链中的任何时候产生。 |
| Proxy-Authorization | 用于向代理进行认证的认证信息。 |
| Range | 表示请求某个实体的一部分，字节偏移以 0 开始。 |
| Referer | 表示浏览器所访问的前一个页面，可以认为是之前访问页面的链接将浏览器带到了当前页面。Referer 其实是 Referrer 这个单词，但 RFC制作标准时给拼错了，后来也就将错就错使用 Referer 了。 |
| TE | 浏览器预期接受的传输时的编码方式：可使用回应协议头 |
| Transfer-Encoding | 中的值（还可以使用"trailers"表示数据传输时的分块方式）用来表示浏览器希望在最后一个大小为 0 的块之后还接收到一些额外的字段。 |
| User-Agent | 浏览器的身份标识字符串 |
| Upgrade | 要求服务器升级到一个高版本协议。 |
| Via | 告诉服务器，这个请求是由哪些代理发出的。 |
| Warning | 一个一般性的警告，表示在实体内容体中可能存在错误。 |
强缓存，协商缓存
参考答案
| 标题 | 获取资源形式 | 状态码 | 发送请求到服务器 |
|---|---|---|---|
| 强缓存 | 从缓存取 | 200（from cache） | 否，直接从缓存取 |
| 协商缓存 | 从缓存取 | 304（not modified） | 是，通过服务器来告知缓存是否可用 |
强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的话， cache-control 的优先级高于 expires。
协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match
强缓存、协商缓存什么时候用哪个
参考答案
因为服务器上的资源不是一直固定不变的，大多数情况下它会更新，这个时候如果我们 还访问本地缓存，那么对用户来说，那就相当于资源没有更新，用户看到的还是旧的资 源；所以我们希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使用本地 的缓存，以最大程度的减少因网络请求而产生的资源浪费。
graph TD
浏览器请求 --> 有缓存-->是否过期? --是--> Etag?;是否过期?--否-->从缓存读取-->呈现;Etag?--是-->向web服务器发送请求带IF-MODIFIED-MATCH--服务器决策-->200/304?--304-->从缓存读取-->呈现;Etag--否-->Last-modified?--是-->向服务器发送请求带IF-MODIFIED-SINCE--服务器决策-->200/304?--200-->请求响应缓存协商-->呈现;Last-modified?--否-->向web服务器发送请求-->请求响应缓存协商-->呈现
