location.href property vs. location.assign() method

小开

最佳答案

我总是用，从来没有问题:

location.href = url;

调用函数应该比访问属性稍慢一些，但在内存方面，我个人认为不应该有太大差别。

小开

I personally prefer calling the function instead, because calling a function gives me a better impression that something is running and that is not only a value of a variable that is changing.

但也许是的，location.href = url;确实比 location.assign(url)快，尽管根据我的测试，这可能取决于 JavaScript 引擎的实现。[已删除测试的死链接。]

小开

在我的机器/浏览器 http://jsperf.com/location-href-vs-location-assign/2上测试了 Chrome 40.0.2214.9332位的 Windows Server 2008 R2/764位

分配比 location.href 慢15% 。

小开

使用 location.href = url 与使用 location.sign (url)相比，在 JavaScript 内存消耗方面有什么特别的优缺点吗？

没有

There is exactly zero difference.

原因很简单。每次浏览器加载一个新页面时，它都会启动一个新的 Javascript‘ VM’，其中包含该页面在该 VM 中运行的脚本。当运行问题中的任何一个语句时，都是指示浏览器加载一个新页面，这意味着销毁当前 VM (并释放与之相关的任何内存) ，并为新页面加载一个全新的 VM。

除了任何奇怪的浏览器错误，净效果总是相同的。您的脚本在一个全新的 VM 中运行，所消耗的内存完全相同。

定位

如果你在浏览器中使用 Location 对象，并且你想在 Node JS 上运行这段代码(例如用于测试或等距代码) ，你可以使用 ulocation，Location 对象的通用/等距实现。全面披露: 我是包的作者。

小开

我知道这是老的，但我无意中发现了这一点，当我正在寻找一种方法来检查我的单元测试是重定向到正确的网址。

如果你更关心测试，我会选择 window.location.assign()。使用函数允许您模拟所述函数并检查 url 输入参数。

所以，用笑话:

window.location.assign = jest.fn();


myUrlUpdateFunction();


expect(window.location.assign).toBeCalledWith('http://my.url');


// Clean up :)
window.location.assign.mockRestore();

小开

我想添加一个差异，我经历了使用两者，而在反应，上述答案缺失。

Analyze the following snippet in React:

return (<>location.href = "www://example.com"</>)

V

return (<>location.assign("www://example.com")</>)

在 fonmer 的情况下，您实际上会看到字符串 Www://example.com在 DOM 上被键入了一瞬间，因为它在重定向发生之前呈现了文本。

为了避免这种情况，我们需要使用后一种 location.assign()

小开

实际上我认为这是有区别的

Href 是一个属性，这意味着它比调用函数更快，但最重要的是 href 属性使用户能够在浏览器上点击后退按钮时返回
Place ()用户将无法返回到当前页面。
分配()用户可以像 href 一样通过后退按钮返回，但是分配在测试和模拟方面更好