Home PC Games Linux Windows Database Network Programming Server Mobile  
           
  Home \ Programming \ High-performance JavaScript DOM programming     - Linux shared libraries .so file name and Dynamic Link (Linux)

- MySQL performance comparison of large amounts of data storage (Database)

- Lazarus IDE Start Basics Tutorial (Linux)

- To deploy MySQL database with separate read and write OneProxy (Database)

- Sniffer install applications in Linux supplement (Linux)

- Digital jQuery scrolling effect (Programming)

- CentOS7 install JDK (Linux)

- Security implementation of disk data protection under Linux (Linux)

- HBase Application Development Review and Summary of Series (Database)

- KVM usb passthrough configuration (Linux)

- A list of the basics of Python, Ganso, Dictionary (Programming)

- Perl said method B if A judge (Programming)

- Linux Timing task Crontab command Detailed (Linux)

- How to deploy Icinga server (Server)

- Oracle Automatic Diagnostic Repository (Automatic Diagnostic Repository, ADR) (Database)

- Ubuntu to install systems Indicator Sticky Notes 0.4.4 (Linux)

- Bash job control (Linux)

- Use the TC flow control test under Linux (Linux)

- Oracle online redefinition (Database)

- Installation configuration CUDA under Ubuntu 14.04 (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');
     
         
         
         
  More:      
 
- CentOS 6.5 installation Python3.0 (Linux)
- Graphical interface for the CentOS 6.4 installed and connected by remote VNC (Linux)
- Kafka + Log4j log implement centralized management (Server)
- Nginx multi-domain certificate HTTPS (Server)
- See how --nand flash timing diagram of a read operation Comments (Programming)
- Subquery Oracle study notes (Database)
- Share Practical Tutorial GitHub (Linux)
- Oracle RAC node on the expulsion of the inspection process on OEL6.3 (Database)
- Inherent limitations of Linux systems network security (Linux)
- Java Network Programming Internet address lookup (Programming)
- VMware installed Linux system and JDK deployment (Linux)
- How to use GRUB2 files directly from the hard disk to run ISO (Linux)
- Linux server data backup (Server)
- Under CentOS using yum command to install the Task Scheduler crontab (Linux)
- Parameters of the extra port MySQL 5.6 (Database)
- Oracle 11g maintenance partitions - Adding Partitions (Database)
- Ubuntu 14.04 / 13.10 users how to install Ubuntu Touch core applications (Linux)
- Create and modify Oracle temporary table space (Database)
- 127.0.0.1 and localhost difference (Server)
- Secondary exponential smoothing prediction method implemented in Python (Programming)
     
           
     
  CopyRight 2002-2020 newfreesoft.com, All Rights Reserved.