preconnect
可让您提前连接到您预期从中加载资源的服务器。
preconnect("https://example.com");
参考
preconnect(href)
要预连接到主机,请从react-dom
调用preconnect
函数。
import { preconnect } from 'react-dom';
function AppRoot() {
preconnect("https://example.com");
// ...
}
preconnect
函数为浏览器提供了一个提示,指示它应该打开与指定服务器的连接。如果浏览器选择这样做,这可以加快从该服务器加载资源的速度。
参数
href
:字符串。您要连接到的服务器的 URL。
返回值
preconnect
不返回任何值。
注意事项
- 使用相同服务器对
preconnect
进行多次调用与进行一次调用具有相同的效果。 - 在浏览器中,您可以在任何情况下调用
preconnect
:渲染组件时、在 Effect 中、在事件处理程序中等等。 - 在服务器端渲染或渲染服务器端组件时,
preconnect
只有在渲染组件时或在源自渲染组件的异步上下文中调用它时才有效。任何其他调用都将被忽略。 - 如果您知道您需要的特定资源,您可以改用其他函数,这些函数将立即开始加载资源。
- 预连接到网页本身所在的服务器没有任何好处,因为在给出提示时,它已经连接到了该服务器。
使用
渲染时预连接
如果知道组件的子组件将从该主机加载外部资源,则在渲染组件时调用 preconnect
。
import { preconnect } from 'react-dom';
function AppRoot() {
preconnect("https://example.com");
return ...;
}
在事件处理程序中预连接
在切换到需要外部资源的页面或状态之前,在事件处理程序中调用 preconnect
。这比在新页面或状态的渲染过程中调用它更早地启动了该过程。
import { preconnect } from 'react-dom';
function CallToAction() {
const onClick = () => {
preconnect('http://example.com');
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}