前端vue 的面试总结以及答案以及前端技术点面试

一：先谈优化问题

前端的优化方式

初始化阶段：

1：初始化阶段首页图片加载过多

1.1：图片懒加载

先将img标签中的src链接设为同一张图片，将其真正的图片地址存储在img标签的自定义属性。当js监听到该图片元素进入可视窗口时，再把src 的值替换为自定义属性，减少首屏加载的请求数量，达到懒加载的效果。

      其中的定义滚动事件，和计算是否进入可视窗口，就用到了后面说的防抖和缓存layout属性

2：初始化阶段http 请求过多

1：资源压缩合并，减少http 请求，为了减少http 请求多个 js 合并成一个js，css 也同理

2：谷歌浏览器最多只能支撑8 个并发量就是同一时间内只支持8 个htpp 请求，如果需要请求多个接口，可以把接口给合并

3: 初始化阶段请求的静态资源过大

4：计算量大的处理，可以开启一个worker 线程来计算，worker 必须要了解同源策略

5：js 脚本放到html 底部

6：浏览器缓冲

7：尽量的避免减少 iframe 嵌套，iframe 会加到http 请求的次数，会重新请求http 。

二：一次完整的http 请求是什么样的

二：vue 的问题

1：组件之间的传值方式，参考我写的博客大概说下有几种传值方式

答：https://www.cnblogs.com/sunliyuan/articles/12188934.html

2: 路由之间的跳转方式

3：vuex 是什么，如何使用

4：说出至少四种vue 的指令以及他的用法

5: vue 写组件的时候，什么时候使用key , 为啥要使用key

6： v-model 的实现原理

7 ：在使用过程中有没有用到自定义指令，他是怎么定义的

8：你一般在使用vue 封装组件的时候，需要注意什么

9: vue中针对于比较复杂的对象不好监听到，如何自己写一个双向绑定的实现方式（加分项）

三: 前端一些技术面试
1: 改变this 指向的方式有几种，有什么区别

2：promise 是如何变成同步的，以及promise 返回值是什么 (以及 es7 的async 与await 能说出来最好，这个就是一个异步等待的东西)

promise 封装一个同步请求，

promise 封装一个异步请求

// 封装一个get 请求
/**
  * get方法，对应get请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params,
    }).then((res) => {
      resolve(res.data);
    }).catch((err) => {
      reject(err.data);
    });
  });
}

//封装一个post 请求

/**
  * post方法，对应post请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function post(url, params1) {
  let params = params1;
  if (!(params instanceof FormData)) {
    params = QS.stringify(params);
  }

  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then((res) => {
        if (!res.data || res.data.length === 0) reject(res.data);
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

// 把异步请求换成同步一个个来执行，返回值是一个数组，把每个异步的返回值都放到一个数组里面
export function all(axiosArray) {
  return new Promise((resolve, reject) => {
    axios.all(axiosArray)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

promise 不想用 .then，直接return 给一个变量

3：scss 使用过没，使用过的话怎么定义一个变量封装一个函数（参考我的博客 https://www.cnblogs.com/sunliyuan/p/14449120.html ）

四： webpack 打包的方式

posted @ 2021-04-10 15:22 石shi 阅读(910) 评论(0) 编辑收藏举报

刷新页面返回顶部

石

前端vue 的面试总结 以及答案以及前端技术点面试

公告

前端vue 的面试总结以及答案以及前端技术点面试