Rumah > hujung hadapan web > tutorial js > Contoh operasi pemecahan dokumen JavaScript analisis_javascript kemahiran

Contoh operasi pemecahan dokumen JavaScript analisis_javascript kemahiran

WBOY
Lepaskan: 2016-05-16 15:26:01
asal
1165 orang telah melayarinya

Artikel ini menganalisis kaedah pengendalian pemecahan dokumen JavaScript melalui contoh. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Menggunakan pemecahan dokumen boleh meningkatkan kecekapan halaman dalam beberapa kes.

Javascript pengendalian DOM adalah proses yang sangat intensif prestasi Dalam beberapa kes, operasi gelung DOM perlu dilakukan untuk mengurangkan operasi DOM sebanyak mungkin untuk mengurangkan "penyusunan semula".

Menghadapi proses operasi kitaran DOM, kami memilih untuk menggunakan serpihan dokumen (creatDocumentFragment), tambah kandungan yang perlu ditambahkan pada DOM ke dalam serpihan dokumen pada satu masa, dan kemudian tambahkan serpihan dokumen pada DOM pokok, supaya ia boleh berkesan Kurangkan bilangan operasi DOM.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文档碎片</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
</head>
<body>
<script>
  var temp = document.createDocumentFragment();//文档碎片(当把文档碎片付给某节点时,只是把文档碎片中的子节点付给了某节点,它本身并没有插入到这个节点中)
  for (var i=0; i<100; i++) {
    var test =document.createElement('div');//创建一个节点
    test.innerHTML = 'aaa' + i;//给节点添加内容
    temp.appendChild(test);//把创建的节点插入到temp文档中
  }
  document.body.appendChild(temp);//把temp文档插入到body末尾
</script>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan