prefetchDNS יכול לבצע חיפוש מוקדם של כתובת ה-IP של שרת את מצפים לטעון ממנו משאבים.
prefetchDNS("https://example.com");הפניה
prefetchDNS(href)
כדי לבצע חיפוש למארח, קראו לפעולה prefetchDNS מתוך react-dom.
import { prefetchDNS } from 'react-dom';
function AppRoot() {
prefetchDNS("https://example.com");
// ...
}הפונקציה prefetchDNS מספקת לדפדפן רמז שכדאי לו לבצע חיפוש לכתובת ה-IP של שרת נתון. אם הדפדפן בוחר לעשות זאת, זה יכול להאיץ טעינה של משאבים מהשרת הזה.
פרמטרים
href: מחרוזת. ה-URL של השרת שאליו רוצים להתחבר.
מחזירה
prefetchDNS לא מחזירה דבר.
אזהרות
- כמה קריאות ל-
prefetchDNSעם אותו שרת משפיעות כמו קריאה אחת. - בדפדפן אפשר לקרוא ל-
prefetchDNSבכל מצב: בזמן רינדור קומפונטה, בתוך אפקט, בתוך מטפל באירועים, וכן הלאה. - ברינדור צד שרת או ברינדור רכיבי שרת, ל-
prefetchDNSיש רק רק אם קוראים לה בזמן רינדור קומפוננטה או בהקשר אסינכרון שמקורו ברינדור קומפוננטה. קריאות אחרות ייחסמו. - אם אתם יודעים אילו משאבים ספציפיים תצטרכו, אפשר לקרוא לפונקציות אחרות שמתחילות לטעון את המשאבים מיד.
- אין תועלת ב-prefetch לאותו שרת שעליו מתארח דף הווב עצמו, כי בדיקת אליו כבר בוצעה עד לשלו היה ניתן הרמז.
- בהשוואה ל-
preconnect, יכול ש-prefetchDNSעדיף אם אתם מתחברים ספקולטיבית למספר גדול של דומיינים, מצב שבו העלות של preconnections עלולה לעלות על התועלת.
שימוש
DNS Prefetch בזמן רינדור
קראו ל-prefetchDNS בזמן רינדור קומפוננטה אם אתם יודעים שהילדים שלהם יטענו משאבים חיצוניים מאותו מארח.
import { prefetchDNS } from 'react-dom';
function AppRoot() {
prefetchDNS("https://example.com");
return ...;
}אחזור DNS מראש בתוך מטפל באירועים
קראו ל-prefetchDNS בתוך מטפל באירועים לפני מעבר או מצב יידרשו משאבים חיצוניים. כך מתחילים להמשך קריאה בזמן רינדור העמוד או המצב החדש.
import { prefetchDNS } from 'react-dom';
function CallToAction() {
const onClick = () => {
prefetchDNS('http://example.com');
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}