分享一些值得收藏的精選Web前端面試題（附答案）

js面試題

• 1、js資料型別

  • 基本資料型別
    Number、String、Boolean、Null、Undefined、Symbol、bigInt
  • 參照資料型別
    object、Array、Date、Function、RegExp

• 2、js變數和函數宣告的提升

  • 在js中變數和函數的宣告會提升到最頂部執行
  • 函數的提升高於變數的提升
  • 函數內部如果用 var 宣告了相同名稱的外部變數，函數將不再向上尋找。
  • 匿名函數不會提升。

• 3、閉包

  • 閉包就是能夠讀取其他函數內部變數的函數
  • 閉包基本上就是一個函數內部返回一個函數
  • 好處
    • 可以讀取函數內部的變數
    • 將變數始終保持在記憶體中
    • 可以封裝物件的私有屬性和私有方法
  • 壞處
    • 比較耗費記憶體、使用不當會造成記憶體溢位的問題

• 4、== 和 ===的區別

  • ==是非嚴格意義上的相等
    • 值相等就相等
  • ===是嚴格意義上的相等，會比較兩邊的資料型別和值大小
    • 值和參照地址都相等才相等

• 5、this

  • this總是指向函數的直接呼叫者
  • 如果有new關鍵字，this指向new出來的物件
  • 在事件中，this指向觸發這個事件的物件

• 6、js陣列和物件的遍歷方式

  • for in
  • for
  • forEach
  • for-of

• 7、map與forEach的區別

  • forEach 方法，是最基本的方法，就是遍歷與迴圈，預設有 3 個傳參：分別是遍歷的陣列內
    容 item、陣列索引 index、和當前遍歷陣列 Array
  • map 方法，基本用法與 forEach 一致，但是不同的，它會返回一個新的陣列，所以 callback
    需要有 return 值，如果沒有，會返回 undefined

• 8、箭頭函數與普通函數的區別?

  • 函數體內的 this 物件，就是定義時所在的物件，而不是使用時所在的物件
  • 不可以當作建構函式，也就是說，不可以使用 new 命令，否則會丟擲一個錯誤
  • 不可以使用 arguments 物件，該物件在函數體內不存在。如果要用，可以用 Rest 引數代替
  • 不可以使用 yield 命令，因此箭頭函數不能用作 Generator 函數

• 9、同源策略

  • 同源指的是域名、協定、埠號相同

• 10、如何解決跨域

  • jsonp跨域
  • document.domain + iframe 跨域
  • nodejs中介軟體代理跨域
  • 後端在頭部資訊裡面設定安全域名

• 11、嚴格模式的限制

  • 變數必須宣告後再使用
  • 函數的引數不能有同名屬性，否則報錯
  • 不能使用 with 語句
  • 禁止 this 指向全域性物件

• 12、es6新增

  • 新增模板字串
  • 箭頭函數
  • for-of（用來遍歷資料—例如陣列中的值。）
  • ES6 將 Promise 物件納入規範，提供了原生的 Promise 物件。
  • 增加了 let 和 const 命令，用來宣告變數。
  • 還有就是引入 module 模組的概念

• 13、attribute 和 property 的區別是什麼?

  • attribute 是 dom 元素在檔案中作為 html 標籤擁有的屬性
  • property 就是 dom 元素在 js 中作為物件擁有的屬性。
  • 對於 html 的標準屬性來說，attribute 和 property 是同步的，是會自動更新的
  • 但是對於自定義的屬性來說，他們是不同步的

• 14、let和const 的區別是什麼?

  • let 命令不存在變數提升，如果在 let 前使用，會導致報錯
  • 如果塊區中存在 let 和 const 命令，就會形成封閉作用域
  • 不允許重複宣告
  • const定義的是常數，不能修改，但是如果定義的是物件，可以修改物件內部的資料

• 15、記憶體漏失

  • 定義：程式中己動態分配的堆記憶體由於某種原因程式未釋放或無法釋放引發的各種問題。
  • js中可能出現的記憶體漏失情況：結果：變慢，崩潰，延遲大等
  • js中可能出現的記憶體漏失原因
    • 全域性變數
    • dom 清空時，還存在參照
    • 定時器未清除
    • 子元素存在引起的記憶體洩露

• 16、script 引入方式?

  • html 靜態 <script> 引入
  • js 動態插入 <script>
  • <script defer> : 非同步載入，元素解析完成後執行
  • <script async> : 非同步載入，但執行時會阻塞元素渲染

• 17、陣列(array)方法

  • map : 遍歷陣列，返回回撥返回值組成的新陣列
  • forEach : 無法 break ，可以用 try/catch 中 throw new Error 來停止
  • filter : 過濾
  • some : 有一項返回 true ，則整體為 true
  • every : 有一項返回 false ，則整體為 false
  • join : 通過指定連線符生成字串
  • push / pop : 末尾推入和彈出，改變原陣列， 返回推入/彈出項
  • unshift / shift : 頭部推入和彈出，改變原陣列，返回操作項
  • sort(fn) / reverse : 排序與反轉，改變原陣列
  • concat : 連線陣列，不影響原陣列， 淺拷貝
  • slice(start, end) : 返回截斷後的新陣列，不改變原陣列
  • splice(start,number,value…): 返回刪除元素組成的陣列，value 為插入項，改變原陣列
  • indexOf / lastIndexOf(value, fromIndex) : 查詢陣列項，返回對應的下標
  • reduce / reduceRight(fn(prev, cur) ，defaultPrev) : 兩兩執行，prev 為上次化簡函數的return 值，cur 為當前值(從第二項開始)

• 18、JavaScript 深淺拷貝?

  • 淺拷貝
    • Object.assign
  • 深拷貝
    • 可以通過 JSON.parse(JSON.stringify(object)) 來解決

• 19、說說非同步程式設計的實現方式?

  • 回撥函數
    • 優點：簡單、容易理解
    • 缺點：不利於維護、程式碼耦合高
  • 事件監聽
    • 優點：容易理解，可以繫結多個事件，每個事件可以指定多個回撥函數
    • 缺點：事件驅動型，流程不夠清晰
  • 釋出/訂閱(觀察者模式)
    • 類似於事件監聽，但是可以通過‘訊息中心’，瞭解現在有多少釋出者，多少訂閱者
  • Promise 物件
    • 優點：可以利用 then 方法，進行鏈式寫法；可以書寫錯誤時的回撥函數
    • 缺點：編寫和理解，相對比較難
  • Generator 函數
    • 優點：函數體內外的資料交換、錯誤處理機制
    • 缺點：流程管理不方便
  • async 函數
    • 優點：內建執行器、更好的語意、更廣的適用性、返回的是 Promise、結構清晰
    • 缺點：錯誤處理機制

• 20、說說物件導向程式設計思想?

  • 基本思想是使用物件，類，繼承，封裝等基本概念來進行程式設計
  • 優點
    • 易維護
    • 易擴充套件
    • 開發工作的重用性、繼承性高，降低重複工作量。
    • 縮短了開發週期

• 21、專案效能優化

  • 減少 HTTP 請求數
  • 減少 DNS 查詢
  • 使用 CDN
  • 避免重定向
  • 圖片懶載入
  • 減少 DOM 元素數量
  • 減少 DOM 操作
  • 使用外部 JavaScript 和 CSS
  • 壓縮 JavaScript、CSS、字型、圖片等
  • 優化 CSS Sprite
  • 使用 iconfont
  • 多域名分發劃分內容到不同域名
  • 儘量減少 iframe 使用
  • 避免圖片 src 為空
  • 把樣式表放在 link 中
  • 把 JavaScript 放在頁面底部

• 22、什麼是單執行緒，和非同步的關係？

  • 單執行緒 ：只有一個執行緒，只能做一件事
  • 原因 ： 避免 DOM 渲染的衝突
    • 瀏覽器需要渲染 DOM
    • JS 可以修改 DOM 結構
    • JS 執行的時候，瀏覽器 DOM 渲染會暫停
    • 兩段 JS 也不能同時執行（都修改 DOM 就衝突了）
    • webworker 支援多執行緒，但是不能存取 DOM
  • 解決方案 ：非同步

• 23、說說負載均衡？

  • 單臺伺服器共同共同作業，不讓其中某一臺或幾臺超額工作，發揮伺服器的最大作用
  • http 重定向負載均衡：排程者根據策略選擇伺服器以 302 響應請求，缺點只有第一次有效果，後續操作維持在該伺服器 dns 負載均衡：解析域名時，存取多個 ip 伺服器中的一個（可監控性較弱）原因 - 避免 DOM 渲染的衝突
  • 反向代理負載均衡：存取統一的伺服器，由伺服器進行排程存取實際的某個伺服器，對統一的伺服器要求大，效能受到 伺服器群的數量

• 24、作用域鏈？

  • 作用域鏈可以理解為一組物件列表，包含 父級和自身的變數物件，因此我們便能通過作用域鏈存取到父級裡宣告的變數或者函數

• 25、什麼是原型、原型鏈、繼承？

  • 所有的函數都有prototype屬性（原型）
  • 所有的物件都有__proto__屬性
  • 在Javascript中，每個函數都有一個原型屬性prototype指向自身的原型，而由這個函數建立的物件也有一個proto屬性指向這個原型，而函數的原型是一個物件，所以這個物件也會有一個proto指向自己的原型，這樣逐層深入直到Object物件的原型，這樣就形成了原型鏈。

• 26、JS垃圾回收機制是怎樣的？
  1.概述

  js的垃圾回收機制是為了防止記憶體漏失（已經不需要的某一塊記憶體還一直存在著），垃圾回收機制就是不停歇的尋找這些不再使用的變數，並且釋放掉它所指向的記憶體。
  在JS中，JS的執行環境會負責管理程式碼執行過程中使用的記憶體。

  2.變數的生命週期

  當一個變數的生命週期結束之後，它所指向的記憶體就會被釋放。js有兩種變數，區域性變數和全域性變數，區域性變數是在他當前的函數中產生作用，當該函數結束之後，該變數記憶體會被釋放，全域性變數的話會一直存在，直到瀏覽器關閉為止。

  3.js垃圾回收方式
  有兩種方式： 標記清除、參照計數

  標記清除：大部分瀏覽器使用這種垃圾回收，當變數進入執行環境(宣告變數）的時候，垃圾回收器將該變數進行了標記，當該變數離開環境的時候，將其再度標記，隨之進行刪除。

  參照計數：這種方式常常會引起記憶體的洩露，主要存在於低版本的瀏覽器。它的機制就是跟蹤某一個值得參照次數，當宣告一個變數並且將一個參照型別賦值給變數得時候參照次數加1，當這個變數指向其他一個時參照次數減1，當為0時出發回收機制進行回收。

• 27、逐進增強和優雅降級

  • 逐進增強
    針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高版本瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
  • 優雅降級
    一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容

vue面試題

• 1、vue優點

  • 輕量級
  • 速度快
  • 簡單易學
  • 低耦合
  • 可重用性
  • 獨立開發

  • 檔案齊全，且檔案為中文檔案

【相關推薦：】

• 2、vue父元件向子元件傳遞資料

  • props

• 3、子元件向父元件傳遞事件

  • $emit

• 4、v-show和v-if指令的共同點和不同點

  • 相同點:都可以控制dom元素的顯示和隱藏

  • 不同點:v-show只是改變display屬性，dom元素並未消失，切換時不需要重新渲染頁面

  • v-if直接將dom元素從頁面刪除，再次切換需要重新渲染頁面

• 5、如何讓CSS只在當前元件中起作用

  • scoped

• 6、<keep-alive></keep-alive>的作用是什麼

  • 主要是用於需要頻繁切換的元件時進行快取，不需要重新渲染頁面

• 7、如何獲取dom

  給dom元素加ref=‘refname’,然後通過this.$refs.refname進行獲取dom元素

• 8、說出幾種vue當中的指令和它的用法

  • v-model

  • v-on

  • v-html

  • v-text

  • v-once

  • v-if

  • v-show

• 9、vue-loader是什麼？它的用途是什麼？

  • vue檔案的一個載入器，將template/js/style轉換為js模組

  • 用途:js可以寫es6、style樣式

• 10、為什麼用key

  • 給每個dom元素加上key作為唯一標識 ，diff演演算法可以正確的識別這個節點，使頁面渲染更加迅速。

• 11、axios及安裝？

  • vue專案中使用ajax時需要axios外掛

  • 下載方式cnpm install axios --save

• 12、v-model的使用

  • v-model用於表單的雙向繫結，可以實時修改資料

• 13、請說出vue.cli專案中src目錄每個資料夾和檔案的用法

  • components存放元件

  • app.vue主頁面入口

  • index.js主檔案入口

  • ass存放靜態資原始檔

• 14、分別簡述computed和watch的使用場景

  • 用官網的一句話來說，所有需要用到計算的都應該使用計算屬性。多條資料影響一條資料時使用計算屬性，使用場景購物車。

  • 如果是一條資料更改，影響多條資料時，使用watch，使用場景搜尋方塊。

• 15、v-on可以監聽多個方法嗎？

  • 可以，比如 v-on=「onclick,onbure」

• 16、$nextTick的使用

  • 在data()中的修改後，頁面中無法獲取data修改後的資料，使用$nextTick時，當data中的資料修改後，可以實時的渲染頁面

• 17、vue元件中data為什麼必須是一個函數？

  • 因為javaScript的特性所導致，在component中，data必須以函數的形式存在，不可以是物件。

  • 元件中的data寫成一個函數，資料以函數返回值的形式定義，這樣每次複用元件的時候，都會返回一份新的data，相當於每個元件範例都有自己私有的資料空間，他們值負責各自維護資料，不會造成混亂。而單純的寫成物件形式，就是所有元件範例共用了一個data，這樣改一個全部都會修改。

• 18、漸進式框架的理解

  • 主張最少

  • 可以根據不同的需求選擇不同的層級

• 19、vue在雙向資料繫結是如何實現的？

  • vue雙向資料繫結是通過資料劫持、組合、釋出訂閱模式的方式來實現的，也就是說資料和檢視同步，資料發生變化，檢視跟著變化，檢視變化，資料也隨之發生改變

  • 核心：關於vue雙向資料繫結，其核心是Object.defineProperty()方法

• 20、單頁面應用和多頁面應用區別及缺點

  • 單頁面應用（SPA），通俗的說就是指只有一個主頁面的應用，瀏覽器一開始就載入所有的js、html、css。所有的頁面內容都包含在這個主頁面中。但在寫的時候，還是分開寫，然後再加護的時候有路由程式動態載入，單頁面的頁面跳轉，僅重新整理區域性資源。多用於pc端。

  • 多頁面（MPA），就是一個應用中有多個頁面，頁面跳轉時是整頁重新整理

  • 單頁面的優點：使用者體驗好，快，內容的改變不需要重新載入整個頁面，基於這一點spa對伺服器壓力較小；前後端分離，頁面效果會比較酷炫

  • 單頁面缺點：不利於seo；導航不可用，如果一定要導航需要自行實現前進、後退。初次載入時耗時多；頁面複雜度提高很多。

• 21、Vue 專案中為什麼要在列表元件中寫 key，其作用是什麼？
  key是給每一個vnode的唯一id,可以依靠key,更準確, 更快的拿到oldVnode中對應的vnode節點。

  • 更準確
    因為帶key就不是就地複用了，在sameNode函數 a.key === b.key對比中可以避免就地複用的情況。所以會更加準確。
  • 更快
    利用key的唯一性生成map物件來獲取對應節點，比遍歷方式更快。

• 22、父元件和子元件生命週期勾點執行順序是什麼？

  • 載入渲染過程

  父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

  • 子元件更新過程

  父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

  • 父元件更新過程

  父 beforeUpdate -> 父 updated

  • 銷燬過程

  父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

• 23、談一談你對 nextTick 的理解？
  當你修改了data的值然後馬上獲取這個dom元素的值，是不能獲取到更新後的值，你需要使用$nextTick這個回撥，讓修改後的data值渲染更新到dom元素之後在獲取，才能成功。

• 24、vue元件中data為什麼必須是一個函數？
  因為JavaScript的特性所導致，在component中，data必須以函數的形式存在，不可以是物件。
  組建中的data寫成一個函數，資料以函數返回值的形式定義，這樣每次複用元件的時候，都會返回一份新的data，相當於每個元件範例都有自己私有的資料空間，它們只負責各自維護的資料，不會造成混亂。而單純的寫成物件形式，就是所有的元件範例共用了一個data，這樣改一個全都改了。

• 25、vue和jQuery的區別
  jQuery是使用選擇器（$）選取DOM物件，對其進行賦值、取值、事件繫結等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM物件，而資料和介面是在一起的。比如需要獲取label標籤的內容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過Vue物件將資料和View完全分離開來了。對資料進行操作不再需要參照相應的DOM物件，可以說資料和View是分離的，他們通過Vue物件這個vm實現相互的繫結。這就是傳說中的MVVM。

• 26、delete和Vue.delete刪除陣列的區別
  delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了陣列 改變了陣列的鍵值。

• 27、SPA首屏載入慢如何解決
  安裝動態懶載入所需外掛；使用CDN資源。

• 28、vue專案是打包了一個js檔案，一個css檔案，還是有多個檔案？
  根據vue-cli腳手架規範，一個js檔案，一個CSS檔案。

• 29、vue更新陣列時觸發檢視更新的方法
  push()；
  pop()；
  shift()；
  unshift()；
  splice()；
  sort()；
  reverse()

• 30、什麼是 vue 生命週期？有什麼作用？
  每個 Vue 範例在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將範例掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做 生命週期勾點 的函數，這給了使用者在不同階段新增自己的程式碼的機會。

• 31、第一次頁面載入會觸發哪幾個勾點？
  beforeCreate， created， beforeMount， mounted

• 32、vue獲取資料在一般在哪個周期函數
  created
  beforeMount
  mounted

• 33、created和mounted的區別
  created:在模板渲染成html前呼叫，即通常初始化某些屬性值，然後再渲染成檢視。
  mounted:在模板渲染成html後呼叫，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。

• 34、vue生命週期的理解
  總共分為8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。
  建立前/後： 在beforeCreated階段，vue範例的掛載元素$el和資料物件data都為undefined，還未初始化。在created階段，vue範例的資料物件data有了，$el還沒有。
  載入前/後：在beforeMount階段，vue範例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue範例掛載完成，data.message成功渲染。
  更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
  銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue範例已經解除了事件監聽以及和dom的繫結，但是dom結構依然存在。

• 35、vuex是什麼？
  vue框架中狀態管理。

• 36、vuex有哪幾種屬性？
  有五種，State、 Getter、Mutation 、Action、 Module
  state： 基本資料(資料來源存放地)
  getters： 從基本資料派生出來的資料
  mutations ： 提交更改資料的方法，同步！
  actions ： 像一個裝飾器，包裹mutations，使之可以非同步。
  modules ： 模組化Vuex

• 37、vue全家桶
  vue-cli、vuex、vueRouter、Axios

• 38、vue-cli 工程常用的 npm 命令有哪些?

  • npm install 下載 node_modules 資源包的命令
  • npm run dev 啟動 vue-cli 開發環境的 npm 命令
  • npm run build vue-cli 生成 生產環境部署資源 的 npm 命令
  • npm run build–report 用於檢視 vue-cli 生產環境部署資原始檔大小的 npm 命令

• 39、請說出 vue-cli 工程中每個資料夾和檔案的用處?

  • build 資料夾是儲存一些 webpack 的初始化設定。
  • config 資料夾儲存一些專案初始化的設定
  • node_modules 是 npm 載入的專案依賴的模組
  • src 目錄是我們要開發的目錄:
    assets 用來放置圖片
    components 用來放元件檔案
    app.vue 是專案入口檔案
    main.js 專案的核心檔案

• 40、v-if 和 v-show 有什麼區別

  • 共同點：都是動態顯示 DOM 元素
  • 區別點：
    • v-if 是動態的向 DOM 樹內新增或者刪除 DOM 元素
    • v-show 是通過設定 DOM 元素的 display 樣式屬性控制顯隱
    • v-if 切換有一個區域性編譯/解除安裝的過程，切換過程中合適地銷燬和重建內部的事件監聽和子元件
    • v-show 只是簡單的基於 css 切換
      • 效能消耗
    • v-if 有更高的切換消耗
    • v-show 有更高的初始渲染消耗
    • 使用場景
      • v-if 適合運營條件不大可能改變
      • v-show 適合頻繁切換

• 41、v-for 與 v-if 的優先順序?
  v-for 和 v-if 同時使用，有一個先後執行的優先順序，v-for 比 v-if 優先順序更高，這就說明在
  v-for 每次的迴圈賦值中每一次呼叫 v-if 的判斷，所以不推薦 v-if 和 v-for 在同一個標籤中同時使用。

• 42、 vue 常用的修飾符?
  事件修飾符

  • .stop 阻止事件繼續傳播
  • .prevent 阻止標籤預設行為
  • .capture 使用事件捕獲模式，即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理
  • .self 只當在 event.target 是當前元素自身時觸發處理常式
  • .once 事件只會觸發一次
  • .passive 告訴瀏覽器你不想阻止事件的預設行為

  v-model 的修飾符

  • .lazy 通過這個修飾符，轉變為在 change 事件再同步
  • .number 自動將使用者輸入值轉化為數值型別
  • .trim 自動過濾使用者輸入的收尾空格

  鍵盤事件修飾符

  • .enter
  • .tab
  • .delete (捕獲「刪除」和「退格」鍵)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

  系統修飾符

  • .ctrl
  • .alt
  • .shift
  • .meta

  滑鼠按鈕修飾符

  • .left
  • .right
  • .middle

• 43、vue 事件中如何使用 event 物件?

  • 獲取事件物件，方法引數傳遞 $event 。注意在事件中要使用 $ 符號

  <button @click="Event($event)">事件物件</button>

• 44、元件傳值方式有哪些

1. 父傳子：子元件通過props[‘xx’] 來接收父元件傳遞的屬性 xx 的值
2. 子傳父：子元件通過 this.$emit(‘fnName’,value) 來傳遞,父元件通過接收 fnName 事件方法來接收回撥
3. 其他方式：通過建立一個bus，進行傳值
4. 使用Vuex

• 45、vue 中子元件呼叫父元件的方法?

  • 直接在子元件中通過 this.$parent.event 來呼叫父元件的方法。
  • 在子元件裡用$emit()向父元件觸發一個事件，父元件監聽這個事件就行了。
  • 父元件把方法傳入子元件中，在子元件裡直接呼叫這個方法。

• 46、 如何讓 CSS 只在當前元件中起作用？
  在元件中的 style 前面加上 scoped

• 47、如何獲取 dom?
  ref="domName" 用法：this.$refs.domName

• 48、vue路由跳轉

  • (一)宣告式導航router-link

    • 不帶引數：

    // 注意：router-link中連結如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始。
    <router-link :to="{name:'home'}">  
    <router-link :to="{path:'/home'}"> //name,path都行, 建議用name

    • 帶引數：

    <router-link :to="{name:'home', params: {id:1}}">
    <router-link :to="{name:'home', query: {id:1}}">  
    <router-link :to="/home/:id">  
    //傳遞物件
    <router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>

  • (二)this.$router.push()

    • 不帶引數：

    this.$router.push('/home')
    this.$router.push({name:'home'})
    this.$router.push({path:'/home'})

    • query傳參

    1.路由設定：
    name: 'home',
    path: '/home'
    2.跳轉：
    this.$router.push({name:'home',query: {id:'1'}})
    this.$router.push({path:'/home',query: {id:'1'}})
    3.獲取引數
    html取參: $route.query.id
    script取參: this.$route.query.id

    • params傳參

    1.路由設定：
    name: 'home',
    path: '/home/:id'(或者path: '/home:id')
    2.跳轉：
    this.$router.push({name:'home',params: {id:'1'}})
    注意：
    // 只能用 name匹配路由不能用path
    // params傳引數(類似post)  路由設定 path: "/home/:id" 或者 path: "/home:id"否則重新整理引數消失
    3.獲取引數
    html取參:$route.params.id 
    script取參:this.$route.params.id

    • 直接通過path傳參

    1.路由設定：
    name: 'home',
    path: '/home/:id'
    2.跳轉：
    this.$router.push({path:'/home/123'}) 
    或者：
    this.$router.push('/home/123') 
    3.獲取引數：
    this.$route.params.id

    • params和query的區別
      query類似 get，跳轉之後頁面 url後面會拼接引數，類似?id=1。
      非重要性的可以這樣傳，密碼之類還是用params，重新整理頁面id還在。
      params類似 post，跳轉之後頁面 url後面不會拼接引數。

  • (三)this.$router.replace()

    • 用法同上

  • (四)this.$router.go(n)

    • 向前或者向後跳轉n個頁面，n可為正整數或負整數

  • 區別:

    • this.$router.push
      跳轉到指定url路徑，並在history棧中新增一個記錄，點選後退會返回到上一個頁面
    • this.$router.replace
      跳轉到指定url路徑，但是history棧中不會有記錄，點選返回會跳轉到上上個頁面 (就是直接替換了當前頁面)
    • this.$router.go(n)
      向前或者向後跳轉n個頁面，n可為正整數或負整數

• 49、Vue.js 雙向繫結的原理
  Vue.js 2.0 採用資料劫持（Proxy 模式）結合釋出者-訂閱者模式（PubSub 模式）的方式，通過 Object.defineProperty()來劫持各個屬性的 setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。

  每個元件範例都有相應的watcher程式範例，它會在元件渲染的過程中把屬性記錄為依賴，之後當依賴項的setter被呼叫時，會通知watcher重新計算，從而致使它關聯的元件得以更新。

  Vue.js 3.0, 放棄了Object.defineProperty ，使用更快的ES6原生 Proxy (存取物件攔截器, 也稱代理器)

• 50、Computed和Watch的區別

  • computed 計算屬性 : 依賴其它屬性值,並且 computed 的值有快取,只有它依賴的 屬性值發生改變,下一次獲取 computed 的值時才會重新計算 computed 的值。

  • watch 偵聽器 : 更多的是觀察的作用,無快取性,類似於某些資料的監聽回撥,每 當監聽的資料變化時都會執行回撥進行後續操作。

  • 運用場景：

    • 當我們需要進行數值計算,並且依賴於其它資料時,應該使用 computed,因為可以利用 computed的快取特性,避免每次獲取值時,都要重新計算。
    • 當我們需要在資料變化時執行非同步或開銷較大的操作時,應該使用 watch,使用 watch 選項允許我們執行非同步操作 ( 存取一個 API ),限制我們執行該操作的頻率, 並在我們得到最終結果前,設定中間狀態。這些都是計算屬性無法做到的。
    • 多個因素影響一個顯示，用Computed；一個因素的變化影響多個其他因素、顯示，用Watch;

  • Computed 和 Methods 的區別

    • computed: 計算屬性是基於它們的依賴進行快取的,只有在它的相關依賴發生改變時才會重新求值對於 method ，只要發生重新渲染，
    • method 呼叫總會執行該函數

• 51、過濾器 (Filter)

  • 在Vue中使用filters來過濾(格式化)資料，filters不會修改資料，而是過濾(格式化)資料，改變使用者看到的輸出（計算屬性 computed ，方法 methods 都是通過修改資料來處理資料格式的輸出顯示。
  • 使用場景： 比如需要處理時間、數位等的的顯示格式；

• 52、axios是什麼
  易用、簡潔且高效的http庫， 支援node端和瀏覽器端，支援Promise，支援攔截器等高階設定。

• 53、sass是什麼？如何在vue中安裝和使用？
  sass是一種CSS預編譯語言安裝和使用步驟如下。

1. 用npm安裝載入程式（ sass-loader、 css-loader等載入程式)。
2. 在 webpack.config.js中設定sass載入程式。

• 54、Vue.js頁面閃爍
  Vue. js提供了一個v-cloak指令，該指令一直保持在元素上，直到關聯範例結束編譯。當和CSS一起使用時，這個指令可以隱藏未編譯的標籤，直到範例編譯結束。用法如下。

	[v-cloak]{ 
	display:none; 
	} 
	<div v-cloak>{{ title }}</div>

• 55、如何解決資料層級結構太深的問題
  在開發業務時，經常會岀現非同步獲取資料的情況，有時資料層次比較深，如以下程式碼: span 'v-text="a.b.c.d">, 可以使用vm.$set手動定義一層資料: vm.$set("demo"，a.b.c.d)

• 56、vue常用指令

1. v-model 多用於表單元素實現雙向資料繫結（同angular中的ng-model）
2. v-bind 動態繫結 作用： 及時對頁面的資料進行更改
3. v-on:click 給標籤繫結函數，可以縮寫為@，例如繫結一個點選函數 函數必須寫在methods裡面
4. v-for 格式： v-for=「欄位名 in(of) 陣列json」 迴圈陣列或json(同angular中的ng-repeat)
5. v-show 顯示內容 （同angular中的ng-show）
6. v-hide 隱藏內容（同angular中的ng-hide）
7. v-if 顯示與隱藏 （dom元素的刪除新增 同angular中的ng-if 預設值為false）
8. v-else-if 必須和v-if連用
9. v-else 必須和v-if連用 不能單獨使用 否則報錯 模板編譯錯誤
10. v-text 解析文字
11. v-html 解析html標籤
12. v-bind:class 三種系結方法
    • 物件型 ‘{red:isred}’
    • 三元型 ‘isred?「red」:「blue」’
    • 陣列型 ‘[{red:「isred」},{blue:「isblue」}]’
13. v-once 進入頁面時 只渲染一次 不在進行渲染
14. v-cloak 防止閃爍
15. v-pre 把標籤內部的元素原位輸出

• 57、$route和$router的區別

  • $route是「路由資訊物件」，包括path，params，hash，query，fullPath，matched，name等路由資訊引數。
  • $router是「路由範例」物件包括了路由的跳轉方法，勾點函數等

• 58、怎樣理解 Vue 的單項資料流

  • 資料總是從父元件傳到子元件，子元件沒有權利修改父元件傳過來的資料，只能請求父元件對原始資料進行修改。這樣會防止從子元件意外改變父元件的狀態，從而導致你的應用的資料流向難以理解。
  • 注意：在子元件直接用 v-model 繫結父元件傳過來的 props 這樣是不規範的寫法，開發環境會報警告。
  • 如果實在要改變父元件的 props 值可以再data裡面定義一個變數，並用 prop 的值初始化它，之後用$emit 通知父元件去修改。

• 59、虛擬DOM是什麼？有什麼優缺點？
  由於在瀏覽器中操作DOM是很昂貴的。頻繁操作DOM，會產生一定效能問題。這就是虛擬Dom的產生原因。Vue2的Virtual DOM 借鑑了開源庫 snabbdom 的實現。Virtual DOM本質就是用一個原生的JS物件去描述一個DOM節點，是對真實DOM的一層抽象。

  • 優點：
    • 1、保證效能下限：框架的虛擬DOM需要適配任何上層API可能產生的操作，他的一些DOM操作的實現必須是普適的，所以它的效能並不是最優的；但是比起粗暴的DOM操作效能要好很多，因此框架的虛擬DOM至少可以保證在你不需要手動優化的情況下，依然可以提供還不錯的效能，既保證效能的下限。
    • 2、無需手動操作DOM：我們不需手動去操作DOM，只需要寫好 View-Model的 程式碼邏輯，框架會根據虛擬DOM和資料雙向繫結，幫我們以可預期的方式更新檢視，極大提高我們的開發效率。
    • 3、跨平臺：虛擬DOM本質上是JavaScript物件，而DOM與平臺強相關，相比之下虛擬DOM可以進行更方便地跨平臺操作，例如伺服器端渲染、weex開發等等。
  • 缺點：
    • 1、無法進行極致優化：雖然虛擬DOM + 合理的優化，足以應對大部分應用的效能需要，但在一些效能要求極高的應用中虛擬DOM無法進行鍼對性的極致優化。
    • 2、首次渲染大量DOM時，由於多了一層DOM計算，會比innerHTML插入慢。

• 60、Vuex 頁面重新整理資料丟失怎麼解決？

  • 需要做 vuex 資料持久化，一般使用本地儲存的方案來儲存資料，可以自己設計儲存方案，也可以使用第三方外掛。
  • 推薦使用 vuex-persist (脯肉賽斯特)外掛，它是為 Vuex 持久化儲存而生的一個外掛。不需要你手動存取 storage，而是直接將狀態儲存至 cookie 或者 localStorage中。

• 61、Vuex 為什麼要分模組並且加名稱空間？

  • 模組： 由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時，store 物件就有可能會變得相當臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組。

  • 名稱空間： 預設情況下，模組內部的 action、mutation、getter是註冊在全域性名稱空間的 — 這樣使得多個模組能夠對同一 mutation 或 action 做出響應。如果希望你的模組具有更高的封裝度和複用性，你可以通過新增 namespaced:true 的方式使其成為帶命名的模組。當模組被註冊後，他所有 getter、action、及 mutation 都會自動根據模組註冊的路徑調整命名。

• 62、vue 中使用了哪些設計模式？

  • 1、工廠模式 - 傳入引數即可建立範例
    虛擬 DOM 根據引數的不同返回基礎標籤的 Vnode 和元件 Vnode。
  • 2、單例模式 - 整個程式有且僅有一個範例
    vuex 和 vue-router 的外掛註冊方法 install 判斷如果系統存在範例就直接返回掉。
  • 3、釋出-訂閱模式。（vue 事件機制）
  • 4、觀察者模式。（響應式資料原理）
  • 5、裝飾器模式（@裝飾器的用法）
  • 6、策略模式，策略模式指物件有某個行為，但是在不同的場景中，該行為有不同的實現方案 - 比如選項的合併策略。

• 63、你都做過哪些 Vue 的效能優化？
  這裡只列舉針對 Vue 的效能優化，整個專案的效能優化是一個大工程。

  • 物件層級不要過深，否則效能就會差。
  • 不需要響應式的資料不要放在 data 中（可以使用 Object.freeze() 凍結資料）
  • v-if 和 v-show 區分使用場景
  • computed 和 watch 區分場景使用
  • v-for 遍歷必須加 key，key最好是id值，且避免同時使用 v-if
  • 巨量資料列表和表格效能優化 - 虛擬列表 / 虛擬表格
  • 防止內部洩露，元件銷燬後把全域性變數和時間銷燬
  • 圖片懶載入
  • 路由懶載入
  • 非同步路由
  • 第三方外掛的按需載入
  • 適當採用 keep-alive 快取元件
  • 防抖、節流的運用
  • 伺服器端渲染 SSR or 預渲染

• 64、Vue.set 方法原理
  在兩種情況下修改 Vue 是不會觸發檢視更新的。

  • 1、在範例建立之後新增新的屬性到範例上（給響應式物件新增屬性）
  • 2、直接更改陣列下標來修改陣列的值。
  • Vue.set 或者說是 $set 原理如下
    因為響應式資料 我們給物件和陣列本身新增了__ob__屬性，代表的是 Observer 範例。當給物件新增不存在的屬性，首先會把新的屬性進行響應式跟蹤 然後會觸發物件 ob 的dep收集到的 watcher 去更新，當修改陣列索引時我們呼叫陣列本身的 splice 方法去更新陣列。

• 65、函數式元件使用場景和原理
  函數式元件與普通元件的區別

  • 1、函數式元件需要在宣告元件時指定 functional:true
  • 2、不需要範例化，所以沒有this，this通過render函數的第二個引數context代替
  • 3、沒有生命週期勾點函數，不能使用計算屬性，watch
  • 4、不能通過$emit對外暴露事件，呼叫事件只能通過context.listeners.click的方式呼叫外部傳入的事件
  • 5、因為函陣列件時沒有範例化的，所以在外部通過ref去參照元件時，實際參照的是HTMLElement
  • 6、函數式元件的props可以不用顯示宣告，所以沒有在props裡面宣告的屬性都會被自動隱式解析為prop，而普通的元件所有未宣告的屬性都解析到$attrs裡面，並自動掛載到元件根元素上（可以通過inheritAttrs屬性禁止）

  優點：1.由於函陣列件不需要範例化，無狀態，沒有生命週期，所以渲染性要好於普通元件2.函陣列件結構比較簡單，程式碼結構更清晰

  使用場景：

  一個簡單的展示元件，作為容器元件使用 比如 router-view 就是一個函數式元件。 「高階元件」—用於接受一個元件為引數，返回一個被包裝過的元件。
  相關程式碼如下：

if (isTrue(Ctor.options.functional)) { // 帶有functional的屬性的就是函數式元件 
return createFunctionalComponent(Ctor, propsData, data, context, children);
} 
const listeners = data.on; 
data.on = data.nativeOn; 
installComponentHooks(data); // 安裝元件相關勾點 （函數式元件沒有呼叫此方法，從而效能高於普通元件）

• 66、子元件為何不可以修改父元件傳遞的 Prop？
  所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。

• 67、vue專案建立。路由設定、環境設定以及元件傳值等

css、html面試題

• HTML和HTML5有什麼區別？

  主要有三個區別：

  • 1、檔案宣告區別

    HTML：超檔案標示語言，一種純文字型別的語言。

    HTML5.0：檔案宣告HTML5方便書寫，精簡，有利於程式設計師快速的閱讀和開發。

  • 2、結構語意區別

    html：沒有體現結構語意化的標籤，如：<div id="nav"></div>

    html5：新增了許多具有語意化的標籤，如：<article>、<aside>、<audio>、<bdi>...

  • 3、繪圖區別

    HTML：指可伸縮向量圖形，用於定義網路的基於向量的圖形。

    HTML5：HTML5的canvas元素使用指令碼（通常使用JavaScript）在網頁上繪製影象，可以控制畫布每一個畫素。

• 什麼是盒子模型？

  • 一個盒子我們會分成幾個部分：內容區(content)、內邊距(padding)、邊框(border)、外邊距(margin)，也就是盒模型的組成由margin，padding，boder，content組成
  • 盒子模型分為標準盒子模型和IE盒子模型

• 如何理解HTML5語意化？

  • HTML語意化標籤
  1. header – 標題
  2. nav – 導航
  3. article – 文章
  4. section – 節或段
  5. aside – 側邊欄
  6. footer – 頁尾

• 語意化的好處？

1. 在沒有css程式碼的情況下，也能很好的呈現內容結構、程式碼結構（讓非技術員也能看懂程式碼）
2. 提高使用者體驗，比如：title，alt用於解釋名詞和圖片資訊
3. 利於SEO。語意化能和搜尋引擎建立更好的聯絡，優化搜尋
4. 便於團隊開發與維護，語意化更具有可讀性

• cookies、sessionStorage、localStorage的區別是什麼？(瀏覽器)
  1、cookie
  （1）本身用於使用者端和伺服器端通訊
  （2）但是它有本地儲存的功能，於是就被「借用」
  （3）document.cookie = …獲取和修改即可
  （4）cookie用於儲存的缺點
  ①儲存量太小，只有4kb
  ②所有http請求都帶著，會影響獲取資源的效率
  ③api簡單，需要封裝才能用document.cookie
  2、localStorage,sesseionStorage
  （1）html5專門為儲存而設計，最大容量5M
  （2）api簡單易用
  （3）lcoalStorage.setItem(key, value);localStorage.getItem(key);
  （4）ios safari隱藏模式下:localStorage.getItem會報錯，建議統一使用try-catch封裝
  3、sessionStorage用於本地儲存一個對談（session）中的資料，這些資料只有在同一個對談中的頁面才能存取並且當對談結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存，僅僅是對談級別的儲存。而localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。
• 常見的瀏覽器核心有哪些？
  **Trident核心：**代表瀏覽器是ie瀏覽器，因此Trident核心又稱E核心，此核心只能用於Windows平臺，並且不是開源的。

**Gecko核心：**代表瀏覽器是Firefox瀏覽器。Gecko核心是開源的，最大優勢是可以跨平臺。

webkit ：Webkit核心:代表瀏覽器是Safari(蘋果的瀏覽器)以及低版本的谷歌瀏覽器，是開源的專案。

**Presto核心：**代表瀏覽器是Opera瀏覽器(中文譯為「歐朋瀏覽器」)，Presto核心是世界公認最快的渲染速度的引擎，但是在2013年之後，Open宣佈加入谷歌陣營，棄用了該核心。

**Blink核心：**由谷歌和Opera開發，2013年4月釋出，現在Chrome核心是Blink。

• 談談你對web標準以及W3C的理解？

  • web標準：

    web標準主要分為結構、表現、行為3部分

    結構：指我們平時在body裡面寫的標籤，主要是由HTML標籤組成

    表現：指更加豐富HTML標籤樣式，主要由CSS樣式組成

    行為：指頁面和使用者的互動，主要由JS部分組成

  • W3C：

    W3C對web標準提出了規範化的要求，即程式碼規範

  • 對結構的要求

    1、標籤字母要小寫

    2、標籤要閉合

    3、標籤不允許隨意巢狀

  • 對錶現和行為的要求

    1、建議使用外連CSS和js指令碼，實現結構與表現分離、結構與行為分離，能提高頁面的渲染效率，更快地顯示網頁內容

• 如何實現瀏覽器響應式佈局？

  • 使用媒體查詢（@media）
  • 使用flex彈性佈局
  • 使用百分比單位
  • 使用rem單位
  • 使用VH、HW單位

• CSS選擇器以及優先順序的理解？

  • 常用的CSS選擇器

    ID選擇器、類選擇器、標籤選擇器、屬性選擇器、偽類選擇器、後代選擇器

  • 權重劃分

  在同一層級下：

  !important > 內聯樣式 > ID選擇器 > 類選擇器 > （標籤選擇器、偽類選擇器、屬性選擇器）

  不同層級下：

  正常來說權重值越高的優先順序越高，但是一直以來沒有具體的權重值劃分，所以目前大多數開發中層級越深的優先順序越高

• 談談你對迴流和重繪的理解？

  • 什麼是迴流？

    • 當一個元素自身的寬高，佈局，顯示或隱藏，或元素內部的文字結構發生變化，導致需要重新構建頁面的時候，就產生了迴流

  • 什麼是重繪？

    • 當一個元素自身的寬高，佈局，及顯示或隱藏沒有改變，而只是改變了元素的外觀風格的時候，就產生了重繪

    • 什麼時候會進行迴流？
      新增或者刪除可見的 DOM 元素的時候
      元素的位置發生改變
      元素的尺寸發生改變
      內容改變
      頁面第一次渲染的時候

    • 什麼時候會進行重繪？

      列舉一些相關的 CSS 樣式：color、background、background-size、visibility、box-shadow

• opacity: 0、visibility: hidden、display: none有什麼區別？

  • opacity=0，該元素隱藏起來了，但不會改變頁面佈局，並且，如果該元素已經繫結一些事件，如click事件，那麼點選該區域，也能觸發點選事件的

  • visibility=hidden，該元素隱藏起來了，但不會改變頁面佈局，但是不會觸發該元素已經繫結的事件

  • display=none，把元素隱藏起來，並且會改變頁面佈局，可以理解成在頁面中把該元素刪除掉一樣

• css 前處理器

  • less
  • sass

• <img>的 title 和 alt 有什麼區別

  • 通常當滑鼠滑動到元素上的時候顯示
  • alt 是<img> 的特有屬性，是圖片內容的等價描述，用於圖片無法載入顯示、讀屏器閱讀圖片。可提圖片高可存取性，除了純裝飾圖片外都必須設定有意義的值，搜尋引擎會重點分析。

• 行內元素和塊級元素有哪些？img屬於什麼元素

  塊元素

  address – 地址
  blockquote – 塊參照
  center – 舉中對齊塊
  dir – 目錄列表
  div – 常用塊級容易，也是CSS layout的主要標籤
  dl – 定義列表
  fieldset – form控制組
  form – 互動表單
  h1 – 大標題
  h2 – 副標題
  h3 – 3級標題
  h4 – 4級標題
  h5 – 5級標題
  h6 – 6級標題
  hr – 水平分隔線
  isindex – input prompt
  menu – 選單列表
  noframes – frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容
  noscript – 可選指令碼內容（對於不支援script的瀏覽器顯示此內容）
  ol – 有序表單
  p – 段落
  pre – 格式化文字
  table – 表格
  ul – 無序列表

  內聯元素

  a – 錨點
  abbr – 縮寫
  acronym – 首字
  b – 粗體(不推薦)
  bdo – bidi override
  big – 大字型
  br – 換行
  cite – 參照
  code – 計算機程式碼(在參照原始碼的時候需要)
  dfn – 定義欄位
  em – 強調
  font – 字型設定(不推薦)
  i – 斜體
  img – 圖片
  input – 輸入框
  kbd – 定義鍵盤文字
  label – 表格標籤
  q – 短參照
  s – 中劃線(不推薦)
  samp – 定義範例計算機程式碼
  select – 專案選擇
  small – 小字型文字
  span – 常用內聯容器，定義文字內區塊
  strike – 中劃線
  strong – 粗體強調
  sub – 下標
  sup – 上標
  textarea – 多行文字輸入框
  tt – 電傳文字
  u – 下劃線

  img屬於行內替換元素，效果與塊元素一致

• 表單中readonly和disabled的區別

  • 共同點：能夠使使用者不能改變表單中的內容
  • 不同點：
    1、readonly只對input和textarea有效，但是disabled對所有的表單元素都是有效的，包括radio、checkbox
    2、readonly可以獲取到焦點，只是不能修改。disabled設定的文字方塊無法獲取焦點
    3、如果表單的欄位是disabled，則該欄位不會傳送（表單傳值）和序列化

瀏覽器

• 1、瀏覽器中輸入url到網頁顯示，整個過程發生了什麼

  域名解析
  發起tcp三次握手
  建立tcp連線之後發起htttp請求
  伺服器端響應http請求，瀏覽器得到html程式碼
  瀏覽器器解析html程式碼，並請求html程式碼中的資源
  瀏覽器對頁面進行渲染呈現給使用者

• 2、cookie的弊端

  每個特定的域名下最多生成的cookie的個數有限制
  IE和Opera會清理近期最少使用的cookie，firefox會隨機清理cookie
  cookie最大為4096位元組，為了相容一般不超過4095位元組
  安全性問題，如果cookie被人劫持，就可以獲得所有的session資訊

• 3、主流瀏覽器及核心

  Google chrome：webkit/blink
  safari：webkit
  IE：trident
  firefox：gecko
  Opera：presto/webkit/blink

• 4、sessionStorage和localStorage的區別

  sessionStorage用於本地儲存一個對談session中的資料，這些資料只有在同一個對談中的頁面才能存取並且當對談結束後資料會被銷燬。
  localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料永遠不會過期的。

• 5、談談對bfc規範的理解

  bfc是block formatting context即格式化上下文
  bfc是頁面css視覺渲染的一部分，用於決定塊盒子的佈局及浮動相互影響範圍的一個區域
  bfc最重要的一個效果是，讓處於bfc內部與外部的元素相互隔離，使內外的元素的定位不會相互影響

• 6、請說出至少三種減少頁面載入時間的方法

  儘量減少頁面中重複的http請求
  css樣式放置在檔案頭部、js指令碼放置在檔案末尾
  壓縮合並js、css程式碼
  伺服器開啟gzip壓縮

• 7、 如何進行網站效能優化？

  • content 方面
    • 減少 HTTP 請求：合併檔案、CSS 精靈、inline Image
    • 減少 DNS 查詢：DNS 快取、將資源分佈到恰當數量的主機名
    • 減少 DOM 元素數量
  • Server 方面
    • 使用 CDN
    • 設定 Etag
    • 對元件使用 Gzip 壓縮
  • Cookie 方面
    • 減少cookie大小
  • css 方面
    • 將樣式表放到頁面頂部
    • 不使用 CSS 表示式
    • 使用 <link> 不使用 @import
  • Javascript 方面
    • 將指令碼放到頁面底部
    • 將 javascript 和 css 從外部引入
    • 壓縮 javascript 和 css
    • 刪除不需要的指令碼
    • 減少 DOM 存取
  • 圖片方面
    • 優化圖片：根據實際顏色需要選擇色深、壓縮
    • 優化 css 精靈
    • 不要在 HTML 中拉伸圖片

• 8、瀏覽器儲存？

  • 短暫性的時候，我們只需要將資料存在記憶體中，只在執行時可用
  • 永續性儲存，可以分為 瀏覽器端 與 伺服器端
    • 瀏覽器:
      • cookie : 通常用於儲存使用者身份，登入狀態等，http 中自動攜帶， 體積上限為 4K ， 可自行設定過期時間
      • localStorage / sessionStorage : 長久儲存/視窗關閉刪除， 體積限制為 4~5M
      • indexDB
    • 伺服器
      • 分散式快取 redis
      • 資料庫

• 9、get / post？

  • get : 快取、請求長度受限、會被歷史儲存記錄
    • 無副作用(不修改資源)，冪等(請求次數與資源無關)的場景
  • post : 安全、巨量資料、更多編碼型別

• 10、安全性問題？

  • XSS 攻擊: 注入惡意程式碼
    • cookie 設定 httpOnly
    • 跳脫頁面上的輸入內容和輸出內容
  • CSRF : 跨站請求偽造，防護:
    • get 不修改資料
    • 不被第三方網站存取到使用者的 cookie
    • 設定白名單，不被第三方網站請求
    • 請求校驗

效能優化

• 1、效能優化的幾個方面?

  • 資源壓縮合並,減少HTTP請求
  • 非核心程式碼非同步載入
  • 利用瀏覽器快取
  • 使用CDN
  • 預解析DNS

• 2、非同步載入?

  • 動態指令碼載入
  • defer
  • async

• 3、載入方式區別？

  • defer是在html解析完畢才執行,如果有多個則按載入順序執行
  • async是載入完畢後立即執行,如果是多個,執行順序與載入順序無關

• 4、預載入?

  • 在開發中，可能會遇到這樣的情況。有些資源不需要馬上用到，但是希望儘早獲取，這時候就可以使用預載入。
  • 預載入其實是宣告式的 fetch ，強制瀏覽器請求資源，並且不會阻塞 onload 事件，可以使用以下程式碼開啟預載入
  • <link rel="preload" href="http://example.com">
  • 預載入可以一定程度上降低首屏的載入時間，因為可以將一些不影響首屏但重要的檔案延後載入，唯一缺點就是相容性不好。

• 5、DNS 預解析?

  • DNS 解析也是需要時間的，可以通過預解析的方式來預先獲得域名所對應的 IP。
    <meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="dns-prefetch" href="//yuchengkai.cn">
  • 在https協定中預設a標籤不會開啟預解析,因此需要手動設定meta

• 6、懶執行?
  懶執行就是將某些邏輯延遲到使用時再計算。該技術可以用於首屏優化，對於某些耗時邏輯並不需要在首屏就使用的，就可以使用懶執行。懶執行需要喚醒，一般可以通過定時器或者事件的呼叫來喚醒。

• 7、懶載入?
  懶載入就是將不關鍵的資源延後載入。

  懶載入的原理就是隻載入自定義區域（通常是可視區域，但也可以是即將進入可視區域）內需要載入的東西。對於圖片來說，先設定圖片標籤的 src 屬性為一張佔點陣圖，將真實的圖片資源放入一個自定義屬性中，當進入自定義區域時，就將自定義屬性替換為 src 屬性，這樣圖片就會去下載資源，實現了圖片懶載入。

  懶載入不僅可以用於圖片，也可以使用在別的資源上。比如進入可視區域才開始播放視訊等等。

react面試題

1、什麼時候使用狀態管理器?

• 從專案的整體看
  • 目使用者的使用方式複雜
  • 不同身份的使用者有不同的使用方式（比如普通使用者和管理員）
  • 多個使用者之間可以共同作業
  • 與伺服器大量互動，或者使用了 WebSocket
  • View 要從多個來源獲取資料
• 從元件角度看
  • 某個元件的狀態，需要共用
  • 某個狀態需要在任何地方都可以拿到
  • 一個元件需要改變全域性狀態
  • 一個元件需要改變另一個元件的狀態
• 元件有相當大量的，隨時間變化的資料
• state 需要有一個單一可靠資料來源
• 所有 state 放在頂層元件已經無法滿足需求了

2、說說 React 有什麼特點?

• 它使用**虛擬 DOM **而不是真正的 DOM。
• 它可以用伺服器端渲染。
• 它遵循單向資料流或資料繫結

3、列出 React 的一些主要優點?

• 它提高了應用的效能
• 可以方便地在使用者端和伺服器端使用
• 由於 JSX，程式碼的可讀性很好
• React 很容易與 Meteor，Angular 等其他框架整合
• 使用 React，編寫 UI 測試用例變得非常容易

4、什麼是 JSX?

• 它 JSX 是 J avaScript XML 的簡寫。是 React 使用的一種檔案，它利用 JavaScript 的表現力和類似 HTML 的模板語法。這使得 HTML 檔案非常容易理解。此檔案能使應用非常可靠，並能夠提高其效能
• 例子

  render() {
  	return(
  		<div>
  			<h1> Hello World </h1>
  		</div>
  	)
  }

5、說說為什麼瀏覽器無法讀取 JSX?

• 瀏覽器只能處理 JavaScript 物件，而不能讀取常規 JavaScript 物件中的 JSX。所以為了使
  瀏覽器能夠讀取 JSX，首先，需要用像 Babel 這樣的 JSX 轉換器將 JSX 檔案轉換為
  JavaScript 物件，然後再將其傳給瀏覽器

6、你理解「在 React 中，一切都是元件」這句話?

• 元件是 React 應用 UI 的構建塊。這些元件將整個 UI 分成小的獨立並可重用的部分。每個
  元件彼此獨立，而不會影響 UI 的其餘部分

7、 React 中 render()的目的?

• 每個 React 元件強制要求必須有一個 render()。它返回一個 React 元素，是原生 DOM 元件的表示。如果需要渲染多個 HTML 元素，則必須將它們組合在一個封閉標記內，例如<form>、<group>、<div> 等。此函數必須保持純淨，即必須每次呼叫時都返回相同的結果

8、什麼是 Props?

• Props 是 React 中屬性的簡寫。它們是唯讀元件，必須保持純，即不可變。它們總是在整個應用中從父元件傳遞到子元件。子元件永遠不能將 prop 送回父元件。這有助於維護單向資料流，通常用於呈現動態生成的資料

9、React 中的狀態是什麼？

• 狀態是 React 元件的核心，是資料的來源，必須儘可能簡單。基本上狀態是確定元件呈現和行為的物件。與 Props 不同，它們是可變的，並建立動態和互動式元件。可以通過this.state() 存取它們。

10、區分狀態和 Props?

11、如何更新元件的狀態?

• 使用this.setState()更新元件的狀態

12、React 元件生命週期的階段是什麼?

• React 元件的生命週期有三個不同的階段：
  • 初始渲染階段：這是元件即將開始其生命之旅並進入 DOM 的階段。
  • 更新階段：一旦元件被新增到 DOM，它只有在 prop 或狀態發生變化時才可能更新和重新渲染。這些只發生在這個階段
  • 解除安裝階段：這是元件生命週期的最後階段，元件被銷燬並從 DOM 中刪除

13、你對 React 的 refs 有什麼瞭解?

• Refs 是 React 中參照的簡寫。它是一個有助於儲存對特定的 React 元素或元件的參照的屬性，它將由元件渲染設定函數返回。用於對 render()返回的特定元素或元件的參照。當需要進行 DOM 測量或向元件新增方法時，它們會派上用場
• 列出一些應該使用 refs 的情況?
  • 需要管理焦點、選擇文字或媒體播放時
  • 觸發式動畫
  • 與第三方 DOM 庫整合

14、如何模組化 React 中的程式碼?

• 可以使用 export 和 import 屬性來模組化程式碼。它們有助於在不同的檔案中單獨編寫元件

15、什麼是高階元件 HOC?

• 高階元件是重用元件邏輯的高階方法，是一種源於 React 的元件模式。 HOC 是自定義元件，在它之內包含另一個元件。它們可以接受子元件提供的任何動態，但不會修改或複製其輸入元件中的任何行為。你可以認為 HOC 是「純（Pure）」元件

16、你能用 HOC 做什麼?

• HOC 可用於許多工:
  • 用程式碼重用，邏輯和引導抽象
  • 渲染劫持
  • 狀態抽象和控制
  • Props 控制

17、 React 中 key 的重要性是什麼?

• key 用於識別唯一的 Virtual DOM 元素及其驅動 UI 的相應資料。它們通過回收 DOM 中當前所有的元素來幫助 React 優化渲染。這些 key 必須是唯一的數位或字串，React 只是重新排序元素而不是重新渲染它們。這可以提高應用程式的效能

18、MVC 框架的主要問題是什麼?

• key 用對 DOM 操作的代價非常高
• 程式執行緩慢且效率低下
• 記憶體浪費嚴重
• 由於迴圈依賴性，元件模型需要圍繞 models 和 views 進行建立

19、請你解釋一下 Flux?

• Flux 是一種強制單向資料流的架構模式。它控制派生資料，並使用具有所有資料許可權的中心store 實現多個元件之間的通訊。整個應用中的資料更新必須只能在此處進行。 Flux 為應用提供穩定性並減少執行時的錯誤。

20、你對「單一事實來源」有什麼理解

• Redux 使用 「store」 將程式的整個狀態儲存在同一個地方。因此所有元件的狀態都儲存在store 中，並且它們從 store 本身接收更新。單一狀態樹可以更容易地跟蹤隨時間的變化，並偵錯或檢查程式。

21、列出 Redux 的元件?

• Redux 由以下元件組成:
  • Action 這是一個用來描述發生了什麼事情的物件
  • Reducer 這是一個確定狀態將如何變化的地方
  • Store 整個程式的狀態/物件樹儲存在 Store 中
  • View 查只顯示 Store 提供的資料

22、 Store 在 Redux 中的意義是什麼?

• store 是一個 JavaScript 物件，它可以儲存程式的狀態，並提供一些方法來存取狀態、排程操作和註冊偵聽器。應用程式的整個狀態/物件樹儲存在單一儲存中。因此，Redux 非常簡單且是可預測的。我們可以將中介軟體傳遞到 store 來處理資料，並記錄改變儲存狀態的各種操作。所有操作都通過 Reducer 返回一個新狀態

23、 Redux 有哪些優點?

• 結果的可預測性
• 可維護性
• 伺服器端渲染
• 易於測試 -

24、 什麼是 React 路由?

• React 路由是一個構建在 React 之上的強大的路由庫，它有助於嚮應用程式新增新的螢幕和流。這使 URL 與網頁上顯示的資料保持同步。它負責維護標準化的結構和行為，並用於開發單頁 Web 應用。 React 路由有一個簡單的 API。

25、說說你對 React 的渲染原理的理解?

• 單向資料流。React 是一個 MVVM 框架，簡單來說是在 MVC 的模式下在前端部分拆分出資料層和檢視層。單向資料流指的是隻能由資料層的變化去影響檢視層的變化，而不能反過來（除非雙向繫結）
• 資料驅動檢視。我們無需關注頁面的 DOM，只需要關注資料即可
• 渲染過程，生命週期……
• setState()大部分時候是非同步執行的，提升效能。

26、React 中三種構建元件的方式?

• React.createClass()、ES6 class 和無狀態函數。

JQuery

• 說出jQuery中常見的幾種函數以及他們的含義是什麼?
  （1）get()取得所有匹配的DOM元素集合；
  （2）get(index)取得其中一個匹配的元素.index表示取得第幾個匹配的元素；
  （3）append(content)向每個匹配的元素內部追加內容；
  （4）after(content)在每個匹配的元素之後插入內容；
  （5）html()/html(var)取得或設定匹配元素的html內容；
  （6）find(expr)搜尋所有與指定表示式匹配的元素；
  （7）bind(type,[data],fn)為每個匹配元素的特定事件繫結事件處理常式；
  （8）empty()刪除匹配的元素集合中所有的子節點；
  （9）hover(over,out)一個模仿懸停事件(滑鼠移動到一個物件上面及移出這個物件)的方法；
  （10）attr(name)取得第一個匹配元素的屬性值。

【相關推薦：jq教學】

• jQuery 能做什麼？
  獲取頁面的元素；修改頁面的外觀；改變頁面大的內容；響應使用者的頁面操作；為頁面新增動
  態效果；無需重新整理頁面，即可以從伺服器獲取資訊；簡化常見的javascript任務。

• 如何將一個HTML元素新增到DOM樹中的？
  可以通過appendTo()方法在指定的DOM元素末尾新增一個現存的元素或者一個新的HTML元素。

• 什麼是jQuery? jQuer能做什麼？
  jQuery是一套JavaScript的庫，它簡化了使用Javascript進行網頁特效開發的一些複雜性，提供了對常見任務的自動化和複雜任務的簡化

  • jQuery的作用
    • 快速獲取檔案元素
    • 提供漂亮的頁面動態效果
    • 建立Ajax無重新整理網頁
    • 提供對JavaScript語言的增強
    • 增強的事件處理
    • 更改網頁內容
      JQuery可以修改網頁中的內容,比如更改網頁的文字、插入或轉網頁影象, jQuery簡化了原本使用JavaScript程式碼需要處理的方式。

• JQuery 的優點
  1.利用css的選擇器提供高速的元素查詢行為。
  2.提供了一個抽象層來標準化各種常見的任務，可以解決各種瀏覽器的相容問題。
  3.將複雜的程式碼簡化，提供連綴程式設計模式，大大簡化了程式碼的操作。

（學習視訊分享：、jQuery視訊教學）

以上就是分享一些值得收藏的精選Web前端面試題（附答案）的詳細內容，更多請關注TW511.COM其它相關文章！