小程序优化

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

项目概况

框架taro 原方案使用movable-area实现地图滑动和小比例缩放，三个不同比例背景图，3组设施点坐标信息，缩放不同尺度切换相应的背景图

实现需求

原方案缩放触发切换不同背景图和设施点时，会有明显卡顿，过度不够平滑 设施点需要配置3组不同坐标，增加工作量

难题

• 方案选型：movable-area和canvas对比

  • 方案一：movable-area组件在缩放时，以画布中心点为中心缩放，canvas可实现以手指接触中心点为中心实现缩放，体验更友好(尝试不断偏移缩放中心点，但卡顿太明显放弃)
  • 方案二：canvas平移或缩放时延迟较大，优化后平均延迟也在40-60ms，产品可以接受，movable-area组件比较平滑

• canvas延迟优化

  • 优化前方案,触发移动后，计算坐标变化，然后绘制新图形

    _moveHander(){
    	...
    	math()//计算坐标变化
    	draw(){ //绘制图形
    		...
    		this.canvas.draw()  // canvas绘制图形
    	}
    }
    

  • 优化后方案，触发移动后，判断绘制事件数量，队列较长时，抛弃部分计算，绘制工作

  	drawNum = 0
  	_moveHander(){
  		if(this.drawNum > drawMaxNum){  // draw事件队列长度控制
  			return
  		}
  		math()//计算坐标变化
  		draw(){ //绘制图形
  			...
  			this.drawNum = this.drawNum + 1
  			this.canvas.draw(false, ()=>{
  				this.drawNum = this.drawNum - 1
  			})
  		}
  	}
  

• 设施点详情弹窗

  • 方案一：cover-view封装的模块组件，触发canvas移动事件，调用组件函数修改组件的css样式位移，会有明显的延迟，卡顿现象(没有好的优化方案，放弃)
  • 方案二：canvas绘制设施详情，卡顿减小，整体画面延迟增加
    • 优化方案：
      • 设施详情被移除画面之外，停止绘制图形
      • 设施详情打开时，增加绘制事件队列长度

• 聚合点计算

  • 方案一：遍历每个坐标点，将坐标点一定范围内的坐标聚合进这个坐标集合中，并计算中心点作为聚合点的新坐标
  • 方案二：页面切分为等大的方格，最小比例切分4块，中等比例切分9块，最大比例切分16块，以每个方块内的坐标点，再按照方案一的算法聚合计算

来源：oschina

链接：https://my.oschina.net/u/1248740/blog/3153060