JavaScript代码运行3-4秒并在此期间禁用浏览器

Question

I'm just wondering why my code takes so long with Internet Explorer 11. I have a PHP page which calls a function. That function returns a very long string. The string is actually JavaScript code which has 400 rows.

Let's assume the returned string is like this:

<script>
  document.getElementById('pka1').innerHTML = 'gddgdgd gsdg gdsgs';
  document.getElementById('pka2').innerHTML = 'gg gdsgdsggg gsg';
  document.getElementById('pka3').innerHTML = 'fdfd ffdsf dfss ff';
  ...
  document.getElementById('pka398').innerHTML = 'hfhhfd hdhfh fhdfd';
  document.getElementById('pka399').innerHTML = 'ggjggfgjgh h ffhfh';
  document.getElementById('pka400').innerHTML = 'fssfs ffsafsa eefg';
</script>

When that string has been returned, I use jQuery to run the code. The returned string is stored to variable named as data. So, I run the following command:

$('#pka').html(data);

After that Internet Explorer and other browsers will run the previous JavaScript code which consists of 400 rows and modifies the HTML code of 400 divs.

Mozilla Firefox does this very fast, but Internet Explorer spends too much times - even 3-4 seconds. While the script is running, the webpage is disabled (I do not know why) and I cannot click hyperlinks while the script is running. When using Firefox this takes 0.5 secs, but IE is very slow.

How could I speed up the process and make the page not to be disabled when a browser runs the JavaScript code from the div which id is pka?

Answer 1

While the script is running, the webpage is disabled (I do not know why) and I cannot click hyperlinks.

Simply because that's how it works.. Java script execution model makes the a function or code block runs to complete before it can process other..

So if there is a long one, user interaction will be blocked..

How could I speed up the process

Well, you have to rethink about the 400 divs.. this is too much. Also try to divide the change into functions as each function is processed alone. it will make it less laggy.

I am not sure about using web workers in manipulating the dom, if it's beneficial or even possible.