业务需要在canvas上实现模糊效果，在模糊计算时发现IOS上对计算速度要慢很多倍。
提出代码片段进行测试发现，在iphone X上计算耗时（纯运算过程）22822ms, 小米 MIX 2上耗时928ms, 模拟器上运算耗时384ms。在其他ios 和android机型测试都是相同情况。两者耗时竟然相差20多倍。
iphoneX
Mix 2
模糊运算代码
function blurUint8Array(uint8Arr, width, height, blur) { var result = new Uint8ClampedArray(width * height * 4); var source = uint8Arr.slice() var bxs = boxesForGauss(blur, 3) boxBlurUint8(source, result, width, height, (bxs[0] - 1) / 2) boxBlurUint8(result, source, width, height, (bxs[1] - 1) / 2) boxBlurUint8(source, result, width, height, (bxs[2] - 1) / 2) return result}function boxBlurUint8(scl, tcl, w, h, r) { for (var i = 0; i < h; i++) { for (var j = 0; j < w; j++) { var R = 0 var G = 0 var B = 0 var A = 0 for (var iy = i - r; iy < i + r + 1; iy++) { for (var ix = j - r; ix < j + r + 1; ix++) { var x = Math.min(w - 1, Math.max(0, ix)) var y = Math.min(h - 1, Math.max(0, iy)) var index = (y * w + x) * 4 R += scl[index] G += scl[index + 1] B += scl[index + 2] A += scl[index + 3] } } var count = (r + r + 1) * (r + r + 1) var tIndex = (i * w + j) * 4 tcl[tIndex] = R / count tcl[tIndex + 1] = G / count tcl[tIndex + 2] = B / count tcl[tIndex + 3] = A / count } }}function boxesForGauss(sigma, n) { var wIdeal = Math.sqrt((12 * sigma * sigma / n) + 1); var wl = Math.floor(wIdeal); if (wl % 2 === 0) wl--; var wu = wl + 2; var mIdeal = (12 * sigma * sigma - n * wl * wl - 4 * n * wl - 3 * n) / (-4 * wl - 4); var m = Math.round(mIdeal); var sizes = []; for (var i = 0; i < n; i++) sizes.push(i < m ? wl : wu); return sizes;} |
之前使用了一个高斯模糊的实现，遇到过，不过不是那么离谱，大概差5倍是有的。
在ios上 Math函数实现貌似有些问题，我把min max函数替换成三元后快了一倍， 但还是比Android慢。之前在使用Math.round的时候也出现了问题，具体场景记不清了。希望官方大佬给关注一下这个Math的问题。