javascript - 在菜单类型代码中，循环先于条件或条件先于循环哪个更好？

Question

美好的一天，我目前有一个用于从菜单应用照片效果的代码，并且希望获得一些有关如何更好地处理它的建议。

我应该像这样在 CONDITIONAL 之前执行 LOOP 吗:

function applyFilter(filter){
  var ctx = canvas.getContext('2d');
  var imageData = ctx.getImageData(img.x,img.y,img.width,img.height); 
  var dataArr = imageData.data;

  for(i = 0; i < dataArr.length; i+= 4){
    let color = {
      r : dataArr[i],
      g : dataArr[i+1],
      b : dataArr[i+2],
    }

    if(filter == "negative")
        negateImage(dataArr, i, color)
    else if(filter == "sephia")
        addSephia(dataArr, i, color)
    // else if  some other effects

或循环之前的条件，如下所示:

function applyFilter(filter){

   if(filter == "negative")
       negateImage()
   else if(filter == "sephia")
      addSephia()
   // else if some other effects

}

function negateImage(){
  var ctx = canvas.getContext('2d');
  var imageData = ctx.getImageData(img.x,img.y,img.width,img.height); 
  var dataArr = imageData.data;

  for(i = 0; i < dataArr.length; i+= 4){
  // negate image algorithm
  }

}

提前感谢您的回答!

Answer 1

仅检查一次条件在性能方面肯定会更好。也就是说，对性能的影响可能很小，特别是一旦分支预测开始启动，尤其与代码的其他部分相比。最好避免过早优化，除非您已经运行了性能测试并确定了需要运行得更快的代码部分 - 在此之前，最好将代码编写得干燥且可读。

您可以考虑创建一个在循环外部调用 negateImage 或 addSephia 的函数。您还可以保存 dataArr 的长度，而不是在每次迭代时重新计算:

function applyFilter(filter) {
  var ctx = canvas.getContext('2d');
  var imageData = ctx.getImageData(img.x, img.y, img.width, img.height);
  var dataArr = imageData.data;
  const fn = filter === 'negative' ?
    (i, color) => negateImage(dataArr, i, color) :
    (i, color) => addSephia(dataArr, i, color);
  const { length } = dataArr;
  for (let i = 0; i < length; i += 4) {
    fn(
      i,
      {
        r: dataArr[i],
        g: dataArr[i + 1],
        b: dataArr[i + 2],
      }
    );
    // ...

(确保不要隐式创建全局变量 - 在 for 循环中声明 i)