mirror of https://github.com/halo-dev/halo
perf: enable hardware acceleration for attachment images (#3831)
#### What type of PR is this? /kind improvement /area console /milestone 2.5.x #### What this PR does / why we need it: 为附件库的图片渲染添加硬件加速(GPU)的支持,可以改善在附件库包含大量大图时的操作体验,能够缓解卡顿的问题。不过最终还是需要 https://github.com/halo-dev/halo/issues/2387 的支持。 测试(一共 60 张图片,合计 230m): before: <img width="766" alt="image" src="https://user-images.githubusercontent.com/21301288/233842635-3181df5d-fd26-44f1-aa30-314a3dba05a6.png"> after: <img width="858" alt="image" src="https://user-images.githubusercontent.com/21301288/233842542-38a43b82-6452-4728-81ab-45f0cf528465.png"> #### Which issue(s) this PR fixes: Fixes #3830 #### Special notes for your reviewer: 测试方式: 1. 上传若干大图,对比修改前对附件库的操作,以及在文章中选择附件。 #### Does this PR introduce a user-facing change? ```release-note 优化 Console 端附件库的图片渲染性能。 ```pull/3787/head^2
parent
5c308993c6
commit
66eb0bb622
|
@ -613,7 +613,7 @@ onMounted(() => {
|
|||
:key="attachment.metadata.name"
|
||||
:alt="attachment.spec.displayName"
|
||||
:src="attachment.status?.permalink"
|
||||
classes="pointer-events-none object-cover group-hover:opacity-75"
|
||||
classes="pointer-events-none object-cover group-hover:opacity-75 transform-gpu"
|
||||
>
|
||||
<template #loading>
|
||||
<div
|
||||
|
|
|
@ -101,7 +101,7 @@ const onVisibleChange = (visible: boolean) => {
|
|||
"
|
||||
:alt="attachment?.spec.displayName"
|
||||
:src="attachment?.status?.permalink"
|
||||
class="w-auto cursor-pointer rounded"
|
||||
class="w-auto transform-gpu cursor-pointer rounded"
|
||||
@click="onlyPreview = !onlyPreview"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -124,7 +124,7 @@ const handleOpenDetail = (attachment: Attachment) => {
|
|||
:key="attachment.metadata.name"
|
||||
:alt="attachment.spec.displayName"
|
||||
:src="attachment.status?.permalink"
|
||||
classes="pointer-events-none object-cover group-hover:opacity-75"
|
||||
classes="pointer-events-none object-cover group-hover:opacity-75 transform-gpu"
|
||||
>
|
||||
<template #loading>
|
||||
<div class="flex h-full items-center justify-center object-cover">
|
||||
|
|
Loading…
Reference in New Issue