摘要：學(xué)堂碼匠各類前端術(shù)語知多少有不少前端開發(fā)工程師，可能并不清楚下面的部分詞語，但是在實戰(zhàn)中其實都在使用著它們。

HTML5學(xué)堂-碼匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各類前端術(shù)語知多少？ 有不少前端開發(fā)工程師，可能并不清楚下面的部分詞語，但是在實戰(zhàn)中其實都在使用著它們。
明確一下這些詞語和概念沒有什么不好~一方面能夠讓自己能夠更專業(yè)的談?wù)撝R，另一方面，在面試的時候也能夠應(yīng)對一些“愛問前端名詞”的面試官~

W3C是World Wide Web Consortium的縮寫，表示的是“萬維網(wǎng)聯(lián)盟”。
W3C是WEB技術(shù)領(lǐng)域，國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。主要工作是發(fā)展WEB規(guī)范。

BFC是Block formatting context的縮寫，表示的是“塊級格式化上下文”。
設(shè)置BFC的元素/盒子，是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局（與該區(qū)域外部無關(guān)）。

在HTML當(dāng)中，每個元素都可以看做一個盒子（BOX），而不同盒子的“展示”類型有所不同。
Formatting context是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則。它用來決定：其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。
最常見的 Formatting context 有 ：
● Block fomatting context (簡稱BFC)；
● Inline formatting context (簡稱IFC)；
● CSS3 中新增 GFC 和 FFC。

● 設(shè)置float屬性（屬性值不為none）時；
● 設(shè)置position屬性為absolute或fixed；
● 設(shè)置display為inline-block, table-cell, table-caption, flex, inline-flex中的一種；
● 設(shè)置overflow屬性（屬性值不為visible）時。

HTML5學(xué)堂（碼匠）：如下部分請細(xì)細(xì)咀嚼，想象平日設(shè)置浮動元素的場景，會更容易理解。
● Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊；
● BFC容器里面的子元素不會影響到外面的元素；
● 設(shè)置BFC的元素的內(nèi)部元素，會在垂直方向一個接一個地放置；
● 每個設(shè)置BFC的元素的左側(cè)margin， 與包含塊（父元素）border的左邊相接觸（對于從左往右的格式化，否則相反），即使存在浮動也是如此；
● BFC的區(qū)域不與float元素相重疊；
● 計算BFC的高度時，浮動元素也參與計算。

● 設(shè)置overflow: hidden來清除浮動；
● 通過設(shè)置浮動屬性，防止margin重疊。

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

文檔樣式閃爍成因：在IE5+瀏覽器中，如果IE的臨時文件夾沒有緩存過該頁面的CSS文件；出現(xiàn)了樣式表位置異常現(xiàn)象（使用import方法導(dǎo)入樣式表、將樣式表放在頁面底部、多個樣式表放置在html結(jié)構(gòu)的不同位置等）
網(wǎng)頁會優(yōu)先加載整個HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁面DOM加載完成到CSS導(dǎo)入完成的過程中，會有一段時間頁面上的內(nèi)容是沒有樣式的，這段時間的長短跟網(wǎng)速，電腦速度都有關(guān)系。

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

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

CSS Hack主要針對IE瀏覽器，可以分為3種表現(xiàn)形式：
● 屬性前綴法：CSS屬性上添加Hack（*height: 300px;）；
● 選擇器前綴法：在選擇器上添加Hack（*html { }）；
● 條件注釋法：頭部引用Hack（）。

歡迎溝通交流~~~HTML5學(xué)堂（碼匠）

顯卡的處理器稱為圖形處理器（GPU），它是顯卡的“心臟”，與CPU類似，只不過GPU是專為執(zhí)行復(fù)雜的數(shù)學(xué)和幾何計算而設(shè)計的。
默認(rèn)情況下，網(wǎng)頁的渲染使用的是CPU。如果有了GPU來處理圖形任務(wù)，那么CPU就可以執(zhí)行其他更多系統(tǒng)任務(wù)，從而提升計算機(jī)整體性能。

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

為動畫DOM元素添加如下CSS3樣式。
-webkit-transform:transition3d(0,0,0)；
-webkit-transform:translateZ(0);
兩種方法都會開啟GPU硬件加速模式，從而讓瀏覽器在渲染動畫時從CPU轉(zhuǎn)向GPU。
對于網(wǎng)頁效果來說，由于如上代碼中的值設(shè)置為0，因此，并沒有真正使用3D效果，但瀏覽器卻因此開啟了GPU硬件加速模式。

● 涉及大量大尺寸圖片的動畫；
● 涉及大量DOM元素的CSS3動畫。

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

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

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

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

haslayout、XSS、strict、MVVM、MVC、SPA
面試中會提到的更多前端“專屬”詞匯，可查看“決勝前端”小程序中的專題

生活艱辛，代碼不易，但是，不要忘記微笑哦~！

版權(quán)聲明：該圖來自“【美】莉茲·克里莫 (author)”的書籍《你今天真好看》《我可以咬一口嗎》（個人很喜歡他的書~）