How elegant in today's uneven hardware performance C End rendering canvas canvas
The background that
At present, I mainly struggle in C The front line of education products , In the early stage of development, only the user's image quality experience was considered, but not in high resolution And related The display card has low memory It's impossible to Full frame rate rendering Use , a High load state .
Discover problems in time
canvas Canvas pixel density rendering too high
The current solution is ：iPad and PC Uniform according to the screen resolution length and width x2 times (window.devicePixelRatio) Again x1.5 Multiple rendering , In fact, it is based on 6 Multiple power rendering , Android is the default pixel 1.2 times .
For the above problems , High pixel density rendering will provide good image quality , But for the core or low memory users, it will cause too high GPU Consume , Specific performance: :
- User behavior
response timeToo long
- The fan speeds up , equipment
- Elements in browser windows cannot be
60FPSDynamic rendering , All animations in Windows
After finding the problem, two strategies are provided ：
- Give priority to user performance experience , Give up part of the picture quality experience ;
- Give priority to user experience , Give up the performance experience .
When the user's hardware device limit cannot be controlled , Without affecting the good experience of most users ,‘ programme 1’ Is the best quick solution .
- Provides a maximum rendering total pixel
- Get the current window resolution, multiply and compare with the maximum pixel CURRENT > MAX ? Rendering MAX : Rendering CURRENT
- At the same time, consider the low performance and anti aliasing of some Android devices , Render 0.9 Times the total pixels ;iOS and PC GPU The performance is generally strong , Render 1.2 Multiple pixels
Post optimization space
At present, the first iteration takes the default “ programme 1”, Consider joining “ Dynamic selection ” function , Let users choose according to their own experience , programme 1 perhaps 2.
The specific judgment conditions are to be determined , draft ：
- PCAPP、iPad、 Android pad Tell... By bridge agreement GPU Rendering situation , There is an abnormally high value GPU Pop up window to choose whether to reduce the image quality ;
- Based on the scheme that now provides maximum rendering total pixels , Every initialization canvas In front of canvas , Judge physical pixel and threshold pixel , Provide users with “ High quality ” perhaps “ High performance ” Options .
Performance before optimization
Performance after optimization