持续更新中！我的2.5年前端开发经验和八股文分享

一、http:

1、http是客户端和服务器之间请求和应答的一个标准，从www向服务器传输文本的超文本协议

2、http和http的区别：https更安全，默认端口是443，ca证书需要掏钱；http是明文传输，默认端口是80，相对没那么安全

二、浏览器输入到渲染出页面发生了什么

1、进行DNS域名解析

2、判断有无缓存，缓存能用时直接返回缓存，无需进行以下步骤

3、TCP三次握手建立连接

4、发起https请求

5、浏览器解析响应，解析出DOMTree和CSSOM，生成renderTree即渲染树，然后进行重排（layout）和重绘（paint）

三、缓存

1、缓存分为强缓存和协商缓存

2、强缓存中：只要缓存资源没有过期，就会使用缓存，Expires（时间戳）和cache-control（max-age 相对时间）

3、协商缓存：浏览器会向服务器发送一个请求，判断资源是否发生改变，如果改变了则从服务器重新获取（状态码是200），如果没有发生改变则使用缓存资源，此时状态码是304

last-Modified/if-modified-since 和 Etag/if-None-Match

所以304出现在有协商缓存且缓存未失效的情况下

四、重排和重绘

1、重排：决定了元素的的位置，也就是回流

2、重绘：决定了元素的样式，将每个节点转化为实际像素

3、重排一定会导致重绘

4、重排的触发方式：display:none,用户行为，调整窗口大小，

5、重绘的触发方式：visibility:hidden，字体颜色等，

6、如何避免：使用脱离文档流的position: absolute、fixed等

五、事件循环机制

1、背景：js是单线程的，会先在主线程里执行同步任务，遇到微任务的时候，放到任务队列里，等当前的同步任务执行完，再去执行任务队列里的微任务，

清空微任务后，再去执行下一个同步任务

2、微任务：vue中的nextTick，es6的Promise

3、宏任务：SetTimeOut，setImmediate，一般是浏览器提供的能力，即便是时间设置为0，也会在当前这次事件循环中，最后执行

六、会话缓存

1、localStorage是本地缓存，只能存储字符串类型，复杂数据类型需要json的stringify和parse，关闭浏览器也不会清除；除非手动清除，否则永不消失；可存5M

2、sessionStorage仅在当前会话下有效，其他同上

七、盒模型(box-sizing)

1、怪异盒模型：border-box

2、标准盒模型：content-box

3、content-box：width仅指实际内容的宽高，不会分配给padding和border，加入width设置100px，就算有padding和border，那么实际内容宽度也会一直保持100px

4、border-box:width值的是包括border和padding的宽高，加入width设置100px，如果有padding和border，那么实际内容宽度肯定少于100px

八、水平垂直居中的方法：

1.未知宽高：

（1）、使用flex布局，align-items:center，justify-content:center

（2）、使用absolute绝对定位，top:50%，left:50%，transform:translate(-50%，-50%)

2、已知宽高：

（1）、使用绝对定位和margin负值

（2）、使用绝对定位和margin:auto

（3）、使用绝对定位和calc

九、flex布局

flex:1 flex-grow:0 flex-shrink:1 flex-basis:0%

十、js数据类型

1、基础数据类型：Number、String、undefined、null、Boolean；检测基础数据类型可以使用 typeof 运算符 （检测不了复杂数据类型）

2、复杂数据类型：Array、Object等；检测复杂数据类型可以使用instanceof进行检测(检测不了简单数据类型)，本质是看A是不是B的实例，即看是不是在原型链上

3、万能检测：Object.prototype.toString.call() 返回为 [object Number] 这种形式

4、typeof NaN 返回值为number

十一、原型与原型链

1、关系：实例的__proto__ = 构造函数的prototype

2、原型：js的对象都有一个隐式属性__proto__，都有一个显示属性prototype

3、原型链：在实例上找不到的方法或者属性，就会去__proto__原型上继续找

4、instanceof的本质就是：构造函数的prototype是否出现在原型链上的任何位置

十二、new的过程发生了什么

1、在内存中创建一个空对象

2、新对象的__proto__指向构造函数的protoType

3、构造函数内部的this指向新对象

4、执行构造函数的内部代码

5、构造函数有返回值的话，就返回，没有的话，就返回这个新对象

十三、闭包

1、概念：引用了另一个函数作用域中变量的函数，通常在嵌套函数中实现

2、优点：私有化数据、在私有化数据的基础上保持数据；

3、缺点：内存泄露，变量不会被回收

4、用途：防抖，节流

5、作用域链：函数在执行上下文中找不到变量，就会去调用时的上下文找，依次往上一级，形成作用域链

十四、手写防抖、节流

十五、手写深拷贝

十六、Promise

1、Promise是es6提供的一种新的异步问题的解决方案，它在pending时的状态不受任何外界的影响，只有异步操作的结果可以决定当前是fulfilled状态还是reject状态

2、优点：有统一的api，方便使用；解决地狱回调

3、缺点：（1）一旦新建，无法取消；（2）pending时无法得知目前状态

4、误区：Promise新建之后就会立即执行，指的是new Promise下面的代码会立即执行，可以认为是同步代码，then里面的是异步任务

Promise.all[]全部成功才是成功，一个失败就是失败

Promise.race[]一个成功就是成功，一个失败就是失败

Promise.allSettled[] 无论成功与否，都会等全部执行完，只会进then，没有catch

Promise.any[]一个成功就成功，全部失败才失败

十七、双向数据绑定

v-model 是:value和@input事件的语法糖

十八、响应式原理

1、vue2使用Object.defineProperty()进行数据拦截

2、读取数据时，触发getter()，在getter中收集依赖，设置数据时触发setter()，并在setter里去notify进行通知，通着订阅者去update，从而做到数据驱动视图

十九、nextTick及原理

1、概念：在下次DOM更新循环结束之后执行延迟回调

2、vue中数据更新不会同步触发dom更新，会在合适的时机只执行一次dom操作

二十、computed和watch

1、computed：一般是一个属性受多个属性的值的影响的时候

2、watch：多个操作需要依赖于同一个数据变化的时候

二十一、vue中data为什么是一个函数

每一个vue文件其实多可以看做一个实例，vue组件可能会有多个实例，如果data是一个简单的对象，数据就会混乱，是函数的话每个vue组件都会有自己的data

二十二、虚拟dom和diff算法

1、虚拟dom的概念：用js对象去模拟dom结构

2、虚拟dom的好处：提升性能，每次的变化都会映射到虚拟dom上，但是虚拟dom只是操作js内存中的对象，不会触发重排与重绘，最后在合适的时机一次性的映射成真实dom

3、diff算法：计算出需要更改的dom，而不是更新整个视图

二十三、VueX

1、结构：actions、mutations、state

2、actions：通过this.$store.commit()，把变化的数据也同步到state里

3、mutations：里面存储的都是用来改变数据的方法

4、state：存储公共数据的地方

5、使用时，需要从computed中取出来，因为数据是响应式的，所以数据在别处被改变时，也能检测到

6、优点：统一数据管理

7、缺点：页面刷新后丢失（解决办法：localStorage、sessionStorage里同步缓存）

二十四、单页面和多页面

1、单页面: 一个主页面+多个组件，只需要一开始加载一次js资源，页面之间跳转都是去刷新局部资源（一般来说用vue组件写的都是单页面）

2、多页面：多个独立的主页面，每个页面都需要去重复的加载js资源，跳转需要整夜资源刷新