2019年度web前端面試題總結(主要為Vue面試題)

 更新時間:2020-01-12 19:00:21   作者:佚名   我要評論(0)

畢業之后就在一直合肥小公司工作,沒有老司機、沒有技術氛圍,在技術的道路上我只能獨自摸索。老板也只會畫餅充饑,前途一片迷?床坏饺魏蜗M。于是乎,我果斷辭

畢業之后就在一直合肥小公司工作,沒有老司機、沒有技術氛圍,在技術的道路上我只能獨自摸索。老板也只會畫餅充饑,前途一片迷?床坏饺魏蜗M。于是乎,我果斷辭職,在新年開工之際來到杭州,這里的互聯網公司應該是合肥的幾十倍吧。。。。

剛來3天,面試了幾家公司,有些規模比較小,有些是創業公司,也有些已經發展的不錯了;今天把最近的面試題目做個匯總,也給自己復個盤,由于我的技術棧主要為Vue,所以大部分題目都是Vue開發相關的。

1. 談談你對MVVM開發模式的理解

MVVM分為Model、View、ViewModel三者。

Model 代表數據模型,數據和業務邏輯都在Model層中定義;

View 代表UI視圖,負責數據的展示;

ViewModel 負責監聽 Model 中數據的改變并且控制視圖的更新,處理用戶交互操作;

Model 和 View 并無直接關聯,而是通過 ViewModel 來進行聯系的,Model 和 ViewModel 之間有著雙向數據綁定的聯系。因此當 Model 中的數據改變時會觸發 View 層的刷新,View 中由于用戶交互操作而改變的數據也會在 Model 中同步。

這種模式實現了 Model 和 View 的數據自動同步,因此開發者只需要專注對數據的維護操作即可,而不需要自己操作 dom。

2. Vue 有哪些指令?

v-html、v-show、v-if、v-for等等

3. v-if 和 v-show 有什么區別?

v-show 僅僅控制元素的顯示方式,將 display 屬性在 block 和 none 來回切換;而v-if會控制這個 DOM 節點的存在與否。當我們需要經常切換某個元素的顯示/隱藏時,使用v-show會更加節省性能上的開銷;當只需要一次顯示或隱藏時,使用v-if更加合理。

4. 簡述Vue的響應式原理

當一個Vue實例創建時,vue會遍歷data選項的屬性,用 Object.defineProperty 將它們轉為 getter/setter并且在內部追蹤相關依賴,在屬性被訪問和修改時通知變化。

每個組件實例都有相應的 watcher 程序實例,它會在組件渲染的過程中把屬性記錄為依賴,之后當依賴項的 setter 被調用時,會通知 watcher 重新計算,從而致使它關聯的組件得以更新。

5. Vue中如何在組件內部實現一個雙向數據綁定?

假設有一個輸入框組件,用戶輸入時,同步父組件頁面中的數據

具體思路:父組件通過 props 傳值給子組件,子組件通過 $emit 來通知父組件修改相應的props值,具體實現如下:

import Vue from 'vue'
const component = {
 props: ['value'],
 template: `
  <div>
   <input type="text" @input="handleInput" :value="value">
  </div>
 `,
 data () {
  return {
  }
 },
 methods: {
  handleInput (e) {
   this.$emit('input', e.target.value)
  }
 }
}
new Vue({
 components: {
  CompOne: component
 },
 el: '#root',
 template: `
  <div>
   <comp-one :value1="value" @input="value = arguments[0]"></comp-one>
  </div>
 `,
 data () {
  return {
   value: '123'
  }
 }
})

可以看到,當輸入數據時,父子組件中的數據是同步改變的:

我們在父組件中做了兩件事,一是給子組件傳入props,二是監聽input事件并同步自己的value屬性。那么這兩步操作能否再精簡一下呢?答案是可以的,你只需要修改父組件:

template: `
  <div>
   <!--<comp-one :value1="value" @input="value = arguments[0]"></comp-one>-->
   <comp-one v-model="value"></comp-one>
  </div>
 `

v-model 實際上會幫我們完成上面的兩步操作。

6. Vue中如何監控某個屬性值的變化?

比如現在需要監控data中,obj.a 的變化。Vue中監控對象屬性的變化你可以這樣:

watch: {
   obj: {
   handler (newValue, oldValue) {
    console.log('obj changed')
   },
   deep: true
  }
 }

deep屬性表示深層遍歷,但是這么寫會監控obj的所有屬性變化,并不是我們想要的效果,所以做點修改:

watch: {
  'obj.a': {
   handler (newName, oldName) {
    console.log('obj.a changed')
   }
  }
 }

還有一種方法,可以通過computed 來實現,只需要:

computed: {
  a1 () {
   return this.obj.a
  }
}

利用計算屬性的特性來實現,當依賴改變時,便會重新計算一個新值。

7. Vue中給data中的對象屬性添加一個新的屬性時會發生什么,如何解決?

示例:

<template>
 <div>
  <ul>
   <li v-for="value in obj" :key="value">
    {{value}}
   </li>
  </ul>
  <button @click="addObjB">添加obj.b</button>
 </div>
</template>
<script>
export default {
 data () {
  return {
   obj: {
    a: 'obj.a'
   }
  }
 },
 methods: {
  addObjB () {
   this.obj.b = 'obj.b'
   console.log(this.obj)
  }
 }
}
</script>
<style></style>

點擊button會發現,obj.b 已經成功添加,但是視圖并未刷新:

原因在于在Vue實例創建時,obj.b并未聲明,因此就沒有被Vue轉換為響應式的屬性,自然就不會觸發視圖的更新,這時就需要使用Vue的全局api $set():

addObjB () {
   // this.obj.b = 'obj.b'
   this.$set(this.obj, 'b', 'obj.b')
   console.log(this.obj)
  }

$set()方法相當于手動的去把obj.b處理成一個響應式的屬性,此時視圖也會跟著改變了:

8. delete和Vue.delete刪除數組的區別

delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。

Vue.delete直接刪除了數組 改變了數組的鍵值。

  var a=[1,2,3,4]
  var b=[1,2,3,4]
  delete a[1]
  console.log(a)
  this.$delete(b,1)
  console.log(b)

9.如何優化SPA應用的首屏加載速度慢的問題?

將公用的JS庫通過script標簽外部引入,減小app.bundel的大小,讓瀏覽器并行下載資源文件,提高下載速度;

在配置 路由時,頁面和組件使用懶加載的方式引入,進一步縮小 app.bundel 的體積,在調用某個組件時再加載對應的js文件;

加一個首屏 loading 圖,提升用戶體驗;

10. 前端如何優化網站性能?

減少 HTTP 請求數量

在瀏覽器與服務器進行通信時,主要是通過 HTTP 進行通信。瀏覽器與服務器需要經過三次握手,每次握手需要花費大量時間。而且不同瀏覽器對資源文件并發請求數量有限(不同瀏覽器允許并發數),一旦 HTTP 請求數量達到一定數量,資源請求就存在等待狀態,這是很致命的,因此減少 HTTP 的請求數量可以很大程度上對網站性能進行優化。

CSS Sprites:國內俗稱 CSS 精靈,這是將多張圖片合并成一張圖片達到減少 HTTP 請求的一種解決方案,可以通過 CSS background 屬性來訪問圖片內容。這種方案同時還可以減少圖片總字節數。

合并 CSS 和 JS 文件:現在前端有很多工程化打包工具,如:grunt、gulp、webpack等。為了減少 HTTP 請求數量,可以通過這些工具再發布前將多個 CSS 或者 多個 JS 合并成一個文件。

采用 lazyLoad:俗稱懶加載,可以控制網頁上的內容在一開始無需加載,不需要發請求,等到用戶操作真正需要的時候立即加載出內容。這樣就控制了網頁資源一次性請求數量。

控制資源文件加載優先級

瀏覽器在加載 HTML 內容時,是將 HTML 內容從上至下依次解析,解析到 link 或者 script 標簽就會加載 href 或者 src 對應鏈接內容,為了第一時間展示頁面給用戶,就需要將 CSS 提前加載,不要受 JS 加載影響。

一般情況下都是 CSS 在頭部,JS 在底部。

利用瀏覽器緩存

瀏覽器緩存是將網絡資源存儲在本地,等待下次請求該資源時,如果資源已經存在就不需要到服務器重新請求該資源,直接在本地讀取該資源。

減少重排(Reflow)

基本原理:重排是 DOM 的變化影響到了元素的幾何屬性(寬和高),瀏覽器會重新計算元素的幾何屬性,會使渲染樹中受到影響的部分失效,瀏覽器會驗證 DOM 樹上的所有其它結點的 visibility 屬性,這也是 Reflow 低效的原因。如果 Reflow 的過于頻繁,CPU 使用率就會急劇上升。

減少 Reflow,如果需要在 DOM 操作時添加樣式,盡量使用 增加 class 屬性,而不是通過 style 操作樣式。

減少 DOM 操作

圖標使用 IconFont 替換

11. 網頁從輸入網址到渲染完成經歷了哪些過程?

大致可以分為如下7步:

輸入網址;

發送到DNS服務器,并獲取域名對應的web服務器對應的ip地址;

與web服務器建立TCP連接;

瀏覽器向web服務器發送http請求;

web服務器響應請求,并返回指定url的數據(或錯誤信息,或重定向的新的url地址);

瀏覽器下載web服務器返回的數據及解析html源文件;

生成DOM樹,解析css和js,渲染頁面,直至顯示完成;

12. jQuery獲取的dom對象和原生的dom對象有何區別?

js原生獲取的dom是一個對象,jQuery對象就是一個數組對象,其實就是選擇出來的元素的數組集合,所以說他們兩者是不同的對象類型不等價。

原生DOM對象轉jQuery對象:

var box = document.getElementById('box');
var $box = $(box);

jQuery對象轉原生DOM對象:

var $box = $('#box');
var box = $box[0];

13. jQuery如何擴展自定義方法

(jQuery.fn.myMethod=function () {
    alert('myMethod');
})
// 或者:
(function ($) {
    $.fn.extend({
       myMethod : function () {
         alert('myMethod');
       }
    })
})(jQuery)

使用:

$("#div").myMethod();

目前來看公司面試的問題還是比較基礎的,但是對于某些只追求會用并不研究其原理的同學來說可能就沒那么容易了。所以大家不僅要追求學習的廣度,更要追求深度。

現在的前端有學不完的JS庫,倒弄不完的兼容問題,面對層出不窮的新知識真是學不動了

您可能感興趣的文章:

  • js前端面試題及答案整理(一)
  • for循環 + setTimeout 結合一些示例(前端面試題)
  • 整理一些最近經常遇到的前端面試題
  • 前端面試知識點錦集(JavaScript篇)
  • js前端面試之同步與異步問題詳解
  • 常見前端面試題及答案
  • 一次圍繞setTimeout的前端面試經驗分享
  • 前端面試題及答案整理(二)
  • 「中高級前端面試」JavaScript手寫代碼無敵秘籍(推薦)
  • 收集前端面試題之url、href、src
  • 前端面試知識點目錄一覽
  • Vue面試題及Vue知識點整理
  • 關于vue面試題匯總

相關文章

  • 2019年度web前端面試題總結(主要為Vue面試題)

    2019年度web前端面試題總結(主要為Vue面試題)

    畢業之后就在一直合肥小公司工作,沒有老司機、沒有技術氛圍,在技術的道路上我只能獨自摸索。老板也只會畫餅充饑,前途一片迷?床坏饺魏蜗M。于是乎,我果斷辭
    2020-01-12
  • 深入理解redux之compose的具體應用

    深入理解redux之compose的具體應用

    應用 最近給自己的react項目添加redux的時候,用到了redux中的compose函數,使用compose來增強store,下面是我在項目中的一個應用: import {createStore,apply
    2020-01-12
  • Java使用DateTimeFormatter實現格式化時間

    Java使用DateTimeFormatter實現格式化時間

    用掃描器獲取輸入的時間(年月日時分),這個時間的格式是常用的格式,然后格式化這個時間,把格式化的時間輸出到控制臺,可以在控制臺重復輸入時間.格式化的時間參考企業
    2020-01-12
  • Ranorex通過Python將報告發送到郵箱的方法

    Ranorex通過Python將報告發送到郵箱的方法

    Ranorex測試報告如何發送到郵箱在網上看了下,其實可以通過在Ranorex上或者VS調用編寫發送郵箱代碼就可以執行發送了,RX主要涉及到的開發語言是C++或者.NET。但是我
    2020-01-12
  • 通過實例解析JMM和Volatile底層原理

    通過實例解析JMM和Volatile底層原理

    這篇文章主要介紹了通過實例解析JMM和Volatile底層原理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 JMM和
    2020-01-11
  • 淺談pytorch卷積核大小的設置對全連接神經元的影響

    淺談pytorch卷積核大小的設置對全連接神經元的影響

    3*3卷積核與2*5卷積核對神經元大小的設置 #這里kerner_size = 2*5 class CONV_NET(torch.nn.Module): #CONV_NET類繼承nn.Module類 def __init__(self): super(
    2020-01-11
  • python如何獲取apk的packagename和activity

    python如何獲取apk的packagename和activity

    這篇文章主要介紹了python如何獲取apk的packagename和activity,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-01-11
  • 在pytorch中對非葉節點的變量計算梯度實例

    在pytorch中對非葉節點的變量計算梯度實例

    在pytorch中一般只對葉節點進行梯度計算,也就是下圖中的d,e節點,而對非葉節點,也即是c,b節點則沒有顯式地去保留其中間計算過程中的梯度(因為一般來說只有葉節點
    2020-01-11
  • 詳解Linux環境變量配置全攻略

    詳解Linux環境變量配置全攻略

    在自定義安裝軟件的時候,經常需要配置環境變量,下面列舉出各種對環境變量的配置方法。 下面所有例子的環境說明如下: 系統:Ubuntu 14.0 用戶名:uusama 需
    2020-01-11
  • Java JVM程序指令碼實例解析

    Java JVM程序指令碼實例解析

    這篇文章主要介紹了Java JVM程序指令碼實例解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下 java程序轉化
    2020-01-11

最新評論

双色球基本走势图200