image.png
（关注福利，关注本公众号根据提示回复领取优质前端视频，包括Vue、React视频实战、面试指导...）
*声明：此文干的不行，备好纸巾以防干哭*
目录：
对async、await的理解，内部原理 ？
介绍下Promise，内部实现
从输入URL到页面加载全过程经历了什么？
bind、call、apply的区别
介绍下原型链（解决的是继承问题吗）
对跨域的了解
前端怎么做单元测试
前端性能优化
至于框架面试题相关请继续关注本公众号
接下来会一个一个完美解答 ↓ ↓ ↓
对async、await的理解，内部原理 ？
首先先从字面意思来理解。async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。
async 和 async 是ES7新增的规范，两个规范可以看成一队连体婴，他们要一起出现才有效果：
image.png
async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。
也就是说，只有当 async 函数内部的异步操作都执行完，才会执行 then 方法的回调。
注意：Async 函数的错误处理
当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行。
解决办法：可以添加 try/catch。
image.png
介绍下Promise，实现原理
既然说到promise首先咱们先来了解一下他的核心概念：
Promise 概括来说是对异步的执行结果的描述对象。（这句话的理解很重要）
promise 的状态只有3种：pending fulfilled rejected分别为等待、执行成功和执行失败状态。
为什么要使用它？
利用 Promise 可以让异步编程更符合人的直觉，让代码逻辑更加清晰，把开发人员从回调地狱中释放出来。
实现
Promise对象是一个构造函数，用来生成Promise实例。通过在函数内部return 一个 Promise对象的实例，这样就可以使用Promise的属性和方法进行下一步操作了。
列子
image.png
从输入URL到页面加载全过程经历了什么
-
DNS 解析
-
TCP 连接
-
HTTP 请求抛出
-
服务端处理请求，HTTP 响应返回
-
浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户
扩展（向面试官要分数）
对于前端来说想优化的话可以做的事情非常有限。
HTTP 优化有两个大的方向：
减少请求次数
减少单次请求所花费的时间
bind、call、apply的区别
call()、apply()、bind() 都是用来重定义 this 这个对象的
它们的区别主要是在于方法的实现形式和参数传递上的不同
①：函数.call(对象,arg1,arg2....)
②：函数.apply(对象，[arg1,arg2,...])
③：var ss=函数.bind(对象,arg1,arg2,....)
image.png
介绍下原型链（解决的是继承问题吗）
通俗易懂的说明：
小明妈也是由小明妈的妈妈生的，通过小明妈找到小明妈的妈妈，再通过小明妈的妈妈找到妈妈……，这个关系叫做原型链。
一张图带你秒懂
image.png
对跨域的了解
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对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 （跨域：协议不同）
解决跨域问题，有如下三种方式：
1、使用jsonp
image.png
2、服务器代理
3、在服务端设置response header中Access-Control-Allow-Origin字段。
综上三种解决跨域的方案，个人感觉使用服务代理最好，没有破坏浏览器的安全策略，但这个对开发环境要高一点。设置response header的方式，根据具体情况分析，要考虑清楚产品面向的用户。对于jsonp这种方式，虽然没有破坏浏览器的安全策略，但只支持get方式的请求，有点不能接受，因为get传输有参数长度的限制，同时又要考虑传输中文的乱码问题，但如果项目中只是简单的查询、展示，这种方式还是可以考虑的。
前端单元测试
什么是单元测试？
每个单元测试就是一段用于测试一个模块或接口是否能达到预期结果的代码。开发人员需要使用代码来定义一个可用的衡量标准，并且可以快速检验。
为什么要单元测试？
单元测试应该是一个框架、标准，经常被形容被脚手架，像建筑一样，脚手架的高度至少应该和大楼高度不相上下，甚至一开始就搭好脚手架。
怎么做这里不做过多描述 详情访问：https://blog.csdn.net/Frank_YLL/article/details/79058616
前端性能优化
先来张nb的图（此乃阿里前端大神修言亲作）
image.png
一）内容层面
1、DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）
2、避免重定向（/还是需要的）
3、切分到多个域名
4、杜绝404
二）网络传输阶段
1、减少传输过程中实体的大小
1）缓存
2）cookie优化
3）文件压缩（Accept-Encoding：g-zip）
2、减少请求的次数
1）文件适当的合并
2）雪碧图
3、异步加载（并发,requirejs）
4、预加载、延后加载、按需加载
三）渲染阶段
1、js放底部，css放顶部
2、减少重绘和回流
3、合理使用Viewport 等meta头部
4、减少dom节点
5、BigPipe
四）脚本执行阶段
1、缓存节点，尽量减少节点的查找
2、减少节点的操作（innerHTML）
3、避免无谓的循环，break、continue、return的适当使用
4、事件委托
交流
本人Github链接如下，欢迎各位Star
image.png
（关注福利，关注本公众号根据提示回复领取优质前端视频，包括Vue、React视频实战、面试指导...）
网友评论