本篇文章為大家總結一些值得收藏的精選Web前端面試題（附答案）。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

2023年精選Web前端面試題大全及答案（收藏）

HTML、CSS相關

1.網路中使用最多的圖片格式有哪些

JPEG,GIF,PNG,最受歡迎的是#jpeg格式，可以把檔案壓縮到最小在ps以jpeg格式儲存時，提供11級壓縮等級

2.請簡述css盒子模型

2023年精選Web前端面試題大全及答案（收藏）

#css盒子從外到內可以分成四個部分：margin（外邊距），border（邊框）， padding（內邊距），content（內容）。預設情況下，盒子的width和height屬性只是設定##content（內容）的寬與高，

盒子真正的寬應該是：內容寬度 #左右填充 #左右邊距左右邊框

#盒子真正的高應該是：內容高度上下填充上下邊距 #上下邊框

3.視頻/音訊標籤的使用

影片：

視訊標籤屬性：

src 需要播放的視訊位址

width/height 設定播放影片的寬高，和img標籤的寬高屬性一樣

autoplay 是否自動播放

controls 是否顯示控制條

#poster 沒有播放先前顯示的展位圖片

loop 是否循環播放

#perload #預先載入影片（快取）與autoplay相衝突，設定了autoplay#屬性，perload##屬性會失效。

muted

靜音模式

音訊: 音訊屬性和視訊屬性差不多，但寬高和poster##屬性不能用

4.HTML5新增的內容有哪些

新增語意化標籤

新增表單類型

表單元素

表單屬性

表單事件

#多媒體標籤

5.Html5 新增的語意化標籤有哪些

語意化標籤優點：1.提升可訪問性 2.seo 3.結構清晰，利於維護

Header頁面頭部 main頁面主要內容 footer頁面底部

Nav#導覽列 aside#側邊欄 article載入頁面一塊獨立內容

#Section相當於p figure#載入獨立內容（上圖下字） figcaption figure#的標題

Hgroup標題組合標籤 mark高亮顯示 dialog 載入對話框標籤（必須配合open屬性）

Embed載入外掛程式的標籤 video載入影片 audio #載入音訊（支援格式ogg，mp3，wav）

6.Css3新增的特性

邊框：

border -radios 新增圓角邊框
border-shadow#：為方塊新增陰影（水平位移，垂直位移，模糊半徑，陰影尺寸，陰影顏色，insetr#（內/##外部陰影））
border-image
：設定邊框圖像
border-image -source
邊框圖片的路徑
border-image-slice
圖片邊框向內偏移
border-image-width
圖片邊框的寬度
border- image-outset
邊框圖像區域超出邊框的量
border-image-repeat 圖片邊框是否平鋪（repeat平鋪 round鋪滿 stretch 拉伸）

背景：

Background-size 背景圖片尺寸
Background-origin#規定background-position屬性相對於什麼位置定位
Background-clip 規定背景的繪製區域（padding-box，border-box，content-box）

漸變：

Linear-gradient（）線性漸變
Radial-gradient（）徑向漸層

文字效果：

Word-break：定義如何換行
Word-wrap：允許長的內容可以自動換行
Text-overflow：指定當文字溢出包含它的元素，應該乾啥
#Text-shadow：文字陰影（水平位移，垂直位移，模糊半徑，陰影顏色）

轉換：

##Transform 套用於2D3D轉換，可以將元素旋轉，縮放，移動，傾斜
##Transform- origin
可以更改元素轉換的位置，（改變xyz#軸）
Transform -style
指定巢狀元素怎麼樣在三位元空間中呈現

#2D

轉換方法：

rotate
（x#x

，y

）指定元素在二維空間的位移

scale
（n ）定義縮放轉換#3D# 轉換方法：

## Perspective######（######n######）為#######3D######轉換###### translate rotate scale #### ##############過渡：###################Transition-proprety ######過渡屬性名稱#### ##
Transition-duration 完成過渡效果所需花費的時間
Transition-timing- function 指定切換效果的速度
#Transition-delay 指定什麼時候開始切換效果

動畫：animation

#Animation-name 為@keyframes動畫名稱
#animation-duration #動畫需要花費的時間
animation-timing-function #動畫如何完成一個週期
animation-delay 動畫啟動前的延遲間隔

#animation-iteration-count

動畫播放次數

animation-direction 是否輪流反向播放動畫

高度塌陷：
清除浮動方式

：為父元素單獨定義高度

優點：快速簡單，程式碼少
缺點：無法進行響應式佈局

清除浮動方式2：父級定義overflow：##hidden ;zoom：1（針對ie6##的相容）

優點：簡單快速、程式碼少，相容性較高
缺點：超出部分被隱藏，佈局時要注意

#清除浮動方式

3：在浮動元素後面加上一個空標籤，clear：both；

height

：
0
；
overflow
：hidden
##### 優點：簡單快速、程式碼少，相容性較高############################################## ##清除浮動方式######4######：父級定義######overflow######：######auto####### ###########優點：簡單，程式碼少，相容性好###################缺點：內部寬高超過父級### ###p######時，會出現捲軸######

清除浮動方式5：萬能清除法：

為塌陷的元素添加偽物件

.father：after{
         Content：“随便写”；
         Clear：both；
         display：block；
         Height：0；
         Overflow：hidden；
         Visibility：hidden
}

登入後複製

優點：寫法固定，相容性高
缺點：程式碼多

8.定位的屬性值有何區別

Position有四個屬性值：relative absolute fixed static

Relative相對定位不脫離文件流，相對於自身定位
Absolute 絕對定位，脫離文檔流程相對於父級定位
#Fixed 固定定位，脫離文件流，相對於瀏覽器視窗定位
Static 預設值，元素出現在正常的流中

9.子元素如何在父元素中居中

#水平居中：

##1 .子父元素寬度固定，子元素設定margin：auto，且子元素不能設定浮動，否則居中失效

2.子父元素寬度固定，父元素設定text-align：center，子元素設定display：inline-block#，且子元素不能設定浮動，否則居中失效

水平垂直居中：

子元素相對於父元素絕對定位，子元素top，left設定50%，子元素margin-top和margin-left減去各自寬高的一半
##子元素相對於父元素絕對定位，子元素上下左右全為
0#margin#：auto
父元素設定#display：#table-cell vertical-align：middle，子元素設定margin：auto
子元素相對定位，子元素top，left#值為50%，#transform#：translate##（-50%，-50%）
子元素相對父元素絕對定位，子元素top#，left#值為50%，#transform#：translate##（ -50%，-50%）
父元素設定彈性盒子，

display：flex#;## justfy-content：center ;align-item：##center； justfy-content：center#10.Border-box與content-box的差異

Content-box

標準盒模型 width不包括padding和borderBorder-box

怪異盒模型width##包括 padding與border11.元素垂直居中

設定子元素和父元素的行高一樣

子元素設定為行內區塊，再加

vertical-align ：middle3.

已知父元素高度，子元素相對定位，透過

transform：translateY（-50%）4.

不知道父元素高度，子絕父相，子元素

top：50%，transform：translateY#（-50%#）5.

建立一個隱藏節點，讓隱藏節點的

height為剩餘高度的一半6.

給父元素

display：##table，子元素display：table-cell，vertical-align：middle7.為父元素新增偽元素

8.彈性盒，父元素display#：flex，子元素align-self：center

#12.如何讓chrome瀏覽器顯示小於12px的文字

#本來加入Google私有屬性## -webkit-text-size-adjust：none，現在-webkit-transform：scale#（）

13.Css選擇器有哪些，那些屬性可以繼承，優先權如何計算？ Css3新增的偽類別有哪些

Css2選擇器：

元素選擇器，id選擇器，群組選擇器，類別選擇器，##*#通配符選擇器，後代選擇器

Css2

偽類選擇器：a:link/visited/hover/active

Css3

選擇器：

空格

> #鄰近兄弟選擇器 ~通用選擇器（尋找後面所有）

結構偽類別選擇器：

#找第幾個

##nth-child（n）#找出相同類型第幾個

nth-of-type尋找唯一類型

only-of-type屬性選擇器：根據標籤屬性尋找

[attr=value]: root

找出根元素##html標籤: empty

查趙空標籤

#目標偽類選擇器：（表單）

：

enabled
尋找可以使用的標籤
#：
disabled
尋找禁止使用的標籤
：
checked
尋找已選取的標籤
偽元素選擇器

：:

#selection設定選取文字內容的高亮顯示（只能用於背景色和文字顏色）否定偽類選擇器

# not

（）

語言偽類別選擇器

lang

（取值）
優先權（權重）：
############元素選擇器######1 ######
偽元素選擇器1
class選擇器10
偽類選擇器10
屬性選擇器10
#Id選擇器#100
內聯樣式的權重1000
包含選擇器權重為權重總和
繼承樣式權重為0

#那些屬性可以繼承：

Css
#繼承特性主要是文字面
所有元素可繼承：visibility和
#cursor
##塊層級元素可繼承：text-indent與text-align
清單元素可繼承：list-style，list-style-type，##list-style-position，list-style-image
#內嵌元素可繼承：letter-spacing，word-spacing，line-height，color，font，font-family，#font-size
Font-style，font-variant，font-weight ，text-decoration，text-transform，direction

#字母間距

段落間距### ###行高### ###字體顏色### ###字體類型### ###字體大小### ###字體樣式### ###字體粗細### ###小型大寫字母文字### ###文字修飾### ###轉換不同元素中的文字### # ##文字方向##################14.網頁中有大量圖片載入很慢你有什麼辦法可以優化？ ############1.######圖片懶加載，在圖片未可視區域加一個滾動條事件，判斷圖片位置與瀏覽器頂端和頁面的距離，如果前者小魚後者，優先載入############2.######使用圖片預先載入技術，將目前展示圖片的前一張和後一張優先下載### #########3.######使用######csssprite######或######svgsprite######

15.行內元素/區塊級元素有哪些？

行內元素：相鄰的行內元素會排列在同一行，不會獨佔一行設定寬高無效 span

區塊級元素：會獨佔一行可以設定寬高等屬性p

可變元素：根據上下文預警決定該元素為區塊元素還是內聯元素

區塊級元素：p h1-h6 hr p ul ol table address blockquote dir from menu

行內元素：a br I em img input select span sub sup u textarea

可變元素：button del iframe ins

16.瀏覽器的標準模式和怪異模式差異？

標準模式：瀏覽器依照W3C#標準解析執行程式碼

怪異模式：瀏覽器依照自己的方式解析執行程式碼，因為不同瀏覽器解析執行方式不一樣，所以叫怪異模式

區別：

##在怪異模式下，盒子模型為怪異盒模型而在標準模式下為標準盒子模型
圖片元素的垂直對齊方式

對於行內元素和table-cell元素，標準模式下vertical- align屬性預設值是baseline，而在怪異模式下，table單元格中的圖片的vertical-align屬性預設值是bottom，因此在圖片底部會有幾像素的空間
元素中的字體

css#font的屬性都是可以繼承的，怪異模式下，對於table元素，字體的某些元素不能從其他封裝元素繼承中得到，特別是font-size屬性
#內連元素的尺寸

標準模式下，non-replaced inline元素無法自訂大寫，怪異模式下，定義元素的寬高會影響元素的尺寸
元素的百分比高度

當一個元素使用百分比高度時，在標準模式下，高度取決於內容變化，在怪異迷失下，百分比被準確應用
元素溢出的處理

#標準模式下，overflow取值預設值為visible，在怪異模式下，這個溢位會被當作擴充box對待，就是元素的大小由內容決定，溢出不會裁剪，元素框自動調整，包含溢出內容

#17.Margin和padding在什麼場合下使用

Margin外邊距自旁邊框到另一個邊框之間的距離

Padding 內邊距自身邊距到自身內容之間的距離

當需要在border外側加入空白時用margin，當需要在 border內側加入空白時用padding

#18.彈性盒子佈局屬性有那些請簡述?

Flex-direction：彈性容器中子元素排列方式（主軸排列方式）

Flex-wrap：設定彈性盒子的子元素超出父容器時是否換行

Flex-flow：是flex-direction和flex-wrap簡寫形式

#Align-item##：設定彈性盒子元素在側軸上的對齊方式

Align-content：設定行對齊

Justify-content：設定彈性盒子元素在主軸上的對齊方式

19.怎麼實現標籤的停用

##新增

disabled屬性

#20.Flex佈局原則

##就是將

# flex

屬性，來控制子盒子的位置和排列方式

#21.Px，rem，em的區別

Px，絕對長度單位，像素

是相對於顯示器螢幕解析度來說的em 相對長度單位，相對於目前物件內文字的字體尺寸

em的數值並不是固定的

# em會繼承父級元素的字體大小（參考物是父元素的font-size）

# em

中所有的字體都是相對於父元素的大小決定的rem #相對於html根元素的font-size#1em=1rem=16px 在 body中加入font-size：

62.5%

這樣直接就是原來的

數值除以10加上em就可以

22.網頁的三層結構有哪些

#########結構（######html######或#######xhtm# #####標記語言）表現（######css#######樣式表）行為（######js######）######### ####23.請簡述媒體查詢#########

媒體查詢擴展了media屬性, 就是根據不同的媒體類型設定不同的css樣式，達到自適應的目的。

24.Rem缺點

例如：小說網站，螢幕越小的行動裝置如果用了rem肯定文字就越小，就會導致看文章的時候特別費眼

25.常見的兼容性一階段內容中記幾個

26.垂直與水平居中的方式

27.三欄佈局方式兩邊固定中間自適應

##1. margin負值法：左右兩欄均左浮動，左右兩欄採用負的margin值。中間欄被寬度為100%的浮動元素包起來

#2. 自身浮動法：左邊欄左浮動，右欄右浮動，中間欄放最後

3. 絕對定位法：左右兩欄採用絕對定位，分別固定在頁面的左右兩側，中間的主體欄用左右margin值撐開距離。

4.flex 左右固定寬度中間flex##：1

網格佈局

table#佈局

28.Doctype作用

#聲明文件類型

##Javascript相關

1.Js基本資料型別有哪些

字串

##String

數值Number 布林boolean null undefined #陣列 #2.Ajax如何使用

一個完整的

AJAX

請求包含五個步驟：

建立

XMLHTTPRequest
物件
使用
方法建立http請求，並設定請求位址xhr.open

get/post，url，async#，true（非同步），false（同步））經常使用前三個參數設定發送的數據，以

發送請求註冊事件（給
設定事件）# 取得回應並更新頁面
3.如何判斷一個資料是NaN

NaN 非數字但用typeof偵測是number類型

利用NaN的定義利用##typeof 判斷是否為number類型並且判斷是否滿足isnan
利用NaN是唯一一個不等於任何自身的特點# n！ ==n
利用ES6## Object.is()方法（判斷兩個值是否相等） n==nan

4. Js中null與undefined區別

相同點：用if判斷時，兩者都會轉換成 false

不同點：

number轉換的值不同# number（null）為0 number（undefined）為NaN

Null表示一個值被定義了，但是這個值是空值

Undefined 變數宣告但未賦值

5.閉包是什麼？有什麼特性？對頁面會有什麼影響

閉包可以簡單理解成：定義在一個函數內部的函數。其中一個內部函數在包含它們的外部函數之外被呼叫時，就會形成閉包。

特點：

#函數巢狀函數。
函數內部可以引用外部的參數和變數。
參數和變數不會被垃圾回收機制回收#。

使用：

#讀取函數內部的變數;
#這些變數的值始終保持在記憶體中，不會在外層函數呼叫後被自動清除。

優點：

#變數長期駐紮在記憶體中；
#避免全域變數的污染；
#私有成員的存在 ;

缺點：會造成記憶體外洩

#6.Js中常見的記憶體洩漏：

意外的全域變數
#被遺忘的計時器或回呼函數
脫離DOM的參考
閉包

7.事件委託是什麼？如何確定事件來源（Event.target 誰呼叫誰就是事件來源）

#JS高程上講：事件委託就是利用事件冒泡，只制定一個時間處理程序，就可以管理某一類型的所有事件。

事件委託，稱事件代理，是js#中很常用的綁定事件的技巧，事件委託就是把原本需要綁定在子元素的回應事件委託給父元素，讓父元素擔當事件監聽的職務，事件委託的原理是DOM元素的事件冒泡

8.什麼是事件冒泡？

一個事件觸發後，會在子元素和父元素之間傳播，這種傳播分為三個階段，

捕獲階段（從window物件傳導到目標節點（從外到裡），這個階段不會回應任何事件），目標階段，（在目標節點上觸發），冒泡階段（從目標節點傳導回window#物件（從裡到外）），事件委託/事件代理就是利用事件冒泡的機制把裡層需要回應的事件綁定到外層

9.本地儲存與cookie的差異

Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制在4KB左右。它的主要用途有保存登入訊息，例如你登入某個網站市場可以看到「記住密碼」，這通常就是在 Cookie 中存入一段辨別使用者身分的資料來實現的。

localStorage

#localStorage 是 HTML5 標準中新加入的技術，它並不是劃時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用於本地存儲，而當時考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多數瀏覽器所支持，如果你的網站需要支援 IE6 #，那以 userData 作為你方案是種不錯的選擇。

sessionStorage

sessionStorage #sessionStorage 與 localStorage 的介面類似，但保存資料的生命週期與 localStorage 不同。做過後端開發的同學應該知道 Session 這個字的意思，直譯過來是“會話” 。而

sessionStorage 是一個前端的概念，它只是可以將一部分資料在目前會話中保存下來，刷新頁面資料依舊存在。但當頁面關閉後，sessionStorage

特性	Cookie	localStorage	sessionStorage
資料的生命期			##一般由伺服器生成，可設定失效時間。如果在瀏覽器端產生
，預設為關閉瀏覽器後失效	除非被清除，否則永久保存僅在目前會話下有效，關閉頁面或瀏覽器後被清除	存放資料大小
4K 左右	一般為5MB
#每次都會攜帶在	頭中，如果使用cookie儲存過多資料會帶來效能問題	僅在客戶端（即瀏覽器）中保存，不參與和伺服器的通訊 #易用性

10.ES6新特性

const和let、模板字串、箭頭函數、函數的參數預設值、物件和陣列解構、for...of與for...in、ES6中的類別

11.Let與var與const的差異

Var宣告的變數會掛載在window上，而let和##const宣告的變數不會

Var宣告的變數存在變數提升，##let和const不存在變數提升

同一作用域下var#可以聲明同名變量，let和const#、不可以

Let和const

宣告會形成區塊級作用域

#Let暫存死區

Const一旦宣告必須賦值，不能用null

佔位，宣告後就不能再修改，如果宣告的是複合型別數據，可以修改屬性12.數組方法有哪些請簡述

push() 從後面添加元素，傳回值為新增後的陣列的長度

arr.pop() 從後面刪除元素，只能是一個，傳回值是刪除的元素

arr.shift() 從前面刪除元素，只能刪除一個回傳值是刪除的元素

arr.unshift() 從前面加入元素, 傳回值是加完後的陣列的長度

arr.splice(i,n) 刪除從i(索引值)開始之後的那個元素。傳回值是刪除的元素

arr.concat() 連接兩個陣列傳回值為連接後的新陣列

##str.split() 將字串轉換為陣列

arr.sort() 將陣列進行排序,傳回值是排好的數組，預設是按照最左邊的數字進行排序，不是按照數字大小排序的

#arr.reverse() 將數組反轉,傳回值是反轉後的陣列

arr.slice(start,end) 切去索引值start到索引值end的陣列，不包含end索引的值，傳回值是切出來的陣列

arr.forEach(callback)

物件導向是一種思想，是基於過程導向而言的，就是說物件導向是將功能等透過物件來實現，將功能封裝進物件之中，讓物件去實現具體的細節；這種想法是將數據作為第一位，這是對數據一種優化，操作起來更加的方便，簡化了過程。

Js本身是沒有class類型的，但是每個函數都有一個 #prototype屬性，prototype指向一個對象，當函數作為建構子時，prototype就起到類似於class的作用

物件導向有三個特點：封裝（隱藏物件的屬性和實作細節，對外提供公共存取方式），

繼承（提高程式碼復用性，繼承是多態的前提），多態（是父類別或介面定義的引用變數可以指向子類別或具體實作類的實例物件）

15.普通函數與建構子的差異

建構子也是一個普通函數，創建方式和普通函數一樣，但是構造函數習慣上首字母大寫
#調用方式不一樣，普通函數直接調用，構造函數要用關鍵字new來呼叫
#時，建構函式內部會建立一個新對象，就是實例，普通函數不會建立新物件
建構函數內部的this指向實例，普通函數內部的this指向調用函數的物件（如果沒有物件調用，則預設為##window）
建構子預設的回傳值是建立的物件（也就是實例），普通函數的回傳值由return語句決定
#建構子的函式名稱與類別名稱相同

#*****16.請簡述原型/原型鏈/（原型）繼承*****

什麼是原型：

什麼是原型鏈？

原型鏈基本概念是利用原型讓一個引用型別繼承另一個引用型別的屬性和方法。我們知道，每個建構函數都有一個原型對象，每個原型對像都有一個指向建構函數的指針，而實例又包涵一個指向原型對象的內部指針。

原型鏈的核心是依賴對象的_proto_的指向，當自身不存在的屬性時，就一層層的扒出創建對象的建構函數，直到Object時，就沒有_proto_指向了。

因為_proto_實質找的是prototype，所以我們只要找這個鏈條上的建構子的prototype。其中Object.prototype是沒有_proto_屬性的，它==null。

每個建構函式都有一個原型對象，原型對像都包含一個指向建構函式的指針，而實例都包含指向原型對象內部的指針。我們讓原型物件（1）等於另一個原型物件的實例（2）,

此時原型物件（2）將包含一個指向原型物件（1）的指針，

再讓原型物件（2）的實例等於原型物件（3），如此層層遞進就構成了實例和原型的鏈條，這就是原型鏈的概念

每個建構子都有一個原型對象，原型物件都包含一個指向建構函數想指標(constructor)，而實例物件都包含一個指向原型物件的內部指標(__proto__)。如果讓原型物件等於另一個原型物件的實例，此時的原型物件將包含一個指向另一個原型的指標(__proto__)，另一個原型也包含一個指向另一個建構函式的指標(constructor)。假如另一個原型又是另一個類型的實例……這就構成了實例與原型的鏈條。也叫原型鏈

原型繼承是js的一種繼承方式，原型鏈作為實作繼承的主要方法,#其基本想法是利用原型讓一個引用型別繼承另一個引用型別的屬性與方法,

原型繼承：利用原型中的成員可以被和其相關的物件共享這個特性，可以實現繼承，這種實作繼承的方式，就叫做原型繼承.

#17.Promise的理解

一、什麼是Promise？我們用Promise來解決什麼問題？

我們都知道，Promise是承諾的意思，承諾它過一段時間會給你一個結果。

Promise 是一種解決非同步程式設計的方案，比起回呼函數和事件更合理、更強大。

從語法上講，promise是一個對象，從它可以取得非同步操作的訊息；

二、promise有三種狀態：pending 初始狀態也稱為等待狀態，fulfiled成功狀態，rejected失敗狀態；狀態一旦改變，就不會再變。創造promise實例後，它會立即執行。

三、Promise的兩個特徵

1、Promise物件的狀態不受外界影響

2、Promise的狀態一旦改變，就不會再變，任何時候都可以得到這個結果，狀態不可以逆，

四、Promise的三缺點

1）無法取消Promise,一旦新它就會立即執行，無法中途取消

2 )如果不設定回呼函數，Promise內部拋出的錯誤，不會反映到外部

3）當處於pending（等待）狀態時，無法得知目前進展到哪一個階段，是剛開始還是即將完成

promise是用來解決兩個問題的：

1.#回呼地獄，程式碼難以維護，常常第一個的函數的輸出是第二個函數的輸入這種現象

2.promise可以支援多重並發的請求，取得並發請求中的資料

這個promise可以解決非同步的問題，本身不能說promise是異步的

19.請簡述async的用法

Async就是generation和promise的語法糖，async#就是將generator#的

# *換成

async，

#yiled

#換成await函數前必須加一個

async，非同步操作方法前加一個await關鍵字，意思就是等一下，執行完了再繼續走，注意：await只能在

async函數中運行，否則會報錯

Promise如果傳回的是一個錯誤的結果，如果沒有做異常處理，就會報錯，所以用try..catch

捕獲一下異常就可以了20.. 一個頁面從輸入URL 到頁面載入顯示完成，這個過程中都發生了什麼？

分為4個步驟：1.
當發送一個URL 請求時

不管這個URL 是Web 頁面的URL 還是Web 頁面上每個資源的URL，瀏覽器會開啟一個執行緒來處理這個請求，同時在遠端DNS 伺服器上啟動一個DNS 查詢。這能使瀏覽器獲得請求對應的 IP 位址。 2. 瀏覽器與遠端Web 伺服器透過TCP 三次握手協商來建立一個TCP/IP 連線。此握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在瀏覽器和伺服器之間傳遞。此握手首先由客戶端嘗試建立起通信，然後伺服器回應並接受客戶端的請求，最後由客戶端發出該請求已被接受的報文。 3. 一旦 TCP/IP 連線建立，瀏覽器會透過該連線向遠端伺服器傳送 HTTP 的 GET 請求。遠端伺服器找到資源並使用 HTTP 回應傳回該資源 4. #此時，Web 伺服器提供資源服務，客戶端開始下載資源。 jQuery相關的知識

Sass和less

都是css預處理器，是

從定義可以看出，call和apply都是呼叫一個物件的一個方法，用另一個物件取代目前物件。而不同之處在於傳遞的參數，apply最多只能有兩個參數－新this物件和一個陣列argArray，如果arg不是陣列則會錯誤

相同點:兩個方法產生的作用是完全一樣的。 call, apply作用就是藉用別人的方法來呼叫,就像呼叫自己的一樣.

#不同點:##方法傳遞的參數不同

為什麼會造成跨域/請簡述同源策略

出現跨域問題的原因:

#在前後端分離的模式下，前後端的網域名稱是不一致的，此時就會發生跨域存取問題。在請求的過程中我們要回去資料一般都是post/get請求，所以..跨域問題出現

#跨域問題來自JavaScript的同源策略，即只有協定主機名稱連接埠號碼(如存在)相同，則允許相互存取。也就是說JavaScript只能存取和操作自己網域下的資源，不能存取和操作其他網域下的資源。

同源策略是由NetScape提出的一個著名的安全策略。所謂的同源，指的是協議，域名，連接埠相同。瀏覽器處於安全性方面的考慮，只允許本域名下的介面交互，不同來源的客戶端腳本，在沒有明確授權的情況下，不能讀寫對方的資源。

請輸出三種減少頁面載入時間的方式

1. 最佳化圖片

2. 圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）

3. 優化CSS（壓縮合併css，如margin-top, margin-left...)

4. 網址後加斜線（如www.campr.com/目錄，會判斷這個目錄是什麼檔案類型，或是目錄。） cdn託管

5. 標示高度和寬度（如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不僅影響速度，也影響瀏覽體驗。

當瀏覽器知道了高度和寬度參數後，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了）

6. 減少http請求（合併文件，合併圖片）

This指向

在JavaScript中，this通常指向的是我們正在執行的函數本身，或者是，指向該函數所屬的物件。

全域的this → 指向的是Window

#物件中的this → 指向其本身

事件中this → 指向事件物件

什麼是jsonp運作原理是什麼？他為什麼不是真正的ajax

Jsonp其實就是跨域解。

Js跨域請求資料是不可以的，但是js跨域請求js腳本是可以的。

所以可以把要請求的資料封裝成一個js語句，做一個方法的呼叫。

跨網域請求js腳本可以得到此腳本。得到js腳本之後會立即執行。

可以把資料做為參數傳遞到方法中。就可以獲得數據。從而解決跨域問題。

jsonp原理：(動態建立script標籤，回呼函數#)

瀏覽器在js請求中，是允許透過script標籤的src跨域請求，可以在請求的結果中加入回呼方法名，在請求頁面中定義方法，就可取得到跨域請求的資料。

為什麼不是真正的 ajax?

1、ajax和jsonp這兩種技術在調用方式上"看起來"很像，目的也一樣，都是請求一個url，然後把伺服器傳回的資料處理，因此jquery和ext等框架都把jsonp當作ajax的一種形式進行了封裝；

2、但ajax和jsonp其實本質上是不同的東西。 ajax的核心是透過XmlHttpRequest取得本頁內容，而jsonp的核心則是動態新增<script>標籤來呼叫伺服器提供的js腳本。 </script>

3、所以說，其實ajax與jsonp的差別不在於是否跨域，ajax透過服務端代理程式一樣可以實現跨域，jsonp本身也不排斥同域的數據的獲取。

4、還有就是，jsonp是一種方式或說非強制協議，如同ajax一樣，它也不一定非要json格式來傳遞數據，如果你願意，字元換也行，只不過這樣不利於jsonp提供公開服務。

請掌握2種以上陣列去重的方式

#使用#indexof（）方法
使用lastindexof（）方法和indexof方法一樣 indexof#從頭部開始配對 lastindexof##從尾部配對
ES6的#set 結構## set不接受重複資料
使用sort方法先將原始數組排序，然後與相鄰的比較，如果不同則存入新數組
使用
filiterindexof
#使用ES6 的set
#和擴充運算子
使用set
和
#Array.from
（）方法 array.from可以將
set

用

和雙層迴圈

數組淺拷貝: 如果是數組，可以使用數組的一些方法實現：slice()，concat()傳回一個新數組的特性實現拷貝。以擴充運算子spread實作

數組深拷貝: JSON.parse(JSON.stringify())不僅適用於陣列也適用於對象。不能拷貝函數，undefined，symbol。

為什麼js是弱型別語言

#弱型別語言實作相對於強型別語言來說的，在強型別語言中，變數類型有多種，例如int char float Boolean 不同類型相互轉換有時需要強制轉換，而jacascript只有一種類型var，為變數賦值時會自動判斷型別並轉換，所以是弱型別語言。

怎麼轉換less為css

#用node##將 less檔案產生為css檔案
#用webstorm 自動產生

echarts使用最多的是什麼

圖表及圖表組合

For迴圈與map迴圈有什麼差別

For遍歷物件自身的與繼承可列舉的屬性，也是說會包含哪些原型鏈上的屬性

Map方法不會對空數組進行偵測，map #會傳回一個新數組，不會對原始數組產生影響

請寫出一個簡單的類別與繼承

創建類別有三種：

使用function和this關鍵字
原型方法用prototype和this關鍵字
使用object.create()方法建構

繼承有六種：

#原型繼承
借用建構子繼承
組合繼承
原型式繼承
寄生式繼承
寄生組合式繼承

##同步與非同步的區別/阻塞與非阻塞差異

同步（阻塞的）

#非同步（非阻塞）

#例如：同步，咱兩在一起上班，到吃飯時間了，我去喊你一起吃飯，你很忙，我就坐著等你忙完再一起去吃飯

同步（阻塞）非同步（非阻塞）這兩個關注的是程式在等待呼叫結果時的狀態

#重繪與回流是什麼

回流：當render tree 中的一部分或全部因為元素的規模尺寸，佈局，隱藏等改變而需要重新構建，這就叫回流，每個頁面至少需要一次回流，就是在頁面第一次載入的時候，這時候一定會發生回流，因為要建構render tree

##在回流的時候，瀏覽器會使渲染樹中收到影響的部分失效，並重新建構這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，這就是重繪

當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，不會影響佈局，就叫重繪

#http是什麼？有什麼特點

http叫做超文本傳輸協議，是互聯網應用最廣泛的一種網路協定

特點：基於請求-回應的模式無狀態保存無連線

HTTP協議和HTTPS區別

http#是超文本傳輸協議，訊息是明文傳輸，https 是具有安全性的ssl解密傳輸協定
http#和https連接方式完全不同，連接埠也不同，http#是80#， https是443
#http##的連線很簡單，是無狀態的，https協議是由ssl http協議建構的可進行加密傳輸，身份認證的網路協議，比http協議安全性

接收兩個參數，一個是函數運作的作用域(this)，另一個是參數數組。

方法第一個參數與apply()方法相同，但傳遞給函數的參數必須列出。

#箭頭函數是匿名函數，不能作為建構函數，不能使用
new
箭頭函數不能綁定
#arguments，要用rest參數解決
箭頭函數沒有原型屬性
#箭頭函數的
this永遠指向其上下文的this，
箭頭函數不能綁定this，會捕捉其所在的上下文的this

#值，作為自己的this值

#什麼是js記憶體外洩？記憶體洩漏是指一塊被分配的記憶體既不能使用又不能回收，直到瀏覽器進程結束

釋放記憶體的方法：賦值為null

你如何對網站的檔案和資源進行最佳化？

1、檔案合併（目的是減少http請求）

2、文件壓縮（目的是直接減少檔案下載的體積）

3、使用cdn託管資源

4、使用快取

5、gizp壓縮你的js和css檔案

##6、meta標籤優化（title,description,keywords）、heading標籤的優化、alt優化 7、反向鏈接，而網站外鏈接優化

#簡稱ajax的執行過程以及常見的HTTP狀態碼

：這個狀態碼是告訴客戶端應該繼續發送請求，這個臨時回應是用來通知客戶端的，部分的請求伺服器已經接受，但是客戶端應繼續發送求請求的剩餘部分，如果請求已經完成，就忽略這個回應，而且伺服器會在請求完成後向客戶發送一個最終的結果

：這個是最常見的http狀態碼，表示伺服器已經成功接受請求，並將傳回客戶端所要求的最終結果

：表示伺服器已經接受了請求，但是還沒有處理，而且這個請求最終會不會處理還不確定

：伺服器成功處理了請求，但沒有傳回任何實體內容，可能會傳回新的頭部元資訊

：客戶端請求的網頁已經永久移動到新的位置，當鏈接發生變化時，返回301代碼告訴客戶端鏈接的變化，客戶端保存新的鏈接，並向新的鏈接發出請求，已返回請求結果

：請求失敗，客戶端請求的資源沒有找到或不存在

500

503

預先載入和懶載入的差異，預載在什麼時間載入適當

兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶載入對伺服器前端有一定的緩解壓力作用，預先載入則會增加伺服器前端壓力

基本選擇器是jQuery中最常用也是最簡單的選擇器，它透過元素的id、class和標籤名稱等來尋找DOM元素。

1、ID選擇器#id
#描述：根據給定的id匹配一個元素，傳回單一元素（註：在網頁中，id名稱不能重複）
範例：$("#test") 選取id 為test 的元素

##2 、類別選擇器.class
描述：根據給定的類別名稱來匹配元素，傳回元素集合
範例：$(".test")選取所有class為test的元素

3、元素選擇器element
描述：根據給定的元素名稱來匹配元素，返回元素集合
範例：$("p") 選取所有的

元素

4、*
描述：符合所有元素，傳回元素集合
範例：$("*") 選取所有的元素

5、selector1，selector2,...,selectorN
#描述：將每個選擇器配對到的元素合併後一起傳回，傳回合併後的元素集合
範例：$("p,span,p.myClass") 選取所有

,與class為myClass的

標籤的元素集合

二、層次選擇器

層次選擇器根據層次關係取得特定元素。

1、後代選擇器
#範例：$("p span") 選取

元素裡的所有的元素（註：後代選擇器選擇父元素所有指定選擇的元素，不管是兒子級，還是孫子級）

2、子選擇器$("parent>child")
範例：$("p>span") 選擇

元素下的所有元素（註：子選擇器只選擇直屬於父元素的子元素）
3、同儕選擇器$("prev next")
說明：選取緊接在prev元素後面的next元素，傳回元素集合
範例：$(".one p") 選取class為one的下一個

同儕元素集合
#4、同儕選擇器$("prev~siblings")
#說明：選取prev元素後的所有siblings元素，傳回元素集合
#範例：$("#two~p")選取id為two的元素後所有

同儕元素集合

##三、濾波選擇器

1>基本過濾選擇器
1、 :first
描述：選取第一個元素，傳回單一元素
範例：$("p:first") 選取所有

元素中第一個

元素

#2、 :last
描述：選取最後一個元素，傳回單一元素
範例：$("p:last") 選取所有
元素中最後一個

元素

3、 :not(selector)
描述：去除所有與給定選擇器匹配的元素，返回元素集合
範例：$("input:not(.myClass)") 選取class不是myClass的元素
#4、 :even
描述：選取索引是偶數的所有元素，索引從0開始，回傳元素集合
5 、 :odd
描述：選取索引是奇數的所有元素，索引從0開始，傳回元素集合
6、 :eq(index)
描述：選取索引等於index的元素，索引從0開始，傳回單一元素
7 、 :gt(index)
描述：選取索引大於index的元素，索引從0開始，傳回元素集合
8、: lt(index)
描述：選取索引小於index的元素，索引從0開始，傳回元素集合
9、 :focus
說明：選取目前取得焦點的元素

2>內容篩選選擇器
1、:contains(text)
說明：選取含有文字內容為text的元素，傳回元素集合
範例：$(" p:contains('我')") 選取含有文字「我」的元素
#2、:empty
##說明：選取不包含子元素或文字元素的空元素，傳回元素集合
範例：$("p:empty") 選取不包含子元素或文字元素的空

元素（
）
3、:has(selector)
描述：選取含有選擇器所匹配的元素的元素，傳回元素集合
範例：$("p:has(p)") 選取含有
元素的

元素（

）
4、:parent
說明：選取含有子元素或文字的元素，傳回元素集合
範例：$("p:parent") 選取含有子元素或文字元素的

元素（

3>可見性過濾選擇器
1

4>屬性過濾選擇器（傳回元素集合）
#1、[attribute]
範例：$("p[id]") 選取擁有id屬性的p元素
#2、[attribute=value]
範例：$("input[name=text]") 選取擁有name屬性等於text的input元素
#3、[attribute!=value]
#範例：$("input[name!=text]") 選取擁有name屬性不等於text的input元素
4#、[attribute^= value]
範例：$("input[name^=text]") 選取擁有name屬性以text開始的input元素
5 #、[attribute$=value]
範例：$("input[name$=text]") 選取擁有name屬性以text結束的input元素
# 6、[attribute*=value]
範例：$("input[name*=text]") 選取擁有name屬性含有text的input元素
7、[attribute~=value]
#範例：$("input[class~=text]") 選取擁有class屬性以空格分割的值中含有text的input元素
8#、[attribute1][attribute2][attributeN]
##描述：合併多個屬性過濾選擇器

5>#表單物件屬性過濾選擇器（傳回元素集合）
1、: enabled
說明：選取所有可用元素
2、:disabled##說明：選取所有不可用元素
3
、:checked#描述：選取所有被選取的元素（單選框，複選框）
範例：$("input:checked") 選取所有被選取的元素
4
、:selected#描述：選取所有被選取的選項元素（下拉清單）
範例：$("select option:selected") 選取所有已選取的選項元素

每個符合每個符合的元素內部的內容

#appendTo() 將所有符合的元素追加到指定元素中，實際上，使用該方法是顛倒了常規的$(A).append(B)的操作將A追加到B中

prepend() 每個符合每個符合的元素內部前置內容

prependTo() 將所有符合的元素前置到指定的元素中。實際上，使用該方法是顛倒了常規的$(A).prepend(B)的操作，即不是將B前置到A中，而是將A前置到B中

#after() 在每個符合的元素之後插入內容

#insertAfter() #將所有符合的元素插入到指定元素的後面。實際上，使用該方法是顛倒了常規的$(A).after(B)的操作，即不是講B插入到A後面，而是將A插入到B後面

before() 在每個符合的元素之前插入內容

insertBefore() 將所有符合的元素插入指定的元素的前面。實際上，使用該方法是顛倒了常規的$(A).before(B)的操作，即不是將B插入到A前面，而是將A插入到B前面

Js的函數節流和函數防手震的差異

函數節流是指一定時間內js方法只執行一次。

函數防手震是指頻繁觸發的情況下，只有足夠的空閒時間，才執行程式碼一次

函數節流是聲明一個變數當標誌位，記錄目前程式碼是否在執行，如果正在執行，取消這次方法執行，直接return，如果空閒，正常觸發方法執行

函數防手震是需要一個延時器來輔助實現，延遲執行需要執行的程式碼，如果方法多次觸發，把上次記錄的延遲執行程式碼用cleartimeout清除掉，重新開始，如果計時完畢，沒有方法來存取觸發，則執行程式碼

#Get和post不同

Get是從伺服器上取得數據，post是傳送資料給伺服器

在客戶端， get透過url提交數據，資料在url#可以看到， post方式，資料放在html header#中提交

## 安全性問題

Get提交資料最多只能有1024字節，post 沒有限制

什麼是csrf攻擊

#Csrf（跨網站要求偽造）攻擊者在使用者已經登入目標網站之後，誘使使用者造訪一個攻擊頁面，利用目標網站對使用者的信任，以使用者身分再攻擊頁面對目標網站發動偽造使用者操作的請求，達到攻擊目的

Js中手寫一個深拷貝

#什麼時候用深拷貝/淺拷貝

無論深淺，都是需要的，當深拷貝發生時通常表明存在著一個聚合關係，當淺拷貝發生時，通常表明存在著相識關係

舉個簡單範例：當實作一個組合模式Composite Pattern時通常都會實作深拷貝

當實作一個觀察者模式Observer Pattern，時，就需要實作淺拷貝

Vue相關

Vue#是一套建構使用者介面的漸進式自底向上增量開發的MVVM框架，##vue的核心只關注視圖層，核心思想：

資料驅動（視圖的內容隨著資料的改變而改變）

元件化（可以增加程式碼的複用性，可維護性，可測試性，提高開發效率，方便重複使用，體現了高內聚低耦合）

#2.請簡述你對vue的理解

Vue是一套建立使用者介面的漸進式的自底向上增量開發的MVVM框架，核心是專注於視圖層， vue的核心是為了解決資料的綁定問題，為了開發大型單一頁面應用程式和元件化，所以vue#的核心思想是資料驅動和元件化，這裡也說一下MVVM思想，MVVM思想是模型檢視 vm是v和##m連接的橋樑，當模型層資料修改時，VM層會偵測到，並通知視圖層進行對應修改

3.請簡述vue的單向資料流

父級prop的更新會向下流到子元件中，每次父元件都會發生更新，子元件所有的prop都會刷新為最新的值

資料從父元件傳遞給子元件，只能單向綁定，子元件內部不能直接修改父元件傳遞過來的數據，（可以使用data#和computed解決）

4.Vue常用的修飾符有哪些

#修飾符：.lazy 改變後觸發，遊標離開input輸入框的時候值會改變

將輸出字串轉換為number類型

自動過濾使用者輸入的首尾空格

事件修飾符：

阻止點擊事件冒泡，相當於原生js中的event.stopPropagation()

防止執行預設的行為，相當於原生js中event.preventDefault()##.capture

新增事件偵聽器時使用事件擷取模式，就是誰有該事件修飾符，就先觸發誰.self

只會觸發自己範圍內的事件，不包含子元素.once

只執行一次

.enter Enter鍵 .tab ## .space 空白鍵

.up上鍵           ##向下鍵        .left#向左建置    .right##向右鍵

向右鍵

11 系統修飾符：

.ctrl .alt   .shift .meta5.v-text與{
{}}與v-html區別
{{}} 將資料解析為純文本，無法顯示輸出

#htmlv-html 可以渲染輸出#html

v-text 將資料解析為純文本，不能輸出真正的

html，與花括號的差異是在頁面載入時不顯示雙花括號 v-text
指令：
作用：操作網頁元素中的純文字內容。 {{}}是他的另一個寫法

#v-text##與{{}}區別：#v-text與{{}}等價，
##{
{}}#叫模板內插，

v-text #叫指令。

有一點差別就是，在渲染的資料比較多的時候，可能會把大括號顯示出來，俗稱螢幕閃爍：6.v-on可以綁定多個方法嗎

#可以

如果綁定多個事件，可以用鍵值對的形式事件類型：事件名稱

         如果綁定是多個相同事件，直接用逗號分隔就行#7.Vue循環的key作用Key#值的存在保證了唯一性，Vue #執行時，會對節點進行檢查，如果沒有key#值，那麼vue檢查到這裡有dom#節點，就會對內容清空並賦新值，如果有 key
值存在，那麼就會對新舊節點進行對比，比較兩者
key
######是否相同，進行調換位置或刪除操作###############8.什麼是計算屬性######
計算屬性是用來宣告式的描述一個值依賴了其他的值，當它所依賴的這個值改變時，就更新DOM

#當在模板中把資料綁定到一個計算屬性上時，vue會在它依賴的任何值導致該計算屬性改變時更新DOM

每個計算屬性都包含一個getter和setter，讀取時觸發getter，修改時觸發setter

9.Vue單一頁面的優缺點

單一頁面spa

# 優點：前後端分離使用者體驗好一個字快內容改變不需要重新載入整個頁面

缺點：不利於seo ，初次載入時耗時（瀏覽器一開始就要載入html css js ，所有的頁面內容都包含在主頁中），頁面複雜度提高了，導航不可用

10.Vuex是什麼？怎麼使用？在那種場景下使用

Vuex是專為vue.js##應用程式開發的狀態管理模式，透過建立一個集中的資料存儲，方便程式中的所有元件進行訪問，簡單來說 vuex就是##vue的狀態管理工具
Vuex
有五個屬性 state getters mutations actions modules

##State就是資料來源存放地，對應一般vue物件的data#state裡面存放的資料是響應式的，state資料改變，對應這個資料的元件也會改變#用this.$store.state.xxx呼叫

Getters #相當於store的計算屬性，主要是對state中資料的過濾，用this.$ store.getters.xxx呼叫

Mutations 處理資料邏輯的方法全部放在mutations中，當觸發事件想改變state資料的時候使用mutations#，用 this.$store.commit調用，為這個方法添加一個參數，就是mutation的負載（ payload）

Actions 非同步操作數據，但透過mutation來操作用this.$store.dispatch來觸發，actions也支援載荷

##使用場景：元件之間的狀態，登入狀態，加入購物車，音樂播放

Vuex使用流程：

下載vuex

在src下建立store以及index.js

引入vue和vuex，使用vuex ，匯出實例物件

#在##main.js中引入，在.vue檔案中使用
#11.Vue中路由跳轉方式（宣告式/編程式）
Vue
中路由跳轉有兩種，分別是宣告式和編程式
用
js方式進行跳轉的叫編程式導覽   this.$router.push（）

#以router-link進行跳轉的叫聲明式
   router-view
路由出口，路由模板顯示的位置在路由中name屬性有什麼作用？

在router-link
中使用

name導航到對應路由

使用name
#導航的同時，給子路由傳遞參數
#12.vue跨域的解決方式1.後台更改

header 2.使用jq提供jsonp

##3.
用
http-proxy-middleware（#設定代理伺服器的中間件）13.Vue的生命週期請簡述

vue的生命週期就是
vue
實例創建到實例銷毀的過程。期間會有8
個鉤子函數的呼叫。
beforeCreate
（建立實例）############created######（已建立完成）、### #########beforeMount######（開始建立模板）#######
mounted（建立完成）、

#beforeUpdate（開始更新）

updated（更新完成）、

beforeDestroy（開始銷毀）

## destroyed
（銷毀完成）

14.Vue生命週期的作用

給了使用者在不同階段中加入自己的程式碼的機會

15.DOM渲染在那個生命週期階段內完成DOM
渲染在

mounted
週期中就已經完成

16.Vue路由的實作
前端路由就是更新檢視但不要求頁面，利用錨點完成切換，頁面不會刷新
官網推薦用

vue -router.js
來引入路由模組#定義路由元件

定義路由，使用
component
進行路由對映元件，以

name
導覽至對應路由
建立

router
實例，傳入
routes
設定建立與掛載根實例#以router-link #設定路由跳轉

#17.Vue路由模式hash和history，簡單講一下##Hash模式網址列有#，history沒有，history模式下刷新，會出現

404情況，需要背景設定#使用 JavaScript #來對

loaction.hash #進行賦值，改變 URL 的# hash #。可以使用 hashchange 事件來監聽 hash 值的變化HTML5 提供了

History API 來實作
### URL ######的變更。其中最主要的###### API ######有以下兩個：######history.pushState() ######和###### history.repalceState( )######。這兩個###### API ######可以在不進行刷新的情況下，操作瀏覽器的歷史紀錄。唯一不同的是，前者是新增一個歷史記錄，後者是直接替換當前的歷史記錄。 ############18.Vue路由傳參的兩種方式，params和query方式與區別######
動態路由也可以叫路由傳參，就是根據不同的選擇在同一個元件渲染不同的內容

#用法上：query用path引入，#params用name引入，接收參數都是類似的，分別是this.$route.query.name和this.$route.params.name

url#展示上:params類似post，query類似get，也就是安全性問題，params傳值相對更安全點，query#透過url傳參，重新整理頁面還在，params刷新頁面不在了

19.Vue資料綁定的幾種方式

1.單向綁定雙大括號# {{}} html內字串綁定

2.v-bind已綁定 html屬性綁定

##3.
雙向綁定
v-model#4.一次綁定 v-once 依賴v-model#20.Vue註冊一個全域元件

Vue.componnet

（「元件的名字」{ 物件##   template

組成的內容
}）21.Vue的路由鉤子函數/路由守衛有哪些全域守衛：beforeEach#（to，##from

next）和

（##to，from）路由獨享守衛：

beforeEnter

元件內的守衛：路由進入/

更新/離開之前 beforeRouterEnter/update/leave22.Vue中如何進行動態路由設定？有哪些方式？怎麼取得傳遞過來的資料？

query用path引入，params用name 引入，query用this.$route.query.name接收參數

params用this.$route.params.name接收參數

##23. Elementui中的常用組件有哪些？請簡述你經常使用的並且他們的屬性有哪些？

Container佈局容器

#外層容器

頂欄容器

##c面側邊欄容器

#主要內容容器

底欄容器

Dropdown 下拉選單

下拉按鈕

下拉式選單

下拉項目

Table 表格

##Tabs 標籤頁

Form 表單

#Pagination 分頁

#Message 訊息提示

#24.Vue-cli中如何自訂指令

25 .Vue中指令有哪些

v-for：循環數組，對象，字串，數字

##v -on：綁定事件監聽

v-bind：動態綁定一個或多個屬性

#v-model：表單控制項或在元件上建立雙向綁定

v-if v-else v-else-if 條件渲染

v-show 根據表達式真假，切換元素的display

v-html 更新元素的innerhtml

#v-text 更新元素的 textcontent

v-pre 跳過這個元素和子元素的編譯過程

v-clock 這個指令保持在元素上知道關聯實例結束編譯

v-once 只渲染一次

#26.Vue如何定義一個篩選器

过滤器本质就是一个有参数有返回值的方法

new Vue({
　　　　filters:{
　　　　　　myCurrency:function(myInput){
　　　　　　　　return 处理后的数据
　　　　　　}
　　　　}
})

登入後複製

使用方法：

过滤器高级用法：可以指定参数，告诉过滤器按照参数进行数据的过滤

27.对vue 中keep-alive的理解

概念：keep-alive是vue的内置组件，当它动态包裹组件时，会缓存不活动的组件实例，它自身不会渲染成一个DOM元素也不会出现在父组件链中

作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间以及性能消耗，提高用户体验。

生命周期函数：Activated在keep-alive组件激活时调用，deactivated在keep-alive组件停用时调用

28.如何让组件中的css在当前组件生效

在styled中加上scoped

29.Vue生命周期一共几个阶段

创建加载更新销毁

Beforecreate创建前

Created 创建后

Beforemount 加载前

Mounted 加载后

Beforeupdate 更新前

Updated 更新后

Beforedestroy 销毁前

Destroyed 销毁后

页面第一次加载会触发 beforecreate created beforemount mounted

DOM渲染在mounted周期中就已经完成

30.Mvvm与mvc的区别

Mvc模型视图控制器，视图是可以直接访问模型，所以，视图里面会包含模型信息，mvc关注的是模型不变，所以，在mvc中，模型不依赖视图，但是视图依赖模型

Mvvm 模型视图和vm vm是作为模型和视图的桥梁，当模型层数据改变，vm会检测到并通知视图层进行相应的修改

31.Vue元件中的data為什麼是函數

#Data是函數時，每個元件實例都有自己的作用域，每個實例相互獨立，不會相互影響

#如果是引用類型（物件），當多個元件共用一個數據來源時，一個資料改變，所有的元件資料都會改變，所以要利用函數透過return傳回物件的拷貝，（傳回一個新資料），讓每個實例都有自己的作用域，互相不影響。

32.Vue雙向綁定的原理

#Vue雙向綁定是：資料變化更新視圖，視圖變更更新資料

Vue資料雙向綁定是透過資料劫持和觀察者模式來實現的，

資料劫持，object.defineproperty它的目的是：當給屬性賦值的時候，程式可以感知到，就可以控制改變屬性值

觀察者模式當屬性改變的時候，使用該資料的地方也會改變

# #33.Vue中元件怎麼傳值

正向：父傳子父元件把要傳遞的資料綁定在屬性上，傳送，子元件透過props接收

反向：子傳父子元件經過this.$ emit（自訂事件名，要傳送的資料），父元件設定一個監聽事件來接收，然後拿到資料

兄弟：eventbus 中央事件匯流排

透過Vuex

34.Bootstrap的原理

網格系統的實作原理，透過定義容器大小，平分12份，（24 份或32份），再調整內外邊距，結合媒體查詢，就成了強大的響應式網格系統。

例如 row col-xs-4

36.如果一個元件在多個專案中使用怎麼辦

37.槽口請簡述

#大概分這幾點，首先槽口（插槽）可以放什麼內容？放在哪裡？什麼作用？可以放任意內容，在子元件中使用，是為了將父元件中的子元件模板資料正常顯示。

具名插槽和匿名插槽，作用域插槽，說白了就是在元件上的屬性，可以在元件元素內使用，

#可以在父元件中使用slot-scope從子元件取得資料

38.Watch請簡述

Watch的作用是監控一個值的變化，並且呼叫因為變化需要執行的方法

39.Vant Ui請簡述下

輕量、可靠的行動端 Vue 元件庫

##40 .計算屬性與watch區別

Computed watch 差異就是computed的快取功能，當無關資料資料改變時，不會重新計算，直接使用快取中的值。 計算屬性是用來宣告式的描述一個值依賴了其他的值，當所依賴的值後者變數改變時，計算屬性也跟著改變，

#Watch監聽的是在data#中定義的變量，當變數變化時，會觸發watch中的方法

41.mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？

Mvvm和其他框架的差異是 vue資料驅動透過資料來顯示視圖而不是節點操作

適用於資料操作比較多的場景

42.Vue首屏載入慢的原因，怎麼解決的，白屏時間怎麼檢測，怎麼解決白屏問題

首屏加載慢的原因：

##第一次加載頁面有很多元件資料需要渲染

解決方法：

#1.

# # component

：（）=>import(“路由位址

”)

2.ui框架按需載入

3.gzip

壓縮白屏時間檢測：

？？？？解決白螢幕問題：①使用v-text##渲染資料②使用{{}}#語法渲染數據，但同時使用v-cloak
指令（用來保持在元素上直到關聯實例結束時候進行編譯），
v-cloak
要放在什麼位置呢，
v- cloak
並不需要加入到每個標籤，只要在
el掛載的標籤上新增就可以43.Vue雙資料綁定過程中，這邊兒資料改變了怎麼通知另一邊改變

資料劫持和觀察者模式Vue
資料雙向綁定是透過
資料劫持和觀察者模式
來實現的，
##數據劫持，
###object.defineproperty######它的目的是：當給屬性賦值的時候，程式可以感知到，就可以控制屬性值的有效範圍，可以改變其他屬性的值# ###########觀察者模式它的目的是當屬性改變的時候，使用該資料的地方也會改變############44.Vuex流程# #####
在vue元件裡面，透過#dispatch來觸發actions提交修改資料的操作，然後透過actions#的#commit觸發mutations來修改數據，mutations接收到commit的請求，就會自動透過mutate 來修改state，最後由store#觸發每一個呼叫它的元件的更新

#45.Vuex怎麼請求非同步資料

1.首先在##state#中建立變數

2.然後在action#中呼叫封裝好的axios 請求，非同步接收數據，commit#提交給mutations

Mutations#中改變state中的狀態，將從##action#中取得的值賦值給state
46.Vuex中action如何提交給mutation的

##函數接收一個與##store 實例具有相同方法和屬性的context對象，可以呼叫context.commit##提交一個 mutation，或透過context.state和context.getters##取得state與getters47.Route與router差異
##1.   router
是
VueRouter
的一個對象，透過Vue.use(VueRouter)#和VueRouter 建構函式得到一個router的實例對象，這個物件中是一個全域的對象，他包含了所有的路由包含了許多關鍵的物件和屬性。 2.route是一個跳轉的路由對象，每一個路由都會有一個
route
對象，是局部的對象，可以取得對應的name,path,params,query等49.vuex的State特性是？
State
就是資料來源的存放區

#State裡面的資料是響應式的，
state
中的資料改變，對應這個資料的元件也會改變
State透過mapstate把全域的##state和 getters對應到目前元件的計算屬性中

50.vuex的Getter特性是？

Getter可以對state進行運算運算，它就是store 的計算屬性

Getter可以在多元件之間重複使用

如果一個狀態只在一個元件內使用，可以不用getters

51.vuex的Mutation特性是？

更改vuex store#中修改狀態的唯一方法就是提交mutation，可以在回呼函數中修改store中的狀態

52.vuex的actions特性是？

Action類似於mutation，不同的是 action #提交的是mutation，不是直接變更狀態，可以包含任意非同步操作

54.vuex的優點

優點：解決了非父子組件的通信，減少了ajax請求次數，有些可以直接從state#中取得

缺點：重新整理瀏覽器，vuex中的##state會重新變成初始狀態，解決辦法是vuex-along，得配合計算屬性和sessionstorage來實作
55.Vue路由懶載入（按需載入路由）
#56.v-for與v-if優先權
首先不要把
v-if與v-for用在同一個元素上，原因：v-for比v-if優先，如果每次都需要遍歷整個數組，將會影響速度，尤其是當之需要渲染很小一部分的時候。
v-for
比 v-if 具有更高的優先權請寫出餓了麼5個組件

彈跳視窗
對話日曆表
進度條
開關

React相關
##fetch VS ajax VS axios

傳統 Ajax 指的是 XMLHttpRequest（XHR

），
最早出現的發送後端請求技術，隸屬於原始
js#中，核心使用XMLHttpRequest

對象，多個請求之間如果有先後關係的話，就會出現回調地獄。
JQuery ajax 是原生XHR的封裝##axios #是一個基於Promise ，本質上也是原生XHR的封裝，只不過它是Promise

的實作版本，符合最新的ES規範，fetch不是

ajax的進一步封裝，而是原生js#，沒有使用XMLHttpRequest物件。 React事件處理---修改this指向

##：透過
bind
方法進行原地綁定，從而改變

this
#指向方式#2
：透過建立箭頭函數

方式3#：在##constructor#在 ##中提前對事件進行綁定#4

##：將事件呼叫的寫法改為箭頭函數的形式
############請簡述你對react的理解############ React######起源於######facebook######，######react######是一個用來建立使用者介面的###### js######庫############特點：#####################聲明式設計#### #####：######react######採用範式聲明，開發者只需要聲明顯示內容，######react#####就會自動完成## ###################高效率#########：###### react######透過對##### #dom######的模擬（也就是虛擬######dom######），最大限度的減少與######dom######的交互作用# ####################靈活#########：###### react######可以和已知的函式庫或是框架很好配合#######

元件： #透過react建構元件，讓程式碼更容易重複使用，能夠很好地應用在大型專案開發中，把頁面功能拆分成小模組每個小模組就是元件

#單向資料流： react是單向資料流，資料透過props從父節點傳遞到子節點，如果父級的某個props#改變了，react#會重新渲染所有的子節點

react元件之間的資料傳遞

##正向傳值用 props

反向傳值用函數傳值透過事件呼叫函數傳遞

同級傳值用pubsub-js

用pubsub.publish（事件名，資料）拋出資料

用pubsub.subscribe（監聽的事件，（）=#）{}）接收資料

跨元件傳遞# 用context 要使用context進行跨元件傳值就需要使用createContext()方法，這個方法有兩個物件 provider 生產者   Consumer #消費者
##Vue與react區別

相同點：都支援伺服器渲染

都有虛擬
dom

，元件化開發，透過
props參數進行父子元件資料的傳遞，都實作webcomponent規格都是資料驅動視圖

#都有狀態管理，react有redux
，

vue
#有vuex

都有支援native'#的方案# react有react native vue有weex
######################################################################不同點：#####################react#######嚴格上只針對######mvc#######的# #####view######層，######vue######是######mvvm######模式######

虛擬dom不一樣，vue會追蹤每個元件的依賴關係，不需要重新渲染整個dom元件樹，而react不同，當應用程式的狀態改變時，全部元件都會重新渲染，所以react中用shouldcomponentupdate這個生命週期的鉤子函數來控制

元件寫法不一樣，react#是jsx##和inline style ，就是把html和css全寫進##js在中，vue則是html，##css ，js在同一個檔案
#資料綁定不一樣，

vue實現了資料雙向綁定，react資料流動是單向的
##在在

react
中，state物件需要用setstate##方法更新狀態，在#在 ##vue中，state物件不是必須的，資料由data屬性在vue物件中管理#請簡述虛擬dom與diff演算法

#虛擬
DOM
也就是常說的虛擬節點，它是透過
js的object物件模擬DOM中的節點，然後再透過特定的渲染方法將其渲染成真實的DOM節點。頻繁的動作DOM
，或大量造成頁面的重繪和回流
Diff演算法：把樹狀結構依照層級分解，只比較同級元素，為列表結構的每個單元加上唯一的
key
值，方便比較你對元件的理解
可組合，可重複使用，可維護，可測試
#呼叫setState 之後發生了什麼事？
React
在呼叫
setstate
後，react會將傳入的參數物件和元件目前的狀態合併，觸發調和過程，
在調和過程中，react會根據新的狀態建構react元素樹重新渲染整個UI介面，在得到元素樹之後，react#會自動計算新舊節點的差異，根據差異對介面進行最小化重新渲染

react 生命週期函數

#componentWillMount 元件渲染之前呼叫

componentDidMount 在第一次渲染之後呼叫

componentWillReceiveProps 在元件接收到一個新的props時呼叫

shouldComponentUpdate 判斷元件是否更新#html

componentWillupdate #元件即將更新html

#componentDidupdate 在元件完成更新後立即呼叫

componentWillUnmount 在元件移除前呼叫

******為什麼虛擬 dom #會提高效能#?(#必考 )

虛擬 dom 相當於在 js #和真實 dom 中間加了一個緩存，利用 dom diff 演算法避免了沒有必要的 dom 操作，從而提高效能

(#元件的)##狀態 (state)和屬性##(props)之間有何不同State與props區別

Props
是一個從外部傳送元件的參數，主要作用是父元件向子元件傳遞數據，但props對於使用它的元件來說是唯讀的，一旦賦值不能修改，只能透過外部元件主動傳入新的props來重新渲染子元件
State 一個元件的顯示形態可以由資料狀態和外部參數決定，外部參數是props，資料狀態就是 state，首先，在元件初始化的時候，用this.state為元件設定一個初始的state，在第一次渲染的時候就會用這個資料來渲染元件，state#有別於props#一點時，state

可以修改，透過this.setState() ##方法來修改
state
shouldComponentUpdate
是做什麼的
這個react

生命週期鉤子函數是來解決這個問題：

在更新資料的時候用setState修改整個數據，資料改變了之後，遍歷的時候所有內容都要重新渲染，資料量少還好，資料量大就會嚴重影響效能

#解決方法：1.shouldcomponentupdate 在渲染前進行判斷元件是否更新，更新了再渲染

#2.purecomponent（純元件）省去了虛擬dom產生和對比的過程

在類別元件中使用3.react.memo() 類似於純元件

在無狀態元件中使用

react diff
原理#它是基於三個策略：

tree diff web UI中dom
#節點跨層級的移動操作特別少，可以忽略不計
#component diff 擁有相同類別的兩個元件將會產生相似的樹狀結構，擁有不同類別的兩個元件會產生不同的樹狀結構

element diff 對於同一層級的一組子節點，他們可以透過唯一的id

進行區分何為受控元件
#########React##### ##負責渲染表單的元件，值是來自於######state######控制的，輸入表單元素稱為受控元件#######
呼叫 super(props) 的目的是什麼

Super（）呼叫父類別的建構方法，有super，元件才有自己的this，在元件全域中都可以使用this，如果只是constructor而不執行super，之後的this都是錯的，super繼承父元件的this

React 中建立元件的方式

#自訂元件：函數元件或無狀態元件元件首字母大寫

類別元件：一個類別元件必須實作一個render方法，這個方法必須回傳一個jsx元素，要用一個外層的元素把所有內容包起來

小程式相關的

小程式的優勢

無下載安裝，直接使用，運行速度快，專案建置迅速，短小精悍，每個app原始程式碼不超過2mb

小程式的頁面構成（4個檔案）

Index .js   index.json   index.wxml    index.wxss

小程式的生命週期

Onload   onready
#Onpulldownrefresh    onreachbottom    onshareappmessage
小程式如何請求資料
使用request

小程式如何請求資料

##'程式的首屏載入時間提前請求：非同步資料資料請求不需要等待頁面渲染完成
##利用快取：利用
storage API
對非同步請求資料進行緩存，二次啟動時先利用快取資料渲染頁面，再進行後台更新
##避免白屏：先展示頁面骨架與基礎內容

及時回饋：及時對需要使用者等待的互動操作給予回饋，避免使用者以為小程式沒有回應

#效能最佳化：避免不當使用setdata和

onpagescroll

請簡述你常使用的小程式的元件View icon   text image   swiper   navigator input   button   map#ss與css的區別請簡單#ss與css的差異請簡述#ss> Wxss新增了尺寸單位
### rpx############提供了全域樣式和局部樣式###### ######Wxss######只支援部分######css#######選擇器###### id' class #######元素等## ####
小程式如何實作響應式

Rpx

#怎麼最佳化小程式
##提高頁面載入速度
使用者行為預測
減少預設data的大小
元件化方案
#自主獲知自己的伺服器
小程式如何顯示使用者頭像與使用者名稱

傳統介面wx.getuserinfo #目前可用，需要使用者授權，使用時會有官方發送提示，這個方法需要升級

最新方法：open-data標籤，使用這個標籤可以不用使用者授權直接取得頭像和使用者名，

可以在button#中將opendata當屬性寫進去，寫個點擊事件就直接取得到了

請談談小程式的雙向綁定和vue的異同？

Vue雙向綁定是透過資料攔截和觀察者模式，透過this.value取得值，小程式是透過觸發表單元素綁定的方法，在方法中用this.setData（{key:value}）來取值

小程式中傳參是怎麼傳的

和vue 類比介紹

說一下微信小程式的適配問題

小程式頁間有哪些傳遞資料的方法？

你是怎麼封裝微信小程式的資料請求的

說一下微信小程式的適配問題

小程式跳轉頁面的方式

微信小程式如何跳到其他小程式

#小程式載入過慢的解決方式

其他

#Typescript是什麼請簡述？

Typescript 與javascript 的優點？

Webpack與gulp差異

Gulp是一種能夠最佳化前端開發流程的工具，webpack 是一種模組化的解決方案（grunt）

請簡述webpack中的loaders與plugin的差別

什麼是loaders，#loaders是文件載入器，能夠載入資源文件，並對這些文件進行處理，例如，編譯，壓縮等，最終一起打包到指定文件中。

什麼是plugin，在webpack運行的生命週期會有許多事件，plugin可以監聽這些事件

差異：載入器是用來載入檔案的，webpack#本身只能載入js」檔(內建babel-loader)，就需要安裝其他檔案的loader

，例如：css-loader file-loader

Plugin是擴充webpack#功能的，透過

plugin ，webpack可以實現##loader不能完成的複雜功能怎麼提升頁面效能？效能優化有哪些？ Node使用來做什麼的

能夠在伺服器端執行JavaScript

Webpack
：入口，出口，載入器，外掛程式說一下webpack##的打包原則

Webpack是把專案當做一個整體，透過給定一個主文件，webpack將從這個主文件開始找到專案中所有依賴的文件，使用loaders
類別處理，最後打包成一個或多個瀏覽器可識別的

js

#文件

Commonjs ES6

#模組差異？

common模組是拷貝，可以修改值，es6

#模組是引用，只讀狀態，不能修改值commonjs模組是運行時加載，es6模組是編譯時輸出介面
Git如何使用/常用指令有哪些
你們後台用的是什麼技術
你的專案比較小為什麼還是用vue全家桶請簡述你在專案中使用的ui框架前端效能優化的方式越多越好##什麼是cors說一下對##websocked的理解

Websocked是一種雙向通訊協議，在建立連線後，

websocked

伺服器和瀏覽器都能主動向對方發送或接收數據，

websocked需要類似

tcp

的客戶端和伺服器透過握手連接，連接成功後才能互相通信後台傳遞過來的資料是那些
###談談######Ajax######，######fetch######，######axios######的區別############企業中的專案流程############1.WEB前端專案開發流程############專案需求分析#########這個環節是由專案經理完成，專案經理首先和客戶交流，了解客戶的需求，然後分析專案的可行性，如果專案可以實現，專案經理寫出專案需求文件交給設計師完成後續的開發。 #########頁面設計/######專案選型######
這個環節主要是UI設計師參與，UI設計師根據產品需求分析文檔，對產品的整體美術風格、互動設計、介面結構、操作流程等做出設計。負責專案中各種互動介面、圖示、LOGO、按鈕等相關元素的設計與製作。並且確定使用技術

編碼

這個部分由程式設計師來實現。（程式設計師分為WEB前端開發工程師和後台開發工程師。前端開發人員主要做我們可以在網頁上看的見的頁面，後台就做一些我們看不見的管理系統以及功能的實現。）程式設計師根據UI設計師的設計，用編碼來完成整個專案的各個功能。

測試

這部分由程式測試員來完成。程式測試員主要就是測試尋找程式還存在的bug，一般來說剛編碼完成的程式都是有問題的，就需要測試人員反覆不斷的測試並將有問題的測試結果交給編碼人員進行bug的修復。等到幾乎所有bug修復完成，這個專案差不多就可以上線了。

維護

程式的維護是整個專案的最後一個階段，但也是耗時最多，成本最高最高的的一個階段。程式的維護包括程式上線後後續bug的修復和程式版本的更新。

2.更換介面網域

就是在開發的時候呼叫的後台介面是後台測試的介面專案上線後要把請求的介面替換成上線的網域名稱

# 3.常用的工具

程式碼管理平台：github 碼雲

需求發布平台：釘子任務，禪道

Ui互動平台：藍湖

產品原型工具：axure

企業信箱：阿里騰訊企業信箱

後台語言：java php python（西安不多）

4.大公司與小公司開發的差異

大型外包公司更流程化，人員多，溝通少，專案交付後不需要自己維護，採用瀑布開發模式（以文件為主）

小型公司：人少需求經常改變溝通方便採用敏捷開發（快速推出v1版本，之後迭代）

5.前後台分離怎麼測試？

奇葩問題

你們後端開發用的什麼？

行動端如何刷新頁面？

專案初始化建置流程

專案中自己覺得驕傲的地方？

說說自己的缺點

熱部署是什麼？

使用者有多少

怎麼呼叫介面（是怎麼跟後台溝通的）

儲存格測試是怎麼做的

開發環境，測試環境，上線環境的環境變數你們在開發中是如何處理的

更多程式相關知識，請造訪：程式影片！！

以上是2023年精選Web前端面試題大全及答案（收藏）的詳細內容。更多資訊請關注PHP中文網其他相關文章！