网站优化Preload进行预加载的使用方法

网站优化Preload进行预加载的使用方法
元素的 rel 属性的属性值preload能够让HTML页面中元素内部书写一些声明式的资源获取请求，使得资源可以更早的得到加载。
```
<link rel="stylesheet" href="style2.css">
 
<script src="main2.js">script>
 
<link rel="preload" href="style1.css" as="style">
 
<link rel="preload" href="main1.js" as="script">
```
在这里，我们会先加载style1.css和main1.js文件(但不会生效)，在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。

哪些类型的内容可以被预加载？

许多不同类型的内容都可以被预加载，一些主要可用的as 属性值列举如下：
- audio: 音频文件。
- document: 一个将要被嵌入到或</a>内部的HTML文档。</li><li><code>embed</code>: 一个将要被嵌入到<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTML%2FElement%2Fembed" rel="nofollow" title="<embed>"><embed></a>元素内部的资源。</li><li><code>fetch</code>: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。</li><li><code>font</code>: 字体文件。</li><li><code>image</code>: 图片文件。</li><li><code>object</code>: 一个将会被嵌入到<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTML%2FElement%2Fembed" rel="nofollow" title="<embed>"><embed></a>元素内的文件。</li><li><code>script</code>: JavaScript文件。</li><li><code>style</code>: 样式表。</li><li><code>track</code>: WebVTT文件。</li><li><code>worker</code>: 一个JavaScript的web worker或shared worker。</li><li><code>video</code>: 视频文件。</li></ul> <h4 id="wznav_1"><a name="t1"></a>媒体查询</h4> <p><code><link></code>元素有一个很棒的特性是它们能够接受一个<code>media</code>作为属性值，这将令你能够使用<a href="https://so.csdn.net/so/search?q=%E5%93%8D%E5%BA%94%E5%BC%8F&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%93%8D%E5%BA%94%E5%BC%8F&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"响应式\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%93%8D%E5%BA%94%E5%BC%8F&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"响应式\"}"}" data-tit="响应式" data-pretit="响应式">响应式</a>的预加载</p> <pre data-index="1" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"preload"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"narrow.png"</span> <span class="hljs-attr">as</span>=<span class="hljs-string">"image"</span> <span class="hljs-attr">media</span>=<span class="hljs-string">"(max-width: 600px)"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"preload"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"wide.png"</span> <span class="hljs-attr">as</span>=<span class="hljs-string">"image"</span> <span class="hljs-attr">media</span>=<span class="hljs-string">"(min-width: 601px)"</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4 id="wznav_2"><a name="t2"></a><a href="https://so.csdn.net/so/search?q=%E8%B7%A8%E5%9F%9F&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E8%B7%A8%E5%9F%9F&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"跨域\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E8%B7%A8%E5%9F%9F&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"跨域\"}"}" data-tit="跨域" data-pretit="跨域">跨域</a>获取</h4> <p>通过添加<code>crossorigin="anonymous"</code>支持跨域,对于字体文件是个特例,无论何时,字体文件都需要添加该属性</p> <pre data-index="2" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"preload"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"fonts/cicle_fina-webfont.woff2"</span> <span class="hljs-attr">as</span>=<span class="hljs-string">"font"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"font/woff2"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string">"anonymous"</span>></span></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4 id="wznav_3"><a name="t3"></a>其他资源预加载机制</h4> <ul><li><code><link rel="prefetch"></code> 已经被许多浏览器支持了相当长的时间，它是意图预获取一些资源，以备下一个导航/页面使用。这很好，但对当前的页面并没有什么助益。此外，浏览器会给使用<code>prefetch</code>的资源一个相对较低的优先级——与使用<code>preload</code>的资源相比。<br> 查看<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTTP%2FLink_prefetching_FAQ" rel="nofollow" title="Link prefetching FAQ">Link prefetching FAQ</a>可以了解更多细节。</li></ul> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1262777">pair 是 C++ 标准库中的一个模板类，用于存储两个对象的组合</a> <br /> <a href="/Article/Index/933720">截图转文字怎么操作？截图转文字的软件有哪些？</a> <br /> <a href="/Article/Index/1334838">WSL2和ubuntu的安装过程</a> <br /> <a href="/Article/Index/1143667">SOLIDWORKS 2023新产品发布会！带你领略SOLIDWORKS 2023新增功能！</a> <br /> <a href="/Article/Index/1361167">Java常量与变量</a> <br /> <a href="/Article/Index/766133">【智能优化算法】基于适应度相关优化器求解单目标优化问题附matlab代码</a> <br /> <a href="/Article/Index/1052160">Js实现时间函数</a> <br /> <a href="/Article/Index/1660366">Java中的大小顶堆的实现方式</a> <br /> <a href="/Article/Index/882338">goland远程调试k8s上容器</a> <br /> <a href="/Article/Index/1381161">AQS原理及源码解析</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/huxyc/article/details/128190716 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

哪些类型的内容可以被预加载？