?

渲染數據的四種方式：

?

1、字符串拼接

　　　案例：

　　　　

·　　? 字符串拼接的優點：只進行一次Dom回流? ? ? ? 缺點：原有Dom的事件都會丟失

　　? 原因：innerHTML? ? 這個屬性返回或設置Dom中的內容 ，以字符串返回，所以這些onmouse 系列事件就會消失。

　　（補充：DOM 回流? ?：? 每當對Dom元素進行增刪改的時候，瀏覽器會重新加載一個，把新的頁面渲染出來）

　　2、Dom循環

　　案例：

　　　　

　　Dom循環? ? 優點： 原有Dom身上的事件不會丟失，不會影響其他Dom? ? ? 缺點： dom回流次數過多，嚴重影響網頁性能

·　　3、模板

　　　　模板的本質就是字符串拼接

　　　4、文檔碎片

　　　　案例

　　　　

　　　　文檔碎片? ? ?優點：既不影響原有Dom屬性? ?，也只回流一次

?

?如何保證新增的元素有之前元素的事件，采用事件委托

事件委托的原理： 事件冒泡機制 但并不是所有的事件都有冒泡機制? ?比如? ? onmouseenter? ? ?onmouseleave? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

示范：

　　

　　

　　

　　顯示出來的頁面?

　　　　

轉載于:https://www.cnblogs.com/lyhzyy6-12/p/10534756.html

總結

以上是生活随笔為你收集整理的渲染数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。