bootsrap js slows down web page in IE

问题:

I have developed one page in my site using twitter bootstrap. In that I have included below mentioned js of bootstrap.

bootstrap-transition.js
bootstrap-alert.js
bootstrap-modal.js
bootstrap-dropdown.js
bootstrap-scrollspy.js
bootstrap-tab.js
bootstrap-tooltip.js
bootstrap-popover.js
bootstrap-button.js
bootstrap-collapse.js
bootstrap-carousel.js
bootstrap-typeahead.js

This page is working fine in FF and chrome. when I open that page in IE and check any check box , it will take some time to check/uncheck that checkbox. and same thing happnes in case of dtropwown, it takes some time to expand/collapse dropdown.

So I removed one by one all bootstrap js, it started increasing performance. and when all bootstrap js was removed it started working fine same as other browser.

So is there any solution to solve this?

Thanks in advance.

回答1:

I was using jquery-1.8.1.min.js in my application.

And I resolved my issue by just replacing jquery-1.8.1.min.js with jquery-1.8.3.min.js

Now its working fine in all browser including IE.

回答2:

I'm skeptical that the quantity of JS is what is slowing you down. For example, are you getting the same poor performance when clicking buttons on the official Bootstrap docs page? I'm not.

Rather I'd suspect that you either have some conflict with other JS libraries, or you have something malformed about your markup which is causing one of the Bootstrap plugins to attach an abnormal amount of callbacks to the page.

One way to test the latter would be to mod the jQuery.on to print to the console when it gets called. Running the following after jQuery loads, but prior to the Bootstrap libraries would do the trick:

var old = jQuery.fn.on;
jQuery.fn.on = function (types) {
  console.log(types);
  return old.apply(this, arguments);
};

On the Bootstrap docs there are 50 listeners registered, mostly clicks.

Otherwise, on the quantity of JS, you should be using an aggregated and minified version of Bootstrap, like the one BootstrapCDN serves (bootstrap.min.js), instead all those separate files. Use those in development; use the minified in performance testing / production.