js長列表渲染的三種方式

原始方法

每一次都重新觸發一次重排，效能很差，不建議使用

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
"box"
>
<
/ul>
console.
time()
let ul = document.
getelementbyid
('box'
)for
(let i =
0; i <
100000
; i++
) console.
timeend()
// 共計耗時：992.712890625ms
<
/script>
<
/body>
<
/html>

通過分頁載入的方式，提公升首次載入的速度

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
"box"
>
<
/ul>
console.
time()
let ul = document.
getelementbyid
('box'
)let total =
100000
let index =
0let pagesize =
2000
let totalpage = total / pagesize
function
insert
(curtotal, curindex)
settimeout((
)=>
insert
(curtotal - pagesize, curindex + pagesize)},
0);}
insert
(total, index)
console.
timeend()
<
/script>
<
/body>
<
/html>

極大地減少了重排的次數，提公升效能，推薦使用

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
"box"
>
<
/ul>
console.
time()
let ul = document.
getelementbyid
('box'
)function
insert
(curtotal, curindex)
ul.(frame)
insert
(curtotal -
2000
, curindex +
2000)}
)}insert
(100000,0
) console.
timeend()
// default: 0.424072265625ms
<
/script>
<
/body>
<
/html>

JS事件繫結三種方式

1.在html標籤中直接繫結 2.在js中獲取到相應的dom元素後繫結 重複繫結會覆蓋之前繫結的onclick事件let button1 document.getelementbyid btn1 button1.onclick function 3.在js中使用addeventlistener 實現...

JS繫結事件的三種方式

一.xhtml 繫結方式 type button onclick test type button onclick 若干句js 二.dom繫結方式 推薦 優點 內容和行為分離 dom物件.事件 事件處理函式 var btn1 document.getelementbyid btn1 btn1.onc...

JS非同步載入的三種方式

我們平時使用的最多的一種方式。同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，停止後續的解析，只有當當前載入完成，才能進行下一步操作。所以預設同步執行才是安全的。但這樣如果js中有輸出document內容 修改dom 重定向等行為，就會造成頁面堵塞。所以一般建議把 firefox 3.6 opera...