前端八股文！！！

卷起来吧 c..

1. HTTP 和 HTTPS

1.http 和 https 的基本概念

http: 是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。
https:是以安全为目标的 HTTP 通道，即 HTTP 下加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

2.http 和 https 的区别及优缺点？

http 是超文本传输协议，信息是明文传输，HTTPS 协议要比 http 协议安全，https 是具有安全性的 ssl 加密传输协议，可防止数据在传输过程中被窃取、改变，确保数据的完整性(当然这种安全性并非绝对的，对于更深入的 Web 安全问题，此处暂且不表)。
http 协议的默认端口为 80，https 的默认端口为 443。
http 的连接很简单，是无状态的。https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。
https 缓存不如 http 高效，会增加数据开销。
Https 协议需要 ca 证书，费用较高，功能越强大的证书费用越高。
SSL 证书需要绑定 IP，不能再同一个 IP 上绑定多个域名，IPV4 资源支持不了这种消耗。

3.https 协议的工作原理

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

客户端使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。
web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），传输给客户端。
客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。
客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
web 服务器通过自己的私钥解密出会话密钥。
web 服务器通过会话密钥加密与客户端之间的通信。

2. 从输入url到展示页面加载的过程

通过DNS解析获得网址的对应IP地址
浏览器与远程web服务器通过TCP三次握手协商来建立一个 TCP/IP 连接
浏览器通过TCP/IP连接向web服务器发送一个 HTTP 请求
服务器的永久重定向响应
浏览器跟踪重定向地址
服务器处理请求
服务器返回一个 HTTP 响应
浏览器渲染：客户端解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为：
- 构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象
- 构建CSS规则树：生成CSS规则树（CSS Rule Tree）
- 构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
- 布局（Layout）：计算出每个节点在屏幕中的位置
- 绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。
JS引擎解析：调用JS引擎执行JS代码（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
- 创建window对象：window对象也叫全局执行环境，当页面产生时就被创建，所有的全局变量和函数都属于window的属性和方法，而DOM Tree也会映射在window的doucment对象上。当关闭网页或者关闭浏览器时，全局执行环境会被销毁。
- 加载文件：完成js引擎分析它的语法与词法是否合法，如果合法进入预编译
- 预编译：在预编译的过程中，浏览器会寻找全局变量声明，把它作为window的属性加入到window对象中，并给变量赋值为’undefined’；寻找全局函数声明，把它作为window的方法加入到window对象中，并将函数体赋值给他（匿名函数是不参与预编译的，因为它是变量）。而变量提升作为不合理的地方在ES6中已经解决了，函数提升还存在。
- 解释执行：执行到变量就赋值，如果变量没有被定义，也就没有被预编译直接赋值，在ES5非严格模式下这个变量会成为window的一个属性，也就是成为全局变量。string、int这样的值就是直接把值放在变量的存储空间里，object对象就是把指针指向变量的存储空间。函数执行，就将函数的环境推入一个环境的栈中，执行完成后再弹出，控制权交还给之前的环境。JS作用域其实就是这样的执行流机制实现的。

3. 服务器返回的code意义

状态码	简义	含义
100	继续请求	服务器已接收到部分请求，等待剩下的部分继续请求
101	切换协议	客户端请求切换协议，服务器已准备切换协议
200	请求成功	客户端请求的数据服务器已成功返回
201	创建成功	客户端请求成功且服务器已创建新的资源
202	接受请求	服务器已接受请求，但尚未处理
203	非授权信息	服务器处理成功，但返回内容源于其他
204	没有内容	服务器处理成功，但是没有任何返回
205	内容重置	服务器处理成功，内容无返回，请求重置文档内容
206	部分内容	服务器成功处理了部分get请求
300	多种选择	服务器可以执行多个操作，或者根据返回列表客户端选择进行操作
301	永久移动	请求的资源已永久移动到其他位置，服务器自动修改请求资源的位置
302	临时移动	服务器响应的资源非在客户端请求的位置，但是可以响应该请求
303	访问其他位置	服务器自动（除 HEAD 之外）请求的其他位置
304	未修改	上次访问服务器的资源没有改变
305	使用代理	客户端使用代理访问服务器
307	临时重定向	客户端的要求服务器临时修改当前访问资源位置
400	请求错误	服务器无法解析该请求
401	未授权	客户端请求的资源没有进行身份验证，或未请求权限
403	拒绝请求	客户端发起的请求被服务器拒绝
404	未找到	没有找到请求的网页地址或请求的地址不存在
405	方法禁用	客户端请求的方法被禁用
406	无法请求	无法使用请求的内容特性响应请求的网页
407	缺少代理授权	客户端请求应使用代理或需要代理的授权
408	请求超时	服务器等候请求超时
409	存在冲突	服务器返回字段存在冲突，或返回的列表差异过大
410	已删除	请求资源已删除，请求资源以前有而现在没有
411	标头字段无效	服务器不接受不含有效内容长度标头字段的请求
412	条件未满足	服务器未满足请求者在请求中设置的其中一个前提条件
413	请求体超标	服务器无法处理超标（占用内存太大）的请求，超出了服务器的处理范围
414	URI超标	请求的 URI超标，服务器无法解析
415	不支持请求	请求的格式不受请求页面的支持
416	不在请求范围	页面无法提供请求的范围
417	请求头未满足条件	服务器没有按要求请求标头字段
500	服务器内部错误	服务器无法完成请求
501	未完成请求	服务器问题，没有完成请求，并非请求问题
502	网关错误	服务器配置的网关可能存在问题，无法接收信息
503	服务器不可使用	服务器正处于维护阶段或暂停服务
504	网关超时	网关没有及时未回应，上游没有接收到信息
505	HTTP协议不支持	当前请求的HTML版本与服务器不一致或服务器不支持当前请求的HTML版本

4. 浏览器重绘与重排的区别？

重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。
重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

如何触发重排和重绘？

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

添加、删除、更新DOM节点
通过display: none隐藏一个DOM节点-触发重排和重绘
通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
移动或者给页面中的DOM节点添加动画
添加一个样式表，调整样式属性
用户行为，例如调整窗口大小，改变字号，或者滚动。

如何避免重绘或者重排？

集中改变样式，不要一条一条地修改 DOM 的样式。
不要把 DOM 结点的属性值放在循环里当成循环里的变量。
为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
尽量只修改position：absolute或fixed元素，对其他元素影响不大
动画开始GPU加速，translate使用3D变化

5. JavaScript有哪些数据类型，它们的区别？

JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。

其中 Symbol 和 BigInt 是ES6 中新增的数据类型：

Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

这些数据可以分为原始数据类型和引用数据类型：

基础数据类型：Undefined、Null、Boolean、Number、String。
引用数据类型：Object，对象子类型：Array，Function。

js类型判断

1. typeof

以获取一个变量或者表达式的类型-一般用于判断值类型

console.log(typeof 1);  // number
console.log(typeof '1');  //string
console.log(typeof true);  //boolean
console.log(typeof null); //object
console.log(typeof undefined); //undefined
console.log(typeof obj); //object
console.log(typeof foo);  //function
console.log(typeof arr);   //object

2. instanceof

用来判断一个对象是否在其原型链原型构造函数的属性，所以在比较对象（引用类型）时才有意义

num instanceof Number, // false
str instanceof String, // false
bool instanceof Boolean,  // false
arr instanceof Array, // true--注意
arr instanceof Object, // true--注意
obj instanceof Object,  // true--注意
func instanceof Function,  // true
und instanceof Object, // false
nul instanceof Object, // false
date instanceof Date,  // true
reg instanceof RegExp, // true
num instanceof Number, // false
error instanceof Error // true

3. Object.prototype.toString.call()

能够区分Array、Object和Function，适合用于判断自定义的类实例对象

var toString = Object.prototype.toString;
console.log(toString.call(1));                      //[object Number]
console.log(toString.call(true));                   //[object Boolean]
console.log(toString.call('mc'));                   //[object String]
console.log(toString.call([]));                     //[object Array]
console.log(toString.call({}));                     //[object Object]
console.log(toString.call(function(){}));           //[object Function]
console.log(toString.call(undefined));              //[object Undefined]
console.log(toString.call(null));                   //[object Null]

6. var && let && const

ES6之前创建变量用的是var,之后创建变量用的是let/const

三者区别：

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，且不能修改。
var可以先使用，后声明，因为存在变量提升；let必须先声明后使用。
var是允许在相同作用域内重复声明同一个变量的，而let与const不允许这一现象。

作者：Gaby
链接：https://juejin.cn/post/7016593221815910408
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。