zoukankan      html  css  js  c++  java
  • 记一次canvas的拖拽和缩放的性能问题

    本来是针对canvas的一次拖拽和缩放,发现, 在快速或者足够多的操作之后,内存会逐渐上升,导致浏览器卡死,经过查找相关资料,发现了几个优化的点,这里作为记录。

    1 批量绘制图形,一次性渲染

    2 采用离线缓存处理canvas,显著提升性能

    3 大尺寸的canvas可以转换成图片显示,以保证交互操作的流畅

    4 使用requestAnimationFrame,传统的以固定频率命令浏览器进行渲染不同,该方法可以更友善的对待浏览器,它会在浏览器可用的时候使其来 渲染。这样带来的另外一个好处是当页面不可见的时候,它会很聪明的停止渲染。

    5 注意浮点运算,如无特别需要,减少浮点运算,可以使用一下方法取整

    // With a bitwise or.  
    rounded = (0.5 + somenum) | 0;  
    // A double bitwise not.  
    rounded = ~~ (0.5 + somenum);  
    // Finally, a left bitwise shift.  
    rounded = (0.5 + somenum) << 0;  
  • 相关阅读:
    生成函数初步
    Lg 8月赛(构造+交互)
    wqs 二分学习笔记
    FastAPI 学习之路(十六)Form表单
    线性代数入门
    Oracle-PDB拔插
    MySQL-audit审计插件
    MySQL-用户与权限管理
    MySQL-存储引擎
    MySQL-逻辑结构
  • 原文地址:https://www.cnblogs.com/dpwow/p/7831192.html
Copyright © 2011-2022 走看看