摘要：有不少前端開(kāi)發(fā)工程師，可能并不清楚下面的部分詞語(yǔ)，但是在實(shí)戰(zhàn)中其實(shí)都在使用著它們。明確一下這些詞語(yǔ)和概念沒(méi)有什么不好一方面能夠讓自己能夠更專(zhuān)業(yè)的談?wù)撝R(shí)，另一方面，在面試的時(shí)候也能夠應(yīng)對(duì)一些愛(ài)問(wèn)前端名詞的面試官是的縮寫(xiě)，表示的是萬(wàn)維網(wǎng)聯(lián)盟。

有不少前端開(kāi)發(fā)工程師，可能并不清楚下面的部分詞語(yǔ)，但是在實(shí)戰(zhàn)中其實(shí)都在使用著它們。

明確一下這些詞語(yǔ)和概念沒(méi)有什么不好~一方面能夠讓自己能夠更專(zhuān)業(yè)的談?wù)撝R(shí)，另一方面，在面試的時(shí)候也能夠應(yīng)對(duì)一些“愛(ài)問(wèn)前端名詞”的面試官~

W3C是World Wide Web Consortium的縮寫(xiě)，表示的是“萬(wàn)維網(wǎng)聯(lián)盟”。

W3C是WEB技術(shù)領(lǐng)域，國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。主要工作是發(fā)展WEB規(guī)范。

什么是BFC

BFC是Block formatting context的縮寫(xiě)，表示的是“塊級(jí)格式化上下文”。

設(shè)置BFC的元素/盒子，是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局（與該區(qū)域外部無(wú)關(guān)）。

BFC相關(guān)說(shuō)明

在HTML當(dāng)中，每個(gè)元素都可以看做一個(gè)盒子（BOX），而不同盒子的“展示”類(lèi)型有所不同。

Formatting context是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則。它用來(lái)決定：其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。

最常見(jiàn)的 Formatting context 有 ：

● Block fomatting context (簡(jiǎn)稱(chēng)BFC)；

● Inline formatting context (簡(jiǎn)稱(chēng)IFC)；

● CSS3 中新增 GFC 和 FFC。

為元素設(shè)置哪些屬性時(shí)，可以觸發(fā)BFC布局

● 設(shè)置float屬性（屬性值不為none）時(shí)；

● 設(shè)置position屬性為absolute或fixed；

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

● 設(shè)置overflow屬性（屬性值不為visible）時(shí)。

BFC布局的規(guī)則

HTML5學(xué)堂（碼匠）：如下部分請(qǐng)細(xì)細(xì)咀嚼，想象平日設(shè)置浮動(dòng)元素的場(chǎng)景，會(huì)更容易理解。

● Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊；

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

● 設(shè)置BFC的元素的內(nèi)部元素，會(huì)在垂直方向一個(gè)接一個(gè)地放置；

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

● BFC的區(qū)域不與float元素相重疊；

● 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

BFC布局的觸發(fā)，用途有哪些

● 設(shè)置overflow: hidden來(lái)清除浮動(dòng)；

● 通過(guò)設(shè)置浮動(dòng)屬性，防止margin重疊。

什么是FOUC

FOUC是Flash Of Unstyled Content的縮寫(xiě)，指的是加載網(wǎng)頁(yè)時(shí)出現(xiàn)的短暫的CSS樣式失效。

造成FOUC問(wèn)題的原因是什么

文檔樣式閃爍成因：在IE5+瀏覽器中，如果IE的臨時(shí)文件夾沒(méi)有緩存過(guò)該頁(yè)面的CSS文件；出現(xiàn)了樣式表位置異?，F(xiàn)象（使用import方法導(dǎo)入樣式表、將樣式表放在頁(yè)面底部、多個(gè)樣式表放置在html結(jié)構(gòu)的不同位置等）

網(wǎng)頁(yè)會(huì)優(yōu)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁(yè)面DOM加載完成到CSS導(dǎo)入完成的過(guò)程中，會(huì)有一段時(shí)間頁(yè)面上的內(nèi)容是沒(méi)有樣式的，這段時(shí)間的長(zhǎng)短跟網(wǎng)速，電腦速度都有關(guān)系。

什么是Hack

Hack，英文含義為“修改”。由于不同的瀏覽器對(duì)CSS的支持程度不同，同樣CSS的樣式代碼在不同瀏覽器當(dāng)中的表現(xiàn)可能出現(xiàn)不一致。為了讓所有瀏覽器樣式統(tǒng)一，有時(shí)需要為某種瀏覽器設(shè)置不同于其他瀏覽器的“專(zhuān)屬樣式”。

Hack技術(shù)的原理

利用CSS中的優(yōu)先級(jí)以及CSS Hack技術(shù)，來(lái)實(shí)現(xiàn)“不同瀏覽器”對(duì)應(yīng)“不同CSS”的需求。

Hack的種類(lèi)

CSS Hack主要針對(duì)IE瀏覽器，可以分為3種表現(xiàn)形式：

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

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

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

顯卡的處理器稱(chēng)為圖形處理器（GPU），它是顯卡的“心臟”，與CPU類(lèi)似，只不過(guò)GPU是專(zhuān)為執(zhí)行復(fù)雜的數(shù)學(xué)和幾何計(jì)算而設(shè)計(jì)的。

默認(rèn)情況下，網(wǎng)頁(yè)的渲染使用的是CPU。如果有了GPU來(lái)處理圖形任務(wù)，那么CPU就可以執(zhí)行其他更多系統(tǒng)任務(wù)，從而提升計(jì)算機(jī)整體性能。

GPU加速的主要用途

主要用于CSS3技術(shù)中，提升二維動(dòng)畫(huà)的渲染速度。

GPU加速的觸發(fā)方法

為動(dòng)畫(huà)DOM元素添加如下CSS3樣式。

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

-webkit-transform:translateZ(0);

兩種方法都會(huì)開(kāi)啟GPU硬件加速模式，從而讓瀏覽器在渲染動(dòng)畫(huà)時(shí)從CPU轉(zhuǎn)向GPU。

對(duì)于網(wǎng)頁(yè)效果來(lái)說(shuō)，由于如上代碼中的值設(shè)置為0，因此，并沒(méi)有真正使用3D效果，但瀏覽器卻因此開(kāi)啟了GPU硬件加速模式。

GPU加速的應(yīng)用場(chǎng)景

● 涉及大量大尺寸圖片的動(dòng)畫(huà)；

● 涉及大量DOM元素的CSS3動(dòng)畫(huà)。

什么是CSS Sprite

CSS Sprite，也有人將其稱(chēng)為CSS精靈，是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。它允許將一個(gè)頁(yè)面涉及到的所有零星圖片都合并到一張大圖當(dāng)中，當(dāng)訪問(wèn)該頁(yè)面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了。

CSS Sprite的原理

CSS Sprite與Photoshop的背景圖合并一樣，就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的background-position屬性的進(jìn)行背景定位。

什么是UA

UA是User Agent的縮寫(xiě)。

UA是一個(gè)特殊字符串頭，使得服務(wù)器能夠識(shí)別客戶使用的操作系統(tǒng)及版本、CPU 類(lèi)型、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語(yǔ)言、瀏覽器插件等。

UA的用途

例如：檢測(cè)當(dāng)前訪問(wèn)設(shè)備的類(lèi)型（移動(dòng)設(shè)備還是桌端設(shè)備），并根據(jù)具體情況實(shí)現(xiàn)“重定向”。

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

[注意]通過(guò)element.currentStyle.hasLayout可以得出當(dāng)前元素的hasLayout情況

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

CSS屬性

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

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

MVVM

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

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

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

更多前端相關(guān)詞匯以后會(huì)相繼補(bǔ)充，歡迎多提建議