在切换javascript时，Chrome应用样式表的速度非常慢

Question

I have a piece of javascript to switch a page's stylesheet on a button click. It works fine and zippy in IE and Firefox but it's very very slow in Chrome. It takes about 30secs to re-render and that's on my development machine. The load time is just a few ms. I've tried this in angularjs using ng-href and binding the style sheet file name to a scope variable with poor results in Chrome. Then I included jquery and did it this way

 var sheetName = "Content/RPNCalc-" + sizes[size] + ".css";
  angular.element("link[rel='stylesheet']").attr("href", sheetName);

again that works dandy in IE & FF but takes about 30 secs in Chrome.

What's the best way to do this?

Thanks

Answer 1

In the end I did this as a directive called "active-sheet" and manipulated the "disabled" property. Works in IE FF & Chrome

  <link rel="stylesheet" type="text/css" active-sheet="small" href="Content/RPNCalc-small.css" />
    <link rel="stylesheet" type="text/css" active-sheet="big" href="Content/RPNCalc-big.css" />

link: function (scope, element, attrs) {
            scope.$on("sizeClick", function (_e, _size) {
               element.prop("disabled", _size != attrs.activeSheet);
            });
         }