如何优雅的在如今硬件性能参差不齐的C端渲染canvas画布
背景说明
目前笔者主要奋斗在C端教育产品的前线，由于开发初期仅仅考虑了用户使用的画质体验但没考虑到在高分辨率及关联显卡硬件显存低时出现的无法满帧率渲染使用，呈高负荷态。
及时发现问题
canvas画布像素密度渲染过高
目前现有的方案是：iPad和PC统一按照屏幕分辨率长宽x2倍(window.devicePixelRatio)再x1.5倍渲染，实则以6倍能力渲染，安卓则为降级默认像素1.2倍。
针对上述问题，像素密度渲染过高会提供良好的画质表现，但对于核显或者低显存用户来说会造成过高的GPU消耗，具体表现为:
- 用户行为
响应时间过长 - 风扇加速，设备
发热严重 - 浏览器视窗中元素无法以
60FPS动态渲染，视窗内所有动画掉帧明显
解决思路
发现该问题后提供两种策略：
- 优先考虑用户使用性能体验，放弃部分画质体验；
- 优先考虑用户画质体验，放弃性能体验。 在无法控制用户硬件设备上限，又不能影响绝大多数用户良好使用体验的情况下，‘方案1’是最佳的快速解决方案。
实际解决
- 提供一个最大渲染总像素
- 获取当前视窗分辨率进行乘算与最大像素对比 CURRENT > MAX ? 渲染MAX : 渲染CURRENT
- 同时考虑部分安卓性能过低和消除锯齿感，则渲染0.9倍总像素；iOS和PC GPU性能一般较强，则渲染1.2倍像素
后期优化空间
目前初个迭代版本采取默认“方案1”，后续选择考虑加入“动态选择”功能，让用户根据自身体验选择，方案1或者2。
具体判断条件待定，草拟：
- PCAPP、iPad、安卓pad通过桥协议告知GPU渲染情况，出现异常高值GPU弹窗选择是否降低画质；
- 基于现在提供最大渲染总像素的方案，每次初始化canvas画布前，进行物理像素和阈值像素判断，给用户提供“高画质” 或者 “高性能”选项。
