Drag and drop performance optimization of large image

there is a 2m SVG picture indoor flat map, which needs to be dragged and zoomed in

the previous scheme:
1, pure svg embedding html, uses the transform attribute, resulting in dragging stutter
(this scheme does not add will-change and enable hardware acceleration, it is stupid to hh)
2 drawImage, result drawing is too slow (real-time rendering, drawImage call time is the longest in the flame graph)
3 img src, result CPU is taken up too high, browser jams

are there any points or other options that can be optimized?

Mar.17,2022

2m should not go so far.
did you use will-change


remember that the platform of map class seems to have custom map function

in addition: the problem of slow drawing, Baidu map drag is also brushed out piece by piece.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3bab0-2c294.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3bab0-2c294.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?