如何渲染資料

2022-09-23 19:24:10 字數 743 閱讀 1486

一,如何渲染資料

什麼是渲染資料:簡單的說就是把後台資料渲染到頁面當中去。

1.渲染資料的方式有四種

(1)字串拼接

1.案例分析 原有的list中有三個li,並且每個li身上有onmouseover事件

2.字串拼接是最常用的方法

3.優點:只進行一次dom回流

4.缺點:原有dom的事件都會丟失

原因:就在與 innerhtml 這個屬性,這個屬性是返回或設定dom中的內容,以字串形式返回,拼接完之後是string型別,而onmouse這些屬性是dom元素物件身上的,所以這些onmouse系列屬性就會丟失了。

(2)dom迴圈

優點:原因的dom身上的事件不會丟失,不影響其它dom

缺點:回流次數過多,嚴重影響效能

(3)模板

模板的本質就是字串

(4)文件碎片

優點:既不影響原有dom的屬性,也只回流一次

什麼是dom回流:每當對dom 元素進行 增添 查改的時候瀏覽器就會重新載入乙個,

把新的結果給渲染出來

這四種方法新增的li沒有onmouseover事件,如何保證新增的li也擁有新增事件,用dom遍歷新增是不行的,要用事件委託。

什麼是事件委託:當給子元素身上繫結大量的相同事件,盡量採用事件委託,把子元素身上的相同事件委託給父級。

事件委託:利用的原理就是事件冒泡機制,但並不是所有的事件都有冒泡機制,比如onmouseinter,onmousele**e

如何渲染資料

渲染資料 資料渲染 字串拼接 dom建立 模板 文件碎片 dom回流 案例 ul 下面有三個 li 每個 li 有乙個onmouseover事件 1,字串拼接 最常用 var list document.queryselector list var li document.queryselector...

如何動態渲染elementUI table的行和列

高階寫在最後 近日專案中遇到這樣乙個需求 需要動態渲染乙個列表的行和列,官網給出的例子大多是列寫死的,行動態生成的,但是如何實現動態渲染行和列呢?後來我查詢了一下實現了該功能,如下我將總結一下然後貼上 talk is cheap,show me the code retained datalist ...

echarts動態渲染資料及資料重複渲染問題解決

最近在用echarts時發現了問題,從後台獲取的資料不能渲染到頁面上,研究後發現渲染到頁面的資料和自己從後端獲取到後賦給的資料不同,分析得出其實echarts在頁面創造階段就進行了渲染,並且後期echart內部資料發生改變時不再進行二次渲染,思考過後我們採用深度監聽資料的方式,當資料發生改變時再次呼...