Home PC Games Linux Windows Database Network Programming Server Mobile  
  Home \ Programming \ High-performance JavaScript DOM programming     - Difference Docker mirror and containers (Server)

- Some problems and countermeasures Linux system calls exist (Linux)

- Share and show your code on GitHub (Linux)

- Increase Linux system security --chattr (Linux)

- How to network to share files between Windows, MAC and Linux (Linux)

- 7 extremely dangerous Linux commands (Linux)

- Hunk / Hadoop: Performance Best Practices (Server)

- iptables allow only specific ip address to access the specified port (Linux)

- Virt Related Command Summary (Linux)

- Linux scp remote file copy (Linux)

- Encrypted with GnuPG signature to verify the authenticity and integrity of downloaded file (Linux)

- Let your PHP 7 faster the Hugepage (Linux)

- Forgot Linux root password (Linux)

- What have we learn from the front-end application Nodejs (Programming)

- MongoDB Study Notes (1) - Install MongoDB on Windows systems (Database)

- OpenCV cvFindCornerSubPix () to find sub-pixel Corner (Programming)

- Linux 4.0+ kernel support for hardware switching module (HW Switch Offload) (Linux)

- Java class loading order (Programming)

- Security of data to create a safe .mdb database (Linux)

- How to add any of a Linux distribution beautiful fonts (Linux)

  High-performance JavaScript DOM programming
  Add Date : 2018-11-21      
  We know, for DOM applications manipulate XML documents and HTML interfaces, operating cost by DOM script is very expensive. There is apt analogy between the DOM and JavaScript (in this case ECMScript) each imagine an island, with a toll bridge connection between them, ECMAScript DOM each time you visit, every way bridge and pay the "toll" DOM access number, the more the higher the cost. Therefore, the recommended approach is to minimize the number of times the bridge, trying to stay in ECMAScript island. We can not do DOM interface, then how can we improve the efficiency of the program?

1, DOM access and modification

Access the DOM element at a price ( "toll" you know), the cost of modifying elements is expensive, because it causes the browser to recalculate the page geometry changes (rearrangements and redraw).

Of course, the worst case is to access or modify elements in a loop, look at the following two pieces of code:

var times = 15000;

// Code1
console.time (1);
for (var i = 0; i < times; i ++) {
  . Document.getElementById ( 'myDiv1') innerHTML + = 'a';
console.timeEnd (1);

// Code2
console.time (2);
var str = '';
for (var i = 0; i < times; i ++) {
  str + = 'a';
document.getElementById ( 'myDiv2') innerHTML = str.;
console.timeEnd (2);
The first run time is actually the second time a thousand times! (Chrome version 44.0.2403.130 m)

1: 2846.700ms
2: 1.046ms
Problems first piece of code that each loop iteration, the element will be accessed twice: once to read the innerHTML value, another rewrite it, that is to say, in each cycle bridge (rearrangement and weight painted in the next one to explain)! The results fully demonstrated that the number of visits DOM, the more the slower speed of the code. Therefore, to reduce the number of DOM access is minimized as much as possible to stay in ECMAScript this side processing.

2, HTML DOM traversing collection &

Another point is the energy operator DOM DOM traversal, we generally collect a set of HTML, such as using getElementsByTagName (), or use document.links like, I think we are not familiar with this. The results are collected in a collection of similar array, it is in a "real-time status" exists in real time, which means that when the underlying document object updates, it will be automatically updated. how to say? For very simple chestnuts:

< Body>
  < Ul id = 'fruit'>
    < Li> apple < / li>
    < Li> orange < / li>
    < Li> banana < / li>
  < / Ul>
< / Body>
< Script type = "text / javascript">
  var lis = document.getElementsByTagName ( 'li');
  var peach = document.createElement ( 'li');
  peach.innerHTML = 'peach';
  document.getElementById ( 'fruit') appendChild (peach).;

  console.log (lis.length); // 4
< / Script>
Which is inefficient source! Very simple, with the optimization of the operation of the array as a caching variable length on ok (read a set length than reading a normal array lengh much slower, because every time the query):

console.time (0);
var lis0 = document.getElementsByTagName ( 'li');
var str0 = '';
for (var i = 0; i < lis0.length; i ++) {
  str0 + = lis0 [i] .innerHTML;
console.timeEnd (0);

console.time (1);
var lis1 = document.getElementsByTagName ( 'li');
var str1 = '';
for (var i = 0, len = lis1.length; i < len; i ++) {
  str1 + = lis1 [i] .innerHTML;
console.timeEnd (1);
We look at performance improvement have?

0: 0.974ms
1: 0.664ms
When the length of a large collection of time (demo 1000), performance is still very obvious.

The "High-performance JavaScript" another proposed optimization strategy, it stated that "as through the array faster than iterating over collections, so if the first element in the collection are copied to the array, then access its properties will be faster," tested and did not find this a good law, so it is not superfluous, and test code as follows :( doubt please share with me Discussion)

console.time (1);
var lis1 = document.getElementsByTagName ( 'li');
var str1 = '';
for (var i = 0, len = lis1.length; i < len; i ++) {
  str1 + = lis1 [i] .innerHTML;
console.timeEnd (1);

console.time (2);
var lis2 = document.getElementsByTagName ( 'li');
var a = [];
for (var i = 0, len = lis2.length; i < len; i ++)
  a [i] = lis2 [i];

var str2 = '';
for (var i = 0, len = a.length; i < len; i ++) {
  str2 + = a [i] .innerHTML;
console.timeEnd (2);
Finally, this section two native DOM methods, querySelector () and querySelectorAll (), I believe everyone is familiar with the former returns an array (note that unlike the HTML set the return value will be the same as the dynamic changes), which returns a match the first element. Well, in fact, not all the time, its performance is better than the former set of HTML traversal.

console.time (1);
var lis1 = document.getElementsByTagName ( 'li');
console.timeEnd (1);

console.time (2);
var lis2 = document.querySelectorAll ( 'li');
console.timeEnd (2);

// 1: 0.038ms
// 2: 3.957ms
But because it is similar to CSS selection method, so do the combination choice, enhance efficiency, and convenient. For example, do the following combination of query:

var elements = document.querySelectorAll ( '# menu a');
var elements = document.querySelectorAll ( 'div.warning, div.notice');
- Performance comparison Fibonacci recursive and non-recursive (Programming)
- Some Linux networking tools you might not know (Linux)
- Android Studio Personalization (Linux)
- How to troubleshoot error java.lang.NoSuchMethodError (Programming)
- RocketMQ Message Queuing simple deployment (Linux)
- MongoDB 3.2 to upgrade from 3.0.7 (Database)
- Learning Linux coding style (Programming)
- Oracle VirtualBox Problem Solving Case (Linux)
- ASM Management - How to Rename diskgroup (Database)
- Install Apache streaming media services on CentOS 6.4 (Server)
- Unable to start the network after restart clone a virtual machine (Linux)
- Four levels of intrusion on Linux server and counter-measures (Linux)
- C ++ inheritance and derived (induction principle) (Programming)
- The Definitive Guide to Linux NAT network connection (Linux)
- MySQL multi-master multi-cluster deployment uses alive Galera (Database)
- How to create a binary distribution with Bash (Linux)
- mysqldump MySQL command-line tool (Database)
- Linux upgrade Glibc (Linux)
- Linux system Perl Lite netstat (Linux)
- To setup NOTRACK and TRACK of conntrack in iptables (Linux)
  CopyRight 2002-2022 newfreesoft.com, All Rights Reserved.