前端常见面试题（十八）

1、手写promise封装axios

在url文件夹下创建utils文件夹，新建index.js文件

 import axios from 'axios';


// const get = () => {
//     console.log('get请求');
// }

// const post = () => {
//     console.log('post请求')
// }

// export{
//     get,
//     post
// }

// process.env.NODE_ENV环境
let baseURL;
if(process.env.NODE_ENV=='development'){
    baseURL = 'http://132.232.94.151:3000/api'
}else{
    baseURL = '/xxx'
}
// baseURL es6 方法


const $http = axios.create({
    baseURL,
})
// create 是axios自带的方法

export const get = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        // axiso 自带 get 和 post 方法
        $http.get(url,{
            params,
        }).then(res=>{
            if(res.data.status===0){
                resolve(res.data);
            }else{
                alert(res.data.msg)
            }
        }).catch(error=>{
            alert('网络异常');
        })
    })
}

export const post = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        $http.post(url,params).then(res=>{
            if(res.data.status===0){
                resolve(res.data);
            }else{
                alert(res.data.msg);
            }
        }).catch(error=>{
            alert('网络异常');
        })
    })
}

2、main.js 方面

这里使用了构造函数的原型prototype
声明一个全局变量并且把封装好的get和post方法放在里面使用封装后的函数

import { get, post } from "./utils/index";
Vue.prototype.$http = {
  get,
  post
};

在用到的组件

created() {
    this.getFilmList();
  },
  methods: {
    async getFilmList() {
      const url = "/film/getList";
      // 要访问第二页的话在网址后面加 ?type=2&pageNum=页数
      const res = await this.$http.get(url);
      this.filmList = res.films;
    },

遇到的问题：这里注意的是，因为是promise封装的函数方法，所以使用的时候要加上async 函数(){ await 数据} 不然会报错，因为没有完成异步转同步

2、如何解决回调地狱

异步编程在JavaScript中非常重要。过多的异步编程也带了回调嵌套的问题

**使用es6的Promise解决回调地域的问题
1.生成Promise实例执行一系列同步操作
3.使用resolve函数将异步操作的结果传递出去, reject函数传递异步操作的错误
4.用then方法分别指定Resolve状态和Reject状态的函数,then方法返回一个新的Promise实例,因此可以采用链式写法

3、请详解移动端点透发生场景、原因及解决方案(最优)

点透场景：层A覆盖在层B上面，常见的有对话框等，层A用touchstart或者tap事件点击进行隐藏或者移开，由于click晚于touchstart，超过300ms，当A隐藏后，click到的是下面的层B，此时层B的click事件会触发，或者其上a链接会跳转，input，select会吊起键盘
点透原因：是因为移动端click事件300ms延迟问题，当点击上层元素时，先触发touchstart事件，然后300ms后会触发click事件，而此时上层元素已经消失，所以下面的元素会触发click事件，这就是点透
解决方案：
1，touchstart换成touchend，因为触发touchend需要200ms所以可以把触发时间这个原理问题解决掉
2，直接使用click，不考虑延迟
3，下层避开click事件，如a链接改为span等标签，使用js跳转页面

添加meta标签，阻止用户双击缩放，并限制视口宽度。

3、详述前端性能优化的手段

前端性能优化的目标是：让网页展示的更快，运行的更流畅，用户体验更好。

减少 http 请求数（合并 css、js，图片精灵等）
压缩 js、css 代码
优化js代码，减少页面重排
使用 web worker 来处理计算量大的代码
使用客户端缓存
静态资源放到 cdn 上

4、浏览器输入网址回车发生了什么

当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
此时，Web 服务器提供资源服务，客户端开始下载资源。

5、页面的渲染过程

处理html标记并构建DOM树

处理CSS标记并构建CSSDOM树

将DOM与CSSOM合并成一个渲染树

根据渲染树来布局，计算每个节点的布局信息

将各个节点绘制到屏幕上

6、列举你知道的浏览器内核

IE浏览器 Trident
火狐浏览器 Gecko
Safair 浏览器 webkit
谷歌浏览器 blink
Opera浏览器 blink

7、如何优化SPA首屏加载慢的问题

1，模块化

2，懒加载

3，抽取css文件

4，使用预渲染的方式