Huge resource consumption on Design Library homepage

lemeurherve commented 2 years ago

Jenkins and plugins versions report

weekly.ci.jenkins.io

```text Jenkins: 2.344 OS: Linux - 5.4.0-1069-azure --- ace-editor:1.1 analysis-model-api:10.10.0 ansicolor:1.0.1 antisamy-markup-formatter:2.7 apache-httpcomponents-client-4-api:4.5.13-1.0 authentication-tokens:1.4 aws-credentials:191.vcb_f183ce58b_9 aws-java-sdk-ec2:1.12.163-315.v2b_716ec8e4df aws-java-sdk-minimal:1.12.163-315.v2b_716ec8e4df azure-container-agents:241.va_780fa_dc374a_ azure-credentials:216.ve0b_4a_485ffc2 azure-sdk:106.v552de1e64d56 azure-vm-agents:810.v0a97a847315a basic-branch-build-strategies:1.3.2 blueocean:1.25.3 blueocean-autofavorite:1.2.5 blueocean-bitbucket-pipeline:1.25.3 blueocean-commons:1.25.3 blueocean-config:1.25.3 blueocean-core-js:1.25.3 blueocean-dashboard:1.25.3 blueocean-display-url:2.4.1 blueocean-events:1.25.3 blueocean-git-pipeline:1.25.3 blueocean-github-pipeline:1.25.3 blueocean-i18n:1.25.3 blueocean-jira:1.25.3 blueocean-jwt:1.25.3 blueocean-personalization:1.25.3 blueocean-pipeline-api-impl:1.25.3 blueocean-pipeline-editor:1.25.3 blueocean-pipeline-scm-api:1.25.3 blueocean-rest:1.25.3 blueocean-rest-impl:1.25.3 blueocean-web:1.25.3 bootstrap4-api:4.6.0-3 bootstrap5-api:5.1.3-6 bouncycastle-api:2.25 branch-api:2.1044.v2c007e51b_87f build-name-setter:2.2.0 caffeine-api:2.9.2-29.v717aac953ff3 checks-api:1.7.2 cloud-stats:0.27 cloudbees-bitbucket-branch-source:765.v5a_2d6a_23c01d cloudbees-folder:6.714.v79e858ef76a_2 cloudbees-jenkins-advisor:3.3.2 cobertura:1.17 code-coverage-api:2.0.4 command-launcher:1.6 config-file-provider:3.9.0 configuration-as-code:1414.v878271fc496f copyartifact:1.46.3 credentials:1126.ve05618c41e62 credentials-binding:1.27.1 dark-theme:171.v2540e8184da_0 data-tables-api:1.11.4-4 datadog:3.5.1 design-library:51.v6f6b_b_59d6644 display-url-api:2.3.6 docker-commons:1.19 durable-task:495.v29cd95ec10f2 ec2:1.68 echarts-api:5.3.2-1 embeddable-build-status:2.0.3 extended-read-permission:3.2 favorite:2.4.1 font-awesome-api:6.0.0-1 forensics-api:1.12.0 git:4.11.0 git-client:3.11.0 git-forensics:1.7.0 git-server:1.10 github:1.34.3 github-api:1.303-400.v35c2d8258028 github-autostatus:3.6.2 github-branch-source:1598.v91207e9f9b_4a_ github-checks:1.0.18 github-label-filter:1.0.0 groovy:2.4 handlebars:3.0.8 handy-uri-templates-2-api:2.1.8-22.v77d5b_75e6953 htmlpublisher:1.29 inline-pipeline:1.0.1 jackson2-api:2.13.2.20220328-273.v11d70a_b_a_1a_52 jacoco:3.3.1 javadoc:217.v905b_86277a_2a_ javax-activation-api:1.2.0-2 javax-mail-api:1.6.2-5 jaxb:2.3.0 jdk-tool:1.0 jenkins-design-language:1.25.3 jira:3.7.1 jjwt-api:0.11.2-9.c8b45b8bb173 job-dsl:1.79 jquery3-api:3.6.0-2 jsch:0.1.55.2 junit:1.59 kubernetes:3580.v78271e5631dc kubernetes-client-api:5.12.1-187.v577c3e368fb_6 kubernetes-credentials:0.9.0 kubernetes-credentials-provider:0.20 ldap:2.8 lockable-resources:2.14 mailer:408.vd726a_1130320 matrix-auth:3.1 matrix-project:758.v7a_ea_491852f3 metrics:4.1.6.2 momentjs:1.1.1 node-iterator-api:1.5.1 okhttp-api:4.9.3-105.vb96869f8ac3a pipeline-build-step:2.17 pipeline-github:2.8-138.d766e30bb08b pipeline-graph-analysis:188.v3a01e7973f2c pipeline-input-step:447.v95e5a_6e3502a_ pipeline-milestone-step:100.v60a_03cd446e1 pipeline-model-api:2.2075.vce74e77b_ce40 pipeline-model-definition:2.2075.vce74e77b_ce40 pipeline-model-extensions:2.2075.vce74e77b_ce40 pipeline-rest-api:2.23 pipeline-stage-step:291.vf0a8a7aeeb50 pipeline-stage-tags-metadata:2.2075.vce74e77b_ce40 pipeline-stage-view:2.23 pipeline-utility-steps:2.12.0 plain-credentials:1.8 plugin-util-api:2.16.0 popper-api:1.16.1-2 popper2-api:2.11.5-1 prism-api:1.26.0-2 prometheus:2.0.11 pubsub-light:1.16 scm-api:602.v6a_81757a_31d2 scm-filter-branch-pr:0.5.1 script-security:1145.vb_cf6cf6ed960 snakeyaml-api:1.30.1 sse-gateway:1.25 ssh-agent:1.24.1 ssh-credentials:1.19 sshd:3.228.v4c9f9e652c86 structs:308.v852b473a2b8c support-core:1148.vedff8cb_56a_da_ theme-manager:1.2 timestamper:1.17 token-macro:285.vff7645a_56ff0 toolenv:1.2 trilead-api:1.57.v6e90e07157e1 variant:1.4 warnings-ng:9.12.0 windows-azure-storage:373.v582b31a65906 workflow-aggregator:2.7 workflow-api:1143.v2d42f1e9dea_5 workflow-basic-steps:941.vdfe1b_a_132c64 workflow-cps:2686.v7c37e0578401 workflow-cps-global-lib:570.v21311f4951f8 workflow-durable-task-step:1128.v8c259d125340 workflow-job:1174.vdcb_d054cf74a_ workflow-multibranch:711.vdfef37cda_816 workflow-scm-step:2.13 workflow-step-api:622.vb_8e7c15b_c95a_ workflow-support:818.v4eb_969241b_c7 ```

What Operating System are you using (both controller, and any agents involved in the problem)?

MacOS 12.3 Firefox 99.0.1 and Chrome 100.0.4896.127

Reproduction steps

Go to https://weekly.ci.jenkins.io/design-library/

Notice the resources consumption increasing a lot

Expected Results

No dramatic resources usage when viewing the Design Library homepage

Actual Results

Huge resources consumption

Anything else?

As soon as I comment out the CSS properties of .app-card__preview::before via the Firefox Inspector the resources usage returns to a normal level.

.app-card__preview::before {
  background-image: radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 1) 0, transparent 50%), radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0, transparent 50%), radial-gradient(at 0% 50%, hsla(355, 85%, 93%, 1) 0, transparent 50%), radial-gradient(at 80% 50%, hsl(359, 70%, 46%) 0, transparent 50%), radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0, transparent 50%), radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0, transparent 50%), radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0, transparent 50%);
  animation: rotate-colors 7s linear infinite;
}

janfaracik commented 2 years ago

This has been improved in https://github.com/jenkinsci/design-library-plugin/pull/43.

It's not perfect but I think I'm hitting the limits of performance improvements I can do whilst keeping the animation with CSS, any ideas would be appreciated.

Thanks for raising! :)

lemeurherve commented 2 years ago

It's better but unfortunately it still consumes a lot of resources, and as a result the animation is laggy, and now aliased. Do you want me to open another issue or should this one be reopened?

lemeurherve commented 2 years ago

@janfaracik on the last version of your fix, the usage seems greatly decreased, and the animation isn't laggy anymore 🎉

Still aliased on Firefox though (wasn't the case few versions ago):

Details:

Looks OK on Chrome:

Do you want me to open a dedicated issue?

jenkinsci / design-library-plugin