前端八股文经验分享：面试拷打经历 与 知识总结（纯个人总结）（二） - 持续更新ing

八股文对应届生来说是面试的重中之重，它决定了你能否找到一份不错的工作；对于已经工作的人来说，八股文可以对工作中遇到的问题提供解决办法的基础，当然，积累解决问题的经验同样重要。

---

1. 数组对象有哪些原生方法

pop、push、shift、unshift、slice、splice、concat、reverse、join、toString、split、forEach、every、indexOf

2. object.is() 的作用

用于确定两个值是否相同，它接受两个参数，这两个参数是要比较的值，并返回一个布尔值指示两个参数是否相同
        Object.is(value1，value2)

3. Vue是单向数据流还是双向数据流

单向数据流

4. TS 和 JS的区别

1. TS引入了”类“的概念
2. TS引入了模块概念，可以把声明，数据，函数和类封装在模块中
3. JS没有重载概念，TS有重载
4. TS增加了接口interface、泛型、类、类的多态、继承等
5. JS有的类型：boolean类型、number类型、string类型、array类型、null、undefined
   TS新增的类型：tuplpe类型（元素类型）、enum类型（枚举类型）、any类型（任意类型）、void类型、never类型

5. TCP三次握手

第一次握手：建立链接时，客户端发送syn包到服务器，并进入SYN_SEND状态，等待服务器确认

第二次握手：服务器收到SYN包，必须确认客户的SYN，同时自己也发送一个SYN包，即SYN+ACK包此时服务器进入SYN_RECV状态

第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手

注意：
        1）必须要三次握手
        2）三次握手未完成不能携带数据

6. 3开头的状态码

3XX 重定向
        301：永久移动
        302：临时移动
        304：未修改

7. 与协商缓存有关的响应头与请求头

1. 响应头：Last-Modified（资源的最后修改时间）                 请求头：If-Modified-Since
2. 响应头：ETag（若服务器资源更新，则ETag也会更新）    请求头：If-None-Match

ETag 和 Last-Modified 的区别：

                        ETag是用hash内容对比判断是否资源发生改变
                        Last-Modified是通过最后一次修改时间来判断资源是否发生改变

8. ElenentUI命名的根据

根据BEM——前端命名方法论，避免命名冲突

9. 什么是原型链？为什么要使用原型链？

一、什么是原型链
        原型链就是实例对象和原型对象之间的链接，每个函数都有一个prototype属性，这个prototype属性就是原型对象，我们拿这个函数通过new构造函数创建出来的实例对象，这个实例对象自己会有一个指针（_proto_）指向它的构造函数的原型对象，这样构造函数和实例对象之间就通过（_proto_）连接在一起形成链子

二、为什么要使用原型链

        1）为了实现继承，简化代码，实现代码重用

        2)  只要是这个链条上的内容，都可以被访问和重用

10. 浏览器事件模型

浏览器事件模型主要分为三个阶段：1）捕获阶段        2）目标阶段        3）冒泡阶段

11. JS执行机制（事件循环）

1. 先执行执行栈中的同步任务
2. 异步任务（回调函数）放入任务队列中
3. 一旦任务栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

12. JS原型继承的方式

1）原型链继承

2）构造函数继承

3）组合继承

4）原型式继承

5）寄生组合式继承

13. ES6中是怎么实现原型链的

Class类
在ES6中新增类的概念，使用class关键字声明一个类，之后这个类来实例化对象，类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个对象

14. Promise解决了什么问题

1. 回调地狱
2. 代码的可读性问题
3. 信任问题

15. JS的排序方法

1. 冒泡排序
2. 选择排序
3. 插入排序
4. 归并排序
5. 快速排序

16. CSS中如何修改父元素的前三个子元素的样式

:nth-child() 选择器

1）选择列表中的偶数标签        :nth-child(2n)

2）选择列表中的奇数标签        :nth-child(2n-1)

3）选择从第六个开始的，直到最后        :nth-child(n+6)

4）选择第一个到第六个        :nth-child(-n+6)

5）选择第六个到第九个        :nth-child(n+6):nth-child(-n+9)

所以，前三个        :nth-child(-n+3)

17. CSS选择器优先级

id >= 类 = 属性 = 伪类 > 标签 = 伪元素 > 相邻元素 (>)= 子元素 (>)= 后代

18. CSS中unset，revert，initial，inherit代表什么

• initial 初始
  初始默认值
• inherit 继承
  继承直接父级的对应属性值
• unset未设置
  表示该属性默认可继承，则值为inherit，否则initial
• revert还原
  表示样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式；否则等价于unset

19. JS中Number_MAX_SAFE_INTEGER怎么来的

Number.MAX_SAFE_INTEGER是JS里整数的安全的最大值，由于JS用的是IEEE754双精度浮点，可以安全地表示[-2^53+1, 2^53-1]这个范围

20. Vue路由的实现方法

1）编写页面导航，编辑App.vue，添加导航链接

2）页面中组件视图展示设置：编辑入口文件App.vue

3）编写路由映射规则，创建路由模块：src / router / index.js

4）路由对象必须挂在到Vue实例上才能生效，编辑main.js挂载到router

21. 数字证书的作用

1. 身份认证作用
2. 保密性作用
3. 完整性作用
4. 防抵赖作用

22. cookie中SameSite属性

Strict / Lax / None

cookie的SameSite属性用来限制第三方Cookie，从而减少安全风险

23. 判断数据类型的方法

一、typeof
        typeof返回值 "object", "number", "undefined", "function", "string", "symbol"
        typeof返回的值都是字符串类型

二、instanceof        ——        不能判断基本数据类型，只能判断引用数据类型

        instanceof 用来判断数据是否是某个对象的实例，返回一个布尔值

三、constructor

        返回布尔值

四、Object.prototype.toString.call()

        "万能方法"，工作中发常用且准确

24. new操作符都做了什么事

定义：new操作符用于创建一个给定构造函数的实例对象

new做了以下工作：

        1）先创建了一个新的对象newObject

        2）将新对象newObj与构造函数通过原型链进行链接

        3）将构造函数的this绑定到新对象newObj

        4）根据构造函数返回类型做判断，如果是值类型，返回newObj；如果是引用类型，就返回这个引用类型得对象

25. 手写new

function newFunc(Func, ...args) {
    //1.创建一个实例对象
    let newObj = {}
    //2.将新对象newObj与构造函数通过原型链进行连接
    newObj._proto_ = Func.prototype
    //3.将构造函数得this绑定到新对象newObj
    const result = Func.apply(newObj, args)
    //4.根据构建函数返回类型做判断,如果是值类型,返回newObj;如果是引用类型,就返回这个引用类型得对象
    return result instanceof Object ? result :newObj
}

26. CSS中得定位方式

• 静态定位——static
• 相对定位——relative
• 绝对定位——absolute （脱离文档流）
• 固定定位——fixed  （脱离文档流）

27. 绝对定位设置top:50%相当于谁来说得

距离它最近得已经定位得父元素得高度

28. git如何把master合并到自己分支

1）切换到主支
        git checkout master

2）使用git pull把master代码拉到本地
        git pull

3）切换到自己分支
        git checkout XXX

4）使用merge把主分支得代码合并到自己分支

        git merge master

5）最后push你分支得代码就和主支一样了
        git push

29. git常用操作

一、从master仓库拉取

        git clone 地址

二、查看所有分支

        git branch -a

三、切换到目标分支

        git checkout 某分支名

四、拉取目标分支更新内容

        git fetch origin 某分支名

五、提交代码

        1）查看本地操作（添加，修改，删除）了得文件

                git status

        2）从远程拉取最新修改

                git pull
        3）将本地修改了得文件添加到暂存区

                git add 文件路径（上面status里查到的）

        4）添加评论

                git commit -m "说明内容"

        5）将暂存区得文件提交到远程分支上

                git push

                git push origin 分支名

六、新建本地分支

                git checkout -b 新分支名

        把新分支推送到远端

                git push origin 新分支名

        将本地分支与远端分支进行关联

                git branch -- set-upstream-to = origin / 新分支名

七、回退版本

        1）reset，回退之后后面的版本就找不到了

                git log        //查看提交记录，获取到版本号

                git reset -- hard 目标版本号        //回退到指定版本

                git push -f        //强制提交

        2）revert 回退之后后面的版本就找不到了

                git log        //产看提交记录，获取到版本号

                git revert --n 目标版本号        //回退到指定版本

                git commit -m xxx        //提交

                git push        //推送到远程

30. flex 属性

容器属性：

        flex-direction 主轴方向                flex-wrap  如何换行

        flex-flow：flex-direction flex-wrap简写形式

        justify-content  主轴对齐方式        align-content  多轴对齐方式

        align-item  交叉轴对齐方式

项目属性：

        flex-grow  项目放大比例（默认0）        flex-shrink  项目缩小比例（默认1）

        flex-basis  占据主轴空间（默认auto）

        flex：flex-grow flex-shrink flex-basis 简写形式（默认 0 1 auto）

        flex：auto（1 1 auto）                          flex：none（0 0 auto）

        flex：initial（0 1 auto）

31. 常用的深拷贝办法

1. JSONparse（JSON.stringify(obj)）
2. for in 遍历对象，逐个拷贝值
3. lodash库 lodash.cloneDeep()

32. for of 和 for in 的区别

for in 适合遍历对象；for of 适合遍历数组
for in 遍历的是key；for of 遍历的是值

33. 判断一个对象是不是数组的方法

1）Array.isArray(arr)

2）arr instanceof Array

3）Object.prototype.toString.call(arr)

34. 事件委托

事件委托，又叫事件代理，就是把原本要绑定在子元素得响应事件委托给父元素，让父元素担当事件监听得职务，原理是DOM元素得事件冒泡

有点是减少内存得占用，新增子对象得时候不再重新绑定。

35. watch 和 computed 的区别

1	computed是计算属性，支持缓存，只有依赖的数据发生了变化，才会重新计算
	watch不支持缓存，监听到数据的变化会立刻触发相应的操作
2	computed默认第一次加载的时候就监听
	watch如果需要首次加载监听需要设置immediate:true
3	computed不支持异步
	watch支持异步监听

36. 手写深拷贝，考虑边缘情况

myDeepClone = function (target,hash = new WeakMap()) {
    if (target == null) return target;
    if (target !== 'object') return target
    if (target instanceof HTMLElement) return target
    if (target instanceof RegExp) return new RegExp(target);
    if (target instanceof Date) return Date(target);
    //避免重复
    if (hash.get(target)) return hash.get(taeget);
    //创建新的克隆对象或数组
    const cloneTarget = Array.isArray(target) ? [] : {};
    hash.set(target, cloneTarget)
    //返回自身的键组成的数组，且用来处理Symbol作为键名的情况
    Reflect.ownKeys(target).forEach(key => {
        cloneTarget[key] = myDeepClone(target[key], hash);
    })
    return cloneTarget
}

37. addEventListener 第三个参数

默认是false，false为冒泡事件，true为捕事件

38. CSS中权重比较

!import > 内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

39. CSS盒模型

一、什么是CSS盒模型

        CSS的盒模型有里到外：content、padding、border、margin

        CSS盒模型有两种：标准模型、IE模型

二、区别

标准盒模型（content-box）	IE盒模型（border-box）
内容就是盒子的边界	边框才是盒子边界
元素的宽度width=内容高度	内容宽度元素的宽度width=内容宽度

40.能不能创建一个没有原型的对象

Object.create(null)

41. CSS用top left定位和transform的区别

1）元素位置

        使用top left 定位是直接改变元素真实位置

        用transform只是改变了视觉位置

2）两种定位本身的语法

        做效果的时候transform比较方便，因为transform的视角是元素本身

3）效率

        transform不改变CSS布局，因为渲染行为大多数情况下在元素本身，所以效率比top left要高

42. http1 与 http2 的主要区别

1）二进制传输

        http2采用二进制传输，相较于文本传输的http1来说更见安全可靠

2）多路复用

        http1 一个连接只能提交一个请求，而http2可以同时处理无数个请求，可以降低连接的占用量，进一步提升网络的吞吐量

3）头部压缩

        http2通过gzip与compress对头部进行压缩，并且在客户端与服务端各维护了一份头部索引表，只需要根据索引id就可以进行头部信息的传输，缩小了头部容量，间接提升了传输效率

4）服务端推送

        服务端可以主动推送资源给客户端，避免客户端花过多的事件逐个请求资源，这样可以降低整个请求的响应时间

43. XSS是什么以及如何防范

Cross-Site Scripting —— 跨站脚本攻击
（代码注入攻击，攻击者通过在目标网站注入恶意脚本，使之在用户的浏览器上运行，利用这些恶意脚本，攻击者可以获取用户的敏感信息如Cookie，SessionID等，进而危害数据安全）

类型	恶意代码存放的位置	由谁取得恶意代码，并插入到网页上
存储型XSS	后端数据库	HTML
反射性XSS	URL	HTML
DOM型XSS	后端数据库/前端存储/URL	前端JavaScript

• 存储型XSS防范 & 反射型XSS防范
  1）改成前端渲染，把代码和数据分离开
  2）对HTML做充分转义
• DOM型XSS防范
  本质上是网站前端JS代码不够严谨，把不可信的数据当作代码执行了，在使用 innerHTML，document.write()要小心，不要把不可信的数据作为HTML插到页面上，而尽量使用 textContent，setAttribute()等

44. https中客户端对公钥证书的验证过程

1）客户端取出提前内置在手机内部的认证机构的公钥

2）用认证机构的公钥去解密公钥证书里的数字签名，从而得到数字指纹

3）客户端对公钥证书的服务器公钥进行数字摘要算法，从而生成数字指纹

4）对比客户端自己生成的数字指纹与解密得到的数字指纹，如果一致则公钥证书验证通过，就可以进行接下来的握手步骤了

45. fadeOut、fadeIn、fadeToggle、fadeTo

• fadeOut        淡出可见元素
• fadeIn           淡入
• fadeToggle   在淡入淡出间切换
• fadeTo          渐变为给定的不透明值

46. 跨域实现方式 

一、jsonp请求

        利用script标签的跨域特性

二、document.domain

        用在主域名相同子域名不同的跨域访问中

三、window.name

        window的name属性有了特征：在一个窗口（window）的生命周期内，窗口载入的所有页面都是共享一个window.name，每个页面都有对其重写的权限，并且window.name持久存在在载入过的页面中，不会因为新页面在载入重置

四、window.postMessage

        html5新写法，可以通过它向其他的window对象发消息，无论这个window是否同源

五、CORS

        使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功或失败

六、Web Sockets

        在JS创建了Web Sockets之后，会有一个HTTP请求发送到浏览器以发起连接，取得服务器响应之后，建立的连接会使用HTTP升级从HTTP协议交换为Web Sockets协议 

47. 闭包在实际开发中的应用

 1）setTimeout，setInterval

        当定时器中函数使用函数作用域链的变量时，其实就是闭包

2）回调函数

        将某个作用域链的函数传给另一个作用域链，且执行，就是闭包

3）jquery

        立即执行函数内，定义的对象，变量，构造函数，构造函数的原型，都可以通过一个闭包放在jquery对象上，供外部使用

48. Vue 组件之间传参方式

• （父子传参）props 父传子
• （父子传参）$emit 子传父
• （父子传参）parents/children
• （父子传参）v-model
• （父子传参）.sync （可以帮我们实现父组件向子组件传递的数据的双向绑定）
• （父子传参）attrs/listener（常用于原生组件的封装）$attrs可以获取父组件传进来但没有通过props接收的属性
• （父子/跨级传参）Bus 常用于任意两个组件之间通讯
• （父子/跨级传参）provide/inject （祖先及其后代传值）常用于一些多个组件嵌套封装，一个顶层组件内部的后代组件需要用到顶层组件的数据，就是用这种方式
• （父子/兄弟/跨级传参）$root （可以拿到App.vue里的数据和方法）
• （父子/兄弟/跨级传参）slot （把子组件的数据通过插槽的方式传给父组件使用，然后再插回来）
• （父子/兄弟/跨级传参）$refs常用于父组件调用子组件的方法（如：列表数据变化通知子组件重新渲染）
• （父子/兄弟/跨级传参）Vuex用于任意组件的任意通讯

49. 首屏加载慢怎么排查

一、首屏加载慢的原因

        1）网络延时问题

        2）资源文件是否过大问题

        3）资源是否重复发送请求去加载问题

        4）加载脚本的时候，渲染内容堵塞问题

二、解决方案

        1）路由懒加载
                以函数的形式加载路由，只有在解析给定路由的时候才会加载对应的路由组件

        2）静态资源本地缓存

                前端合理使用localStorage，sessionStorage等缓存方式

        3）图片压缩

        4）减少重复请求

        5）UI框架按需加载

                借助babel-plugin-component

        6）开启GZip压缩

        7）优化代码

                1. v-if，v-show 的合理使用

                2. 使用v-for时为item设置唯一key值

                3. 细分vuejs组件

                4. 减少watch的数据

        8）使用SSR服务端渲染

                将指定的异步数据在服务端提前渲染好，再返回给客户端

                        1. vue可使用Nuxt.js 框架实现服务端渲染

                        2. react可使用koa2等技术的实现方案

        9）使用CDN

                1. 解决打包时间太长，打包后代码体积太大，请求慢

                2. 服务器网络不稳定带宽不高，使用cdn刻意回避服务器带宽问题

50. 如果定义a:active, a:link, a:visited, a:hover 使之都生效，正确的顺序是？

a:link ——> a:visited ——> a:hover ——> a:active