CSS verursachen speziell in Firefox sehr hohe CPU-Auslastung durch "Recalculate Style"

dark_rider

Hallo zusammen,

leider verursachen bestimmte CSS-Anwendungen seit Jahren speziell in Firefox und ganz speziell in FF 57 eine enorm hohe CPU-Last durch massenhaftes "Recalculate Style" (Stil-Neuberechnung):
https://stackoverflow.com/questions/1377…mation-property
https://stackoverflow.com/questions/3456…-xorg-cpu-usage
https://stackoverflow.com/questions/4686…-high-cpu-usage

Bis FF 56 wurde die CPU-Last geringer (bei mir ca. 15%), mit FF 57 nun sprang sie leider wieder erheblich an (bei mir ca. 30%, wie es früher mit älteren FF-Versionen auch schon einmal war). Und das bei null Interaktion, wenn andere Websites auf demselben System gar keine Last verursachen (idle, CPU-Last 0-1%).

Deaktiviere ich auf betroffenen Seiten (z.B. einige Seiten von Amazon oder Google) CSS per Addon, sinkt die CPU-Last sofort ab. Allerdings erscheinen die Seiten dann nicht mehr vernünftig.

Möglicherweise hängt es mit HWA (Hardware Acceleration) zusammen, allerdings verwende ich die "empfohlenen Leistungseinstellungen" (mit HWA, falls verfügbar - habe allerdings "nur" interne Intel-Grafik im i7-6600U). Und auf einem Rechner mit dedizierter nVidia-Grafik ist es leider genauso.

Warum beanspruchen CSS speziell Firefox scheinbar so dermaßen extrem, während dies bei Chrome und Safari nicht so der Fall zu sein scheint, und auch nicht bei Edge?

Hängt dies möglicherweise mit "style flushes" zusammen?
https://developer.mozilla.org/en-US/Firefox/…s_style_flushes

dark_rider

Beispielsweise führen die beiden folgenden CSS-Dateien zu dauerhaft 30% CPU-Last, soeben bei der wechselseitigen De-/Reaktivierung im FF-Inspektor/CSS brachte dies FF 57 sogar zum Kompletthänger mit 40% CPU-Last:

JQueryUI_Datepicker_AUIBuild-aa61a66b120ce16c4a50eace62d0b9976d6cea04._V2_

Code

.ui-datepicker {
 width:17em;
 padding:.2em .2em 0;
 display:none
}
.ui-datepicker .ui-datepicker-header {
 position:relative;
 padding:.2em 0
}
.ui-datepicker .ui-datepicker-next,.ui-datepicker .ui-datepicker-prev {
 position:absolute;
 top:2px;
 width:1.8em;
 height:1.8em
}
.ui-datepicker .ui-datepicker-next-hover,.ui-datepicker .ui-datepicker-prev-hover {
 top:1px
}
.ui-datepicker .ui-datepicker-prev {
 left:2px
}
.ui-datepicker .ui-datepicker-next {
 right:2px
}
.ui-datepicker .ui-datepicker-prev-hover {
 left:1px
}
.ui-datepicker .ui-datepicker-next-hover {
 right:1px
}
.ui-datepicker .ui-datepicker-next span,.ui-datepicker .ui-datepicker-prev span {
 display:block;
 position:absolute;
 left:50%;
 margin-left:-8px;
 top:50%;
 margin-top:-8px
}
.ui-datepicker .ui-datepicker-title {
 margin:0 2.3em;
 line-height:1.8em;
 text-align:center
}
.ui-datepicker .ui-datepicker-title select {
 font-size:1em;
 margin:1px 0
}
.ui-datepicker select.ui-datepicker-month-year {
 width:100%
}
.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year {
 width:49%
}
.ui-datepicker table {
 width:100%;
 font-size:.9em;
 border-collapse:collapse;
 margin:0 0 .4em
}
.ui-datepicker th {
 padding:.7em .3em;
 text-align:center;
 font-weight:700;
 border:0
}
.ui-datepicker td {
 border:0;
 padding:1px
}
.ui-datepicker td a,.ui-datepicker td span {
 display:block;
 padding:.2em;
 text-align:right;
 text-decoration:none
}
.ui-datepicker .ui-datepicker-buttonpane {
 background-image:none;
 margin:.7em 0 0 0;
 padding:0 .2em;
 border-left:0;
 border-right:0;
 border-bottom:0
}
.ui-datepicker .ui-datepicker-buttonpane button {
 float:right;
 margin:.5em .2em .4em;
 cursor:pointer;
 padding:.2em .6em .3em .6em;
 width:auto;
 overflow:visible
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
 float:left
}
.ui-datepicker.ui-datepicker-multi {
 width:auto
}
.ui-datepicker-multi .ui-datepicker-group {
 float:left
}
.ui-datepicker-multi .ui-datepicker-group table {
 width:95%;
 margin:0 auto .4em
}
.ui-datepicker-multi-2 .ui-datepicker-group {
 width:50%
}
.ui-datepicker-multi-3 .ui-datepicker-group {
 width:33.3%
}
.ui-datepicker-multi-4 .ui-datepicker-group {
 width:25%
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
 border-left-width:0
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
 clear:left
}
.ui-datepicker-row-break {
 clear:both;
 width:100%;
 font-size:0
}
.ui-datepicker-rtl {
 direction:rtl
}
.ui-datepicker-rtl .ui-datepicker-prev {
 right:2px;
 left:auto
}
.ui-datepicker-rtl .ui-datepicker-next {
 left:2px;
 right:auto
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
 right:1px;
 left:auto
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
 left:1px;
 right:auto
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
 clear:right
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
 float:left
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group {
 float:right
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
 border-right-width:0;
 border-left-width:1px
}

Alles anzeigen

61MsShHyNCL._RC-11Fd9tJOdtL.css,21y5jWQoUML.css,31Q3id-QR0L.css,31eh5a4qZUL.css_

Code

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}body{min-height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%}pre{margin:0}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:active,a:hover{outline:0}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}abbr{border-bottom:0 none}img{max-width:100%;border:0}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}button,input{line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}input[type=search]{-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;vertical-align:top}body{padding:0;margin:0;background:#fff}.a-box-group>.a-box{margin-top:-1px;border-radius:0}.a-box-group>.a-box.a-first,.a-box-group>.a-box:first-child{border-radius:4px 4px 0 0;margin-top:0}.a-box-group>.a-box.a-first>.a-box-inner,.a-box-group>.a-box:first-child>.a-box-inner{border-radius:4px 4px 0 0}.a-box-group>.a-box .a-box-tab,.a-box-group>.a-box.a-last,.a-box-group>.a-box:last-child{border-radius:0 0 4px 4px}.a-box-group>.a-box .a-box-tab>.a-box-inner,.a-box-group>.a-box.a-last>.a-box-inner,.a-box-group>.a-box:last-child>.a-box-inner{border-radius:0 0 4px 4px}.a-box-group>.a-box.a-onlychild,.a-box-group>.a-box:only-child{border-radius:4px}.a-box-group>.a-box.a-onlychild>.a-box-inner,.a-box-group>.a-box:only-child>.a-box-inner{border-radius:4px}.a-box{display:block;border-radius:4px;border:1px #ddd solid;background-color:#fff}.a-box .a-box-inner{border-radius:4px;position:relative;padding:14px 18px}.a-box-thumbnail{display:inline-block}.a-box-thumbnail .a-box-inner{padding:0!important}.a-box-thumbnail .a-box-inner img{border-radius:4px}.a-box-title{overflow:hidden}.a-box-title .a-box-inner{overflow:hidden;padding:12px 18px 11px;background:#f0f0f0;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;background:#f3f3f3;background:-webkit-linear-gradient(top,#f8f8f8,#eee);background:linear-gradient(to bottom,#f8f8f8,#eee)}.a-box-title h4{text-transform:uppercase;font-size:11px;font-weight:700;color:#111;line-height:1}.a-box-title+.a-box{border-top-color:#d8d8d8}.a-box-tab{border-radius:0 0 4px 4px;margin-top:-1px}.a-addon-box-title{background-color:#3f6998;border-color:#3f6998;position:relative;overflow:visible}.a-addon-box-title .a-box-inner{padding:6px 14px;color:#fff;font-weight:700;text-align:center}.a-addon-box-title:after{border-style:dashed;border-width:6px;border-color:rgba(255,255,255,0);border-top:6px solid #3f6998;border-bottom-width:0;width:0;height:0;font-size:0;line-height:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);position:absolute;bottom:-7px;left:50%;margin-left:-3px;content:""}.a-text-center .a-box,.a-text-center .a-box-group{margin-left:auto;margin-right:auto}.a-box-inner>.a-box:only-of-type{margin:4px 0}.a-color-base-background{background-color:#fff!important}.a-color-alternate-background{background-color:#f3f3f3!important}.a-color-offset-background{background-color:#f6f6f6!important}.a-color-base{color:#111!important}.a-color-secondary{color:#555!important}.a-color-tertiary{color:#767676!important}.a-color-state{color:#c45500!important}.a-color-state.a-size-extra-large,.a-color-state.a-size-large,.a-color-state.a-size-medium.a-text-bold{color:#e77600!important}.a-color-link{color:#0066c0!important}.a-color-price{color:#b12704!important}.a-color-success{color:#008a00!important}.a-color-error{color:#d00!important}.a-color-attainable{color:#008a00!important}.a-row{width:100%}.a-row:after,.a-row:before{display:table;content:"";line-height:0;font-size:0}.a-row:after{clear:both}.a-ws div.a-column,div.a-column{margin-right:2%;float:left;min-height:1px;overflow:visible}td.a-span1,td.a-span10,td.a-span11,td.a-span12,td.a-span2,td.a-span3,td.a-span4,td.a-span5,td.a-span6,td.a-span7,td.a-span8,td.a-span9,th.a-span1,th.a-span10,th.a-span11,th.a-span12,th.a-span2,th.a-span3,th.a-span4,th.a-span5,th.a-span6,th.a-span7,th.a-span8,th.a-span9{float:none;margin-right:0}.a-span12 input{float:none;margin-right:0}.a-pull1,.a-pull10,.a-pull11,.a-pull12,.a-pull2,.a-pull3,.a-pull4,.a-pull5,.a-pull6,.a-pull7,.a-pull8,.a-pull9,.a-push1,.a-push10,.a-push11,.a-push12,.a-push2,.a-push3,.a-push4,.a-push5,.a-push6,.a-push7,.a-push8,.a-push9{position:relative}.a-row .a-span1,.a-ws .a-row .a-ws-span1{width:6.448%}.a-row .a-push1{left:8.448%}.a-row .a-pull1{left:-8.448%}td.a-span1,th.a-span1{width:8.68%;float:none!important}.a-row .a-span2,.a-ws .a-row .a-ws-span2{width:14.948%}.a-row .a-push2{left:16.948%}.a-row .a-pull2{left:-16.948%}td.a-span2,th.a-span2{width:17.43%;float:none!important}.a-row .a-span3,.a-ws .a-row .a-ws-span3{width:23.448%}.a-row .a-push3{left:25.448%}.a-row .a-pull3{left:-25.448%}td.a-span3,th.a-span3{width:26.18%;float:none!important}.a-row .a-span4,.a-ws .a-row .a-ws-span4{width:31.948%}.a-row .a-push4{left:33.948%}.a-row .a-pull4{left:-33.948%}td.a-span4,th.a-span4{width:34.93%;float:none!important}.a-row .a-span5,.a-ws .a-row .a-ws-span5{width:40.448%}.a-row .a-push5{left:42.448%}.a-row .a-pull5{left:-42.448%}td.a-span5,th.a-span5{width:43.68%;float:none!important}.a-row .a-span6,.a-ws .a-row .a-ws-span6{width:48.948%}.a-row .a-push6{left:50.948%}.a-row .a-pull6{left:-50.948%}td.a-span6,th.a-span6{width:52.43%;float:none!important}.a-row .a-span7,.a-ws .a-row .a-ws-span7{width:57.448%}.a-row .a-push7{left:59.448%}.a-row .a-pull7{left:-59.448%}td.a-span7,th.a-span7{width:61.18%;float:none!important}.a-row .a-span8,.a-ws .a-row .a-ws-span8{width:65.948%}.a-row .a-push8{left:67.948%}.a-row .a-pull8{left:-67.948%}td.a-span8,th.a-span8{width:69.93%;float:none!important}.a-row .a-span9,.a-ws .a-row .a-ws-span9{width:74.448%}.a-row .a-push9{left:76.448%}.a-row .a-pull9{left:-76.448%}td.a-span9,th.a-span9{width:78.68%;float:none!important}.a-row .a-span10,.a-ws .a-row .a-ws-span10{width:82.948%}.a-row .a-push10{left:84.948%}.a-row .a-pull10{left:-84.948%}td.a-span10,th.a-


... gekürzt