Enquanto tentava determinar por que uma página estava demorando 20 segundos para carregar, encontrei um comportamento estranho no IE

O cenário é este.

Fiz uma chamada ajax, ela retorna e o retorno de chamada era algo como isto

$("#StoreDetailsContainer").html($(tableHtml));
var StoreDetailsTable = $("#StoreDetailsTable");
StoreDetailsTable.tablesorter({ sortList: [[0, 0]], cssChildRow: "SubTable" });
StoreDetailsTable.filtertable({ cssChildRow: "SubTable" });

No entanto, esse pedaço de código levou 20 anos para ser concluíd

Eu estava brincando, cronometrando as coisas e exibindo alertas entre os métodos e, de repente, demorou apenas 6s. Eu brinquei um pouco mais para descobrir que, se eu introduzir um atraso após o.html() call e, antes de tentar manipular o DOM, a página era renderizada MUITO mais rápido. Agora parece que isso

$("#StoreDetailsContainer").html($(tableHtml));
window.setTimeout(function() {
    var StoreDetailsTable = $("#StoreDetailsTable");
    StoreDetailsTable.tablesorter({ sortList: [[0, 0]], cssChildRow: "SubTable" });
    StoreDetailsTable.filtertable({ cssChildRow: "SubTable" });
}, 100);

Ele também leva apenas 6s, apesar de ter um décimo de segundo extra adicionado ao process

Minha teoria é que, porque o DOM não foi totalmente renderizado na tela pelo IE pelo.html() antes de tentar trabalhar com isso, há algum tipo de bloqueio acontecend

Existe uma maneira de determinar quando o IE terminou de renderizar o que foi adicionado ao DOM por.html(), então não preciso usar um valor arbitrário em umsetTimeout ligar