面的兩個問題還是比較常問到的, 希望大家能夠好好的記憶一下。

1. 什么是 回流(reflow)? 重繪(repaint)?

1-1. 回流 的核心概念:
     1. 當(dāng) render Tree 中的一部分(或者全部) 因元素的 規(guī)模尺寸 、 布局 、 隱藏 等改變而需要重新構(gòu)建, 這就稱為回流 。
     2. 當(dāng)頁面 布局和集合屬性 改變時就需要回流 。
1-2. 回流詳細(xì)解析:
     1. 回流更多的是涉及到頁面元素大小的變化, 尺寸的變化, 布局的變化, 這些核心概念變化的時候, 會觸發(fā)回流 。
     2. 實例: 網(wǎng)站的懶加載, 在下滑的時候會有圖片增加到我們的 dom Tree 上, 這就是典型的一種 Render Tree 在動態(tài)過程中它的布局改變 。
     3. 實例: 對圖片做一些特殊的效果, 如鼠標(biāo)放上變大, 這種場景圖片大小的變化, 也是會觸發(fā)回流的 。

     
2-1. 重繪的核心概念:
     1. 當(dāng) render Tree 中的一些元素需要更新屬性, 而這些屬性只是影響元素的外觀, 風(fēng)格, 而不會影響布局, 比如 background-color, 這就是重繪 。
2-2. 重繪詳細(xì)解析:
     1. 涉及重繪的時候, 不一定觸發(fā)回流; 回流是一定會觸發(fā)重繪的

     
3. 重繪與回流這些與瀏覽器本身也是有關(guān)系的 。
   1. 不同的瀏覽器渲染機(jī)制不一樣, 重繪與回流發(fā)生的情況也不一樣。

2. 那些 CSS 屬性會觸發(fā) "回流" ?

1. 觸發(fā)頁面重新布局的屬性:
   1. 盒模型相關(guān)的屬性會觸發(fā)重新布局 。
      1. width
      2. height
      3. padding
      4. margin
      5. display
      6. boeder-width
      7. border
      8. min-height
   2. 定位屬性以及浮動也會觸發(fā)重新布局 。
      1. top
      2. bottom
      3. left
      4. right
      5. position
      6. float
      7. clear
   3. 改變節(jié)點內(nèi)部文字結(jié)構(gòu)也會觸發(fā)重新布局 。
      1. text-algin
      2. overflow-y    規(guī)定是否對內(nèi)容的上/下邊緣進(jìn)行裁剪 - 如果溢出元素內(nèi)容區(qū)域的話/ 滾輪
      3. font-weight
      4. overflow
      5. font-family
      6. line-height
      7. vertival-algin    設(shè)置元素的垂直對齊方式
      8. white-space   設(shè)置如何處理元素內(nèi)的空白
      9. font-size

3. 那些 CSS 屬性會觸發(fā) "重繪" ?

1. 那些 CSS 屬性會觸發(fā)重繪(只會觸發(fā)重繪不會觸發(fā)回流)?
   1. color
   2. border-style
   3. border-radius
   4. visibility   規(guī)定元素是否可見
   5. text-decoration    規(guī)定添加到文本的修飾
   6. background
   7. background-image
   8. background-position
   9. background-repeat
   10. background-size
   11. outline-color
   12. outline
   13. outline-style
   14. outline-width   設(shè)置元素整個輪廓的寬度
   15. box-shadow      陰影

這里就是一些概念性的內(nèi)容與需要加深記憶的內(nèi)容, 最好的方法就是每天都來看一遍。

之前有整理過部分知識點, 現(xiàn)在將整理的相關(guān)內(nèi)容, 驗證之后慢慢分享給大家; 這個專題是 "前端面試題" 的相關(guān)專欄; 大概會有200+的文章。

如果對大家有所幫助，可以點個關(guān)注、點個贊; 文章會持續(xù)打磨 。

有什么想要了解的前端知識, 可以在評論區(qū)留言, 會及時分享所相關(guān)內(nèi)容 。

種動態(tài)創(chuàng)建元素的區(qū)別

• document.write()
• element.innerHTML
• document.createElement()

區(qū)別

1.document.write是直接將內(nèi)容寫入頁面的內(nèi)容流，但是文檔流執(zhí)行完畢，則它會導(dǎo)致頁面全部重繪

2.innerHTML是將內(nèi)容寫入某個DOM節(jié)點，不會導(dǎo)致頁面全部重繪

3.innerHTML創(chuàng)建多個元素效率更高（不要拼接字符串，采取數(shù)組形式拼接），結(jié)構(gòu)稍微復(fù)雜（innerHTML采取數(shù)組形式拼接會快一點比createElement（）快）

4.createElement()創(chuàng)建多個元素效率稍低一點點，但是結(jié)構(gòu)更清晰

總結(jié):不同瀏覽器下，innerHTML效率要比creatElement高

動態(tài)生成表格案例分析

1. 因為里面的學(xué)生數(shù)據(jù)都是動態(tài)的，我們需要js動態(tài)生成。這里我們模擬數(shù)據(jù)，自己定義好數(shù)據(jù)。數(shù)據(jù)我們采取對象形式存儲。

2.所有的數(shù)據(jù)都是放到tbody里面的行里面。

3.因為行很多，我們需要循環(huán)創(chuàng)建多個行（對應(yīng)多少人）

源碼如下

效果圖如下