摘要：有不少前端開發工程師，可能并不清楚下面的部分詞語，但是在實戰中其實都在使用著它們。明確一下這些詞語和概念沒有什么不好一方面能夠讓自己能夠更專業的談論知識，另一方面，在面試的時候也能夠應對一些愛問前端名詞的面試官是的縮寫，表示的是萬維網聯盟。

有不少前端開發工程師，可能并不清楚下面的部分詞語，但是在實戰中其實都在使用著它們。

明確一下這些詞語和概念沒有什么不好~一方面能夠讓自己能夠更專業的談論知識，另一方面，在面試的時候也能夠應對一些“愛問前端名詞”的面試官~

W3C是World Wide Web Consortium的縮寫，表示的是“萬維網聯盟”。

W3C是WEB技術領域，國際中立性技術標準機構。主要工作是發展WEB規范。

什么是BFC

BFC是Block formatting context的縮寫，表示的是“塊級格式化上下文”。

設置BFC的元素/盒子，是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局（與該區域外部無關）。

BFC相關說明

在HTML當中，每個元素都可以看做一個盒子（BOX），而不同盒子的“展示”類型有所不同。

Formatting context是頁面中的一塊渲染區域，并且有一套渲染規則。它用來決定：其子元素將如何定位，以及和其他元素的關系和相互作用。

最常見的 Formatting context 有 ：

● Block fomatting context (簡稱BFC)；

● Inline formatting context (簡稱IFC)；

● CSS3 中新增 GFC 和 FFC。

為元素設置哪些屬性時，可以觸發BFC布局

● 設置float屬性（屬性值不為none）時；

● 設置position屬性為absolute或fixed；

● 設置display為inline-block, table-cell, table-caption, flex, inline-flex中的一種；

● 設置overflow屬性（屬性值不為visible）時。

BFC布局的規則

HTML5學堂（碼匠）：如下部分請細細咀嚼，想象平日設置浮動元素的場景，會更容易理解。

● Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊；

● BFC容器里面的子元素不會影響到外面的元素；

● 設置BFC的元素的內部元素，會在垂直方向一個接一個地放置；

● 每個設置BFC的元素的左側margin， 與包含塊（父元素）border的左邊相接觸（對于從左往右的格式化，否則相反），即使存在浮動也是如此；

● BFC的區域不與float元素相重疊；

● 計算BFC的高度時，浮動元素也參與計算。

BFC布局的觸發，用途有哪些

● 設置overflow: hidden來清除浮動；

● 通過設置浮動屬性，防止margin重疊。

什么是FOUC

FOUC是Flash Of Unstyled Content的縮寫，指的是加載網頁時出現的短暫的CSS樣式失效。

造成FOUC問題的原因是什么

文檔樣式閃爍成因：在IE5+瀏覽器中，如果IE的臨時文件夾沒有緩存過該頁面的CSS文件；出現了樣式表位置異常現象（使用import方法導入樣式表、將樣式表放在頁面底部、多個樣式表放置在html結構的不同位置等）

網頁會優先加載整個HTML文檔的DOM，然后再去導入外部的CSS文件，因此，在頁面DOM加載完成到CSS導入完成的過程中，會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關系。

什么是Hack

Hack，英文含義為“修改”。由于不同的瀏覽器對CSS的支持程度不同，同樣CSS的樣式代碼在不同瀏覽器當中的表現可能出現不一致。為了讓所有瀏覽器樣式統一，有時需要為某種瀏覽器設置不同于其他瀏覽器的“專屬樣式”。

Hack技術的原理

利用CSS中的優先級以及CSS Hack技術，來實現“不同瀏覽器”對應“不同CSS”的需求。

Hack的種類

CSS Hack主要針對IE瀏覽器，可以分為3種表現形式：

● 屬性前綴法：CSS屬性上添加Hack（*height: 300px;）；

● 選擇器前綴法：在選擇器上添加Hack（*html { }）；

● 條件注釋法：頭部引用Hack（）。

顯卡的處理器稱為圖形處理器（GPU），它是顯卡的“心臟”，與CPU類似，只不過GPU是專為執行復雜的數學和幾何計算而設計的。

默認情況下，網頁的渲染使用的是CPU。如果有了GPU來處理圖形任務，那么CPU就可以執行其他更多系統任務，從而提升計算機整體性能。

GPU加速的主要用途

主要用于CSS3技術中，提升二維動畫的渲染速度。

GPU加速的觸發方法

為動畫DOM元素添加如下CSS3樣式。

-webkit-transform:transition3d(0,0,0)；

-webkit-transform:translateZ(0);

兩種方法都會開啟GPU硬件加速模式，從而讓瀏覽器在渲染動畫時從CPU轉向GPU。

對于網頁效果來說，由于如上代碼中的值設置為0，因此，并沒有真正使用3D效果，但瀏覽器卻因此開啟了GPU硬件加速模式。

GPU加速的應用場景

● 涉及大量大尺寸圖片的動畫；

● 涉及大量DOM元素的CSS3動畫。

什么是CSS Sprite

CSS Sprite，也有人將其稱為CSS精靈，是一種網頁圖片應用處理方式。它允許將一個頁面涉及到的所有零星圖片都合并到一張大圖當中，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。

CSS Sprite的原理

CSS Sprite與Photoshop的背景圖合并一樣，就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的background-position屬性的進行背景定位。

什么是UA

UA是User Agent的縮寫。

UA是一個特殊字符串頭，使得服務器能夠識別客戶使用的操作系統及版本、CPU 類型、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等。

UA的用途

例如：檢測當前訪問設備的類型（移動設備還是桌端設備），并根據具體情況實現“重定向”。

haslayout是IE7-瀏覽器的特有屬性。hasLayout是一種只讀屬性，有兩種狀態：true或false。當其為true時，代表該元素有自己的布局，否則代表該元素的布局繼承于父元素。

[注意]通過element.currentStyle.hasLayout可以得出當前元素的hasLayout情況

HTML標簽
　　
默認觸發hasLayout的有如下HTML標簽
　　【1】html,body
　　【2】table,tr,th,td
　　【3】img
　　【4】hr
　　【5】input,button,select,textarea,fieldset
　　【6】frameset,frame,iframe

CSS屬性

可以觸發hasLayout的有如下CSS屬性：
　　【1】display:inline-block
　　【2】height/width:除了auto
　　【3】float:left/right
　　【4】position:absolute
　　【5】writing-mode(IE專有屬性，設置文本的垂直顯示):tb-rl
　　【6】zoom(IE專有屬性，設置或檢索對象的縮放比例):除了normal

XSS攻擊全稱跨站腳本攻擊，是為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫為XSS，XSS是一種在web應用中的計算機安全漏洞，它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。

MVVM

它采用雙向綁定（data-binding）：View的變動，自動反映在 ViewModel，反之亦然。Angular 和 Ember 都采用這種模式。

MVC模式的意思是，軟件可以分成三個部分:
視圖（View）：用戶界面。
控制器（Controller）：業務邏輯
模型（Model）：數據保存

各部分之間的通信方式如下:
View 傳送指令到 Controller
Controller 完成業務邏輯后，要求 Model 改變狀態
Model 將新的數據發送到 View，用戶得到反饋
所有通信都是單向的。

更多前端相關詞匯以后會相繼補充，歡迎多提建議