web前端常見面試題實(shí)例分析

這篇文章主要介紹“web前端常見面試題實(shí)例分析”，在日常操作中，相信很多人在web前端常見面試題實(shí)例分析問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”web前端常見面試題實(shí)例分析”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

js部分

1、談一談你對(duì)原型鏈的理解

在js語言中，每個(gè)實(shí)例對(duì)象都有一個(gè)__proto__屬性，改屬性指向他的原型對(duì)象，且這個(gè)實(shí)例對(duì)象的構(gòu)造函數(shù)都有一個(gè)原型屬性prototype,與實(shí)例對(duì)象的__proto__屬性指向同一個(gè)對(duì)象，當(dāng)這個(gè)對(duì)象在查找一個(gè)屬性的值時(shí)，自身沒有就會(huì)根據(jù)__proto__向他的原型上尋找，如果不存在，則會(huì)到生成這個(gè)實(shí)例對(duì)象的構(gòu)造函數(shù)的原型對(duì)象上尋找，如果還是不存在，就繼續(xù)道Object的原型對(duì)象上找，在往上找就為null了，這個(gè)鏈?zhǔn)綄ふ业倪^程，就被稱為原型鏈。

2、原型、構(gòu)造函數(shù)、實(shí)例對(duì)象三者的關(guān)系

首先從構(gòu)造函數(shù)說起，構(gòu)造函數(shù)通過prototype指向他的原型對(duì)象，原型對(duì)象通過他的constructor屬性指回這個(gè)構(gòu)造函數(shù)，表明原型對(duì)象是由哪個(gè)構(gòu)造函數(shù)生成的。原型對(duì)象通過new關(guān)鍵字生成的實(shí)例對(duì)象，這個(gè)實(shí)例對(duì)象可以通過__proto__屬性指向生成這個(gè)實(shí)例對(duì)象的構(gòu)造函數(shù)的原型對(duì)象，實(shí)現(xiàn)一個(gè)三角關(guān)系。

3、實(shí)現(xiàn)繼承的方式

繼承的方式有很多種，網(wǎng)上的答案都有很多，我自己總結(jié)且大致說的明白的有這五種

1）原型鏈繼承

借助原型可以基于已有的對(duì)象創(chuàng)建對(duì)象，同時(shí)還不必因此創(chuàng)建自定義類型。 在 object()函數(shù)內(nèi)部，先創(chuàng)建一個(gè)臨時(shí)的構(gòu)造函數(shù)，然后將傳入的對(duì)象作為這個(gè)構(gòu)造 函數(shù)的原型，最后返回了這個(gè)臨時(shí)類型的一個(gè)新實(shí)例。關(guān)鍵代碼：Star.proyotype = new Person(), Star.proyotype.constructor = Star缺點(diǎn)：只能繼承父類的方法

2）借用構(gòu)造函數(shù)繼承

在子類構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)?？梢酝ㄟ^使用 apply()和 call()方 法在新創(chuàng)建的對(duì)象上執(zhí)行構(gòu)造函數(shù)。關(guān)鍵代碼：Person.call(this,age,name)缺點(diǎn)：無法復(fù)用，只能繼承父類的屬性

3）組合繼承

也叫偽經(jīng)典繼承。指的是將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一 起，從而發(fā)揮二者之長(zhǎng)。使用原型鏈實(shí)現(xiàn)對(duì)原型屬性屬性和方法的繼承，通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)實(shí)例 屬性的繼承。 既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又能保證每一個(gè)實(shí)例都有它自己的屬性。但是會(huì)有一個(gè)小bug，里面的age，name，有兩份，有一份的值為undefined，因?yàn)槔锩娴?code>apply()和call()方法會(huì)自動(dòng)多調(diào)用一次。

4）寄生組合繼承

通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法。 本質(zhì)上，就是使用寄生式繼承來繼承超類型的原型，然后再將結(jié)果指定給子類型的原型。是公認(rèn)繼承比較全面的一種方法，要寫全的話還是非常多的，我只會(huì)一個(gè)簡(jiǎn)單的?，關(guān)鍵代碼：Star.prototype = Object.create(Person.prototype)

5）ES6的Class類繼承方式

可利用class關(guān)鍵字配合extends關(guān)鍵字來實(shí)現(xiàn)繼承。ES6中引入了class關(guān)鍵字來聲明類，而class（類）可通過extends來繼承父類中屬性和方法，super指向父類的原型對(duì)象，可以調(diào)用父類的屬性和方法，且子類constructor方法中必須有super關(guān)鍵字，且必須出現(xiàn)在this之前。

4、js數(shù)據(jù)類型

數(shù)據(jù)類型從大的方向來說分為兩種

• 基本數(shù)據(jù)類型：字符串(String)，數(shù)字(Number)，布爾(Boolean)，空(Null)，未定義(Undefined)，Symbol(nbs)

• 復(fù)雜數(shù)據(jù)類型：對(duì)象(Object)，數(shù)組(Array)，函數(shù)(Function)
  Symbol表示獨(dú)一無二的值，避免屬性名的沖突

5、檢測(cè)數(shù)據(jù)類型

• typeof 檢測(cè) 存在的問題:null 或者數(shù)組打印出來也是 object

• instanceof (只能檢測(cè)復(fù)雜數(shù)據(jù)類型)
  返回值是 true 或者 false 相關(guān)的構(gòu)造函數(shù)只要在原型鏈上,就是 true,否則就是 false 可以用于檢測(cè)是不是數(shù)組

• Object.prototype.toString.call(要檢測(cè)的數(shù)據(jù)值)
  為什么要借 Object.prototype.toString,因?yàn)樽约旱?toString 被自己原型重寫了,得不到類似[object Object]

6、如何檢測(cè)一個(gè)數(shù)據(jù)是數(shù)組

var arr = [2, 3, 4]
console.log(arr instanceof Array)
console.log(Array.isArray(arr))
console.log(Object.prototype.toString.call(arr))

7、深拷貝和淺拷貝

• 淺拷貝：只是拷貝一層，更深層次對(duì)象級(jí)別的只拷貝了地址

• 深拷貝：層層拷貝，每一級(jí)別的數(shù)據(jù)都會(huì)拷貝

• 淺拷貝方法：
  1. 使用 lodash 淺拷貝 clone 方法，讓他們倆指向不同地址
  2. 使用 Object.assign 方法
  3. 使用es6語法的 ... 拓展運(yùn)算符

• 深拷貝方法：
  1. 使用JSON.parse(JSON.stringify(obj)) ，缺點(diǎn)：當(dāng)對(duì)象有方法和undefined屬性的時(shí)候會(huì)丟失
  2. 使用遞歸

• 如果存在循環(huán)引用就會(huì)出現(xiàn)堆棧溢出

• 解決思路：把處理好的對(duì)象存起來，在處理新的對(duì)象的時(shí)候，會(huì)現(xiàn)在這個(gè)存的地方找一找有沒有處理好，如果有就直接返回就行了

let obj = {
        name: "zs",
        age: 20,
        father: [2, 3, 4],
      };

      function deepClone(target) {
        //這一行如果不用三元判斷 如果是數(shù)組會(huì)有bug會(huì)被拷貝成偽數(shù)組對(duì)象
        let tempObj = Array.isArray(target) ? [] : {};
        for (let key in target) {
          if (typeof target[key] === "object") {
            tempObj[key] = deepClone(target[key]);
          } else {
            tempObj[key] = target[key];
          }
        }
        return tempObj;
      }

      let obj1 = deepClone(obj);
      console.log(obj1);

8、slice和splice的區(qū)別

• 兩者都是數(shù)組刪除的方法

1.splice改變?cè)瓟?shù)組，slice不改變?cè)瓟?shù)組。
2.slice會(huì)返回一個(gè)新的數(shù)組，可以用于截取數(shù)組
3.splice除了可以刪除之外，還可以替換，添加數(shù)組
4.splice可傳入3個(gè)參數(shù)，slice接受2個(gè)參數(shù)

9、substr和substring的區(qū)別

• 兩者的作用都是截取字符串的

• substr是從起始索引號(hào)開始提取指定長(zhǎng)度的字符串

• substring是提取字符串中兩個(gè)指定索引號(hào)之間的字符

10、let const  var區(qū)別

let和const都是用來聲明變量的，在ES5中我們可以使用var來進(jìn)行變量聲明 -使用let和const作用
- 防止for循環(huán)中變量提升的經(jīng)典場(chǎng)景
- 不污染全局變量

var關(guān)鍵字聲明變量

1.var關(guān)鍵字聲明變量存在，變量提升的問題；
2.var聲明的變量不存在塊級(jí)作用域，如果是全局變量在任何地方都可以調(diào)用；
3.var聲明變量如果名稱重復(fù)了，后面聲明的會(huì)將前面聲明的覆蓋掉；

let關(guān)鍵子聲明變量

1.不存在變量提升，let聲明變量不存在變量提升的問題：如果在let聲明變量前調(diào)用該變量就會(huì)報(bào)錯(cuò)（提示初始化前無法訪問該變量）；
2.塊級(jí)作用域，let聲明變量存在塊級(jí)作用域（全局、函數(shù)、eval嚴(yán)格模式），只在當(dāng)前的代碼塊中生效，如果在當(dāng)前代碼塊以外調(diào)用就會(huì)報(bào)錯(cuò)（當(dāng)前的變量沒有定義）；
3.不影響作用域鏈的操作
4.不允許變量重復(fù)聲明，let聲明的變量是不允許重復(fù)聲明的，如果同一個(gè)名稱被重復(fù)聲明了就會(huì)報(bào)錯(cuò)（當(dāng)前的標(biāo)識(shí)已經(jīng)被聲明了）；

const聲明變量

1.const聲明的變量也具有：不存在變量提升、塊級(jí)作用域、不允許重復(fù)聲明的特點(diǎn)；
2.const聲明的變量都是常量（不允許改變的量），一旦聲明就不允許被修改，如果修改就會(huì)報(bào)錯(cuò)--常數(shù)變量賦值
3.一般第三方的框架中會(huì)大量使用const聲明變量，這樣可以避免用戶修改框架中的變量；
4.const實(shí)際上保證的，并不是變量的值不得改動(dòng)，而是變量指向的那個(gè)內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng)。對(duì)于簡(jiǎn)單類型的數(shù)據(jù)（數(shù)值、字符串、布爾值），值就保存在變量指向的那個(gè)內(nèi)存地址，因此等同于常量。

11、new的過程

• 創(chuàng)建一個(gè)新的空對(duì)象。（即實(shí)例對(duì)象）

• 讓this指向這個(gè)新對(duì)象

• 執(zhí)行構(gòu)造函數(shù)里面的代碼，給這個(gè)新對(duì)象添加屬性和方法

• 返回這個(gè)新對(duì)象obj。（定義的構(gòu)造函數(shù)中不寫返回值。）

12、防抖節(jié)流

防抖

• 防抖是指在事件觸發(fā)n秒后再執(zhí)行，如果在n秒內(nèi)再次被觸發(fā)，則重新計(jì)算時(shí)間。（就是在觸發(fā)某個(gè)事件后，在下一次觸發(fā)之前，中間的間隔時(shí)間如果超過設(shè)置的時(shí)間才會(huì)發(fā)送請(qǐng)求，一直觸發(fā)就不會(huì)發(fā)送請(qǐng)求 應(yīng)用場(chǎng)景：
  a、scroll事件滾動(dòng)觸發(fā)，
  b、搜索框輸入查詢
  c、表單驗(yàn)證
  d、按鈕提交事件
  e、瀏覽器窗口縮放，resize事件

function debounce(func, delay) {
        let timer = null // 計(jì)時(shí)器
        return function (...args) {
          clearTimeout(timer) // 清除上一次計(jì)時(shí)器
          timer = setTimeout(() => {
            // 重新定時(shí)
            func.apply(this, args)
          }, delay)
        }
      }

節(jié)流

• 節(jié)流是指如果持續(xù)觸發(fā)某個(gè)事件，則每隔n秒執(zhí)行一次。

function throtte(func, time) {
        let timer = null // 計(jì)時(shí)器
        return function (...args) {
          if (timer) return // 無視，直接返回
          timer = setTimeout(() => {
            func.apply(this, args)
          }, time)
        }
      }

13、promise的3種狀態(tài)

這點(diǎn)簡(jiǎn)單介紹概念，用法后面在詳細(xì)介紹

1） . 初始態(tài)pending

- pending。它的意思是 "待定的，將發(fā)生的"，相當(dāng)于是一個(gè)初始狀態(tài)。創(chuàng)建[Promise]對(duì)象時(shí)，且沒有調(diào)用resolve或者是reject方法，相當(dāng)于是初始狀態(tài)。這個(gè)初始狀態(tài)會(huì)隨著你調(diào)用resolve，或者是reject函數(shù)而切換到另一種狀態(tài)。

2 ）. 成功態(tài)resolved--也叫fulfilled

- resolved。表示解決了，就是說這個(gè)承諾實(shí)現(xiàn)了。 要實(shí)現(xiàn)從pending到resolved的轉(zhuǎn)變，需要在 創(chuàng)建Promise對(duì)象時(shí)，在函數(shù)體中調(diào)用了resolve方法(即第一個(gè)參數(shù))。

3） . 失敗態(tài)rejected

- rejected。拒絕，失敗。表示這個(gè)承諾沒有做到，失敗了。要實(shí)現(xiàn)從pending到rejected的轉(zhuǎn)換，只需要在創(chuàng)建Promise對(duì)象時(shí)，調(diào)用reject函數(shù)。

14、冒泡排序

// 上口訣 雙層for循環(huán) 外層長(zhǎng)度-1 內(nèi)層長(zhǎng)度-1-i
      let arr = [4, 3, 1, 7, 8, 10]
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            let temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
          }
        }
      }
      console.log(arr)

Vue部分

1、MVVM

MVVM是三個(gè)單詞的縮寫，model(數(shù)據(jù)，一般來自ajax或本地存儲(chǔ))+view(視圖template)+viewmodel(vue實(shí)例)

• model數(shù)據(jù)變了，視圖會(huì)跟著改變，如果用的是v-model，數(shù)據(jù)也會(huì)跟著改變，viewmodel在中間起一個(gè)橋梁作用

• model 和 view 就像現(xiàn)實(shí)中房東和租客一樣，他們是不認(rèn)識(shí)的，通過中介 viewmodel
  好處：

• 由于 model 和 view 是沒有關(guān)系的，是通過 viewmodel 結(jié)合在一起的，所以維護(hù)起來很方便，因?yàn)?model 邏輯代買改了，view 不用改

• 因?yàn)閿?shù)據(jù)變了。視圖也會(huì)跟著變，所以在 vue 中不用操作dom來改變視圖

• 數(shù)據(jù)驅(qū)動(dòng)

• 解耦(降低了耦合性)

2、vue生命周期

• vue中的生命周期是指組件從創(chuàng)建到銷毀的過程,主要分為4個(gè)周期8個(gè)鉤子函數(shù)

1.分別是創(chuàng)建階段的beforeCreate，created，一般在beforeCreate寫loading加載效果，使用戶體驗(yàn)更好，一般在created中發(fā)送ajax請(qǐng)求獲取數(shù)據(jù)

2.然后是掛載階段的beforeMount，mounted，一般會(huì)在mounted中操作DOM元素

3.更新階段的是beforeUpdate ，updated，當(dāng)數(shù)據(jù)更新時(shí)需要做統(tǒng)一的業(yè)務(wù)處理時(shí)，拿到最新的dom，可以使用updated 這個(gè)鉤子函數(shù)

4.最后是銷毀階段的beforeDestroy，destroyed，可以在beforeDestroy做一些清理的工作，比如說定時(shí)器 和解綁一些addEventListener監(jiān)聽的事件

• 補(bǔ)充：（還有keep-alive的兩個(gè)鉤子函數(shù)，使用場(chǎng)景是當(dāng)組件切換時(shí)會(huì)進(jìn)行銷毀，因此組件中的初始化的4個(gè)鉤子函數(shù)會(huì)多次執(zhí)行，比較浪費(fèi)資源,此時(shí)可以使用keep-alive紀(jì)行組件的緩存,可以讓組件切換時(shí)不被銷毀,keep-alive有兩個(gè)獨(dú)有的鉤子函數(shù),分別是activated和deactivated,是組件激活和失活時(shí)會(huì)執(zhí)行的兩個(gè)鉤子函數(shù)）

3、單向數(shù)據(jù)流

單向數(shù)據(jù)流是指父組件向子組件傳遞數(shù)據(jù)，子組件通過props接收，當(dāng)父組件中的值改變了，子組件中對(duì)應(yīng)的數(shù)據(jù)也會(huì)改變，因?yàn)閜rops是只讀的，所以無法直接在子組件中對(duì)父組件傳遞過來的值進(jìn)行修改，但是如果這個(gè)數(shù)據(jù)是一個(gè)引用數(shù)據(jù)類型，是可以直接在子組件中修改數(shù)據(jù)中的某個(gè)屬性的，只要不改變這個(gè)數(shù)據(jù)的內(nèi)存地址就可以

4、雙向數(shù)據(jù)綁定

• 數(shù)據(jù) -> 視圖

• 視圖 -> 數(shù)據(jù)

vue中普通指令都可以實(shí)現(xiàn)數(shù)據(jù)變了，視圖會(huì)跟著變，但是有一個(gè)特殊的指令叫v-model，它一般用于表單控件，它可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定，所謂的雙向數(shù)據(jù)就是數(shù)據(jù)變了，視圖就會(huì)跟著改變，反過來也是

5、v-model原理

v-model一般配合input框使用，實(shí)現(xiàn)雙向數(shù)據(jù)綁定的效果，它是v-bind和v-on的語法糖，原理是通過v-bind將數(shù)據(jù)綁定給input框，再通過v-on:input，在input中的值改變時(shí)，通過$event可以獲取到事件源對(duì)象 再通過target.value獲取到input中更新后的值 將這個(gè)值再賦值給綁定的數(shù)據(jù)即可

6、事件傳參

在vue的組件使用自定義事件時(shí)，$event代表子組件拋出的數(shù)據(jù)，當(dāng)這個(gè)自定義事件觸發(fā)一個(gè)方法時(shí)，
可以不傳$event而且可以在方法中進(jìn)行接收，但是如果寫的話就一定要寫成$event的形式，這是一個(gè)固定寫法，
或者這個(gè)方法既要傳參又要使用事件對(duì)象，這個(gè)時(shí)候$event也是必須要寫的
- @click='fn' 在回調(diào)函數(shù)直接通過參數(shù)可以拿到事件對(duì)象
- @click='fn($event)' 這個(gè)時(shí)候@event是固定寫法

7、父子組件的聲明周期執(zhí)行順序

1.初始化階段時(shí)，先執(zhí)行父組件的beforeCreate、created、beforeMount三個(gè)鉤子函數(shù)，然后執(zhí)行子組件的beforeCreate、created、beforeMount、mounted四個(gè)鉤子函數(shù)，最后執(zhí)行父組件的mounted鉤子函數(shù)

2.更新階段，先執(zhí)行父組件的beforeUpdate，然后執(zhí)行子組件的beforeUpdate，updated，最后執(zhí)行父組件的updated

3.銷毀階段，先執(zhí)行父組件的beforeDestroy，然后執(zhí)行子組件的eforeDestroy，destroyed，最后執(zhí)行父組件的destroyed

8、v-if和v-show的區(qū)別

v-if和v-show都可以控制標(biāo)簽，實(shí)現(xiàn)組件的顯示與隱藏，不同點(diǎn)是v-show是通過display的block和none屬性來控制的，當(dāng)元素隱藏時(shí)，頁面結(jié)構(gòu)依然存在

• v-if是通過將元素創(chuàng)建和銷毀來控制顯示與隱藏的，當(dāng)v-if的條件為否時(shí)，會(huì)直接銷毀該元素，當(dāng)滿足時(shí)會(huì)重新創(chuàng)建出來，有可能會(huì)影響頁面的回流或重繪

• 如果該元素需要頻繁切換時(shí)可以使用v-show，不需要頻繁切換時(shí)可以使用v-if，提高性能

9、v-for和v-if為什么要避免一起使用

• 因?yàn)関-for的優(yōu)先級(jí)比v-if要高，兩者同時(shí)作用于一個(gè)標(biāo)簽或組件時(shí)，v-for會(huì)優(yōu)先執(zhí)行，執(zhí)行后再進(jìn)行v-if的判斷，但是不滿足v-if的條件的時(shí)候是可以不執(zhí)行v-for的，這時(shí)候就會(huì)造成資源浪費(fèi)，性能比較差

• 解決辦法是可以通過計(jì)算屬性將滿足v-if判斷條件的數(shù)據(jù)篩選出來，再使用v-if直接渲染篩選后的數(shù)據(jù)，或者是當(dāng)v-if不依賴v-for時(shí)，可以通過template將v-if寫在循環(huán)的外部，這樣當(dāng)不滿足v-if的判斷條件時(shí)，就不會(huì)再執(zhí)行v-for了，也可以將數(shù)據(jù)放在計(jì)算屬性里面計(jì)算過濾出來的數(shù)據(jù)在交給v-for循環(huán)，代替v-if的作用，即可解決。

10、自定義指令：directive

應(yīng)用場(chǎng)景

• v-imgerror 公司項(xiàng)目中有的用戶頭像可能加載報(bào)錯(cuò)，可以給他一張默認(rèn)圖片， onerror this.img=默認(rèn)圖片

• v-focus 打開帶有搜索的頁面的時(shí)候，實(shí)現(xiàn)自動(dòng)把光標(biāo)定位到 input 中

• 自定義指令的鉤子函數(shù)

1.bind 屬性綁定的時(shí)候執(zhí)行 只會(huì)有一次
2. inserted 當(dāng)前指令所在的元素插入到頁面中的時(shí)候執(zhí)行一次
3. update 當(dāng)前指令所在的組件中的 data 數(shù)據(jù)有更新就會(huì)執(zhí)行，可以執(zhí)行多次

// 指令的鉤子有三個(gè) bind inserted update
// bind inserted 只會(huì)執(zhí)行一次
// update 會(huì)反復(fù)執(zhí)行
Vue.directive('focus', {
  inserted(el) {
    el.focus()
  },
})

Vue.directive('red', {
  bind(el) {
    el.style.color = 'red'
  },
})

Vue.directive('check', {
  update(el) {
    const reg = /^[a-zA-Z0-9]+$/
    if (reg.test(el.value)) {
      el.style.color = 'green'
    } else {
      el.style.color = 'red'
    }
  },
})

瀏覽器的緩存機(jī)制

這塊部分理解不是很透徹，大家淺看一下就可以了?

• 概念：瀏覽器會(huì)將請(qǐng)求后的資源進(jìn)行存貯為離線資源，當(dāng)下次需要該資源時(shí)，瀏覽器會(huì)根據(jù)緩存機(jī)制決定直接使用緩存資源還是再次向服務(wù)器發(fā)送請(qǐng)求
  作用：

• 減少了不必要數(shù)據(jù)的傳輸、降低服務(wù)器的壓力

• 加快了客戶端訪問速度

• 增強(qiáng)用戶體驗(yàn)

1. 強(qiáng)緩存：過期之前一直用本地離線資源 不會(huì)和服務(wù)器交互

• http1.0 expire 具體的時(shí)間2023年1月1日

• http1.1 cache-control 時(shí)間期限1年 （優(yōu)先級(jí)高）

2. 協(xié)商緩存 本質(zhì)是看本地東西和服務(wù)器有沒有變舊（服務(wù)器上有沒有更新的資源） 強(qiáng)緩存不會(huì)和服務(wù)器交互 協(xié)商緩存會(huì)交互一次來判斷東西有沒有變舊

• http1.0 last-modified/if-modified-since

• http1.1 etag/if-none-match（優(yōu)先級(jí)高）

• 當(dāng)前頁面中有一個(gè)img，它的src是logo.png
  1. 先看本地有沒有緩存資源，如果沒有，就需要向服務(wù)器發(fā)請(qǐng)求 拿回來這個(gè)資源同時(shí)拿回來expire,cache-control,last-modified,etag(響應(yīng)報(bào)文中)
  2. 過了一段時(shí)間（不確定的），又有一個(gè)別的頁面上面有一個(gè)img，src也是logo.png,這個(gè)時(shí)候就去看一下本地有沒有緩存資源，發(fā)現(xiàn)有，再看一下它expire,catch-control（如果有，優(yōu)先級(jí)是看cache-control),如果沒有過期，就用就行了（這塊屬于強(qiáng)緩存） 但是發(fā)現(xiàn)如果過期了，就開始進(jìn)入?yún)f(xié)商緩存的階段，就向服務(wù)器發(fā)送一個(gè)請(qǐng)求把if-modified-since（值就是last-modifyed)/if-none-match(etag)通過請(qǐng)求頭發(fā)過去,  服務(wù)器開始對(duì)比看看服務(wù)器上的資源有沒有比本地更新一點(diǎn)，如果服務(wù)器資源還是舊的，返回一個(gè)狀態(tài)碼叫304，瀏覽器一看狀態(tài)是304就繼續(xù)用本地離線資源，如果服務(wù)器資源有更新的資源，狀態(tài)碼就是200，服務(wù)器就需要傳給瀏覽器一個(gè)新的logo.png,流程重新再走一遍

設(shè)計(jì)模式

本人技術(shù)棧是主要是前端vue的，所以對(duì)這方面的知識(shí)還是有所欠缺的，盡量說的明白一點(diǎn)，其實(shí)我也不是很懂，大致明白，如果想要全面理解透還是需要很多技術(shù)儲(chǔ)備的，很明顯我不是的哈哈?

1、觀察者模式

觀察者模式即一個(gè)對(duì)象被多個(gè)對(duì)象所依賴，當(dāng)被依賴的對(duì)象發(fā)生更新時(shí)，會(huì)自動(dòng)通知所有依賴的對(duì)象

• 觀察者模式定義了對(duì)象間的一種一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對(duì)象都將得到通知，并自動(dòng)更新
  比喻：
  寶寶 -> 父母爺爺奶奶 一對(duì)多的依賴關(guān)系
  寶寶哭 -> 父母爺爺奶奶趕緊過來服務(wù) 當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對(duì)象都將得到通知，并自動(dòng)更新

• 模式特點(diǎn)： 有二個(gè)主體 一個(gè)是被觀察者 Dep 一個(gè)是觀察者 watcher，在vue中v-band就是采用這種模式理念，缺點(diǎn)是耦合性太高

2、發(fā)布訂閱模式

發(fā)布-訂閱模式其實(shí)是一種對(duì)象間一對(duì)多的依賴關(guān)系，當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)送改變時(shí)，所有依賴于它的對(duì)象都將得到狀態(tài)改變的通知。

• 在現(xiàn)在的發(fā)布訂閱模式中，稱為發(fā)布者的消息發(fā)送者不會(huì)將消息直接發(fā)送給訂閱者，這意味著發(fā)布者和訂閱者不知道彼此的存在。在發(fā)布者和訂閱者之間存在第三個(gè)組件，稱為調(diào)度中心或事件通道(event bus)，它維持著發(fā)布者和訂閱者之間的聯(lián)系，過濾所有發(fā)布者傳入的消息并相應(yīng)地分發(fā)它們給訂閱者

• 模式特點(diǎn)：有三個(gè)主體 發(fā)布者 調(diào)度中心 訂閱者，在vue中eventBus體現(xiàn)出來了這種模式理念，可以實(shí)現(xiàn)解耦

3、兩者模式區(qū)別

• 主體數(shù)量不一樣，觀察者模式有二個(gè)主體 分別是被觀察者 Dep 和觀察者 watcher,發(fā)布訂閱模式有三個(gè)主體 分別是發(fā)布者 調(diào)度中心（事件通道 ) 訂閱者

• 發(fā)布訂閱模式相比觀察者模式多了個(gè)事件通道，事件通道作為調(diào)度中心，管理事件的訂閱和發(fā)布工作，徹底隔絕了訂閱者和發(fā)布者的依賴關(guān)系，訂閱者和發(fā)布者是解耦的（不知道彼此存在）

到此，關(guān)于“web前端常見面試題實(shí)例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！