技術積累筆記

彈性盒模型（Flexible Box Moudle），該模型用於決定元素在盒子中的分佈方式以及處理盒子的可用空間

兼容性：

彈性盒模型規範是W3C標準化組織於2009年發佈的，目前尚未主流瀏覽器對其進行支持，不過採用Webkit和Mozilla渲染引擎的瀏覽器都自定義了一套私有屬性，用來支持彈性盒模型。

採用Webkit渲染引擎的瀏覽器主要包括Safari和Chrome瀏覽器，該引擎支持以-webkit爲前綴的私有屬性。

Mozilla渲染引擎的瀏覽器主要包括Firefox瀏覽器，該引擎支持以-moz爲前綴的私有屬性

相關屬性：

box-align：定義子元素在盒子垂直方向上的空間分配方式
box-direction：定義盒子的顯示順序
box-flex：定義子元素在盒子內的自適應尺寸
box-flex-group：定義自適應子元素羣組
box-lines：定義子元素分列顯示
box-ordinal-group:定義子元素在盒子內的顯示位置
box-orient:定義盒子分部的座標軸
box-pack：定義子元素在盒子內水平方向的空間分配方式

box-orient屬性

該屬性可用於定義盒子元素內部的流動佈局方向.在使用彈性盒子模型時，須要先把父容器的display屬性設置爲box或者inline-box。
語法：

box-orient：horizontal | vertail | inline-axis | block-axis | inherit

取值簡單說明：

horizontal：盒子元素從左到右在一條水平線上顯示它的子元素。

vertail：盒子元素從上到下在一條垂直線上顯示它的子元素。

inline-axis：盒子元素沿着內聯軸顯示它的子元素。

block-axis：盒子元素沿着塊軸顯示它的子元素。

React中setState同步和異步

在React內部機制能檢測到的地方， setState就是異步的；

在React檢測不到的地方，例如setInterval,setTimeout裏，setState就是同步更新的。

js es6 map 與 原生對象區別

區別

object和Map存儲的都是鍵值對組合。可是：

object的鍵的類型是 字符串；

map的鍵的類型是 能夠是任意類型；

另外注意，object獲取鍵值使用Object.keys（返回數組）；

Map獲取鍵值使用 map變量.keys() (返回迭代器)。

瀏覽器的迴流和重繪及其優化方式

瀏覽器的渲染原理

• css的加載和解析不會阻塞html文檔的解析
• css的解析會阻塞js的執行，必須等到CSSOM生成後才能執行js
• js的執行會阻塞html文檔的解析
• html一邊解析一邊顯示
• css必須徹底解析完畢才能進入生成渲染樹環節
  瀏覽器向服務器請求到了HTML文檔後便開始解析，產物是DOM Tree（文檔對象模型），若是有css，會根據css生成CSSOM（CSS對象模型），而後再由DOM和CSSOM合併產生Render Tree渲染樹，有了渲染樹，知道了全部節點的樣式，便根據這些節點以及樣式計算它們在瀏覽器中確切的大小和位置，這就是佈局。最後把節點繪製到瀏覽器上。

建立DOM樹—建立CSSOM樹—執行腳本—生成渲染樹—生成佈局—繪製

迴流

迴流(reflow)當render tree中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變時，網絡瀏覽器從新渲染部分或所有文檔的過程。

重繪

當頁面元素樣式改變不影響元素在文檔流中的位置時（如background-color，border-color，visibility），瀏覽器只會將新樣式賦予元素並進行從新繪製操做。

由於迴流(reflow)在瀏覽器中屬於一種用戶主導的模塊化操做，因此知道如何去改進迴流(reflow)時間以及知道各類文檔屬性（DOM節點深度，css的渲染效率，各類各樣的樣式改變）對迴流(reflow)時間的影響對於開發人員講是頗有幫助的。有時候，即便僅僅迴流一個單一的元素，也可能要求它的父元素以及任何跟隨它的元素也產生迴流。

什麼時候發生

有大量的用戶行爲以及潛在的DHTML改變會觸發迴流(reflow)。例如，改變瀏覽器窗口的大小，使用一些JavaScript方法，包括計算樣式，對DOM進行元素的添加或刪除，或是改變元素的class等。

1. 添加或者刪除可見的DOM元素；
2. 元素位置改變；
3. 元素尺寸改變——邊距、填充、邊框、寬度和高度
4. 內容變化，好比用戶在input框中輸入文字，文本或者圖片大小改變而引發的計算值寬度和高度改變
5. 頁面渲染初始化
6. 瀏覽器窗口尺寸改變——resize事件發生時
7. 計算 offsetWidth 和 offsetHeight 屬性
8. 設置 style 屬性的值

迴流必將引發重繪，而重繪不必定會引發迴流。

性能優化

迴流比重繪的代價要更高，迴流的花銷跟render tree有多少節點須要從新構建有關係;瀏覽器自己可以進行優化，儘量減小重繪和迴流。
若是每行JS代碼操做DOM都須要迴流重繪的話，瀏覽器可能就會受不了。因此不少瀏覽器都會優化這些操做，瀏覽器會維護1個隊列，把全部會引發迴流、重繪的操做放入這個隊列，等隊列中的操做到了必定的數量或者到了必定的時間間隔，瀏覽器就會flush隊列，進行一個批處理。這樣就會讓屢次的迴流、重繪變成一次迴流重繪。
當你請求向瀏覽器請求一些 style信息的時候，就會讓瀏覽器flush隊列，好比：

1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
5. 請求了getComputedStyle(), 或者 IE的 currentStyle

當你請求上面的一些屬性的時候，瀏覽器爲了給你最精確的值，須要flush隊列，由於隊列中可能會有影響到這些值的操做。即便你獲取元素的佈局和樣式信息跟最近發生或改變的佈局信息無關，瀏覽器都會強行刷新渲染隊列。

如何減小回流、重繪

var s = document.body.style; 

s.padding = "2px"; // 迴流+重繪

s.border = "1px solid red"; // 再一次 迴流+重繪

s.color = "blue"; // 再一次重繪

s.backgroundColor = "#ccc"; // 再一次 重繪

s.fontSize = "14px"; // 再一次 迴流+重繪

// 添加node，再一次 迴流+重繪
document.body.appendChild(document.createTextNode('abc!'));

///能夠看到每次DOM元素的樣式操做都會引起重繪，若是涉及佈局還會引起迴流。複製代碼

一. CSS中避免迴流

1. 儘量在DOM樹的最末端改變class
2. 避免設置多層內聯樣式
3. 動畫效果應用到position屬性爲absolute或fixed的元素上
4. 犧牲平滑度換取速度
5. 避免使用table佈局
6. 避免使用CSS的JavaScript表達式

二. JS操做避免迴流

1. 避免逐項更改樣式。最好一次性更改style屬性，或者將樣式列表定義爲class並一次性更改class屬性。
2. 避免循環操做DOM。建立一個documentFragment或div，在它上面應用全部DOM操做，最後再把它添加到window.document。
3. 也能夠在一個display:none的元素上進行操做，最終把它顯示出來。由於display:none上的DOM操做不會引起迴流和重繪。
4. 避免循環讀取offsetLeft等屬性。在循環以前把它們存起來。
5. 絕對定位具備複雜動畫的元素。絕對定位使它脫離文檔劉，不然會引發父元素及後續元素大量的迴流。