Javascript JS优化-不断设置快攻事件的变量
我正在使用Three.js编写一个脚本，其中许多变量取决于鼠标位置。如果每次触发移动事件时我总是将变量设置为相同的值，或者我应该只在检测到更改时设置变量，这有关系吗 假设我想将一个可变象限设置为1、2、3或4，具体取决于鼠标在屏幕的哪个部分。。。我应该使用这个：Javascript JS优化-不断设置快攻事件的变量,javascript,performance,variables,optimization,memory,Javascript,Performance,Variables,Optimization,Memory,我正在使用Three.js编写一个脚本，其中许多变量取决于鼠标位置。如果每次触发移动事件时我总是将变量设置为相同的值，或者我应该只在检测到更改时设置变量，这有关系吗 假设我想将一个可变象限设置为1、2、3或4，具体取决于鼠标在屏幕的哪个部分。。。我应该使用这个： var quadrant; function mouseMove(e){ var mouse; mouse.x = e.clientX; mouse.y = e.clientY; if(mouse.x &
var quadrant;
function mouseMove(e){
var mouse;
mouse.x = e.clientX;
mouse.y = e.clientY;
if(mouse.x < window.innerWidth / 2){
if(mouse.y < window.innerHeight / 2){
quadrant = 1;
} else {
quadrant = 3;
}
} else {
if(mouse.y < window.innerHeight / 2){
quadrant = 2;
} else {
quadrant = 4;
}
}
};
window.addEventListener('mousemove', mouseMove);
var quadrant;
function mouseMove(e){
var mouse;
mouse.x = e.clientX;
mouse.y = e.clientY;
if(mouse.x < window.innerWidth / 2){
if(mouse.y < window.innerHeight / 2){
if(quadrant != 1){
quadrant = 1;
}
} else {
if(quadrant != 3){
quadrant = 3;
};
}
} else {
if(mouse.y < window.innerHeight / 2){
if(quadrant != 2){
quadrant = 2;
};
} else {
if(quadrant != 4){
quadrant = 4;
};
}
}
};
window.addEventListener('mousemove', mouseMove);
将一个变量设置到内存中（即使它的值相同）的行为是否比读取添加条件所需的额外代码行花费更多？我本能地做后者，因为它看起来更整洁，运行时的工作量更少，但我真的不知道这到底是如何转化为性能的。我似乎记得读到过，每次在js中设置一个变量时，它实际上是在创建一个自身的实例，这看起来像是在工作。。。但也许我误解了。性能方面，它们应该非常相似。但是，这实际上取决于设置变量后发生的情况。你要调用一个每次都要做大量工作的函数吗？那你最好用第二个 您不应该为微优化而烦恼，几毫秒的延迟不会真正影响您的应用程序 此外，如果您需要亲自查看这里的一些基准代码来运行，那么它就不会那么准确了。它以秒为单位显示每个功能运行1k次的平均时间 设sum1=0，sum2=0，象限； fori=0；i<1000；我++{ 设obj=calculate1000； sum1+=obj.t1； sum2+=obj.t2； } console.logavg第一个：sum1/1000； console.logavg第二个：sum2/1000； 函数迭代计算{ //第一功能 让我们开始=Date.now； 福勒特i=0；i
console.log getQuadrant 75、75、100、100；//4如评论中所述，更简单的版本很可能更快，而且更容易阅读，也不容易出错 既然我有你，让我建议一种完全不同的方法：计算象限，而不是使用一堆if语句 //计算给定x和y以及宽度和高度的象限。 //象限的定义如下： // // +--+--+ // | 1 | 2 | // +--+--+ // | 3 | 4 | // +--+--+ 函数获取象限x、y、宽度和高度{ 返回1+ x>=宽度/2+ y>=高度/2*2； } console.log getQuadrant 25、25、100、100；//1. console.log getQuadrant 75、25、100、100；//2. console.log getQuadrant 25、75、100、100；//3.
console.log getQuadrant 75、75、100、100；//不，不是真的。这些事件触发的“速度”可能低于100/秒，变量读取和分配的速度非常非常快，每秒数百万次-读取和写入变量之间没有“相关成本差异”。写代码要清晰正确。如果有的话，我希望代码中附加的“如果”和条件是“较慢的”f.s.v.o.不相关-只是需要遍历更多的代码和处理这些代码。阅读比较有条件地跳转。。如果真的担心，创建一些微基准点。。它们也有各自的问题，可能误导某些决策。我同意@user2864740，只需设置变量即可。无论您读到什么来源暗示赋值到现有变量是缓慢的，这都是错误的。它不需要创建任何东西的新实例，这是一个非常快速的操作，特别是当你只是分配一个像这样的数字时。当然，在考虑性能关键型代码时，对这两种方法进行基准测试总是明智的，但在这种情况下，更简单的代码肯定会更快由于它是窗口对象上的一个有界范围变量而不是全局属性，因此可能使其自身的实现效率稍高一些。即使如此，总体性能影响在上下文中也可以忽略不计。非常感谢大家的评论。我的电脑有问题，自从我昨天发布后就一直没上线。我完全理解，如果使用JS变量，这些条件是不值得的，但是关于DOM交互的相同问题呢？！假设我想在鼠标位于屏幕的特定象限时向DOM元素添加一个类，在这种情况下，我是否应该避免每次触发mouseMove事件时都发送addClass命令？不，不是这样。这些事件触发的“速度”可能低于100/秒，变量读取和分配的速度非常非常快，每秒数百万次-读取和写入变量之间没有“相关成本差异”。写代码要清晰正确。如果有的话，我希望代码中附加的“如果”和条件是“较慢的”f.s.v.o.不相关-只是需要遍历更多的代码和处理这些代码。阅读比较有条件地跳转。。如果真的担心，创建一些微基准点。。它们也有自己的问题，可能会误导一些人
决策我同意@user2864740，只需设置变量即可。无论您读到什么来源暗示赋值到现有变量是缓慢的，这都是错误的。它不需要创建任何东西的新实例，这是一个非常快速的操作，特别是当你只是分配一个像这样的数字时。当然，在考虑性能关键型代码时，对这两种方法进行基准测试总是明智的，但在这种情况下，更简单的代码肯定会更快由于它是窗口对象上的一个有界范围变量而不是全局属性，因此可能使其自身的实现效率稍高一些。即使如此，总体性能影响在上下文中也可以忽略不计。非常感谢大家的评论。我的电脑有问题，自从我昨天发布后就一直没上线。我完全理解，如果使用JS变量，这些条件是不值得的，但是关于DOM交互的相同问题呢？！假设我想在鼠标位于屏幕的特定象限时向DOM元素添加一个类，在这种情况下，我是否应该避免每次触发mouseMove事件时发送addClass命令？噢，哇。好主意！！我已经将这段代码复制到了一个小文件夹中，我将保存它以供测试，这是比较函数的一个好主意。。。非常感谢你！我理解它可能不是100%准确，但它仍然提供了一个基本的基准。我使用Three.js和一个raycaster来测试鼠标在什么对象上，由于我有一个自定义光标，我用它来添加和删除悬停效果的类-我想我应该限制这些交互，np？难道我的代码每秒不尝试添加或删除同一个类100次吗？P.S.Ry我没有及时回复，发布后PC出现了lil问题，这一切都变成了。。。虽然xDlol:'D，但是lol PC现在更干净了。好吧，DOM操作是自然的，所以我想你应该限制它。另外，看看这个，它可能会有帮助：，它还解释了渲染管道，这将是有帮助的，我想：这是一篇非常有用的文章。。。我将尝试并实现其中的一些建议，尽管我不确定我对代码执行顺序的理解是否足以完成一项出色的工作。我正在使用three.js和requestAnimationFrame制作动画。。。但我认为我可以将所有格式信息保存在范围变量中，并且只在每个帧的末尾更新Dom对象，而不是在计算每个obj位置等时在整个帧中更新Dom对象。谢谢你的链接！！哦，哇。好主意！！我已经将这段代码复制到了一个小文件夹中，我将保存它以供测试，这是比较函数的一个好主意。。。非常感谢你！我理解它可能不是100%准确，但它仍然提供了一个基本的基准。我使用Three.js和一个raycaster来测试鼠标在什么对象上，由于我有一个自定义光标，我用它来添加和删除悬停效果的类-我想我应该限制这些交互，np？难道我的代码每秒不尝试添加或删除同一个类100次吗？P.S.Ry我没有及时回复，发布后PC出现了lil问题，这一切都变成了。。。虽然xDlol:'D，但是lol PC现在更干净了。好吧，DOM操作是自然的，所以我想你应该限制它。另外，看看这个，它可能会有帮助：，它还解释了渲染管道，这将是有帮助的，我想：这是一篇非常有用的文章。。。我将尝试并实现其中的一些建议，尽管我不确定我对代码执行顺序的理解是否足以完成一项出色的工作。我正在使用three.js和requestAnimationFrame制作动画。。。但我认为我可以将所有格式信息保存在范围变量中，并且只在每个帧的末尾更新Dom对象，而不是在计算每个obj位置等时在整个帧中更新Dom对象。谢谢你的链接！！哇，这是一个惊人的答案！！谢谢你花时间！！！那个布尔技巧真的很有用，我相信从现在起我将能够在我的代码中使用它。我重复了您所说的以获取代码列表，但不太理解code.txt中的内容。对我来说，结果分为两部分，仅函数大小=316，然后整个代码大小=1700。我可以使用这些大小度量来衡量/比较我的代码优化程度吗？我想越小越好。我很好奇，为什么简单的版本不容易出错？我真的觉得有点糟糕，因为象限只是一个例子来说明这个问题。。。实际上，我正在使用three.js和raycaster来确定场景中的对象，找到名称上带有for循环的确切对象。。然后，obj0、obj1、obj2等以及象限变量会更改动画的属性。但我也用它来为光标上的悬停效果添加类——我想我可能不应该这样做
g每次mousemove事件触发时？我现在有点担心IF语句-我使用了很多语句来确定我的动画。别难过，我写这篇文章很有趣。：-关于if语句，不要惊慌！正如我在对您的问题的其他评论中所指出的，如果您可以使用if语句来避免在DOM元素上添加或删除类名，除非确实需要，那将是一个巨大的胜利。与本机JS代码相比，DOM速度较慢。感谢您的澄清，所有这些都非常有用。我完全自学js，从这个网站上的例子中学到了我所知道的大部分。。。但是，我担心我的编码方式非常混乱，优化效果也很差。特别是像往常一样，当我刚开始的时候，我不知道如何实现我想要的结果，我只是一点一点地学习+构建功能，直到我得到我想要的。。。但结果是，你把一件事放在另一件事的上面，结果可能会有点混乱——我想一个好的程序员可以用一半的代码行获得同样的结果。自学某些技术也很困难。。。如果你不知道它们的存在或重要性，你就不知道用谷歌搜索它们！我正在学习一门叫做JS的atm小课程——理解奇怪的部分，希望它能全面提高我的理解力——好吧，我正在努力，但我总是因为做其他事情而分心！！我正在尝试使用Three.js atm为自己建立一个新网站——我有一些3d建模和环境构建方面的经验，所以我想在我的网页上使用它。再次感谢所有伟大的信息！哇，这是一个惊人的答案！！谢谢你花时间！！！那个布尔技巧真的很有用，我相信从现在起我将能够在我的代码中使用它。我重复了您所说的以获取代码列表，但不太理解code.txt中的内容。对我来说，结果分为两部分，仅函数大小=316，然后整个代码大小=1700。我可以使用这些大小度量来衡量/比较我的代码优化程度吗？我想越小越好。我很好奇，为什么简单的版本不容易出错？我真的觉得有点糟糕，因为象限只是一个例子来说明这个问题。。。实际上，我正在使用three.js和raycaster来确定场景中的对象，找到名称上带有for循环的确切对象。。然后，obj0、obj1、obj2等以及象限变量会更改动画的属性。但我也在用它来为光标上的悬停效果添加类——我想我不应该在每次mousemove事件触发时都这样做吧？我现在有点担心IF语句-我使用了很多语句来确定我的动画。别难过，我写这篇文章很有趣。：-关于if语句，不要惊慌！正如我在对您的问题的其他评论中所指出的，如果您可以使用if语句来避免在DOM元素上添加或删除类名，除非确实需要，那将是一个巨大的胜利。与本机JS代码相比，DOM速度较慢。感谢您的澄清，所有这些都非常有用。我完全自学js，从这个网站上的例子中学到了我所知道的大部分。。。但是，我担心我的编码方式非常混乱，优化效果也很差。特别是像往常一样，当我刚开始的时候，我不知道如何实现我想要的结果，我只是一点一点地学习+构建功能，直到我得到我想要的。。。但结果是，你把一件事放在另一件事的上面，结果可能会有点混乱——我想一个好的程序员可以用一半的代码行获得同样的结果。自学某些技术也很困难。。。如果你不知道它们的存在或重要性，你就不知道用谷歌搜索它们！我正在学习一门叫做JS的atm小课程——理解奇怪的部分，希望它能全面提高我的理解力——好吧，我正在努力，但我总是因为做其他事情而分心！！我正在尝试使用Three.js atm为自己建立一个新网站——我有一些3d建模和环境构建方面的经验，所以我想在我的网页上使用它。再次感谢所有伟大的信息！