zoukankan      html  css  js  c++  java
  • [HTML 5] Using DocumentFragments

    DocumentFragment can create virtual dom tree. It can helps to avoid layout reflow.. problems

    Code has profermance problem:

    const data = ['Earth', 'Fire', 'Water', 'Air'];
    
    data.forEach(name => {
      const li = document.createElement('li');
      li.innerText = name;
      app.append(li);
    });

    Instead of each loop, we append one li tag, what we can do is accumlate all the li tags and append into DOM only once.

    const data = ['Earth', 'Fire', 'Water', 'Air'];
    
    const fragment = document.createDocumentFragment();
    
    data.forEach(name => {
      const li = document.createElement('li');
      li.innerText = name;
      fragment.append(li);
    });
    
    app.append(fragment);
  • 相关阅读:
    InterLockedIncrement and InterLockedDecrement
    bzoj2763
    bzoj1922
    bzoj1705
    bzoj1040
    bzoj3039
    bzoj1801
    bzoj2565
    bzoj1976
    一类最小割bzoj2127,bzoj2132 bzoj3438
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12535295.html
Copyright © 2011-2022 走看看