# fetch 发送 2 次请求的原因
1、在跨域请求的情况下,fetch会先发送一个options请求,来确定服务器是否允许接受请求。服务区同意后,才会发送真正的请求。
2、在同源情况下不会出现请求2次的情况
# Cookie、sessionStorage、localStorage 的区别
1、共同点:都是保存在浏览器中,并且是同源的
2、不同点:
(1)存储位置及其传输
- cookie: 数据始终在同源的http请求中携带,并且cookie数据中有路径的概念,可以限制cookie只属于某一个路径下
- sessionStorage:浏览器中(不会发送给服务器)
- localStorage:浏览器中(不会发送给服务器)
(2)时效性
- cookie:只要设置了过期时间,在这之前都有效
- sessionStorage:仅在当前浏览器窗口关闭前有效
- localStorage:持久保存,当窗口或者浏览器关闭也会一直保存
(3)共享性
- cookie:在所有同源窗口中都是共享的
- sessionStorage:在所有同源窗口中都是共享的
- localStorage:在所有同源窗口中都是共享的
# web worker
Web Workers 使得一个Web应用程序可以在与主线程分离的后台线程中运行一个脚本。
这样做的好处在于可以在一个单独的线程中执行费时的处理任务,从而允许主(通常是UI)线程运行而不被阻塞
它的作用就是给JS创造多线程运行环境,允许主线程创建worker线程,分配任务给后者,主线程运行的同时worker线程也在运行,相互不干扰,在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行,这样主线程就会变得轻松,不会被阻塞或拖慢。这并不意味着JS语言本身支持了多线程能力,而是浏览器作为宿主环境提供了JS一个多线程运行的环境。
不过因为worker一旦新建,就会一直运行,不会被主线程的活动打断,这样有利于随时响应主线程的通性,但是也会造成资源的浪费,所以不应过度使用,用完注意关闭。或者说:如果worker无实例引用,该worker空闲后立即会被关闭;如果worker实列引用不为0,该worker空闲也不会被关闭。
# HTML5语义化标签
HTML5语义化标签指的是:在没有css的作用下,单纯通过html标签能够表达出网页的具体内容。比如:article标签用于段落,header为头部等等
# iframe 是什么?有什么缺点
1、iframe也称作嵌入式框架,可以把网页的内容嵌入到iframe
优点:
- iframe 能够原封不动的把嵌入的网页展现出来
- 如果遇到加载缓慢的第三方内容(图标、广告),这些问题可以使用iframe来解决
缺点:
- iframe会阻塞主页面的onload事件
- iframe和主页面共享连接池,而浏览器对相同域的连接限制,所以会影响页面的并行加载。
- 代码复杂,无法被一些搜索引擎索引到
- 很多移动设备无法完全显示框架唉,设备兼容性差
- iframe框架页面会增加服务器的http请求
# 什么是 Doctype? 严格模式与混杂模式的区别?
1、声明位于文档中的最前面位置,处于标签之前
2、告知浏览器文档使用哪种HTML或XHTML规范
3、重点:告知浏览器按照何种规范解析页面
4、严格模式下:页面排版及JS解析是以该浏览器支持的最高标志来执行
5、混杂模式下:不严格按照标志执行,主要用来兼容旧浏览器,向后兼容
6、Doctype 不存在或格式不正确会导致文档以混杂模式呈现
# Cookie如何防范XSS攻击
XSS(跨站脚本攻击)是指攻击者在返回的HTML中嵌入javascript脚本。
可以在头部设置set-cookie=httponly; secure
- httponly:这个属性可以防止XSS,它会禁止javascript脚本来访问cookie
- secure:这个属性告诉浏览器仅在请求为https的时候发送cookie