1. 说一下web Quality（无障碍）
为有残疾或者身体不健康的用户提供帮助无障碍服务，使用alt属性。
2. 几个很实用的BOM属性对象方法?
location对象
history对象
详细内容
3. 说一下HTML5 drag api
拖放是html5新增的一个API，是用于拖动一个元素从一个位置到另一个位置
需要阻止浏览器的默认行为：event.preventDefault();
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发.
4. 说一下http2.0
多路复用：多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息
在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。
二进制分帧：HTTP2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码。
5. 补充400和401、403状态码
400 Bad Request 错误请求，服务器不理解请求语法
401 Unauthorized 未授权，需要进行身份验证
403 Forbidden 禁止访问
6. fetch发送2次请求的原因
使用fetch发送POST请求时，会先发送一个OPTION请求进行预检查，用来获知服务端是否允许该跨域请求，服务器确认允许之后会返回204状态码，表示允许该跨域请求，这时才发起实际的 HTTP 请求。
后端不要拦截 OPTION 请求
7. Cookie、sessionStorage、localStorage的区别
Cookie：cookie数据始终在同源的http请求中携带
sessionStorage：仅在当前浏览器窗口关闭前有效
localStorage：localStorage 在所有同源窗口中都是共享的
8. 说一下web worker
Web Worker的作用：为单线程的JS创造多线程环境。
9. 对HTML语义化标签的理解
HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。
SEO
10. 对HTML语义化标签的理解
HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。
SEO
11. iframe是什么？有什么缺点？
iframe元素会创建包含另一个文档的内联框架
搜索引擎无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能
12. Doctype作用?严格模式与混杂模式如何区分？它们有何意义?
Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。
13. Cookie如何防范XSS攻击
XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：
httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。
secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。
结果应该是这样的：Set-Cookie=
14. Cookie和session的区别
都是用来保存用户信息，cookie存放在客户端，session存放在服务端
15. 一句话概括RESTFUL
一种软件架构风格，提供了一组设计原则和约束条件。每一个对象都通过URL来表示，对象用户负责将状态信息打包进每一条信息内，客户端的无状态请求在头部包含方法信息，即get post put delete
就是用URL定位资源，用HTTP描述操作
16. 讲讲viewport和移动端布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
content里面的这些属性必须知道
width: 控制viewport的大小，可以是一个指定的值，或者是特殊值，如device-width是为设备指定的宽度。
height： 和width相对应，指定高度
initial-scale： 初始缩放比例，也是当前页面第一次load的时候缩放的比例。
maximum-scale： 允许用户缩放的最大比例。
minimum-scale： 允许用户缩放的最小比例。
user-scalable： 用户是否可以手动缩放。
17. click在ios上有300ms延迟，原因及如何解决？
ios上有双击缩放的功能，点击一次屏幕浏览器无法判断用户是想要进行单击操作还是双击操作，所以要等待300ms是否有第二次点击。
1、禁止缩放功能
2、fastclick
18. addEventListener参数
addEventListener(event, function, useCapture)
其中，event指定事件名；function指定要事件触发时执行的函数；useCapture指定事件是否在捕获或冒泡阶段执行。
19. iframe通信，同源和不同源两种情况，多少种方法。
同域：即父子页面相互调用
document.getElementById('FrameId').contentWindow.document
跨域：
主域：由两个或两个以上的字母构成，中间由点号隔开，整个域名只有1个点号
csdn. net
子域：是在主域名之下的域名，域名内容会有多个点号
未跨主域，跨子域
两个域的js文件中设置document.domain=主域名 即可
跨主域
location.hash
(B操作A)
1、动态改变location.hash，iframe不会重载
2、无论跨域与否，iframe内可以获取自己的location.hash
3、只要域名相同就能通信，即使ABC三层嵌套
20. http返回的状态码
2xx: 请求成功3xx:重定向问题。4xx:客户端问题。5xx:服务器问题。常见的：200:请求成功304:一直请求某种资源，会提示304，但不会影响请求成功。400:请求名错了。401:需要用户验证。403:服务器接受到客服端的请求，但不符合规则 拒绝执行。404:请求发错了，找不到对应资源。
21. http常用请求头
Accept
Cookie
Accept-Encoding
Content-Type
Content-Length
User-Agent
22. 强，协商缓存
强缓存：浏览器直接从本地存储中获取数据，不与服务器进行交互
协商缓存：浏览器发送请求数据到服务器，浏览器判断是否可以使用本地缓存
23. 讲讲304
304：如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。
24. 强缓存、协商缓存什么时候用哪个
从header里面读取是否是强缓存，在有效的时间周期内从缓存里读取而不是从服务器里读取
25. 前端优化
减少HTTP 请求数
CDN 分发
缓存
渲染：JS/CSS优化，加载顺序，服务端渲染
26. GET和POST的区别
get参数通过url传递，post放在request body中。
get请求在url中传递的参数是有长度限制的，而post没有。
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
get请求只能进行url编码，而post支持多种编码方式
get请求会浏览器主动cache，而post支持多种编码方式。
get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。
GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
GET产生一个TCP数据包；POST产生两个TCP数据包。
27. GET和POST的区别
状态码301和302都是重定向；
301是永久重定向；302是临时重定向。
301表示旧地址被永久的移除了，不可访问了。
302表示旧地址的资源还在，可以访问，只是临时的从旧地址转移到新地址。
28. HTTP支持的方法
GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT
29. 如何画一个三角形
<div class="t"></div>
<style>
.t{
width: 0px;
height: 0px;
border: 10px solid transparent;
border-right-color: red;
}
</style>
30. 在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？
1.首先在浏览器地址栏中输入url
2.浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，直接显示页面内容；如果没有，跳到第三步；
3.域名解析，获取相应的IP地址
4.浏览器向服务器发送tcp连接，与浏览器建立三次握手
5.握手成功后，建立http请求
6.服务器收到请求，将数据返回至浏览器
7.浏览器收到http响应
8.读取页面内容，浏览器渲染，解析html源码