bootsrap js slows down web page in IE

心已入冬 提交于 2019-12-23 23:18:10

问题


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.



来源:https://stackoverflow.com/questions/13473765/bootsrap-js-slows-down-web-page-in-ie

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!