The original address in
my notes there
, give a feel okay
star
now :)
About preloadand prefetchalready heard, you know that they can optimize page loading speed, and then the specific circumstances but do not know much. After searching the relevant information they had some understanding of what this record.
preload
Usually in the page, we need to load some scripts and styles, and use preloadcan be pre-loaded on scripts, stylesheets and other resources required for the current page, without having to wait to resolve scriptand linkloaded when the label. This mechanism makes resources available to load and get an earlier, less prone to clogging preliminary rendering of the page, and thus enhance performance.
Use
The linktag relvalue of the attribute is set preload, asthe attribute value of the resource type (e.g., script script, style sheet style)
<head>
<meta charset="utf-8">
<title>preload example</title>
<!-- 对 style.css 和 index.js 进行预加载 -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="index.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>prefetch
And preload, as resources are pre-loaded, but prefetchloaded resources are generally not used in the current page, so some of the resources that is likely to be used in the future, simply put, it is the other page will use resources. Of course, prefetchnot like preload, like loading resources in page rendering time, but to use the browser idle time to download. When the next screen, you can directly disk cachetake it, it will not affect the rendering of the current page, but also improves the speed of rendering other page loads.
Use
With preloadvery similar, without specifying asattributes:
<head>
<meta charset="utf-8">
<title>preload example</title>
<!-- 对 style.css 和 index.js 进行 preload 预加载 -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="index.js" as="script">
<!-- 对资源进行 prefetch 预加载 -->
<link rel="prefetch" href="next.css">
<link rel="prefetch" href="next.js">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>to sum up
Resources needed for the current page, use the preloadpre-loaded on the resources of other pages need to be prefetchpre-loaded.