Question

我正在用ajax调用填充表。我可以通过再次调用ajax来重新加载表内容。初始请求需要50毫秒，但是任何后续请求都需要2秒钟来更新表。唯一的区别是该表在初始调用中为空。

这是一个包含许多行和嵌套表的表。该表容器首先将css display属性设置为“ none”，并且将body清空。

<div class="table-container">
    <table>
        <tbody>
        </tbody>
    </table>
</div>

表tbody在第一次调用之前为空。我从此开始，但随后的通话大约需要2秒钟才能加载。

function LoadData(dataFromAjax) {
    $('.table-container tbody').html(dataFromAjax);
    $('.table-wrapper').css('display','inline-block');
}

预先调用.empty（）可以解决此问题（加载时间为50-100ms），但是我不确定为什么需要这样做。

function LoadData(dataFromAjax) {
    $('.table-container tbody').empty();
    $('.table-container tbody').html(dataFromAjax);
    $('.table-wrapper').css('display','inline-block');
}

我想我已经准备好使用.html（）时jQuery首先清空目标元素的子级。我想念什么吗？

Answer 1

看看jQuery的innerHTML函数定义。尝试在所有现有元素上使用// See if we can take a shortcut and just use innerHTML ... try { for ( ; i < l; i++ ) { elem = this[ i ] || {}; // Remove element nodes and prevent memory leaks if ( elem.nodeType === 1 ) { jQuery.cleanData( getAll( elem, false ) ); elem.innerHTML = value; } } elem = 0; // If using innerHTML throws an exception, use the fallback method } catch ( e ) {} } if ( elem ) { // fallback code this.empty().append( value ); }进行迭代。我想这是所有时间都花在的地方：

'use strict'

var log = console.log.bind(console),
  id = val => document.getElementById(val),
  ul = id('ul'),
  gUMbtn = id('gUMbtn'),
  start = id('start'),
  stop = id('stop'),
  stream,
  recorder,
  counter = 1,
  chunks,
  media;



var mv = id('mediaVideo'),
  mediaOptions = {
    video: {
      tag: 'video',
      type: 'video/webm',
      ext: '.mp4',
      gUM: { video: true, audio: true }
    },
    audio: {
      tag: 'audio',
      type: 'audio/ogg',
      ext: '.ogg',
      gUM: { audio: true }
    }
  }



media = mediaOptions.audio;
navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {

  stream = _stream;
  id('btns').style.display = 'inherit';
  start.removeAttribute('disabled');
  recorder = new MediaRecorder(stream);

  recorder.ondataavailable = e => {
    chunks.push(e.data);
    let blob = new Blob(chunks, { type: media.type })
      , url = URL.createObjectURL(blob)
      , li = document.createElement('li')
      , mt = document.createElement(media.tag)
      , hf = document.createElement('a');

    if (recorder.state == 'inactive') makeLink(url, li, mt, hf);
    let reader = new FileReader();
    reader.addEventListener('load', e=>{
        var url = "http://localhost:8080/rest/api/v1/audio/submit";
        var payload = '{"recording":"'+reader.result+'"}';
        var xhttp = new XMLHttpRequest();
        xhttp.open("POST",url,true );
        xhttp.setRequestHeader('Content-Type', 'application/json');
        xhttp.send(payload);
    });
    reader.readAsDataURL(blob);
  };


}).catch(log);


start.onclick = e => {
  start.disabled = true;
  stop.removeAttribute('disabled');
  chunks = [];
  recorder.start();
}


stop.onclick = e => {
  stop.disabled = true;
  recorder.stop();
  start.removeAttribute('disabled');
}



function makeLink(url, li, mt, hf) {

  mt.controls = true;
  mt.src = url;
  hf.href = url;
  hf.download = `${counter++}${media.ext}`;
  hf.innerHTML = `${hf.href}`;
  li.appendChild(mt);
  li.appendChild(hf);
  ul.appendChild(li);


}

为什么在.html（）之前调用.empty（）更快？

1 个答案: