前端：浏览器、网络等前端除js、vue等框架外的面试题整理合集。 1、防抖和节流 (场景：在前端开发的过程中，我们经常会

前端除js、vue等框架外的面试题整理合集。

1、防抖和节流

　　(场景：在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。)

防抖：任务频繁触发的情况下，只有任务触发的间隔超过制定的时间间隔的时候，任务才会被执行。

非立即执行版：触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
立即执行版：触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

节流：指定时间间隔内只会执行一次任务。

时间戳版：函数会立即执行，并且每设定的时间戳内（例：1s）执行一次。
定时器版：函数不会立即执行，并且每设定的时间间隔内（例：1s）执行一次，在停止触发事件后，函数还会再执行一次。

2、重绘和回流（重排）

　　回流（重排）：比如我们增删DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树结构发生变化，那么肯定要重新构建DOM树，而DOM树与渲染树是紧密相连的，DOM树构建完，渲染树也会随之对页面进行再次渲染，这个过程就叫回流。

　　重绘：当你给一个元素更换颜色，这样的行为是不会影响页面布局的，DOM树不会变化，但颜色变了，渲染树得重新渲染页面，这就是重绘。

　　*回流的代价要远大于重绘。且回流必然会造成重绘，但重绘不一定会造成回流。

　　区别：引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。只是样式的变化，不会引起DOM树变化，页面布局变化的行为叫重绘，且重绘不一定会便随回流。

3、输入Url后的流程

用户输入网址，浏览器发起DNS查询请求
建立TCP连接
浏览器向 web 服务器发送一个 HTTP 请求
发送响应数据给客户端
浏览器解析http response

4、BFC和IFC

　　BFC(Block Formatting Context)：块级格式化上下文,是 Web 页面的可视化 CSS 渲染中的一部分，是布局过程中生成块级盒子的区域，也是浮动元素和其他元素的交互限定区域。

　　IFC(Inline Formatting Contexts)：内联格式化上下文，IFC 的 line box（框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)。

①怎么创建BFC：根元素或者包含根元素的元素（ html 元素会作为一个 BFC ），意味着 html 元素中的各个元素都在同一 BFC，BFC 是一个独立的布局环境，其中元素的布局是不受外界的影响。

浮动元素（元素的 float 不为 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（或者元素的 display 为 table-cell）
表格标题（或元素的 display 为 table-caption）
匿名表格单元格元素（ HTML 中的 table、row、thead、tbody、tfoot 或者 display 为table、table-row、table-row-group、table-header-group、table-footer-group）
overflow 不为 visible 的元素
弹性元素（display 为 flex 或者 inline-flex 元素的直接子元素）
网格元素（display 为 grid 或者 inline-grid 元素的直接子元素）
多列容器（元素的 column 或者 column-width 不为 auto，包括 column-count 为 1）应用场景
外边距溢出和外边距合并
解决高度塌陷问题
左边定宽右边自适应

②怎么创建IFC：形成条件非常简单，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。

块级元素中仅包含内联级别元素应用场景
只计算水平方向的 padding、margin、border
元素水平垂直居中

5、如何实现跨域

　　跨域：在浏览器同源策略限制下，向不同源（不同协议、不同域名或者不同端口）发送XHR请求，浏览器认为该请求不受信任，禁止请求，具体表现为请求后不正常响应

解决跨域:

从浏览器入手
- IE浏览器：进入ie的网际网路选项设置，然后选择安全性，再选择自订等级，然后下拉，找到「存取跨网络的资料来源」，选择启用即可；
- chrome浏览器：通过在命令行，输入chrome.exe --allow-file-access-from-files --user-data-dir="C:/Chrome dev session" --disable-web-security，这会新建一个浏览器实例，自动打开的chrome会显示一系列黄色的文字就说明成功了；
- FireFox浏览器：在地址栏输入about:config，然后下拉找到security.fileuri.strict_origin_policy，然后设置为false即可
从域名入手
既然域名等信息不一致导致跨域产生，那么干脆就把两个项目合并成一个项目，使用相同的协议、域名和端口。
从jsonp入手
先协商好需要被调用的方法及参数（fun）,然后动态创建一个script标签，并设置该标签的src为跨域url，最后插入到文档中，插入后，浏览器会自动发起http的get请求，下载完成后将会执行后台返回的js语句（后台调用前台）。
从代理入手
把请求转到同一项目下的后台，在同项目的后台进行xhr请求，然后把请求结果原样返回给前台，这就是代理（或者叫转发）。
从CORS入手

 res.header("Access-Control-Allow-Origin", "*"); //允许全部域名跨域，可以指定特点域名，逗号分隔

  res.header("Access-Control-Allow-Credentials", "true"); //允许携带cookie

  res.header("Access-Control-Allow-Headers", "X-Requested-With"); //允许传输的请求头

  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); //允许发送的xhr模式

  res.header("X-Powered-By", " 3.2.1"); //快速模式

  res.header("Content-Type", "application/json;charset=utf-8"); //类型及字符编码

6、HTTP和HTTPS

　　超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。

　　为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

HTTP和HTTPS的基本概念
- HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
- HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
- HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。
HTTP与HTTPS的区别
HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。
- https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
- http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
- http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
- http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
HTTPS的工作原理，

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤：

客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接。
Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端。
客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息加密的等级。
客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站。
Web服务器利用自己的私钥解密出会话密钥。
Web服务器利用会话密钥加密与客户端之间的通信。

HTTPS的优点：尽管HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：
- 使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
- HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在
- HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
- 谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。
HTTPS的缺点
- HTTPS协议握手阶段比较费时，会使页面的加载时间延长近50%，增加10%到20%的耗电；
- HTTPS连接缓存不如HTTP高效，会增加数据开销和功耗，甚至已有的安全措施也会因此而受到影响；
- SSL证书需要钱，功能越强大的证书费用越高，个人网站、小网站没有必要一般不会用。
- SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗。
- HTTPS协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。

7、Cookie、session和localStorage、以及sessionStorage之间的区别

7.1 Cookie和session的区别

cookie和session都是用来跟踪浏览器用户身份的会话方式。

保持状态：cookie保存在浏览器端，session保存在服务器端
使用方式：
- (1)cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它
- (2)session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。
存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)
存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。
安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。
应用场景：
cookie:
- 判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息
- 保存上次登录的时间等信息
- 保存上次查看的页面
- 浏览计数 session:用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。\
- 网上商城中的购物车
- 保存用户登录信息
- 将某些数据放入session中，供同一用户的不同页面使用
- 防止用户非法登录
缺点：
cookie:
- 大小受限
- 用户可以操作（禁用）cookie，使功能受限
- 安全性较低
- 有些状态不可能保存在客户端。
- 每次访问都要传送cookie给服务器，浪费带宽。
- cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。 session:
- Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
- 依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全
- 创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

7.2 sessionStorage、localStorage和cookie的区别

共同点：都是保存在浏览器端、且同源的
区别：

特性	cookie	sessionStorage	localstorage
数据生命周期	生成时就会被指定一个maxAge值，在这个周期内有效，默认关闭浏览器失效	页面会话期间可用	除非数据清楚，否则一直存在
存放数据大小	4K左右（每次http请求都会携带）	一般5M或更大	-
与服务器通信	每次请求服务器都携带在http头，使用cookie保过多数据会带来性能问题	只在请求时使用数据，不参与服务器通信	-
易用性	cookie需要自己封装setCookie、getCookie	可以用源生接口，也可再次封装来对Object和Array有更好的支持	-

8、 Event Loop

8.1 什么是Event Loop

①概念 　　Event Loop 是一个很重要的概念，指的是计算机系统的一种运行机制。

　　JavaScript语言就采用这种机制，来解决单线程运行带来的一些问题。

　　运行以后的程序叫做"进程"（process），一般情况下，一个进程一次只能执行一个任务。
如果有很多任务需要执行，不外乎三种解决方法。

（1）排队 因为一个进程一次只能执行一个任务，只好等前面的任务执行完了，再执行后面的任务。

（2）新建进程 使用fork命令，为每个任务新建一个进程。

（3）新建线程 因为进程太耗费资源，所以如今的程序往往允许一个进程包含多个线程，由线程去完成任务。

②存在的意义 　　多线程不仅占用多倍的系统资源，也闲置多倍的资源，这显然不合理。

**Event Loop是一个程序结构，用于等待和发送消息和事件。** （a programming construct that waits for and dispatches events or messages in a program.）

　　简单说，就是在程序中设置两个线程：一个负责程序本身的运行，称为"主线程"；另一个负责主线程与其他进程（主要是各种I/O操作）的通信，被称为"Event Loop线程"（可以译为"消息线程"）。

③分类
- 宏任务（MacroTask）也叫Task：script全部代码、setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）、I/O、UI Rendering。
- 微任务（MicroTask）：Process.nextTick（Node独有）、Promise、Object.observe(废弃)、MutationObserver
④事件循环的进程模型
- 选择当前要执行的任务队列，选择任务队列中最先进入的任务，如果任务队列为空即null，则执行跳转到微任务（MicroTask）的执行步骤。
- 将事件循环中的任务设置为已选择任务。
- 执行任务。
- 将事件循环中当前运行任务设置为null。
- 将已经运行完成的任务从任务队列中删除。
- microtasks步骤：进入microtask检查点。
- 更新界面渲染。
- 返回第一步。

8.4宏微任务执行顺序

　　执行栈在执行完同步任务后，查看执行栈是否为空，如果执行栈为空，就会去执行Task（宏任务），每次宏任务执行完毕后，检查微任务(microTask)队列是否为空，如果不为空的话，会按照先入先出的规则全部执行完微任务(microTask)后，设置微任务(microTask)队列为null，然后再执行宏任务，如此循环。