美好的一天, 我目前有一个用于从菜单应用照片效果的代码,并且希望获得一些有关如何更好地处理它的建议。
我应该像这样在 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
}
}
提前感谢您的回答!
最佳答案
仅检查一次条件在性能方面肯定会更好。也就是说,对性能的影响可能很小,特别是一旦分支预测开始启动,尤其与代码的其他部分相比。最好避免过早优化,除非您已经运行了性能测试并确定了需要运行得更快的代码部分 - 在此之前,最好将代码编写得干燥且可读。
您可以考虑创建一个在循环外部调用 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
)
关于javascript - 在菜单类型代码中,循环先于条件或条件先于循环哪个更好?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57719594/