?

渲染數(shù)據(jù)的四種方式：

?

1、字符串拼接

　　　案例：

　　　　

·　　? 字符串拼接的優(yōu)點(diǎn)：只進(jìn)行一次Dom回流? ? ? ? 缺點(diǎn)：原有Dom的事件都會(huì)丟失

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

　　（補(bǔ)充：DOM 回流? ?：? 每當(dāng)對(duì)Dom元素進(jìn)行增刪改的時(shí)候，瀏覽器會(huì)重新加載一個(gè)，把新的頁(yè)面渲染出來(lái)）

　　2、Dom循環(huán)

　　案例：

　　　　

　　Dom循環(huán)? ? 優(yōu)點(diǎn)： 原有Dom身上的事件不會(huì)丟失，不會(huì)影響其他Dom? ? ? 缺點(diǎn)： dom回流次數(shù)過(guò)多，嚴(yán)重影響網(wǎng)頁(yè)性能

·　　3、模板

　　　　模板的本質(zhì)就是字符串拼接

　　　4、文檔碎片

　　　　案例

　　　　

　　　　文檔碎片? ? ?優(yōu)點(diǎn)：既不影響原有Dom屬性? ?，也只回流一次

?

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

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

示范：

　　

　　

　　

　　顯示出來(lái)的頁(yè)面?

　　　　

轉(zhuǎn)載于:https://www.cnblogs.com/lyhzyy6-12/p/10534756.html

總結(jié)

以上是生活随笔為你收集整理的渲染数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。