如何利用预取技术提升Web性能：减少加载时间，优化用户体验

yarn create vite prefetch-example --template react-ts
1.

import { useState } from "react";
import { useFloating, useHover, useInteractions } from "@floating-ui/react";
import ContentLoader from "react-content-loader";
import UserProfile from "./UserProfile";
import UserProfileWithFetching from "./UserProfileWithFetching";export const MyLoader = () => (
 <ContentLoader
 speed={2}
 width={340}
 
 height={84}
 viewBox="0 0 340 84"
 backgroundColor="#d1d1d1"
 foregroundColor="#fafafa"
 >
 <rect x="0" y="0" rx="3" ry="3" width="67" height="11" />
 <rect x="76" y="0" rx="3" ry="3" width="140" height="11" />
 <rect x="127" y="48" rx="3" ry="3" width="53" height="11" />
 <rect x="187" y="48" rx="3" ry="3" width="72" height="11" />
 <rect x="18" y="48" rx="3" ry="3" width="100" height="11" />
 <rect x="0" y="71" rx="3" ry="3" width="37" height="11" />
 <rect x="18" y="23" rx="3" ry="3" width="140" height="11" />
 <rect x="166" y="23" rx="3" ry="3" width="173" height="11" />
 </ContentLoader>
);
export default function PopoverExample() {
 const [isOpen, setIsOpen] = useState(false);
 const [isLoading, setIsLoading] = useState(false);
 const [data, setData] = useState({});
const { refs, floatingStyles, context } = useFloating({
 open: isOpen,
 onOpenChange: setIsOpen,
 placement: "top",
 });
const hover = useHover(context);
const { getReferenceProps, getFloatingProps } = useInteractions([hover]);
const handleMouseEnter = () => {
 if (Object.keys(data).length === 0) {
 setIsLoading(true);
 fetch("https://jsonplaceholder.typicode.com/users/1")
 .then((resp) => resp.json())
 .then((data) => {
 setData(data);
 setIsLoading(false);
 });
 }
 };
return (
 <div
 id="hover-example"
 style={{
 display: "flex",
 flexDirection: "row",
 alignItems: "center",

 textAlign: "left",
 }}
 onMouseEnter={handleMouseEnter}
 >
 <span
 style={{
 padding: "1rem",
 }}
 >
 <img
 ref={refs.setReference}
 {...getReferenceProps()}
 style={{
 borderRadius: "50%",
 }}
 src="https://cdn.jsdelivr.net/gh/alohe/avatars/png/vibrent_5.png"
 />
 </span>
 <p>
 Lorem Ipsum is simply dummy text of the printing and typesetting
 industry. Lorem Ipsum has been the industry's standard dummy text ever
 since the 1500s, when an unknown printer took a galley of type and
 scrambled it to make a type specimen book. It has survived not only five
 centuries, but also the leap into electronic typesetting, remaining
 essentially unchanged. It was popularised in the 1960s with the release
 of Letraset sheets containing Lorem Ipsum passages, and more recently
 with desktop publishing software like Aldus PageMaker including versions
 of Lorem Ipsum.
 </p>
 {isOpen && (
 <div
 className="floating"
 ref={refs.setFloating}
 style={{
 ...floatingStyles,
 backgroundColor: "white",

 color: "black",
 padding: "1rem",
 fontSize: "1rem",
 }}
 {...getFloatingProps()}
 >
 {isLoading ? (
 <MyLoader />
 ) : (
 <UserProfile hasAdditionalDetails {...data} />
 )}
 {/* <UserProfileWithFetching /> */}
 </div>
 )}
 </div>
 );
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.

import { useEffect, useState } from "react";
import { MyLoader } from "./PopoverExample";
export default function UserProfileWithFetching() {
 const [isLoading, setIsLoading] = useState(false);
 const [data, setData] = useState<Record<string, string>>({});
useEffect(() => {
 setIsLoading(true);
 fetch("https://jsonplaceholder.typicode.com/users/1")
 .then((resp) => resp.json())
 .then((data) => {
 setData(data);
 setIsLoading(false);
 });
 }, []);
if (isLoading) return <MyLoader />;
return (
 <div id="user-profile">
 <div id="user-name">name: {data.name}</div>
 <div id="user-email">email: {data.email}</div>
 <div id="user-phone">phone: {data.phone}</div>
 <div id="user-website">website: {data.website}</div>
 </div>
 );
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.