前端基础（二）

一.前端基础

2.HTTP、HTML、浏览器

2.0、说一下http2.0

首先补充一下，http和https的区别，相比http，https是基于ssl加密的http协议。
http2.0是基于1999年发布的http1.0之后的首次更新
提升了访问速度
允许多路复用
二进制分帧：http2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码
首部压缩
服务器端推送

2.1、补充400和401、403状态码

（1）400状态码：请求无效
产生原因：
前端提交数据的字段名称和字段类型与后台的实体没有保持一致
前端提交到后台的数据应该是JSON字符串类型，但是前端没有将对象json.stringify转化成字符串。
解决办法：
对照字段名称，保持一致性
将obj对象通过JSON.stringify实现序列化
（2）401状态码：当前请求需要用户验证
（3）403状态码：服务器已经得到请求，但是拒绝执行

2.2、fetch发送2次请求的原因

fetch发送两次post请求的时候，总是发送2次，第一次状态码是204，第二次才成功？
因为用fetch的post请求的时候，导致fetch第一次发送了一个options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

2.3、Cookie、sessionStorage、localStorage的区别

共同点：都是保存在浏览器端，并且是同源的

Cookie：cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径的概念，可以限制cookie只属于某个路径下，存储的大小很小只用4k左右。（简洁：可以在浏览器和服务器之间来回传递，储存容量小，只有大约4k左右）

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不能持久保持。（本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当前页面不同即使同一页面打开两次，也被视为同一次回话）
locaStorage：始终有效，窗口或者浏览器关闭也一直保存，因此用作持久数据。
cookie：只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

localStorage： localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口都是共享的。（同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

补充说明cookie的作用：
保存用户登录状态。
跟踪用户行为。
定制页面。

2.4、说一下web worker

在HTML页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应的 。web worker是运行在后台的js，独立于其他脚本，不会影响页面的性能。并且通过postMessage将数据回传到主线程。这样在进行复杂的操作的时候，就不会阻塞主线程了。

如何创建web worker：
检测浏览器是否支持
创建web worker文件（js，回传函数等）
创建web worker对象

2.5、对HTML语义化标签的理解

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer、等等。

2.6、iframe是什么？有什么缺点？

定义：iframe元素会创建包含另一个文档的内联框架。
缺点：会阻塞主页的onload事件
搜索引擎无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

2.7、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
严格模式的排版和js运作模式是以该浏览器支持的最高运行标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

2.8、cookie如何防范XSS攻击

XSS（跨域脚本攻击）是指攻击者再返回的HTML中嵌如JavaScript脚本，为了减轻这些攻击，需要在http头部配上，set-cookie；
httponly - 这个属性可以防止XSS，它会禁止JavaScript脚本来访问cookie
secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie
结果应该是这样的：Set-Cookie=<cookie-value>......