有不少前端開發工程師, 可能並不清楚下面的部分詞語, 但是在實戰中其實都在使用著它們。
明確一下這些詞語和概念沒有什麼不好~一方面能夠讓自己能夠更專業的談論知識, 另一方面, 在面試的時候也能夠應對一些“愛問前端名詞”的面試官~
W3C
W3C是World Wide Web Consortium的縮寫, 表示的是“萬維網聯盟”。
W3C是WEB技術領域, 國際中立性技術標準機構。 主要工作是發展WEB規範。
BFC
什麼是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。
為元素設置哪些屬性時,
● 設置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
FOUC是Flash Of Unstyled Content的縮寫, 指的是載入網頁時出現的短暫的CSS樣式失效。
造成FOUC問題的原因是什麼
文檔樣式閃爍成因:在IE5+流覽器中, 如果IE的暫存檔案夾沒有緩存過該頁面的CSS檔;出現了樣式表位置異常現象(使用import方法導入樣式表、將樣式表放在頁面底部、多個樣式表放置在html結構的不同位置等)
網頁會優先載入整個HTML文檔的DOM, 然後再去導入外部的CSS檔, 因此, 在頁面DOM載入完成到CSS導入完成的過程中, 會有一段時間頁面上的內容是沒有樣式的, 這段時間的長短跟網速, 電腦速度都有關係。
Hack
什麼是Hack
Hack, 英文含義為“修改”。 由於不同的流覽器對CSS的支持程度不同,
Hack技術的原理
利用CSS中的優先順序以及CSS Hack技術, 來實現“不同流覽器”對應“不同CSS”的需求。
Hack的種類
CSS Hack主要針對IE流覽器, 可以分為3種表現形式:
● 屬性首碼法:CSS屬性上添加Hack(*height: 300px;);
● 選擇器首碼法:在選擇器上添加Hack(*html { });
● 條件注釋法:頭部引用Hack()。
GPU
GPU – 碼匠
什麼是GPU
顯卡的處理器稱為圖形處理器(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 Sprite,也有人將其稱為CSS精靈,是一種網頁圖片應用處理方式。它允許將一個頁面涉及到的所有零星圖片都合併到一張大圖當中,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
CSS Sprite的原理
CSS Sprite與Photoshop的背景圖合併一樣,就是把網頁中一些背景圖片整合到一張圖片檔中,再利用CSS的background-position屬性的進行背景定位。
UA
什麼是UA
UA是User Agent的縮寫。
UA是一個特殊字串頭,使得伺服器能夠識別客戶使用的作業系統及版本、CPU 類型、流覽器及版本、流覽器渲染引擎、流覽器語言、流覽器外掛程式等。
UA的用途
例如:檢測當前訪問設備的類型(移動設備還是桌端設備),並根據具體情況實現“重定向”。
更多前端相關詞彙
haslayout、XSS、strict、MVVM、MVC、SPA等,有心的同學自己去發掘。
GPU – 碼匠
什麼是GPU
顯卡的處理器稱為圖形處理器(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 Sprite,也有人將其稱為CSS精靈,是一種網頁圖片應用處理方式。它允許將一個頁面涉及到的所有零星圖片都合併到一張大圖當中,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
CSS Sprite的原理
CSS Sprite與Photoshop的背景圖合併一樣,就是把網頁中一些背景圖片整合到一張圖片檔中,再利用CSS的background-position屬性的進行背景定位。
UA
什麼是UA
UA是User Agent的縮寫。
UA是一個特殊字串頭,使得伺服器能夠識別客戶使用的作業系統及版本、CPU 類型、流覽器及版本、流覽器渲染引擎、流覽器語言、流覽器外掛程式等。
UA的用途
例如:檢測當前訪問設備的類型(移動設備還是桌端設備),並根據具體情況實現“重定向”。
更多前端相關詞彙
haslayout、XSS、strict、MVVM、MVC、SPA等,有心的同學自己去發掘。