Кэш Google Chrome отображает SVG? Если нет, то как мы должны оптимизировать SVG для рендеринга Chrome? - PullRequest
Новая
       21

Кэш Google Chrome отображает SVG? Если нет, то как мы должны оптимизировать SVG для рендеринга Chrome?

0 голосов
/ 25 июня 2019

Проблема

Живой сайт находится здесь , созданный в Webflow.При наведении курсора на пункты меню фоновое изображение изменяется, устанавливая для других фонов непрозрачность 0% и устанавливая этот фон в непрозрачность 100%.Моя проблема связана с первым SVG (под названием «390 KB SVG»), который содержит ~ 1000 элементов.

В Firefox, Edge и Internet Explorer этот относительно большой SVG отображается один раз, а затем кэшируется для немедленного отображениякаждый раз после. В Chrome один и тот же SVG принудительно перерисовывается при каждом событии наведения , каждый раз стоя от 150 мс (i5-8600K) до 600 мс (i5-6200U).

Можем ли мы как-нибудь включить рендеринг-SVG-кеширование в Chrome?Или улучшить производительность рендеринга SVG в целом? Меньшие SVG визуализируются достаточно быстро в Chrome.

То, что я уже пробовал

SVG - это SVG с разрешением 2500px x 1250px, 1 точности, экспортированный изAdobe Illustrator CC 2019. Исходный выход Adobe Illustrator составляет 762 КБ.Я уже оптимизировал проблемный SVG размером 762 КБ до 390 КБ:

  1. Пониженная точность до 1 после увеличения размера артборда , как описано здесь .

  2. Использовал SVGOMG для удаления почти всех метаданных.

  3. Использовал инструмент Vecta.IO SVG Nano для дальнейшей минимизации исжатие.

  4. Использовал SVGito для повторного использования идентичных путей.

Хотя он, несомненно, рендерит быстрее, чем начальный выводдля рендеринга на более медленных системах по-прежнему требуется ~ 500 + мс.

Я также пробовал альтернативные способы изменения фона, такие как отображение: нет или вместо того, чтобы скрывать фоны с непрозрачностью 0%, собираюсь толькоНепрозрачность 1%: даже при 1%, Chrome требует повторного рендеринга, чтобы сделать его непрозрачным с 1% до 100%.

Код SVG и как его называют

Код SVG можетможно посмотреть здесь: https://codepen.io/TG2-/pen/EBXEGO

SVG-файлы вызываются через Javascript, например, с помощью встроенного в JavaScreen Webflowript (называемый «Interactions IX2»): 

            }, {
                "id": "a-11-n-7",
                "actionTypeId": "STYLE_OPACITY",
                "config": {
                    "delay": 0,
                    "easing": "",
                    "duration": 0,
                    "target": {
                        "id": "92202c53-63db-1dc1-831b-53546fc80f59"
                    },
                    "value": 0,
                    "unit": ""
                }
            }, {
                "id": "a-11-n-8",
                "actionTypeId": "STYLE_OPACITY",
                "config": {
                    "delay": 0,
                    "easing": "",
                    "duration": 0,
                    "target": {
                        "id": "92202c53-63db-1dc1-831b-53546fc80f60"
                    },
                    "value": 1,
                    "unit": ""
                }
            }]

Ожидаемый результат:

1) При наведении на первый пункт меню («390 KB SVG») должно измениться фоновое изображениеотносительно немедленно (в идеале менее 50 мс) в Chrome

(* либо через кеширование отрисованного SVG, как в других браузерах, либо путем увеличения производительности рендеринга в Chrome)

Фактический результат:

1) При наведении на первый пункт меню («390 КБ SVG») фоновое изображение изменяется через 200 мс - 600 мс, в зависимости от скорости процессора пользователя.

РЕШЕНИЕ (кредитKaiido & Paul LeBeua)

Измените шаблон SVG на SVG-заливку.Вот старый SVG, использующий шаблоны : 

<style>
        <![CDATA[.B {
            fill: url(#C)
        }

        .C {
            fill: url(#B)
        }

        .D {
            fill: url(#A)
        }

        .E {
            fill: url(#E)
        }

        .F {
            fill: url(#D)
        }

        ]]>
    </style>
    <defs>
        <pattern id="A" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#7c26cc" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="B" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#b45ffe" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="C" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#b9b9b9" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="D" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#e1e1e1" d="M0 0h3v3H0z" />
        </pattern>
        <pattern id="E" width="3" height="3" patternTransform="matrix(50 0 0 50 -892 -730.5)" patternUnits="userSpaceOnUse">
            <path fill="#e3d3ed" d="M0 0h3v3H0z" />
        </pattern>

Вот новый SVG, использующий заливку : 

<style><![CDATA[.B {
    fill: #b9b9b9
}

.C {
    fill: #b45ffe
}

.D {
    fill: #7c26cc
}

.E {
    fill: #e3d3ed
}

.F {
    fill: #e1e1e1
}

]]></style>

1 Ответ

0 голосов
/ 25 июня 2019

@ Инстинкт Кайидо кажется правильным. Похоже, это связано с использованием <pattern> элементов в этом SVG. Если вы измените CSS в этом SVG для непосредственного использования цветов, SVG будет отображаться намного быстрее.

Например: все, что вам нужно сделать, это скопировать цвет из рисунка в соответствующий стиль: 

.A { fill: #7c26cc; }

и т.д.

Использование шаблонов здесь не имеет смысла.

...