学习篇：script、link、meta标签

学习篇：script、link、meta标签

• href： 可填写的值

  1. stylesheet：css样式表
  2. icon：网页图标
  3. apple-touch-ico：苹果启动图标
  4. preconnect：提前初始化与下一个资源将会请求的起源的连接，比如字体或API
  5. preload：提示浏览器提前加载资源，无阻塞地加载将来会用到的资源。
  6. prefetch：提示浏览器预取某个资源以提高性能，资源会被低优先级加载。
  7. dns-prefetch：预解析DNS，加快后续对同一域的请求速度。
  8. prerender：提示浏览器在后台预先渲染整个页面以提高速度

• hreflang：外部资源使用的语言

• media ：常用的就是screen(手机等屏幕)、print(打印机)

• rel ： 必填，表明当前文档和外部资源的关系 常用的有这些dns-prefetch

  1. dns-prefetch：指定浏览器预先执行目标资源的DNS解析
  2. icon：网页图标
  3. preload：对资源进行预加载
  4. prefetch：对资源进行预加载并缓存，通常preload用于加载当前页面的资源，而prefetch用于加载将来页面可能需要的资源
  5. stylesheet：指定作为样式表的外部资源

• sizes: 指定图标的大小,对属性rel="icon"生效

• type:application/javascript

  1. application/javascript、text/css、font/woff

meta标签的属性

http-equiv：是一个放在HTML 标签中的属性，它用来模拟HTTP响应头字段。

1. redresh：自动刷新或重定向页面，，<meta http-equiv="refresh" content="5; URL=https://example.com"> 表示5秒后页面将自动跳转到example.com。
2. expires:指定文档的过期时间。这会影响浏览器是否从缓存中加载页面,<meta http-equiv="Expires" content="Sat, 25 Jul 2025 00:00:00 GMT"> 设置页面在2025年7月25日前不会过期。
3. pragma: 用于禁用缓存。最常见的值是no-cache，如<meta http-equiv="Pragma" content="no-cache">，告诉浏览器不要缓存页面。
4. x-ua-compatible: 指定页面的兼容性模式，特别是针对Internet Explorer。例如，<meta http-equiv="X-UA-Compatible" content="IE=edge"> 告诉IE使用最新的渲染引擎。

rel属性应用详解

preload

在页面渲染之前对资源进行预加载，如下预加载了css和js文件，而在页面的渲染时，一旦需要此资源，则可以立即使用

prefetch

对资源进行预加载，一般用于加载非本页的其他页面所需要的资源，以便加快后续页面的首屏渲染速度。资源加载完成后，可以被缓存。

dns-prefetch

DNS Prefetch是一种DNS预解析技术，用户在浏览网页时，浏览器会对网页中的域名进行解析缓存，而在用户单击页面的链接时，就不再进行DNS的解析，以此减少用户等待时间，提升用户体验。

默认情况下浏览器会对页面中和当前网页不在同一个域下的域名进行预解析，并缓存结果，即隐式的DNS解析，而对于页面中未出现的域进行预解析，则可通过link标签。

  link方式的DNS的预解析与页面的加载是并行处理的，不会影响到页面的加载性能。