前端一些概念知識及參考鏈接
1、為什么瀏覽器解析 css 選擇器是從右到左的
參考：https://github.com/zwwill/blog/issues/2
2、偽元素和偽類的單冒號和雙冒號
2.1、偽類（:）
偽類是用于定義元素特殊狀態的。
示例：
//未訪問的連接 a:link{ color:black; }; //已訪問的連接 a:visited{ color:gray; }; //鼠標懸浮在鏈接上 a:hover{ color:red; }; //已選擇的鏈接 a:active{ color:blue; };
2.2、偽元素（::）
CSS共右5個偽元素,分別是：
- ::before 在元素之前插入內容
- ::after 在元素之后插入內容
- ::first-letter 選取首個字母
- ::first-line 選取元素首行
- ::selection 匹配被用戶選取的部分
3、重排（Reflow）和重繪（Repaint）
當渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀、風格，而不會影響布局的操作，比如 background -color，我們將這樣的操作稱為重繪。
當渲染樹中的一部分（或全部）因為元素的規模尺寸、布局、隱藏等改變而需要重新構建的操作，會影響到布局的操作，這樣 的操作我們稱為重排。
任何會改變元素幾何信息（元素的位置和尺寸大小）的操作，都會觸發重排。
添加或者刪除可見的 DOM 元素；元素尺寸改變——邊距、填充、邊框、寬度和高度內容變化，比如用戶在 input 框中輸入文字瀏覽器窗口尺寸改變——resize事件發生時計算 offsetWidth 和 offsetHeight 屬性設置 style 屬性的值當你修改網頁的默認字體時。
重排必定會引發重繪，但重繪不一定會引發重排。重排所需的成本比重繪高的多，改變父節點里的子節點很可能會導致父節點的一系列重排。
3.1、如何避免重排和重繪
避免措施：
- 使用 visibility 代替 display:hidden、none。
- 使用 absolute 或 fixed 脫離文檔流。
- 使用 class 去修改樣式，減少直接操作 dom 元素。
- 盡量減少 table使用，table 屬性的變化會直接導致布局重排或者重繪。
4、JS操作動畫和css動畫的區別
參考：https://blog.csdn.net/qinlulucsdn/article/details/80664183、http://www.rzrgm.cn/simba-lkj/p/6139066.html
5、CSS選擇器優先級
!important > 行內樣式 > ID選擇器 > 類 = 偽類 = 屬性選擇器 > 標簽 = 偽元素 > 通配符 > 繼承
為什么CSS是從右到左解析的，參考：http://www.rzrgm.cn/zhaodongyu/p/3341080.html
6、BFC布局規則
BFC，即塊級格式化上下文（Block Formatting Context，簡稱BFC），獨立渲染區域，不會影響邊界外的元素。可以理解為按照塊級元素從上到下，行內元素從左到右的規則布局。
擁有 BFC 元素的塊級子元素符合 BFC 規則，屬于同一個BFC內的塊級元素的布局符合 BFC 布局規則。
BFC 元素內的塊級子元素也可以是一個 BFC，該子元素還是會符合BFC父元素的布局規則，但該子元素里面的子元素即子子元素就和外面的BFC的子元素不屬于同一個BFC了。
下面的第一個P元素和第二個P元素不屬于同一個 BFC 內：
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
.wrap {
overflow: hidden;
}
6.1、擁有 BFC 元素具有的特性
BFC 元素的特性如下：
- 內部的 Box 會在垂直方向，一個接一個地放置。
- 盒子垂直方向的距離由margin決定。同一個BFC的兩個相鄰盒子margin會重疊
- BFC中，margin-left會觸碰到border-left（對于從左至右的方式，反之）
- BFC 區域不會與浮動的盒子產生交集，而是緊貼邊緣浮動
- 計算BFC高度時，會自動檢測浮動的盒子高度
6.2、擁有BFC的元素
滿足下列條件之一該元素即擁有 BFC 特性：
- 根元素 html
- 脫離文檔流：float 屬性不為 none
- position為 absolute 或 fixed
- display 為 inline-block, table-cell, table-caption, flex, inline-flex
- overflow 不為 visible
6.3、BFC的作用
- 解決外邊距合并問題
- 解決因子元素浮動而父元素高度塌陷的問題。父元素設置為BFC可以清除子元素的浮動（最常用overflow: hidden，在IE6上需加上*zoom:1），因為計算BFC高度時會檢測浮動子盒子高度
- 右側盒子自適應：BFC區域不會與浮動盒子產生交集，而是緊貼浮動邊緣
7、瀏覽器前綴
參考：https://blog.csdn.net/jlj_cs/article/details/44204863
8、css性能優化
8.1、慎重選擇高消耗的樣式
高消耗屬性在繪制前需要瀏覽器進行大量計算，比如：box-shadows、border-radius、transparency、transforms、CSS filters（性能殺手）
8.2、避免頻繁重排
當發生重排的時候，瀏覽器需要重新計算布局位置與大小，常見的重排元素：width、height、padding、margin、display、border-width、position、top、left、right、bottom、
8.3、不泛濫使用float
Float在渲染時計算量比較大，盡量減少使用。
8.4、合理使用選擇器
CSS選擇器的匹配是從右向左進行的，所以有些看似很高效的選擇器實際對性能消耗很高，比如：
#header>a {font-size: bold} 子選擇器，瀏覽器必須遍歷頁面中所有的 a 元素并且確定其父元素的 id 是否為 header 。
#header a {font-size: bold} 后代選擇器開銷更大，在遍歷頁面中所有 a 元素后還需向其上級遍歷直到根節點。
所以應該合理使用選擇器：
- 保持簡單，不要使用嵌套過多過于復雜的選擇器。
- 通配符和屬性選擇器效率最低，需要匹配的元素最多，盡量避免使用。
- 避免使用標簽或 class 選擇器限制 id 選擇器
- 不要為了追求速度而放棄可讀性與可維護性。
8.5、通過CSS繼承減少代碼量
常見的可以繼承的屬性比如：color，字體font系列，visibility，文本系列text-indent、text-align等等。
不可繼承的比如：position，display，float，background等
8.6、使用link加載樣式表，而不是@import方式
使用@import引入CSS會影響瀏覽器對樣式表的并行下載。使用@import引用的CSS文件只有在引用它的那個css文件被下載、解析之后，瀏覽器才會知道還有另外一個css需要下載，這時才去下載，然后下載后開始解析、構建render tree等一系列操作。這就導致瀏覽器無法并行下載所需的樣式文件。
8.7、精簡樣式文件，刪除沒用樣式
參考：http://baijiahao.baidu.com/s?id=1603253323416106525&wfr=spider&for=pc
9、ASCII 、UTF-8、Unicode編碼的區別
ASCII 編碼是計算機一開始使用的編碼，用一個字節來表示一個字符。由于計算機是美國人發明的，因此，最早只有127個字符被編碼到計算機里，也就是大小寫英文字母、數字和一些符號。
后面為了統一各個國家的使用的編碼規則，Unicode應運而生。Unicode把所有語言都統一到一套編碼里，這樣就不會再有亂碼問題了。（亂碼問題主要是使用的編碼不同導致）
參考：http://www.rzrgm.cn/angelye/p/8249711.html#top
浙公網安備 33010602011771號