前端基础面试题（后续待补充）
1.http 和 https 的基本概念
http: 是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。
https:是以安全为目标的 HTTP 通道，即 HTTP 下 加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。
2.Cookie、sessionStorage、localStorage 的区别
相同点：存储在客户端。
不同点：
- cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+
- cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除
- cookie的数据会自动的传递到服务器；sessionStorage和localStorage数据保存在本地
3.从输入URL到页面加载的全过程
- 首先在浏览器中输入URL
- 查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。
- DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。
DNS服务器是基于UDP的，因此会用到UDP协议 - 建立TCP连接：解析出IP地址后，根据IP地址和默认80端口，和服务器建立TCP连接
- 发起HTTP请求：浏览器发起读取文件的HTTP请求，，该请求报文作为TCP三次握手的第三次数据发送给服务器
- 服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器
- 关闭TCP连接：通过四次挥手释放TCP连接
- 浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来
4.浏览器重绘与重排的区别？
-
重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。 -
重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变
单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分
重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。
5.如何触发重排和重绘
任何改变用来构建渲染树的信息都会导致一次重排或重绘：
- 添加、删除、更新DOM节点
- 通过display: none隐藏一个DOM节点-触发重排和重绘
- 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
- 移动或者给页面中的DOM节点添加动画
- 添加一个样式表，调整样式属性
- 用户行为，例如调整窗口大小，改变字号，或者滚动。
6.如何避免重排和重绘
-
集中改变样式，不要一条一条地修改 DOM 的样式。 -
不要把 DOM 结点的属性值放在循环里当成循环里的变量。
-
为动画的 HTML 元件使用
fixed或absoult的position，那么修改他们的 CSS 是不会 reflow 的。 -
不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
-
尽量只修改
position：absolute或fixed元素，对其他元素影响不大 -
动画开始
GPU加速，translate使用3D变化
7.HTML5的新特性、语义化
- 语义化标签：header nav main article section aside footer
- 语义化优点：
- 在
没CSS样式的情况下，页面整体也会呈现很好的结构效果 代码结构清晰，易于阅读，利于开发和维护方便其他设备解析（如屏幕阅读器）根据语义渲染网页。有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
- 在
8.什么是块级格式上下文？BFC（块级格式上下文）
BFC(Block Formatting Context)的英文缩写简称，block可以理解为一个简单的盒模型， Formatting Context则为block的上下文渲染环境。其作用是使内部元素的布局不受外部元素影响。
BFC的触发条件：
- 根元素,也就是html根标签；
- position：fixed/absoluted;
- float属性值不是none的；
- overflow属性值不是visible的；
- display属性值：inline-display/table-cell/table-caption/flex/inline-flex;
BFC的作用：
- bfc内部元素的布局不受外部元素影响。
- bfc区域不会出现margin重叠
- bfc区域计算高度时候会自动计算浮动元素。
- bfc区域不会和浮动元素重合。
9.JS中的8种数据类型及区别
基本数据类型：Number、String 、Boolean、Null和Undefined
引用类型数据：Object 、Array 、Function 、Data等
10.JS中数组类型检测方案
1.typeof 2.instanceof 3.Object.prototype.toString.call（）
11.作用域和作用域链
定义：简单来说作用域就是变量与函数的可访问范围，由当前环境与上层环境的一系列变量对象组成
1.全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。
2.函数作用域：在固定的代码片段才能被访问
作用域链参考链接：一般情况下，变量到 创建该变量 的函数的作用域中取值。但是如果在当前作用域中没有查到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
12.谈谈对闭包的理解
在js中变量的作用域属于函数作用域, 在函数执行完后,作用域就会被清理,内存也会随之被回收,但是由于闭包函数是建立在函数内部的子函数, 由于其可访问上级作用域,即使上级函数执行完, 作用域也不会随之销毁, 这时的子函数(也就是闭包),便拥有了访问上级作用域中变量的权限,即使上级函数执行完后作用域内的值也不会被销毁。
13.原型和原型链
原型关系：
- 每个 class都有显示原型 prototype
- 每个实例都有隐式原型 _ proto_
- 实例的_ proto_指向对应 class 的 prototype
原型: 在 JS 中，每当定义一个对象（函数也是对象）时，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。
**原型链 **：函数的原型链对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针__proto__,该指针是指向上一层的原型对象，而上一层的原型对象的结构依然类似。因此可以利用__proto__一直指向Object的原型对象上，而Object原型对象用Object.prototype.__ proto__ = null表示原型链顶端。如此形成了js的原型链继承。同时所有的js对象都有Object的基本防范
14.说说你对promise对象的理解：
- promise是异步编程的一种解决方法，从语法上说promise是一个对象，从它可以获取异步操作的消息
- promise主要作用是：可以把异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，promise对象提供了统一的接口，使得控制异步操作更简单
- promise对象的特点：对象状态不受外界影响（公3种pending（进行中），resolved（已完成），reject（已失败））。 只有异步操作的结果可以决定是当前哪一种状态，任何其他操作都无法改变 一旦状态改变就不会再变，任何时候都可以得到这个结果。 promise对象改变只有两种可能：从pending到resolved，从pending到reject
- promise对象的缺点：无法取消promise，一旦创建就立即执行，无法中途取消 如果不设置回调函数，promise内部抛出错误，不会反映到外部 当处于pending状态时，无法得知目前进展到那个阶段（刚刚开始还是即将完成）
15.js实现数据的绑定
知识点：object.defineProperty()
三个参数：
- 第一个：要定义属性的对象
- 第二个：要定义或者修改的属性的名称
- 第三个：将被定义或者修改的属性的描述
16.ES6的新特性
新增了箭头函数、let、const、class类、模板字符串、解构赋值、…展开运算符、for of遍历、Map、Proxies等
17.js高阶函数
- map：map()方法定义在JavaScript的Array中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。
- filter：filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
- sort排序算法：因为Array的sort()方法默认把所有元素先转换为String再排序，结果’10’排在了’2’的前面，因为字符’1’比字符’2’的ASCII码小。如果不知道sort()方法的默认排序规则，直接对数字排序，绝对栽进坑里！
18.link和@import的区别是什么
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。
结论
就结论而言，强烈建议使用link标签，慎用@import方式。
这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。
19.火狐浏览器和谷歌浏览器渲染页面的区别
1.chrome不管html读取完毕没有，总是有一个预加载的、img图片或者其他元素都是预加载上来了的，而firefox没有这个预加载的过程，中规中矩的等待整个html文件读取完毕，再加载各元素
共同的：
- js脚本执行阻塞了页面的渲染
- 样式的渲染都是css文件加载完毕后才开始的
20.forEach（）和map（）的区别
- forEach()方法没有返回值，而map（）方法有返回值
- forEach（）遍历通常都是直接引入当前遍历数组的内存地址，生成的数组的值发生变化，当前遍历的数组对应的值也发生变化。
- map（）遍历后的数组通常都是生成一个新的数组，新的数组的值发生变化，当前遍历的数组值不会变化
21.介绍节流防抖原理、区别以及应用
节流：事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。
防抖：多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一个事件被触发准备执行事件函数前，会等待一定的时间（这时间是码农自己去定义的，比如 1 秒），如果没有再次被触发，那么就执行，如果被触发了，那就本次作废，重新从新触发的时间开始计算，并再次等待 1 秒，直到能最终执行！
使用场景：
节流：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……
防抖：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。