【明年找到好工作】：面试题打卡第二天

# 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

---