我有一个包含大量垂直滚动和数千个 DOM 元素的页面。为了提高性能,我考虑设置display: none;为视口上方和下方的 div 的内容,即不可见的 div(同时保持高度,显然):
为了检查我的想法是否有意义,我搜索了 SO 并发现了这个问题。根据评论和接受的答案,最好的策略是什么都不做,因为display: none;触发回流并可能产生相反的效果:
如果您想要避免回流,则将 display 设置为 none 会触发回流,这与您想要的完全相反。不做任何事情不会触发回流。将可见性设置为 hidden 也不会触发回流。然而,没有做任何事情容易得多。
然而,最近有一个答案(不幸的是,它看起来更像是一个评论甚至是一个问题)声称这display: none;是 Facebook 等网站当前使用的策略,其中垂直滚动几乎是无限的。
值得一提的是,与 OP 在该问题中的描述不同,我网站中的每个可见 div 都是交互式的:用户可以单击、拖动以及对 div 的内容执行其他操作(我相信这会使浏览器重新绘制页面)。
鉴于所有这些信息,我的问题是:display: none;应用于视口上方/下方的 div 会提高性能还是会降低性能?或者它可能没有效果?
我们都知道常规函数和箭头函数之间的区别。这不是关于这些差异的问题,而是关于他们的表现的问题。
由于箭头函数既不必创建它们自己的this值,也不必创建它们的arguments,因此它们似乎(至少在直觉上)应该很快。在一个非常简化的基准测试中:
let i;
console.time("regular");
const regular = function(a) {
return a * a
};
i = 10000;
while (--i) regular(i);
console.timeEnd("regular");
console.time("arrow");
const arrow = a => a * a;
i = 10000;
while (--i) arrow(i);
console.timeEnd("arrow");Run Code Online (Sandbox Code Playgroud)
在其他条件相同的情况下,箭头函数是否比常规函数更快?而且,如果“是”,差异是否与现实世界相关,或者我们可以将其作为不必要的微观优化而忽略吗?
假设我有一个foo.js在 GitHub 存储库中命名的 JavaScript 脚本。我需要知道哪些站点(域)正在使用此脚本。因此,例如,如果一个网站www.example.com正在引用我的脚本......
<html>
<head>
<script src="https://myGitHubRepo/foo.js"></script>
</head>
etc...
</html>
Run Code Online (Sandbox Code Playgroud)
我想获取、跟踪或example.com列为域。更明确地说,我不想跟踪访问的实际用户,www.example.com也不想跟踪他们的 IP 或类似的东西,我只想跟踪或列出在 HTML 中引用我的脚本的站点(域)。那可能吗?
PS:一些假设的解决方案及其问题:
window.location.hostname脚本中的一个简单将得到我想要的,但它会在客户端得到它。我不知道是否可以将这些信息发回给我……实际上,我什至不知道这是否合法。给出以下代码段:
const myArray = ["foo", "bar", "baz"];
myArray.someProperty = "foobar";
console.log(myArray)Run Code Online (Sandbox Code Playgroud)
在Safari中,它将仅显示以下内容:
["foo", "bar", "baz"] (3)
Run Code Online (Sandbox Code Playgroud)
在其他浏览器(例如Chrome和Firefox)中,它将显示该someProperty属性以及本机属性,例如length:
Array(3)
0: "foo"
1: "bar"
2: "baz"
someProperty: "foobar"
length: 3
Run Code Online (Sandbox Code Playgroud)
值得一提的是喜欢的东西console.dir,console.table或console.log(JSON.stringify(myArray))不会为了显示这种性质的工作。
Safari中是否有针对此限制的解决方法?显然我可以做console.log(myArray.someProperty),但是我的主要目标是检查数组具有哪些属性(我不是创建数组的人,而是由JS库创建的),所以这些属性对我来说是未知的。
与 JavaScript 中所有其他可能的值不同,不可能依靠相等运算符(== 和 ===)来确定一个值是否为 NaN,因为 NaN == NaN 和 NaN === NaN 的计算结果都是错误的。因此, isNaN 函数的必要性。
然而,由于它NaN是 JavaScript 中唯一一个与自身不相等的值,因此实际上可以依靠严格相等运算符来明确确定一个值是否为NaN:
const value = NaN;
console.log(value === value)Run Code Online (Sandbox Code Playgroud)
也就是说,对那个 MDN 句子的解释是什么?
PS:我确实理解 MDN 不是官方文档(即 ECMA),这很像 wiki,任何人都可以编辑它。尽管如此,它仍然是一个非常可靠的来源。