第二十一天web前端面试题
1，手写promise封装axios
2，如何解决回调地狱
首先回调地狱是什么？函数作为参数层层嵌套
什么是回调函数(一个函数作为参数需要依赖另一个函数执行调用)
一、拆解function
function拆分的方式其实仅仅只是拆分代码块，时常会不利于后续维护；
二、事件发布/监听模式
发布者订阅者模式是通过保存事件，然后在需要使用的时候直接发布事件，就可以触发保存的回调
事件发布/监听方式模糊了异步方法之间的流程关系；
三、Promise
Promise虽然使得多个嵌套的异步调用能够通过链式的API进行操作，但是过多的then也增加了代码的冗余，也对阅读代码中各阶段的异步任务产生了一定干扰；
四、Generator
通过generator虽然能提供较好的语法结构，但是毕竟generator与yield的语境用在这里多少还有些不太贴切。
五、async/await
所以就有了async/await语法糖
3，请详解移动端点透发生场景、原因及解决方案(最优)
发生场景总结如下：
1，A/B两个层上下z轴重叠（上下重叠，A盖着B）。
2，上层的A点击后消失或移开。（这一点很重要）
3，B元素本身有默认click事件（如a标签） 或 B绑定了click事件。
原因：
点透问题出现的原因就是因为我们上边说过的移动端click事件300ms延迟问题，当点击上层元素时，先触发touchstart事件，然后在300ms后会触发click事件，而此时上层元素已经消失，所以下边的元素会触发click事件，这就是点透
解决方案：
1，fastclick.js
fastclick.js既然可以解决click300ms延迟，那必然可以解决点透问题，使用方法如上文所述。
2，对于B元素本身存在默认click事件的情况，使用touchend代替touchstart事件并阻止掉时A元素touchend的默认行为preventDefault()，因为触发touchend需要200ms，从而阻止click事件的产生。
3，使用一个(透明)遮罩层，屏蔽所有事件，然后400ms(对于IOS来说是个理想值)后自动隐藏
4，延迟一定的时间(300ms+)来处理事件
5，直接使用click事件，不考虑延迟问题
6，下层避开click事件，如a链接改为span等标签，使用js跳转页面
4，详述前端性能优化的手段
一、页面级优化
1，减少 HTTP请求数
主要途径包括：(1). 从设计实现层面简化页面 (2). 合理设置 HTTP缓存 (3). 资源合并与压缩 (4). CSS Sprites (5). Inline Images
2. 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
3. 异步执行 inline脚本(其实原理和上面是一样，保证脚本在页面内容后面加载。)
4. Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）
5. 将 CSS放在 HEAD中
6. 避免重复的资源请求
5，浏览器输入网址回车发生了什么
1，当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，
浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览
器获得请求对应的 IP 地址。
2，浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。
第一次握手： 建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；
第二次握手： 服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手： 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端
尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找
3，到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4/此时，Web 服务器提供资源服务，客户端开始下载资源。
6，页面的渲染过程
1，用户输入url地址，浏览器根据域名寻找IP地址
2，浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求
3，服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的
4，浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染
解析渲染该过程主要分为以下步骤：
1，解析HTML
2，构建DOM树
3，DOM树与CSS样式进行附着构造呈现树
4，布局
5，绘制
7，列举你知道的浏览器内核
IE浏览器 ：Trident内核
Firefox(火狐浏览器)：Gecko内核
Safari（苹果浏览器）: Webkit内核
Chrome/opera：Blink内核：是基于Webkit内核的子项目
8，如何优化SPA首屏加载慢的问题
1、安装动态懒加载所需插件
babel-plugin-syntax-dynamic-import
配置/laravel/.babelrc
{
"plugins": ["syntax-dynamic-import"]
}
2、去掉.extract()
它包含需要编译的文件类型，现在vue等静态资源从CDN加速
3，配置output输出形式
chunkFilename: 'js/chunk/[name].js?v=[chunkHash]'
4、配置externals
它所包含的文件类型将被排除，避免不必要的静态资源包含进来，导致编译出的文件过大
5、在首页HTML挂载点之前引入静态资源CDN
6、配置vue路由
由require()方式修改为() => import()方式
{ path: '/home/wx/auth', component: () => import ('./views/home/wx/Auth')},
