渲染資料
資料渲染:
字串拼接 dom建立 模板 文件碎片
dom回流：
案例：ul 下面有三個 li ，每個 li 有乙個onmouseover事件；
1，字串拼接（最常用）
var list = document.queryselector（ " . list " ）
var li = document.queryselectorall（ " li " ）
for (var i=0 ; i < li . length ; i ++){
li [i] . onmousemove = function(){
this.style.background="red"
li [i] . onmouseout= function(){
this.style.background=" "
var data=[ "aaa" , "bbb" , "ccc" ]
var st=" "
for(var m=0; mst+=""
st+=data[m]
st+="
list.innerhtml + = st ;
優點：只進行了一次dom回流；
缺點：原有dom事件都會丟失；
原因：就在於innerhtml這個屬性，這個屬性是返回或設定dom中的內容，以字串形式返回，拼接完之後是string型別，
而onmouse這些屬性是dom元素身上的，所以這些onmouse系列的屬性就丟失了；
2，dom拼接：
var list = document . queryselector（" . list " ）
var li = document . queryselectorall（" li "）
for (var i=0 ; i < li . length ; i ++){
li [i] . onmousemove = function(){
this.style.background="red"
li [i] . onmouseout= function(){
this.style.background=" "
var data=[ "aaa" , "bbb" , "ccc" ]
for(var m=0; m < data . length ; m++){
var lis = document . createelement（「 li 」）
lis . innerhtml= data[m]
優點：原有的dom身上的事件不會丟失，不影響其他dom
缺點：dom回流次數過多，嚴重影響網頁效能
3，模板：
他的本質就是字串拼接；
4，文件碎片：
var list = document . queryselector（" . list " ）
var li = document . queryselectorall（" li "）
for (var i=0 ; i < li . length ; i ++){
li [i] . onmousemove = function(){
this.style.background="red"
li [i] . onmouseout= function(){
this.style.background=" "
var data=[ "aaa" , "bbb" , "ccc" ]
var frag = createdocumentframent（）
for(var m = 0; m < data. length ; m++){
var lis = document.createelement（「li」）
lis . innerhtml = data [ m]
*事件委託：
利用事件冒泡原理
無論上面四種方法，新增的li沒有onmouseover事件，
如果保證新增的 li 也擁有新增事件，用dom遍歷新增事件是不行的，用事件委託；
如何渲染資料
一，如何渲染資料 什麼是渲染資料 簡單的說就是把後台資料渲染到頁面當中去。1.渲染資料的方式有四種 1 字串拼接 1.案例分析 原有的list中有三個li，並且每個li身上有onmouseover事件 2.字串拼接是最常用的方法 3.優點 只進行一次dom回流 4.缺點 原有dom的事件都會丟失 原...
如何動態渲染elementUI table的行和列
高階寫在最後 近日專案中遇到這樣乙個需求 需要動態渲染乙個列表的行和列，官網給出的例子大多是列寫死的，行動態生成的，但是如何實現動態渲染行和列呢？後來我查詢了一下實現了該功能，如下我將總結一下然後貼上 talk is cheap,show me the code retained datalist ...
echarts動態渲染資料及資料重複渲染問題解決
最近在用echarts時發現了問題，從後台獲取的資料不能渲染到頁面上，研究後發現渲染到頁面的資料和自己從後端獲取到後賦給的資料不同，分析得出其實echarts在頁面創造階段就進行了渲染，並且後期echart內部資料發生改變時不再進行二次渲染，思考過後我們採用深度監聽資料的方式，當資料發生改變時再次呼...