幾個前端工程師應當掌握的「詞語」

HTML5學堂-碼匠W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各種前端術語知多少? 有很多前端開發工程師,可能並不清楚下面的部分詞語,可是在實戰中其實都在使用着它們。
明確一下這些詞語和概念沒有什麼很差~一方面可以讓本身可以更專業的談論知識,另外一方面,在面試的時候也可以應對一些「愛問前端名詞」的面試官~html

W3C

W3C是World Wide Web Consortium的縮寫,表示的是「萬維網聯盟」。
W3C是WEB技術領域,國際中立性技術標準機構。主要工做是發展WEB規範。前端

clipboard.png

BFC

什麼是BFC

BFC是Block formatting context的縮寫,表示的是「塊級格式化上下文」。
設置BFC的元素/盒子,是一個獨立的渲染區域,只有Block-level box參與, 它規定了內部的Block-level Box如何佈局(與該區域外部無關)。web

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重疊。緩存

clipboard.png

FOUC

什麼是FOUC

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

形成FOUC問題的緣由是什麼

文檔樣式閃爍成因:在IE5+瀏覽器中,若是IE的臨時文件夾沒有緩存過該頁面的CSS文件;出現了樣式表位置異常現象(使用import方法導入樣式表、將樣式表放在頁面底部、多個樣式表放置在html結構的不一樣位置等)
網頁會優先加載整個HTML文檔的DOM,而後再去導入外部的CSS文件,所以,在頁面DOM加載完成到CSS導入完成的過程當中,會有一段時間頁面上的內容是沒有樣式的,這段時間的長短跟網速,電腦速度都有關係。ide

Hack

什麼是Hack

Hack,英文含義爲「修改」。因爲不一樣的瀏覽器對CSS的支持程度不一樣,一樣CSS的樣式代碼在不一樣瀏覽器當中的表現可能出現不一致。爲了讓全部瀏覽器樣式統一,有時須要爲某種瀏覽器設置不一樣於其餘瀏覽器的「專屬樣式」。佈局

Hack技術的原理

利用CSS中的優先級以及CSS Hack技術,來實現「不一樣瀏覽器」對應「不一樣CSS」的需求。

Hack的種類

CSS Hack主要針對IE瀏覽器,能夠分爲3種表現形式:
● 屬性前綴法:CSS屬性上添加Hack(*height: 300px;);
● 選擇器前綴法:在選擇器上添加Hack(*html { });
● 條件註釋法:頭部引用Hack(<!--[if lt IE 8]-->)。

歡迎溝通交流~~~HTML5學堂(碼匠)

GPU

clipboard.png

什麼是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
面試中會提到的更多前端「專屬」詞彙,可查看「決勝前端」小程序中的專題
圖片描述

開開心心每一天

生活艱辛,代碼不易,可是,不要忘記微笑哦~!
clipboard.png

版權聲明:該圖來自「【美】莉茲·克里莫 (author)」的書籍《你今天真好看》《我能夠咬一口嗎》(我的很喜歡他的書~)

clipboard.png

clipboard.png

相關文章
相關標籤/搜索