前端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 打包的方式