這里是div

裡面的段落

3. Web前端5道面試題

1.請說明ECMAScript,JavaScript,Jscript之間的關系?

ECMAScript提供腳本語言必須遵守的規則、

細節和准則，是腳本語言的規范。

比如：ES5，ES6就是具體的一js版本。

JavaScript是ECMAScript的一個分支版本,

JavaScript實現了多數ECMA-262中

描述的ECMAScript規范，但存在少數差異。

JScript是微軟公司對ECMA-262語言規范的

一種實現,除了少數例外(這是為了保持向後兼容),

微軟公司宣稱JScript完全實現了ECMA標准.

關系:

JavaScript和JScript都是ECMAScript的版本分支,

二者在語法上沒有多大的區別;

只不過一個是NetScape公司的,一個是微軟的;

IE系列默認是JScript,其它的則反之用JavaScript。


2.頁面載入過程中可能觸發哪些事件?它們的順序是?

頁面載入時，大致可以分為以下幾個步驟：1)開始解析HTML文檔結構2)載入外部樣式表及JavaScript腳本3)解析執行JavaScript腳本4)DOM樹渲染完成5)載入未完成的外部資源6)頁面載入成功

執行順序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件


3.函數中在聲明變數a前使用a會產生錯誤嗎?為什麼?

不會,JS中能夠進行變數作用域提升,

把所有變數、函數的聲明提升到當前

作用域的最前面,但不進行賦值操作;

所以可能造成獲取的值是undefined。


4.什麼是hash,以及hashchange事件?

先了解下什麼是hash:hash即URL中"#"字元後面的部分。

a)使用瀏覽器訪問網頁時，

如果網頁URL中帶有hash，

頁面就會定位到id(或name)

與hash值一樣的元素的位置;

b)hash還有另一個特點，

它的改變不會導致頁面重新載入如橡尺;

c)hash值瀏如清覽器是不會隨請求發送到伺服器端的;

d)通過window.location.hash屬性獲取和設置hash值。

window.location.hash值的變化會直渣高接

反應到瀏覽器地址欄(#後面的部分會發生變化)，同時，瀏覽器地址欄hash值的變化也會觸發

window.location.hash值的變化，

從而觸發onhashchange事件。

再來了解下什麼是hashchange事件:

a)當URL的片段標識符更改時，

將觸發hashchange事件(跟在#符號後面的URL部分，包括#符號)b)

hashchange事件觸發時，

事件對象會有hash改變前的URL(oldURL)和hash改變後的URL(newURL)兩個屬性。


5.什麼是CDN,CDN對於網站有什麼意義,它有什麼樣的缺點?

CDN又稱為內容分發網路;本意在於

盡可能避開互聯網上有可能影響數據

傳輸速度和穩定性的瓶頸和環節，

使內容傳輸的更快、更穩定。

主要目的:

解決因分布、帶寬、伺服器性能帶來的訪問延遲問題，

適用於站點加速、點播、直播等場景。

使用戶可就近取得所需內容，解決Internet網路擁擠的狀況，

提高用戶訪問網站的響應速度和成功率。

缺點:

a)實施復雜,投資大;

b)目前大部分的CDN還只是對靜態內容加速，

對動態加速效果不好;

而雙線對動態加速的效果跟靜態是一樣的。

4. web前端面試經常問到的面試題有哪些

Web前端經常被問到的面試題及答案

一、HTML+CSS

1.對WEB標准以及W3C的理解與認識

標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外
鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維
護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性;

2.xhtml和html有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

最主要的不同：

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。

標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

用於聲明文檔使用那種規范(html/Xhtml)一般為 嚴格 過度 基於框架的html文檔

加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug

4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?

塊級元素：div p h1 h2 h3 h4 form ul

行內元素: a b br i span input select

Css盒模型:內容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的區別是?

內聯 內嵌 外鏈 導入

區別 ：同時載入

前者無兼容性，後者CSS2.1以下瀏覽器不支持

Link 支持使用javascript改變樣式，後者不可

6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?

標簽選擇符 類選擇符 id選擇符

繼承不如指定 Id>class>標簽選擇

後者優先順序高

7.前端頁面有哪三層構成，分別是什麼?作用是什麼?

結構層 Html 表示層 CSS 行為層 js

8.css的基本語句構成是?

選擇器{屬性1:值1;屬性2:值2;……}

9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?

Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

二、Javascript

1.javascript的typeof返回哪些數據類型

Object number function boolean underfind

2.例舉3種強制類型轉換和2種隱式類型轉換?

強制(parseInt,parseFloat,number)

隱式(== – ===)

3.split() join() 的區別

前者是切割成數組的形式，後者是將數組轉換成字元串

4.數組方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除

Unshift()頭部添加 shift()頭部刪除

5.事件綁定和普通事件有什麼區別

6.IE和DOM事件流的區別

1.執行順序不一樣、

2.參數不一樣

3.事件加不加on

4.this指向問題

7.IE和標准下有哪些兼容性的寫法

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.ajax請求的時候get 和post方式的區別

一個在url後面 一個放在虛擬載體裡面

有大小限制

安全問題

應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的

9.call和apply的區別

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax請求時，如何解釋json數據

使用eval parse 鑒於安全性考慮 使用parse更靠譜

11.b繼承a的方法

12.寫一個獲取非行間樣式的函數

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)

{

return obj.currentStyle(attr)

}

else

{

obj.getComputedStyle(attr,false)

}

}

else

{

obj.style[attr]=value

}

}

5. Web前端企業面試題

答：

一、display和visibility的相同與不同點

1、相同點：display和visibility都有講元素隱藏的意思

2、不同點：display是元素隱藏，隱藏的元素不佔文檔流

而visibility隱藏的元素仍然占文檔流

二、display和visibility的屬性值

1、display

2、visibility

答：

在開發過程中經常需要循環遍歷數組或者對象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他們的異同點

for循環

其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for循環，它用來遍歷數組

for循環中可以使用return、break等來中斷循環

結果：

forEach

對數組的每一個元素執行一次提供的函數（不能使用return、break等中斷循環），不改變原數組，無返回值undefined。

輸出結果：

for…in

循環遍歷的值都是數據結構的鍵值

總結一句: for in也可以循環數組但是特別適合遍歷對象

結果：

for…of

它是ES6中新增加的語法，用來循環獲取一對鍵值對中的值

循環一個數組

循環一個普通對象（報錯）

答：

px：像素（Pixel）,相對長度單位。像素px是相對於顯示器屏幕解析度而言的 。--即解析度不同的機型當前對應的距離可能發生變化。(1Inches=xPx)。

所以相對於同一機型來說是一個絕對的長度單位。

em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸 。

以其父級元素為基準來變化長度。所以其演算法不是一個固定的值。

rem：是CSS3新增的一個相對單位（root em，根em） 。

那麼其好用在用可以直接設置HTML的font-size，然後在其子類都是以這個大小為基準變化的值。

在移動設備上，我們常常設置

此方式的目的是為了將當前屏幕(PC)解析度的px轉化成手機端的px，讓px在手機上能夠兼容此方式。

因此，此時看見的12px與PC端的12px無異。但是，如果不寫著個meta的話，那麼，瀏覽器會一直以PC的視圖來決定手機端的px的大小，讓視圖看起來變小了很多。

那麼，響應式頁面則經常配合媒體查詢media 來設置不同解析度下手機的各種不同的配置機構，然後根據父級來變化所有的相對長度。

基礎篇

1.shift

// 刪除原數組的第一項，並返回刪除元素的值，如果數組為空則返回undefined

2.unshift

// 將參數添加到原數組開頭，並返回數組的長度

//註：此方法在ie6.0下

// 測試的返回值始終為undefined，在firefox下測試的返回值為7，所以此方法不可靠

// 一般需要用返回值時可用splice代替

3.pop

// 刪除原數組的最後一項，並返回刪除元素的值；如果數組為空則返回undefined

4.push

// 將參數添加到原數組末尾，並返回數組的長度

5.concat

// 返回一個新數組，是將參數添加到原數組中構成的

6.splice

7.reverse

8.sort(orderfunction)

9.slice(start,end)

10.join(separator)

11.indexOf

12.lastIndexOf

13. Array.isArray()

14. Array.toString()

進階篇

1.forEach

是最為常用的情景，它至於遍歷，可以在獲取當前數據項的前提下，對數據進行修改。它沒有返回值。理解起來也是最容易的。

2.map

map的本意就是映射，也就是將一個值從一種形式映射到另一種形式，比如將key映射到value。它的每一次遍歷都會有一個返回值。這些返回值組合成最終的結果數組。事實就是如此

forEach和map對比

相同點

1）都是循環遍歷數組中的每一項；

2）forEach()和map()匿名函數的參數相同，參數分別是item（當前每一項）、index（索引值）、arr（原數組）；

3）this都是指向調用方法的數組；

4) 只能遍歷數組；

不相同點

1）map()創建了新數組，不改變原數組；forEach()可以改變原數組。

2）遇到空缺的時候map()雖然會跳過，但保留空缺；forEach()遍歷時跳過空缺，不保留空缺。

3）map()按照原始數組元素順序依次處理元素；forEach()遍歷數組的每個元素，將元素傳給回調函數。

3.filter

它致力於從已有的數組中篩選出符合一定條件的數據項，最後的返回值是所有符合條件的數據項構成的數組。它不會修改原來的數組。記住，它的立足點就是篩選。也僅僅是篩選。還有一點需要注意：每一次遍歷都會有一個返回值，它的類型是布爾類型。返回值只有是true，當前遍歷項才會被篩選中。不要試圖在filter中去修改原始數組。

理解: 就是在一堆數據裡面去篩選你需要的數據 或者 剔除你不需要的數據

4.find()

返回通過測試的數組的第一個元素的值,

理解:假如你去一個一群人的地方去找人 你說我找xxb 他要是在那裡就找到 不在那裡就是undefined

在第一次調用 callback 函數時會確定元素的索引范圍，因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。

語法

array.find(function(value, index, arr),thisValue)

value:必須，代表當前元素，其他四個參數都是可選，index代表當前索引值，arr代表當前的數組，thisValue代表傳遞給函數的值，一般用this值，如果這個參數為空，undefined會傳遞給this值

返回值：返回符合測試條件的第一個數組元素的值，如果沒有符合條件的則返回undefined。

擴展: findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。自己try吧

5.every

理解: 這個就像 上課了 老師說 昨天布置的作業 只要有一個人沒有寫完 今天就不講課 然後挨個檢查 當檢查到有一個沒有寫完的時候 就不檢查了 返回 不講課了(false)

6.some

理解: 相當於在一個數組裡面找你想要的那個數 找到了 就返回true 找不到就返回false

7.rece

它這個方法是接收一個函數作為累加器,將數組中的值(從左向右)開始合並,最總為一個值 然後返回出來,callback

他可以傳四個參數:

1,previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)

2,currentValue:數組中當前被處理的元素

3,index:不啰嗦,自己顧名思義去吧

4,array:返回調用rece的數組

彩蛋: 這里附上前幾天某某人比較喜歡的切割字元串的方法

substring() 和 substr()

相同點： 如果只是寫一個參數，兩者的作用都一樣：都是是截取字元串從當前下標以後直到字元串最後的字元串片段。

不同點： 第二個參數

substr(startIndex, lenth) // 第二個參數是截取字元串的長度（從起始點截取某個長度的字元串）；

substring(startIndex, endIndex) // 第二個參數是截取字元串最終的下標 （截取2個位置之間的字元串,『含頭不含尾'）。

1：在使用vue框架的過程中，我們經常需要給一些數據做一些初始化處理，這時候我們常用的就是在created與mounted選項中作出處理。

首先來看下官方解釋，官方解釋說created是在實例創建完成後唄立即調用。在這一步，實例已完成以下配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

這話的意思我覺得重點在於說掛架階段還沒開始，什麼叫還沒開始掛載，也就是說，模板還沒有被渲染成html，也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下實例來證明。

所以，一般creadted鉤子函數主要是用來初始化數據。

2：mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。官方解釋如下：

el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

這意思是該鉤子函數是在掛在完成以後也就是模板渲染完成以後才會被調用。下面看實例

下面是結果

nihao

取到了值，這說明這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的

computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。

總結：
通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後才可以進行，那麼mounted就是不二之選。
methods:{}中的方法都需要主動去觸發，比如點擊click之類的
而created(){}、mounted(){}、裡面的代碼都是自動去執行的，即vue生命周期到了哪一步就直接去執行對應鉤子函數裡面的代碼了，無需手動去執行
created中主要放初始化獲取數據之類，mounted()中掛載到具體的DOM節點

computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。

mounted 是生命周期鉤子，vue的生命周期中一個實例的mounted只會運行一次。mounted在vue的渲染模板掛載到$el元素上才會調用，很顯然你export的時候el都么有自然不會運行mounted鉤子函數了。
所有的方法都應該在methods里定義，然後在created或者mounted里 使用this調用方法，用這種方式實現初始化

6、Vue中組件之間的傳參方式有哪些方式？

Vue 組件傳參的八種方式總結

Vue 組件的使用不管是在平常工作還是在面試面試中，都是頻繁出現的。因此系統的梳理一下組件之間的傳參還是非常有必要的

一、props 傳參

子組件定義 props 有三種方式:

// 第一種數組方式

// 第二種對象方式

// 第三種對象嵌套對象方式

第三種對象默認支持 4 種屬性，並且都是非必填的。可以隨意使用

父組件傳參的倆種方式

第一種靜態屬性傳參

注意：

1、在不定義 props 類型的情況下 props 接受到的均為 String。

2、當 props 屬性指定為 Boolean 時，並且只有屬性 key 沒有值 value 時接受到的是 true

第二種動態屬性傳參

注意：

1、需要區分非簡寫形式傳入的值是對象，則會對應 props 中多個值

2、會保留傳入值的類型

3、如果是表達式則獲取到的是表達式的計算結果

二、attrs 和listeners

$attrs

$attrs 會獲取到 props 中未定義的屬性（class 和 style 屬性除外）,支持響應式。常用的場景有倆種：

組件嵌套組件時可以使用 $attrs 來支持過多的屬性支持。比如 elementUI 的 table 組件。支持的屬性十幾個，而平常封裝的時候用的最多的也就一倆個。

屬性默認是添加在父組件上的，有時候想把多餘的屬性添加在子組件上（可以結合 inheritAttrs: false 屬性，讓父屬性不接受多餘的屬性）

$listeners 定義的事件都在子組件的根元素上，有時候想加到其他元素上。就可以使用 $listerners。它包含了父組件中的事件監聽器(除了帶有 .native 修飾符的監聽器)

三、$emit 通知

這里有一道考題: for 循環的時候如何拿到子組件的傳值和 for 中循環的值

答案有倆種，一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第一個值

四、v-model

這個其實是一種通過 emit，on 的組合方式。優點再於同步值方便,寫法優雅。下面三種寫法其實是一個意思

五、插槽

六、$refs, $root, $parent, $children

$root 獲取根組件

$parent 獲取父組件

$children 獲取子組件(所有的子組件，不保證順序)

$refs 組件獲取組件實例，元素獲取元素

七、project / inject

注意：注入的值是非響應的

八、Vuex

這個相當於單獨維護的一組數據，就不過多的說了。

watch，computed和methods的關系

1.watch和computed都是以Vue的依賴追蹤機制為基礎的 ，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變動。

2.對methods:methods裡面是用來定義函數的，很顯然，它需要手動調用才能執行。而不像watch和computed那樣，「自動執行」預先定義的函數

watch和computed各自處理的數據關系場景不同

1. watch 擅長處理的場景： 一個數據影響多個數據

2. computed 擅長處理的場景： 一個數據受多個數據影響

watch用法 監聽下記haiZeiTuan_Name的值，會改變其他所有的值

結果：this.suoLong會變為 '橡膠海賊團索隆',以此類推

computed用法 監聽下記firstName，secName，thirdName的值，會改變luFei_Name的值

methods和computed的區別例子

注意兩次點擊computed返回的時間是相同的！！

1.兩次點擊methods返回的時間是不同的

2.注意兩次點擊computed返回的時間是相同的

【注意】為什麼兩次點擊computed返回的時間是相同的呢？new Date()不是依賴型數據 （不是放在data等對象下的實例數據） ，所以computed只提供了緩存的值，而沒有重新計算

只有符合：1.存在依賴型數據 2.依賴型數據發生改變這兩個條件 ,computed才會重新計算。

參考：http://www.cnblogs.com/penghuwan/p/7194133.html

答：https://codecat.blog.csdn.net/article/details/100031285

1、Promise

Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大，簡單地說，Promise好比容器，裡面存放著一些未來才會執行完畢（非同步）的事件的結果，而這些結果一旦生成是無法改變的

2、async await

async await也是非同步編程的一種解決方案，他遵循的是Generator 函數的語法糖，他擁有內置執行器，不需要額外的調用直接會自動執行並輸出結果，它返回的是一個Promise對象。

兩者的主要用法、語法就不贅述了，感興趣的同學可以自行查閱 es6中文文檔

兩者的區別

1、Promise的出現解決了傳統callback函數導致的「地域回調」問題，但它的語法導致了它向縱向發展行成了一個回調鏈，遇到復雜的業務場景，這樣的語法顯然也是不美觀的。而async await代碼看起來會簡潔些，使得非同步代碼看起來像同步代碼，await的本質是可以提供等同於」同步效果「的等待非同步返回能力的語法糖，只有這一句代碼執行完，才會執行下一句。

2、async await與Promise一樣，是非阻塞的。

3、async await是基於Promise實現的，可以說是改良版的Promise，它不能用於普通的回調函數。

簡單來看，這兩者除了語法糖不一樣外，他們解決的問題、達到的效果是大同小異的，我們可以在不同的應用場景，根據自己的喜好來選擇使用。

6. 前端經典面試題(60道前端面試題包含JS、CSS、React、瀏覽器等)

防抖

節流

誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的。

實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與瀏覽器或web伺服器，瀏覽器或web伺服器限制了url的長度。為了明確這個概念，我們必須再次強調下面幾點:

補充補充一個get和post在緩存方面的區別：

可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Mole、

vue和react都是採用diff演算法來對比新舊虛擬節點，從而更新節點。在vue的diff函數中（建議先了解一下diff演算法過程）。在交叉對比中，當新節點跟舊節點 頭尾交叉對比 沒有結果時，會根據新節點的key去對比舊節點數組中的key，從而找到相應舊節點（這里對應的是一個key => index 的map映射）。如果沒找到就認為是一個新增節點。而如果沒有key，那麼就會採用遍歷查找的方式去找到對應的舊節點。一種一個map映射，另一種是遍歷查找。相比而言。map映射的速度更快。vue部分源碼如下：

創建map函數

遍歷尋找

在React中， 如果是由React引發的事件處理（比如通過onClick引發的事件處理），調用setState不會同步更新this.state，除此之外的setState調用會同步執行this.state 。所謂「除此之外」，指的是繞過React通過addEventListener直接添加的事件處理函數，還有通過setTimeout/setInterval產生的非同步調用。

**原因：**在React的setState函數實現中，會根據一個變數isBatchingUpdates判斷是直接更新this.state還是放到隊列中回頭再說，而isBatchingUpdates默認是false，也就表示setState會同步更新this.state，但是， 有一個函數batchedUpdates，這個函數會把isBatchingUpdates修改為true，而當React在調用事件處理函數之前就會調用這個batchedUpdates，造成的後果，就是由React控制的事件處理過程setState不會同步更新this.state 。

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

具體實現步驟如下：

用 JavaScript 對象結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文檔當中

當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異

把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了。

結構：display:none: 會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，可以點擊

繼承：display: none：是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。visibility: hidden：是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。

性能：displaynone : 修改元素會造成文檔迴流,讀屏器不會讀取display: none元素內容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 ：修改元素會造成重繪，性能消耗較少

聯系：它們都能讓元素不可見

常用的一般為三種 .clearfix , clear:both , overflow:hidden ;

比較好是 .clearfix ,偽元素萬金油版本,後兩者有局限性.

clear:both :若是用在同一個容器內相鄰元素上,那是賊好的,有時候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷

overflow:hidden :這種若是用在同個容器內,可以形成 BFC 避免浮動造成的元素塌陷

概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。

優點：

缺點：

block 元素特點：

1.處於常規流中時，如果 width 沒有設置，會自動填充滿父容器 2.可以應用 margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間（獨佔一個水平空間） 5.忽略 vertical-align

inline 元素特點

1.水平方向上根據 direction 依次布局

2.不會在元素前後進行換行

3.受 white-space 控制

4. margin/padding 在豎直方向上無效，水平方向上有效

5. width/height 屬性對非替換行內元素無效，寬度由元素內容決定

6.非替換行內元素的行框高由 line-height 確定，替換行內元素的行框高由 height , margin , padding , border 決定 7.浮動或絕對定位時會轉換為 block 8. vertical-align 屬性生效

GIF :

JPEG ：

PNG ：

七種數據類型

(ES6之前)其中5種為基本類型: string , number , boolean , null , undefined ,

ES6出來的 Symbol 也是原始數據類型 ，表示獨一無二的值

Object 為引用類型(范圍挺大),也包括數組、函數,

輸出結果是：

工廠模式

簡單的工廠模式可以理解為解決多個相似的問題;

單例模式

只能被實例化(構造函數給實例添加屬性與方法)一次

沙箱模式

將一些函數放到自執行函數裡面,但要用閉包暴露介面,用變數接收暴露的介面,再調用裡面的值,否則無法使用裡面的值

1.字面量

2.Object構造函數創建

3.使用工廠模式創建對象

4.使用構造函數創建對象

HTML中與javascript交互是通過事件驅動來實現的，例如滑鼠點擊事件onclick、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什麼時候進行調用的，就需要了解一下「事件流」的概念。

什麼是事件流：事件流描述的是從頁面中接收事件的順序,DOM2級事件流包括下面幾個階段。

addEventListener ： addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。

IE只支持事件冒泡 。

獲取一個對象的原型，在chrome中可以通過__proto__的形式，或者在ES6中可以通過Object.getPrototypeOf的形式。

那麼Function.proto是什麼么？也就是說Function由什麼對象繼承而來，我們來做如下判別。

我們發現Function的原型也是Function。

我們用圖可以來明確這個關系：

這里來舉個栗子，以 Object 為例，我們常用的 Object 便是一個構造函數，因此我們可以通過它構建實例。

則此時， 實例為instance , 構造函數為Object ，我們知道，構造函數擁有一個 prototype 的屬性指向原型，因此原型為:

這里我們可以來看出三者的關系:

在 JS 中，繼承通常指的便是 原型鏈繼承 ，也就是通過指定原型，並可以通過原型鏈繼承原型上的屬性或者方法。

在函數式編程中，函數是一等公民。那麼函數柯里化是怎樣的呢？

函數柯里化指的是將能夠接收多個參數的函數轉化為接收單一參數的函數，並且返回接收餘下參數且返回結果的新函數的技術。

函數柯里化的主要作用和特點就是參數復用、提前返回和延遲執行。

在一個函數中，首先填充幾個參數，然後再返回一個新的函數的技術，稱為函數的柯里化。通常可用於在不侵入函數的前提下，為函數 預置通用參數 ，供多次重復調用。

call 和 apply 都是為了解決改變 this 的指向。作用都是相同的，只是傳參的方式不同。

除了第一個參數外， call 可以接收一個參數列表， apply 只接受一個參數數組。

bind 和其他兩個方法作用也是一致的，只是該方法會返回一個函數。並且我們可以通過 bind 實現柯里化。

如何實現一個 bind 函數

對於實現以下幾個函數，可以從幾個方面思考

如何實現一個call函數

如何實現一個apply函數

箭頭函數其實是沒有 this 的，這個函數中的 this 只取決於他外面的第一個不是箭頭函數的函數的 this 。在這個例子中，因為調用 a 符合前面代碼中的第一個情況，所以 this 是 window 。並且 this 一旦綁定了上下文，就不會被任何代碼改變。

關於 let 的是否存在變數提升，我們何以用下面的例子來驗證：

let 變數如果不存在變數提升， console.log(name) 就會輸出 ConardLi ，結果卻拋出了 ReferenceError ，那麼這很好的說明了， let 也存在變數提升，但是它存在一個「暫時死區」，在變數未初始化或賦值前不允許訪問。

變數的賦值可以分為三個階段：

關於 let 、 var 和 function ：

依次輸出：undefined -> 10 -> 20

答案: D

colorChange 方法是靜態的。靜態方法僅在創建它們的構造函數中存在，並且不能傳遞給任何子級。由於 freddie 是一個子級對象，函數不會傳遞，所以在 freddie 實例上不存在 freddie 方法：拋出 TypeError 。

1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1 2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1 3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行列印 4.列印時因為數組未設置下標為 0 1 處的值，故列印為empty，主動 obj[0] 獲取為 undefined

undefined {n:2}

首先，a和b同時引用了{n:2}對象，接著執行到a.x = a = {n：2}語句，盡管賦值是從右到左的沒錯，但是.的優先順序比=要高，所以這里首先執行a.x，相當於為a（或者b）所指向的{n:1}對象新增了一個屬性x，即此時對象將變為{n:1;x:undefined}。之後按正常情況，從右到左進行賦值，此時執行a ={n:2}的時候，a的引用改變，指向了新對象{n：2},而b依然指向的是舊對象。之後執行a.x = {n：2}的時候，並不會重新解析一遍a，而是沿用最初解析a.x時候的a，也即舊對象，故此時舊對象的x的值為{n：2}，舊對象為 {n:1;x:{n：2}}，它被b引用著。後面輸出a.x的時候，又要解析a了，此時的a是指向新對象的a，而這個新對象是沒有x屬性的，故訪問時輸出undefined；而訪問b.x的時候，將輸出舊對象的x的值，即{n:2}。

在比較相等性，原始類型通過它們的值進行比較，而對象通過它們的引用進行比較。 JavaScript 檢查對象是否具有對內存中相同位置的引用。

我們作為參數傳遞的對象和我們用於檢查相等性的對象在內存中位於不同位置，所以它們的引用是不同的。

這就是為什麼 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。

所有對象鍵（不包括 Symbols ）都會被存儲為字元串，即使你沒有給定字元串類型的鍵。這就是為什麼 obj.hasOwnProperty（Ƈ'） 也返回 true 。

上面的說法不適用於 Set 。在我們的 Set 中沒有 「1」 ： set.has（Ƈ'） 返回 false 。它有數字類型 1 ， set.has（1） 返回 true 。

這題考察的是對象的鍵名的轉換。

catch 塊接收參數 x 。當我們傳遞參數時，這與變數的 x 不同。這個變數 x 是屬於 catch 作用域的。

之後，我們將這個塊級作用域的變數設置為 1 ，並設置變數 y 的值。現在，我們列印塊級作用域的變數 x ，它等於 1 。

在 catch 塊之外， x 仍然是 undefined ，而 y 是 2 。當我們想在 catch 塊之外的 console.log(x) 時，它返回 undefined ，而 y 返回 2 。

7. 有哪些經典的 Web 前端或者 JavaScript 面試筆試題

JavaScript面試題:字元串處理
在應聘前端程序員時，在筆試部分經常會考到字元串處理的問題。這些題有一個特點，站在考官的角度去考慮，它考的不是你會不會，而是你能不能在不借用XX手冊或者XX指南再或者網路谷歌的情況下，用比較簡潔的方式寫出答案來。就具體的字元串處理問題，鄭州尚學堂給大家分享一下。
1、字元串轉換

字元串轉換是最基礎的要求和工作，你可以將任何類型的數據都轉換為字元串，你可以用下面三種方法的任何一種：

var num= 19; // 19
var myStr = num.toString(); // "19"

你同樣可以這么做：

var num= 19; // 19
var myStr = String(num); // "19"

或者，再簡單點兒：

var num= 19; // 19
var myStr = "" +num; // "19"

2、字元串分割

字元串分割，即將一個字元串分割為多個字元串，JavaScript中給我們提供了一個非常方便的函數，如：

var myStr = "I,Love,You,Do,you,love,me";
var substrArray = myStr .split(","); // ["I", "Love", "You", "Do", "you", "love", "me"];
var arrayLimited = myStr .split(",", 3); // ["I", "Love", "You"];

split()的第二個參數，表示返回的字元串數組的最大長度。

3、獲取字元串長度

字元串長度是在開發中經常要用到的，非常簡單如下：

var myStr = "I,Love,You,Do,you,love,me";
var myStrLength = myStr.length; //25

4、查詢子字元串

很多人都會忘記這幾個JavaScript的自帶的方法，或者忘記它們的具體用法，從而導致在做題的時候不得不嵌套for循環來做。

第一個函數：indexOf()，它從字元串的開頭開始查找，找到返回對應坐標，找不到返回-1，如下：

var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.indexOf("you"); // 7 ,基於0開始,找不到返回-1

第二個函數：lastIndexOf()，它從字元串的末尾開始查找，找到返回對應坐標，找不到返回-1，如下：

var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.lastIndexOf("you"); // 14

以上兩個函數同樣接收第二個可選的參數，表示開始查找的位置。

5、字元串替換

單單查到字元串應該還不會停止，一般題目都還經常會遇到讓你查到並替換為你自己的字元串，例如：

var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace("love","hate");//"I,hate,you,Do,you,love,me"

默認只替換第一次查找到的，想要全局替換，需要置上正則全局標識，如：

var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace(/love/g,"hate");//"I,hate,you,Do,you,hate,me"
6、查找給定位置的字元或其字元編碼值

想要查找給定位置的字元，你可以使用如下函數：

var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charAt(8);// "o",同樣從0開始

同樣，它的一個兄弟函數就是查找對應位置的字元編碼值，如：

var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charCodeAt(8); //111

7、字元串連接

字元串連接操作可以簡單到用一個加法運算符搞定，如：

var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1 + str2 + "Yes!";//"I,love,you!Do,you,love,me?Yes!"

同樣，JavaScript也自帶了相關的函數，如：

var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1.concat(str2);//"I,love,you!Do,you,love,me?"

其中concat()函數可以有多個參數，傳遞多個字元串，拼接多個字元串。

8、字元串切割和提取

有三種可以從字元串中抽取和切割的方法，如：

第一種，使用slice():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.slice(1,5);//",lov"

第二種，使用substring():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substring(1,5); //",lov"

第三種，使用substr():

var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.substr(1,5); //",love"

與第一種和第二種不同的是，substr()第二個參數代表截取的字元串最大長度，如上結果所示。

9、字元串大小寫轉換

常用的轉換為大寫或者小寫字元串函數，如下：

var myStr = "I,love,you,Do,you,love,me";
var lowCaseStr = myStr.toLowerCase();//"i,love,you,do,you,love,me";
var upCaseStr = myStr.toUpperCase();//"I,LOVE,YOU,DO,YOU,LOVE,ME"

10、字元串匹配

字元串匹配可能需要你對正則表達式有一定的了解，先來看看match()函數：

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;
var result = myStr.match(pattern);//["love"]
console.log(result .index);//2
console.log(result.input );//I,love,you,Do,you,love,me

如你所見，match()函數在字元串上調用，並且接受一個正則的參數。來看看第二個例子，使用exec()函數：

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;

8. Web前端崗位面試題有哪些

前端面試題匯總，基本上會有四大類問題，具體如下：
一、HTML

1、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?

2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
3、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4、頁面導入樣式時，使用link和@import有什麼區別？
5、介紹一下你對瀏覽器內核的理解？
6、常見的瀏覽器內核有哪些？
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
8、簡述一下你對HTML語義化的理解？
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
12、iframe有那些缺點？
13、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
14、HTML5的form如何關閉自動完成功能？
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器？(阿里)
17、頁面可見性（Page Visibility）API 可以有哪些用途？
18、如何在頁面上實現一個圓形的可點擊區域？
19、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
21、tite與h1的區別、b與strong的區別、i與em的區別？

二、css

1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

2、CSS選擇符有哪些？哪些屬性可以繼承？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？

11、一個滿屏 品 字布局 如何設計?

三、常見兼容性問題？

1. 
   1、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
   2、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
   3、為什麼要初始化CSS樣式。
   4、absolute的containing block計算方式跟正常流有什麼不同？
   5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
   6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
   7、對BFC規范(塊級格式化上下文：block formatting context)的理解？
   8、CSS權重優先順序是如何計算的？
   9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
   10、移動端的布局用過媒體查詢嗎？
   11、使用 CSS 預處理器嗎？喜歡那個？
   12、CSS優化、提高性能的方法有哪些？
   13、瀏覽器是怎樣解析CSS選擇器的？
   14、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
   15、margin和padding分別適合什麼場景使用？
   16、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
   17、元素豎向的百分比設定是相對於容器的高度嗎？
   18、全屏滾動的原理是什麼？用到了CSS的那些屬性？
   19、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
   20、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
   21、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
   22、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
   23、你對line-height是如何理解的？
   24、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
   25、怎麼讓Chrome支持小於12px 的文字？
   26、讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
   27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
   28、position:fixed;在android下無效怎麼處理？
   29、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
   30、display:inline-block 什麼時候會顯示間隙？(攜程)
   31、overflow: scroll時不能平滑滾動的問題怎麼處理？
   32、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
   33、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
   34、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
   35、style標簽寫在body後與body前有什麼區別？
   
   四、JavaScript
   
   1、介紹JavaScript的基本數據類型。
   2、說說寫JavaScript的基本規范？
   3、JavaScript原型，原型鏈 ? 有什麼特點？
   4、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
   5、Javascript如何實現繼承？
   6、Javascript創建對象的幾種方式？
   7、Javascript作用鏈域?
   8、談談This對象的理解。
   9、eval是做什麼的？
   10、什麼是window對象? 什麼是document對象?
   11、null，undefined的區別？
   12、寫一個通用的事件偵聽器函數(機試題)。
   13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
   14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
   15、什麼是閉包（closure），為什麼要用它？
   16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
   17、如何判斷一個對象是否屬於某個類？
   18、new操作符具體幹了什麼呢?
   19、用原生JavaScript的實現過什麼功能嗎？
   20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
   21、對JSON的了解？
   22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
   23、js延遲載入的方式有哪些？
   24、Ajax 是什麼? 如何創建一個Ajax？
   25、同步和非同步的區別?
   26、如何解決跨域問題?
   27、頁面編碼和被請求的資源編碼如果不一致如何處理？
   28、模塊化開發怎麼做？
   29、AMD（Moles/Asynchronous-Definition）、CMD（Common Mole

   Definition）規范區別？
   30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
   31、讓你自己設計實現一個requireJS，你會怎麼做？
   32、談一談你對ECMAScript6的了解？
   33、ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
   34、非同步載入的方式有哪些？
   35、documen.write和 innerHTML的區別?
   36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
   37、.call() 和 .apply() 的含義和區別？
   38、數組和對象有哪些原生方法，列舉一下？
   39、JS 怎麼實現一個類。怎麼實例化這個類
   40、JavaScript中的作用域與變數聲明提升？
   41、如何編寫高性能的Javascript？
   42、那些操作會造成內存泄漏？
   43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
   44、jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
   45、jquery中如何將數組轉化為json字元串，然後再轉化回來？
   46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
   47、jquery.extend 與 jquery.fn.extend的區別？
   48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
   49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
   50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
   51、是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
   52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
   53、針對 jQuery性能的優化方法？
   54、Jquery與jQuery UI有啥區別？
   55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
   56、jquery 中如何將數組轉化為json字元串，然後再轉化回來？
   57、jQuery和Zepto的區別？各自的使用場景？
   58、針對 jQuery 的優化方法？
   59、Zepto的點透問題如何解決？
   60、jQueryUI如何自定義組件?
   61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
   62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
   63、移動端最小觸控區域是多大？
   64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
   65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
   66、移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
   67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
   68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
   69、解釋JavaScript中的作用域與變數聲明提升？
   70、那些操作會造成內存泄漏？
   71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
   72、Node.js的適用場景？
   (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
   73、解釋一下 Backbone 的 MVC 實現方式？
   74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
   75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
   76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
   77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
   78、簡述一下 Handlebars 的基本用法？
   79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
   80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
   檢測瀏覽器版本版本有哪些方式？
   81、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
   

9. Web前端面試的常見面試題匯總

今天小編要跟大家分享的文章是關於參加Web前端面試的常見面試題匯總。准備參加Web前端面試的小夥伴們來和小編一起看一看吧，希望則寬本篇文章能夠對大家有所幫助。

1.漸進增強與優雅降級


漸進增強
並不是一種技術，而是一種設計思想。各個瀏覽器的渲染能力各不相同，要做一個每個人都能看到的網頁、感受到的體驗都一致的網站幾乎不可能。但還是得網站的可訪問性，保證用戶在任何環境下都能正常訪問網頁得核心內容或能使用基本功能(避免網頁打不開、排版錯誤等)，並為他們提供當前條件下最好的體驗，這就是漸進增強得核心思想。


優雅降級也是一種設計思想，為了保證在高版本瀏覽器中提供最好的體驗，碰到低版本瀏覽器再降級進行兼容處理，使其能正常瀏覽。


這兩種思想的區別在於：


1.漸進增強是向上兼容，優雅降級是向下兼容;


2.漸進增強是從簡單到復雜，優雅降級是從復雜到簡單;


3.漸進增強關注的是內容(保證核心內容)，優雅降級關注的是瀏覽體驗(為了兼容低版本瀏覽器)


2.DOCTYPE














作用


DTD(DocumentTypeDefinition，文檔類型定義)是一系列的語法規則，用來定義XML或(X)HTML
的文檔類型。瀏覽器會使用它來判斷文檔類型，決定何種協議來解析，以及切換瀏覽模式。


DOCTYPE是用來聲明文檔類型和DTD
規范的，一個主要的用途便是文件的合法性驗證。如果文檔代碼不合法，那麼瀏覽器解析時便會出現一些差錯。


HTML5的文檔類型聲明：





HTML4.01Strict(HTML4.01嚴格模式)的DTD包含所有HTML
元素和屬性，但不包括展示性的和棄用的元素(如font)，它的文檔類型聲明：


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


標准模式與怪異模式


怪異模式(Quirks
Mode)用於模擬舊瀏覽器的行為。早期的網站並不會遵循完整的規好卜范，隨著瀏覽器支持越來越多的規范，在那些舊的瀏覽器中開發的頁面在顯示時會友盯穗被破壞。為了向後兼容，瀏覽器發明了怪異模式，一行錯誤或無效的
DOCTYPE都會觸發怪異模式。


瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標准模式處理。DOCTYPE
可以確保不同瀏覽器以相同的方式解析文檔，以及執行相同的渲染模式。


怪異模式與標准模式的主要區別：


1.怪異模式的寬度和高度會包含padding和border。標准模式不包含，標准模式下可以通過設置box-sizing:
border-box將標准盒模型轉化成怪異模式下的盒模型。


2.怪異模式下，當內容超出容器高度時，會將容器拉伸，而不是溢出。


3.怪異模式下，在表格中的字體樣式(如font-size)不會繼承。


4.怪異模式下顏色值必須使用十六進制標記法。


3.語義化


HTML5
中的語義化就是讓元素、屬性或屬性值有含義，更准確地標記特定類型的內容。對元素語義化的目的是為了讓元素的語義和呈現分離，元素只負責文檔內容的結構與含義，而CSS
樣式控制內容的呈現，像元素，沒有語義但卻能將字體變粗，這類元素違背了語義化的目的，將會被廢棄。


優點


·使得HTML文檔結構清晰、布局合理、主體突出、可讀性更強。


·有利於SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。


·方便其他設備解析，如盲人閱讀器根據語義渲染網頁。


·有利於開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧。


語義化標簽


·

定義文檔的頁眉區域,應作為介紹內容或者導航鏈接欄的容器;


·footer內容的頁腳，通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息;


·article
文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、互動式組件，或者其他獨立的內容項目;


·nav描述一個含有多個超鏈接的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表;


·section表示文檔中的一個區域(或節)，比如，內容中的一個專題組;


·main定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站
logo，搜索框(搜索框作為文檔的主要內容);


·aside
表示一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。


4.超鏈接偽類


:link、:visited、:active和:hover的聲明順序是怎樣的?


:link表示未訪問的鏈接狀態;


:visited表示已訪問狀態;:active表示激活狀態(滑鼠按下);:hover表示懸停狀態。


推薦順序是LVHA，即:link:visited:hover:active。理由如下：


·當滑鼠懸停在未訪問的鏈接上時，:link和:hover都會命中，如果:hover在:link
之前聲明，那麼(:hover)就會被覆蓋;


·當滑鼠懸停在已訪問的連接上時，:visited和:hover都會命中，如果:hover在:visited
之前聲明，那麼(:hover)就會被覆蓋;


·當滑鼠單擊鏈接時，:active和:hover都會命中，我們大多是想讓:hover只在懸停時展示樣式，按下滑鼠時使用:active
樣式，因此:active在:hover之後聲明;


·綜上，:hover應在:link和:visited之後，在:active之前，因此active在最後。而:link和
:visited兩者的順序無所謂，互不影響。


5.CSS常見的長度單位


CSS中除了px長度單位之外，還有下面幾個長度單位：


·pc六分之一英寸，1pc=12pt=1/6*1in=16px;


·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;


·in一英寸，1in=2.54cm=96px;


·ex在含有「X」字母的字體中，它是該字體的小寫字母的高度。對於很多字體來說，1ex≈0.5em;


·em1em等於父級元素的字體大小，2em就是父級元素字體大小的二倍;


·rem當用在根元素()的font-size上面時，它代表了它的初始值;


·ch代表元素所用字體font中「0」這一字形的寬度;


·vh1vh相當於視口高度的1%，100vh就是視口的高度;


·vw1vw相當於視口寬度的1%，100vw就是視口的寬度;


·vmax視口高度vw和寬度vh兩者中的最小值


·vmin視口高度vw和寬度vh兩種中的最大值;


·%相對於父級元素的大小來確定;


參考：CSS[1]


CSSpercentage[2]


6.事件對象


冒泡與捕獲


事件冒泡與捕獲是事件處理的兩種機制，主要描述當在一個元素上有兩個相同類型的事件處理器被激活會發生什麼。


在點擊子元素時，瀏覽器運行了兩種不同的階段：捕獲階段和冒泡階段。捕獲階段的行為：


·瀏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊了一個onclick事件處理程序，如果是，則運行它;


·
然後，它移動到中單擊元素的下一個祖先元素，並執行相同的操作，然後是單擊元素再下一個祖先元素，依此類推，直到到達實際點擊的元素;


而冒泡與捕獲恰恰相反：


·瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程序，如果是，則運行它;


·然後它移動到下一個直接的祖先元素，並做同樣的事情，然後是下一個，等等，直到它到達元素;


而現代瀏覽器在默認情況下，所有事件處理程序都在冒泡階段進行注冊。因此上面代碼在點擊子元素時會先執行子元素綁定的事件，然後向上冒泡，觸發父元素綁定的事件。


addEventListener函數的第三個參數是個布爾值。含義：


·當布爾值是false時(這也是默認值)，表示向上冒泡觸發事件;


·當布爾值是true時，表示向下捕獲觸發事件;


不能冒泡的事件


有些事件是不會冒泡的。比如：


·blur元素失去焦點時觸發，focusout事件也是失去焦點時觸發，但可以冒泡;


·focus元素獲取焦點時觸發;


·mouseenter滑鼠移動到元素上時會觸發該事件，與之對應的是mouseover事件，但會冒泡;


·mouseleave滑鼠離開元素時觸發，與之對應的是mouseout，但會冒泡;


事件冒泡可以讓我們利用事件委託，尤其是處理大量子元素時，如果給每個子元素都綁定事件，這是不優雅的，可以將事件綁定到父元素上，並讓子節點上發生的事件冒泡到父節點上，利用
e.target屬性可以獲取到當前觸發事件的子元素。


事件對象中的方法


·stopPropagation()阻止事件冒泡，當設置後，點擊該元素時父元素綁定的事件就不會再觸發;


·preventDefault()阻止默認事件的發生;


·stopImmediatePropagation()它用來阻止監聽同一事件的其他事件監聽器被調用以及阻止事件冒泡，比如給同一個div
元素綁定多個click事件(使用addEventListener方法可以注冊多個)，當在第二個事件函數中調用
stopImmediatePropagation方法時，點擊div元素時，後面注冊的click將不會被觸發，而且還會阻止事件冒泡;


比如下面的例子，給p綁定多個click事件，在第二個事件函數中調用stopImmediatePropagation，第三個click
事件就不會觸發，因為也阻止了冒泡，因此父元素的click事件也不會觸發。

paragraph

10. 你遇到的前端面試題都有什麼

大家好，我是王我。

隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。為什麼？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。

HTML篇

1.doctype是什麼？有哪些類型？

2.input有哪些新類型？簡要說明其8用法。

3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？

4.bootstrap響應式的原理是什麼？

5.多移動終端頁面適配是如何實現的？

CSS篇

1.如何實現兩列布局，左邊自適應，右邊固定寬度？

2.用CSS畫一個三角形

3.CSS實現字體大寫

4.display有哪些常用的屬性值？分別是什麼意思？

5.position為absolute，relative，fixed的定點位置

6.用三種方法清除浮動

7.請介紹一下margin塌陷問題

js篇

1.什麼是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實現)

2.js創建對象，至少使用三種方法

3.簡述一下事件穿透以及解決辦法

4.用三種方式判斷變數類型是否是數組

5.如何實現對象的拷貝？

6.什麼是閉包？閉包的優缺點。

7.簡述一下ajax請求的過程。

8.簡述一下new一個人構造函數的人過程。

9.為什麼會有跨域？是怎麼解決跨域問題的？簡述一下原理。

10.js原始數據類型有哪些？

11.學一個函數，判斷一個變數是否是字元串

12.typeof有哪些結果？

13.剪頭函數和普通函數有什麼區別？

14.請用三種方法實現數組去重

15.href和src有什麼區別？

jquery篇

1.attr()和prop()有什麼區別？

2.on和bind有什麼區別？js動態添加的dom元素是通過on還是bind？

3.touch和click有什麼區別？

4.window.onload和jquery的ready有什麼區別？

vue篇

1.簡述一下vue的生命周期及其特點

2.vue雙向綁定的原理是什麼？

3.vue的特點有哪些？和jquery有什麼區別？

4.父子組件之間傳遞數據的方法

5.子組件如何共享數據？

6.一般有什麼工具進行數據交互？

7.webpack的原理是什麼？

8.簡述一下$nextTick的用法

瀏覽器篇

1.cookie、sessionStorage、localStorage的區別是什麼？

2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制

網路篇

1.http和https之間的區別

2.從伺服器的安全考慮，是使用get請求還是post請求？

3.URL請求的過程有哪些？

項目經驗篇

1.項目中遇到的最大挑戰以及解決辦法

2.常見的網頁優化有哪些？

作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。

希望大家年後找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。

大家好，我是王我，中國最帥的前端程序員。

前幾次都是各種培訓公司，各種忽悠就不提了，說說後面4次面試的經歷。

第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個後端，一來沒有問我關於js的知識，直接問我以前做過什麼，有沒有經驗，我本人不會吹牛，簡歷也沒怎麼包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。

第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然後因為他們主要用jq，所以問了很多jq的操作，關於節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然後問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最後在現場做了個題目，主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什麼的也不知怎麼就一五一十交代了，估計因為這個掛掉了。

第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然後做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。

第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然後問了html5的新特性 css3 的新特性，遇到過什麼瀏覽器的兼容性問題，怎麼解決的，以後想往什麼方面發展。這個時候我已經會點vue了，照著做了個小demo，不過後來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。

最後總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然後js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答

1. cookie session 的用途和區別，以及有效期

1、cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。

2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙

考慮到安全應當使用session。

3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能

考慮到減輕伺服器性能方面，應當使用COOKIE。

4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。

2. vue的數據綁定原理，mvvm與mvc的區別

MVVM：

m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題

圖片說明一下：

說到MVVM就要說一下雙向綁定和數據劫持的原理，

MVC：

m:model數據模型層 v:view視圖層 c:controller控制器

原理： c層需要控制model層的數據在view層進行顯示

MVC兩種方式，圖片說明：

總結：

mvvm與mvc最大的區別：
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。

不懂得可以復制鏈接查看：

https://www.pianshen.com/article/3716256399/

3. storage 的區別 sessionStorage localStorage

localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性

sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的

4.v-model雙向數據原理

有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可

【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】

5.keepAlive用過嗎？什麼作用？

緩存路由組件

使用的是vue的一個組件，參考vue的官方文檔

使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀

-----【保障組件的數據不會被切換路由而銷毀數據】

Home是對應的組件對象的名字，不是路由的名字

6.多維數組拍平

數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組

一紅六種方法吧……

了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html

7.跨域的原因 解決方案

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。

這樣就可以說同源策略----協議---埠---域名

原生的src和href可以解決跨域

代理可以解決

請求頭也可以攜帶瀏覽器提示的也可以解決

一般都是後端解決跨域問題

【別的需要了解看下方鏈接】

https://blog.csdn.net/qq_41604383/article/details/100770100

8.uniApp兼容問題

§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什麼ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。

§ 如果你使用離線打包，請注意HBuilderX升級後，真機運行基座和雲打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。

§ 如果你使用自定義基座，之前製作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX後你應該重新製作新版自定義基座。

§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。

§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。

§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。

§ 雲打包的引擎版本說明
HBuilderX Alpha，只有1套雲打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。（即每個大版本的最後一個版本）
除了這2個HBuilderX版本外，其他版本的雲打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的雲打包機）

【詳情請看】

https://ask.dcloud.net.cn/article/35845

一、HTML

HTML書寫規范

H5新增標簽

HTML渲染過程

二、CSS

css盒子模型概念

css彈性布局概念

三、JavaScript

事件模型

DOM2級事件模型

閉包

原型鏈

四、移動Web開發

常見的布局方案

移動端前端常見的觸摸相關事件touch、tap、swipe等整理

移動端前端手勢事件

移動端頁面渲染優化

GPU渲染

GPU核心渲染過程

五、調試

常用的調試工具

Chrome控制台調試js使用

移動端測試

六、HTTP網路知識

常見的HTTP狀態碼

不同請求類型的區別

WEB緩存方案

——————————

牛客網（www.nowcoder.com）

- 專業IT筆試面試備考平台

- 最全C++JAVA前端等互聯網技術求職題庫

- 全面提升IT編程能力

- 程序員交友聖地

分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！

放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。

建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！

一、HTML常見題目

01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？

02、HTML5為什麼只需要寫？

03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

04、頁面導入樣式時，使用link和@import有什麼區別？

05、介紹一下你對瀏覽器內核的理解？

06、常見的瀏覽器內核有哪些？

07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？

08、如何區分HTML和HTML5？

09、簡述一下你對HTML語義化的理解？

10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？

二、CSS類的題目

01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

02、CSS選擇符有哪些？哪些屬性可以繼承？

03、CSS優先順序演算法如何計算？

04、CSS3新增偽類有那些？

05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？

06、display有哪些值？說明他們的作用。

07、position的值relative和absolute定位原點是？

08、CSS3有哪些新特性？

09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？

10、用純CSS創建一個三角形的原理是什麼？

三、Java類的題目

01、介紹Java的基本數據類型。

02、說說寫Java的基本規范？

03、Java原型，原型鏈？有什麼特點？

04、Java有幾種類型的值？(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎？

05、Java如何實現繼承？

06、Java創建對象的幾種方式？

07、Java作用鏈域？

08、談談This對象的理解。

09、eval是做什麼的？

10、什麼是window對象？什麼是document對象？

OK，一小時到了，這個時間可不算短了，那麼這些面試題你答出了幾道呢？你寫的答案正確了嗎？現在你可以去翻看答案了。

如果你答出了絕大多數的或者是全部的題，並且答案也正確了，那麼恭喜你……

你這時心裡是不是有點小竊喜，認為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實上這只能表明你的基礎扎實，畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧！

如果你只答出了小部分或者答出了大部分題但答案不正確，那麼我只想說：「騷年，你的水平還差的遠呢。」連這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！

扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那麼想要攻克「高薪」這個厚實的堡壘，那隻是痴人說夢罷了。

1.前端框架類問題，問你會不會用vue react啊

2.語言類，問你一些JavaScript語言的問題

3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道

閱讀全文