1.Prefetch預(yù)拉取
- 作用：主要是為了提前拉取下一個頁面的資源滤馍，當加上這個標簽乔外，該資源進入請求隊列凤粗，但是只會在當前頁面閑置（其他資源已經(jīng)加載完畢）的時候才會去加載該資源考赛，而且加載的資源并不會起作用惕澎，利用瀏覽器的緩存機制緩存起來，這樣打開下一個頁面的時候就會更快了
- 寫法
<link rel="prefetch" href="reset.css" >
<link rel="stylesheet" href="common.css">
- 驗證實例：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="prefetch" href="reset.css" >
<link rel="stylesheet" href="common.css">
<script type="text/javascript" src="./index2.js" async></script>
<script type="text/javascript" src="./index1.js" async></script>
<script type="text/javascript" src="./index.js" async></script>
<script type="text/javascript" src="./index3.js" async></script>
<script type="text/javascript" src="./index4.js" async></script>
<script type="text/javascript" src="./index5.js" async></script>
<script type="text/javascript" src="./index6.js" async></script>
<script type="text/javascript" src="./index7.js" async></script>
<!--<link rel="stylesheet" href="reset.css">-->
</head>
<body>
<div id="haha">123</div>
<img src="webpack.png" alt="" style="display: inline-block;width:200px;height:200px">
</body>
</html>
image.png
在這個例子中颜骤，我在服務(wù)器設(shè)置了common.css延遲4秒返回唧喉，reset.css延遲6秒返回
，js文件延遲6秒返回忍抽。
結(jié)論：就算是寫在html最頂端的css八孝，當加上prefetch后，該資源會延遲到最后才加載鸠项，并且不會生效（在這個例子中我在reset.css改變背景顏色干跛，但實際無效果），同時這個例子也驗證了chrome瀏覽器在http1.1版本下祟绊，最多只能同時發(fā)起6個http請求
2.Preload 預(yù)加載
- 作用：主要是為了讓某個資源有更高的加載優(yōu)先級楼入，即使你排在html的下面哥捕，他也會強制讓你先加載
- 寫法
<link rel="preload" href="reset.css" as="style">
<link rel="stylesheet" href="common.css">
- 驗證實例：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="common.css">
<script type="text/javascript" src="./index2.js" async></script>
<script type="text/javascript" src="./index1.js" async></script>
<script type="text/javascript" src="./index.js" async></script>
<script type="text/javascript" src="./index3.js" async></script>
<script type="text/javascript" src="./index4.js" async></script>
<script type="text/javascript" src="./index5.js" async></script>
<script type="text/javascript" src="./index6.js" async></script>
<script type="text/javascript" src="./index7.js" async></script>
<link rel="preload" href="reset.css" as="style">
</head>
<body>
<div id="haha">123</div>
<img src="webpack.png" alt="" style="display: inline-block;width:200px;height:200px">
</body>
</html>
image.png
在這個例子中，我在服務(wù)器設(shè)置了common.css延遲4秒返回嘉熊，reset.css延遲6秒返回
遥赚，js文件延遲6秒返回。
