2019大厂面试必备

                                          想要升职加薪的都关注我了~

（关注福利，关注本公众号根据提示回复领取优质前端视频，包括Vue、React视频实战、面试指导...）

声明：此文干的不行，备好纸巾以防干哭

目录：

对async、await的理解，内部原理 ？

介绍下Promise，内部实现

从输入URL到页面加载全过程经历了什么？

bind、call、apply的区别

介绍下原型链（解决的是继承问题吗）

对跨域的了解

前端怎么作单元测试

前端性能优化

至于框架面试题相关请继续关注本公众号

接下来会一个一个完美解答 ↓ ↓ ↓

对async、await的理解，内部原理 ？

首先先从字面意思来理解。async 是“异步”的简写，而 await 能够认为是 async wait 的简写。因此应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

async 和 async 是ES7新增的规范，两个规范能够当作一队连体婴，他们要一块儿出现才有效果：

async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。

也就是说，只有当 async 函数内部的异步操做都执行完，才会执行 then 方法的回调。

注意：Async 函数的错误处理

当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行。

解决办法：能够添加 try/catch。

介绍下Promise，实现原理

既然说到promise首先我们先来了解一下他的核心概念：

Promise 归纳来讲是对异步的执行结果的描述对象。（这句话的理解很重要）

promise 的状态只有3种：pending fulfilled rejected分别为等待、执行成功和执行失败状态。

为何要使用它？

利用 Promise 可让异步编程更符合人的直觉，让代码逻辑更加清晰，把开发人员从回调地狱中释放出来。

实现

Promise对象是一个构造函数，用来生成Promise实例。经过在函数内部return 一个 Promise对象的实例，这样就可使用Promise的属性和方法进行下一步操做了。

列子

从输入URL到页面加载全过程经历了什么

1. DNS 解析

2. TCP 链接

3. HTTP 请求抛出

4. 服务端处理请求，HTTP 响应返回

5. 浏览器拿到响应数据，解析响应内容，把解析的结果展现给用户

扩展（向面试官要分数）

对于前端来讲想优化的话能够作的事情很是有限。

HTTP 优化有两个大的方向：

减小请求次数

减小单次请求所花费的时间

bind、call、apply的区别

call()、apply()、bind() 都是用来重定义 this 这个对象的

它们的区别主要是在于方法的实现形式和参数传递上的不一样

①：函数.call(对象,arg1,arg2....)

②：函数.apply(对象，[arg1,arg2,...])

③：var ss=函数.bind(对象,arg1,arg2,....)

介绍下原型链（解决的是继承问题吗）

通俗易懂的说明：

小明妈也是由小明妈的妈妈生的，经过小明妈找到小明妈的妈妈，再经过小明妈的妈妈找到妈妈……，这个关系叫作原型链。

一张图带你秒懂

对跨域的了解

跨域，指的是浏览器不能执行其余网站的脚本。它是由浏览器的同源策略形成的，是浏览器对JavaScript施加的安全限制。

所谓的同源，指的是域名、协议、端口均相等。

http://www.abc.com/a/b 调用 http://www.abc.com/d/c（非跨域）

http://www.abc.com/a/b 调用 http://www.def.com/d/c （跨域：域名不一致）

http://www.abc.com:81/a/b 调用 http://www.abc.com:82/d/c （跨域：端口不一致）

http://www.abc.com/a/b 调用 https://www.abc.com/d/c （跨域：协议不一样）

解决跨域问题，有以下三种方式：

一、使用jsonp

二、服务器代理

三、在服务端设置response header中Access-Control-Allow-Origin字段。

综上三种解决跨域的方案，我的感受使用服务代理最好，没有破坏浏览器的安全策略，但这个对开发环境要高一点。设置response header的方式，根据具体状况分析，要考虑清楚产品面向的用户。对于jsonp这种方式，虽然没有破坏浏览器的安全策略，但只支持get方式的请求，有点不能接受，由于get传输有参数长度的限制，同时又要考虑传输中文的乱码问题，但若是项目中只是简单的查询、展现，这种方式仍是能够考虑的。

前端单元测试

什么是单元测试？

每一个单元测试就是一段用于测试一个模块或接口是否能达到预期结果的代码。开发人员须要使用代码来定义一个可用的衡量标准，而且能够快速检验。

为何要单元测试？

单元测试应该是一个框架、标准，常常被形容被脚手架，像建筑同样，脚手架的高度至少应该和大楼高度不相上下，甚至一开始就搭好脚手架。

怎么作这里不作过多描述 详情访问：https://blog.csdn.net/Frank_YLL/article/details/79058616

前端性能优化

先来张nb的图（此乃阿里前端大神修言亲做）

一）内容层面

一、DNS解析优化（DNS缓存、减小DNS查找、keep-alive、适当的主机域名）

二、避免重定向（/仍是须要的）

三、切分到多个域名

四、杜绝404

二）网络传输阶段

一、减小传输过程当中实体的大小

1）缓存

2）cookie优化

3）文件压缩（Accept-Encoding：g-zip）

二、减小请求的次数

1）文件适当的合并

2）雪碧图

三、异步加载（并发,requirejs）

四、预加载、延后加载、按需加载

三）渲染阶段

一、js放底部，css放顶部

二、减小重绘和回流

三、合理使用Viewport 等meta头部

四、减小dom节点

五、BigPipe

四）脚本执行阶段

一、缓存节点，尽可能减小节点的查找

二、减小节点的操做（innerHTML）

三、避免无谓的循环，break、continue、return的适当使用

四、事件委托

交流

本人Github连接以下，欢迎各位Star

https://github.com/Xingen123

长按扫码关注我

干货都给你