前端面試彙總

1.你所瞭解的Web攻擊技術

(1) XSS (Cross-Site Scripting，跨站腳本攻擊）

指經過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。

(2) SQL注入攻擊

(3) CSRF ( Cross-Site Request Forgeries，跨站點請求僞造)

指攻擊者經過設置好的陷阱，強制對已完成的認證用戶進行非預期的我的信息或設定信息等某些狀態更新。

 

2.瀏覽器是如何渲染頁面的？

渲染的流程以下：

1) 解析HTML文件，建立DOM樹

自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。

2) 解析CSS

優先級：瀏覽器默認設置<用戶設置 < 外部樣式<內聯樣式<HTML中的style樣式

3) 將CSS與DOM合併

構建渲染樹（Render Tree)。

4) 佈局與繪製

重繪（repaint) 和重排 (reflow)。

---

最全前端面試問題及答案總結：http://www.javashuo.com/article/p-dmngwevj-g.html

---

 

3. CSS選擇符有哪些？哪些屬性能夠繼承？優化級算法如何計算？CSS3新增僞類有哪些？

1) 選擇器

• id選擇器（#myid)
• 類選擇器 (.myclassname)
• 標籤選擇器 (div，h1，p)
• 相鄰選擇器 (h1 + p)
• 子選擇器 (ul > li)
• 後代選擇器 (li  a)
• 通配符選擇器 (*)
• 屬性選擇器 (a[rel="external"])
• 僞類選擇器 （a:hover， li:nth-child)

2) 可繼承的樣式： font-size ， font-family，color，text-indent；

    不可繼承的樣式： border，padding，margin，width， height；

4) 優先級就近原則，同權重狀況下樣式定義最近者爲準；

載入樣式以最後載入的定位爲準；

5) 優先級

!important > id > class > tag

important 比 內聯優化級高，但內聯比 id 要高

6) CSS3新增僞類舉例：

p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。

---

 

4. CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器 多背景 rgba
在CSS3中惟一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image

---

 

5. 對BFC規範的理解？

BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個BFC的兩個相鄰的塊級盒在

垂直方向（和佈局方向有關係）的margin會發生摺疊。

(W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其餘元素的關係和相互做用。）

---

 

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

1) HTML5如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

2) 拖拽釋放(Drag and drop) API

語義化更好的內容標籤（header，nav， footer，aside， article， section)

音頻、視頻API（audio， video)

畫布( Canvas) API

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失

sessionStorage 的數據在瀏覽器關閉後自動刪除

---

 

7.ajax過程

1) 建立XMLHttpRequest對象，也就是建立一個異步調用對象

2) 建立一個新的HTTP請求，並指定該HTTP請求的方法、URL及驗證信息

3) 設置響應HTTP請求狀態變化的函數

4) 發送HTTP請求

5) 獲取異步調用返回的數據

6) 使用javascript 和 DOM實現局部刷新

---

 

8.HTTP狀態碼

1) 100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息

2) 200 OK 正常返回信息

3) 201 Created 請求成功而且服務器建立了新的資源

4) 202 Accepted 服務器已接受請求，但還沒有處理

5) 301 Moved Permanently 請求的網頁已永久移動到新位置

6) 302 Found 臨時性重定向

7) 303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。
8) 304 Not Modified 自從上次請求後，請求的網頁未修改過。

9) 400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
10) 401 Unauthorized 請求未受權。
11) 403 Forbidden 禁止訪問。
12) 404 Not Found 找不到如何與 URI 相匹配的資源。

13) 500 Internal Server Error 最多見的服務器端錯誤

14) 503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）

---

 9. CommonJS、AMD、CMD

JS中的模塊規範（CommonJS、AMD、CMD），若是你聽過js模塊化這個東西，那麼你就應該聽過CommonJS或AMD已經CMD

這些規範。

1) CommonJS 定義了不少普通應用程序（主要指非瀏覽器的應用）使用的API。

可使用CommonJS API編寫應用程序，而後這些應用能夠運行在不一樣的JavaScript解釋器和不一樣的主機環境中。

在兼容CommonJS的系統中，可使用JavaScript開發如下程序：

(1) 服務器端JavaScript應用程序

(2) 命令行工具

(3) 圖形界面應用程序

(4) 混合應用程序（如，Titanium 或 Adobe AIR)

NodeJS是CommonJS規範的實現，webpack也是以CommonJS的形式來書寫。

Node.js的模塊系統，就是參照CommonJS規範來實現的。

在CommonJS中，有一個全局性方法require()，用於加載模塊。

var math = require('math');

 

而瀏覽器不兼容CommonJS的根本緣由，在於缺乏四個Node.js環境的變量。

(1) module

(2) exports

(3) require

(4) global

只要可以提供這四個變量，瀏覽器就能加載CommonJS模塊。

 

2) AMD

因爲一個重大的侷限，使得CommonJS規範不適用於瀏覽器環境。

由於require是同步的。

這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。

可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，

瀏覽器處於"假死"狀態。

所以，瀏覽器端的模塊，不能採用"同步加載" (synchronous)，只能採用"異步加載"(asynchronous)。這就是AMD規範誕生的背景。

CommonJS是主要爲了JS在後端的表現制定的，他是不適合前端的，AMD（異步模塊定義）出現了，它就主要爲前端JS的表現制定規範。

AMD 是 "Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。

全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

AMD也採用require()語句加載模塊，可是不一樣於CommonJS，它要求兩個參數：

require(['math'], function (math) {
    math.add(2,3);
});

 

math.add() 與 math模塊加載不是同步的，瀏覽器不會發生假死。因此很顯然，AMD比較適合瀏覽器環境。目前，主要有兩個javascript庫實現了AMD規範：

require.js 和 curl.js 

Require.js就是實現AMD規範的呢。

require.js的誕生，就是爲了解決兩個問題：

(1) 實現js文件的異步加載，避免網頁失去響應；

(2) 管理模塊之間的依賴性，便於代碼的編寫和維護；

 

3) CMD

CMD也是用在瀏覽器端的。

 

CommonJS是用在服務器端的，同步的，如nodeJS

AMD，CMD是用在瀏覽器端的，異步的，如Require.js  和 Seajs

其中，AMD先提出，CMD是根據CommonJS 和 AMD基礎上提出的。

 

CMD是SeaJS在推廣過程當中對模塊定義的規範化產出

CMD 和 AMD的區別有如下幾點：

(1) 對於依賴的模塊AMD是提早執行，CMD是延遲執行。不過RequireJS從2.0開始，也改爲能夠延遲執行。

(2) CMD推崇依賴就近， AMD推崇依賴前置。

---

 10. require 和 import 的區別

 1) 遵循規範

• require 是 AMD規範引入方式
• import 是 ES6 的一個語法標準，若是要兼容瀏覽器的話必須轉化成 ES5的語法

2) 調用時間

• require是運行時調用，因此require理論上能夠運用在代碼的任何地方
• import 是編譯時調用，import 命令具備提高效果，會提高到整個模塊的頭部，最好放在文件開頭

3) 本質

• require 是賦值過程，import 是解構過程，在import 遇到default的時候，和 require徹底不一樣。
• require('jquery') 和 import $ from 'jquery' 是兩種徹底不同的。

---

11. webpack中hash、chunkhash 和 contenthash 三者的區別

參考： https://blog.csdn.net/bubbling_coding/article/details/81561362

---

12. Vue的服務器渲染

什麼是Vue的服務器端渲染（SSR)

SSR，英文全稱叫 Server side rendering， 國人叫它服務器端渲染。

SSR的定義：

Vue.js 能夠將同一個組件渲染爲服務器端的HTML字符串，將它們直接發送到瀏覽器，最後將靜態標記"混合"

爲客戶端上徹底交互的應用程序。這種在服務器和客戶端均可以運行的代碼程序，也能夠叫作"同構"。

爲何要使用服務端渲染？

1) 由於咱們公司的站點很注重SEO，頁面又是異步獲取內容。

2) 同時也但願用戶更快速的看到完整渲染的頁面，從而提升用戶體驗。

先要用webpack建立一個配置文件來打包server端的代碼。

 

能夠利用 vue-server-renderer 插件更簡單的構建SSR。

 

參考：

http://www.javashuo.com/article/p-alimeqgr-z.html 

https://www.imooc.com/article/28337

http://www.javashuo.com/article/p-sgmbdwzs-t.html

http://www.javashuo.com/article/p-etdbeape-v.html

 

---

 

13. Vue的常見面試題

1) v-show 與 v-if  區別

(1) v-show只是CSS級別的 display: none； 和 display: block；之間的切換，而v-if 決定是否會選擇代碼塊的內容（或組件）

(2) 何時用v-show ， 何時用v-if ?

頻繁操做時，使用v-show。 一次性渲染完的，使用v-if 。

(3) 使用v-if 在性能優化上有什麼經驗？

由於當v-if="false"時，內部組件是不會渲染的，因此在特定條件才渲染部分組件（或內容）時，能夠先將條件

設置爲false，須要時（或異步，好比 $nextTick) 再設置爲true，這樣能夠優先渲染重要的其餘內容，合理利用，

能夠進行性能優化。

 

參考：https://blog.csdn.net/sinat_17775997/article/details/89486519

 

 

 

 

參考： https://blog.csdn.net/fabulous1111/article/details/73431382