寻甸马铃薯建设网站,中国网建短信平台,群晖wordpress 映射,织梦网站下载使用 dns-prefetch
DNS-prefetch 尝试在请求资源之前解析域名。这可能是后面要加载的文件#xff0c;也可能是用户尝试打开的链接目标。
为什么要使用 dns-prefetch#xff1f;
当浏览器从#xff08;第三方#xff09;服务器请求资源时#xff0c;必须先将该跨源域名解…使用 dns-prefetch
DNS-prefetch 尝试在请求资源之前解析域名。这可能是后面要加载的文件也可能是用户尝试打开的链接目标。
为什么要使用 dns-prefetch
当浏览器从第三方服务器请求资源时必须先将该跨源域名解析为 IP 地址然后浏览器才能发出请求。此过程称为 DNS 解析。虽然 DNS 缓存可以帮助减少此延迟但 DNS 解析可能会给请求增加明显的延迟。对于打开了与许多第三方的连接的网站此延迟可能会大大降低加载性能。
dns-prefetch 可帮助开发人员掩盖 DNS 解析延迟。HTML link 元素通过设置 rel 属性值为 dns-prefetch 提供此功能。然后在 href 属性中指明要跨源的域名
语法
HTMLCopy to Clipboard
link reldns-prefetch hrefhttps://fonts.googleapis.com/ /示例
HTMLCopy to Clipboard
html langenheadmeta charsetutf-8 /meta nameviewport contentwidthdevice-width,initial-scale1 /link reldns-prefetch hrefhttps://fonts.googleapis.com/ /!-- 其他 head 元素 --/headbody!-- 你的页面内容 --/body
/html每当站点引用跨源资源时都应在 head 元素中放置 dns-prefetch 提示但是要记住一些注意事项。
最佳实践
请记住以下三点
首先dns-prefetch 仅对跨源域上的 DNS 查找有效因此请避免使用它来指向你的站点或域。这是因为到浏览器看到提示时你的站点背后的 IP 已经被解析了。
其次还可以通过使用 HTTP Link 字段将 dns-prefetch以及其他资源提示指定为 HTTP 标头之一
HTTPCopy to Clipboard
Link: https://fonts.googleapis.com/; reldns-prefetch再其次考虑将 dns-prefetch 与 preconnect 提示配对。dns-prefetch 只执行 DNS 查询而 preconnect 则是建立与服务器的连接。这个过程包括 DNS 解析以及建立 TCP 连接如果是 HTTPS 网站就进一步执行 TLS 握手。将这两者结合起来可以进一步减少跨源请求的感知延迟。你可以像这样安全地将它们结合起来使用
HTMLCopy to Clipboard
link relpreconnect hrefhttps://fonts.googleapis.com/ crossorigin /
link reldns-prefetch hrefhttps://fonts.googleapis.com/ /备注 如果页面需要建立与许多第三方域的连接则将它们预先连接会适得其反。preconnect 提示最好仅用于最关键的连接。对于其他的连接只需使用 link reldns-prefetch 即可节省第一步——DNS 查询——的时间。
配对这些提示的逻辑是因为对 dns-prefetch 的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到 dns-prefetch 来获得更多好处。由于这是 HTML 特性因此容错性很强。如果不支持的浏览器遇到 dns-prefetch 提示或任何其他资源提示则网站不会中断只是不会获得它提供的好处。
一些资源如字体以匿名模式加载。在这种情况下应使用预连接提示设置 crossorigin 属性。如果省略了它则浏览器将仅执行 DNS 查找。 转自使用 dns-prefetch - Web 性能 | MDN 扩展
link标签可以包含以下属性
as指定被链接资源的类型。crossorigin指定如何处理跨域请求。disabled禁用被链接资源的加载。href指定被链接文档的URL。hreflang指定被链接文档的语言。media指定被链接样式表适用的媒体类型。rel指定当前文档与被链接文档之间的关系。sizes指定被链接资源的尺寸。title指定被链接资源的标题。type指定被链接文档的MIME类型。integrity用于验证资源完整性。referrerpolicy指定请求的Referer HTTP头部的策略。 当使用link标签引入外部资源时可以使用以下属性来进一步定义资源的相关信息
as属性指定被链接资源的类型用于告诉浏览器资源的实际类型以便更好地处理和优化加载。例如
link relpreload hreffont.woff2 asfont
crossorigin属性指定如何处理跨域请求。常用值包括
anonymous不发送用户凭据如cookie。
use-credentials发送用户凭据。
例子link relstylesheet hrefstyles.css crossoriginanonymous
disabled属性禁用被链接资源的加载。当设置为disabled时该资源不会被加载。例如
link relstylesheet hrefstyles.css disabled
href属性指定被链接文档的URL。指定外部资源的路径。例如
link relstylesheet hrefstyles.css
hreflang属性指定被链接文档的语言。用于指定被链接文档的语言。例如
link relalternate hrefalternate.html hreflangen
media属性指定被链接样式表适用的媒体类型。例如mediascreen表示样式表适用于屏幕显示。示例
link relstylesheet hrefstyles.css typetext/css mediascreen
rel属性指定当前文档与被链接文档之间的关系。常用值包括
stylesheet被链接文档是一个样式表。
icon被链接文档是一个图标。
例子link relstylesheet hrefstyles.css
sizes属性指定被链接资源的尺寸。用于指定被链接资源的尺寸。例如
link relicon hreffavicon.ico sizes16x16
title属性指定被链接资源的标题。用于指定被链接资源的标题。例如
link relstylesheet hrefstyles.css titleMain Stylesheet
type属性指定被链接文档的MIME类型。用于指定被链接文档的MIME类型。例如
link relstylesheet hrefstyles.css typetext/css
integrity属性用于验证资源完整性可以防止资源被篡改。可以设置为包含资源的哈希值的字符串。示例
link relstylesheet hrefstyles.css integritysha256-BXC3tFv8X7lS8wCHZt7zq7e8w3mGqf3a
referrerpolicy属性指定请求的Referer HTTP头部的策略。常用值包括
no-referrer不发送Referer头部。
no-referrer-when-downgrade在SSL连接时不发送Referer头部。
例子link relstylesheet hrefstyles.css referrerpolicyno-referrer link标签中的rel属性用于定义当前文档与被链接文档之间的关系。以下是常见的rel属性值及其含义
alternate指定当前文档的备用版本。常用于指定不同语言版本或格式的备用文档。stylesheet指定被链接文档是一个样式表。icon指定被链接文档是一个图标。preload指定被链接资源应该在页面加载时预加载。canonical指定当前文档的规范URL用于指定页面的主要版本。dns-prefetch指定被链接资源的域名应该进行DNS预解析。preconnect指定被链接资源应该在页面加载前进行连接。prefetch指定被链接资源应该在页面加载时预取。prerender指定被链接资源应该在后台进行预渲染。search指定当前文档是一个搜索入口。next指定当前文档是下一个文档。prev指定当前文档是前一个文档。help指定当前文档是一个帮助文档。license指定当前文档是一个许可证文档。
link标签中常用的rel属性值及其详细含义 alternate指定当前文档的备用版本。常用于指定不同语言版本或格式的备用文档。例如link relalternate hrefalternate.html hreflangen表示提供英语版本的备用文档。 stylesheet指定被链接文档是一个样式表。例如link relstylesheet hrefstyles.css typetext/css用于引入外部样式表。 icon指定被链接文档是一个图标。通常用于指定网站的favicon。例如link relicon hreffavicon.ico sizes16x16用于指定网站的图标。 preload指定被链接资源应该在页面加载时预加载。可以用于提前加载页面所需的资源以加快页面加载速度。例如link relpreload hrefimage.jpg asimage用于预加载图片资源。 canonical指定当前文档的规范URL用于指定页面的主要版本。可以帮助搜索引擎确定页面的主要版本。例如link relcanonical hrefhttps://www.example.com/page.html用于指定规范URL。 dns-prefetch指定被链接资源的域名应该进行DNS预解析。可以提前解析域名以减少域名解析时间。例如link reldns-prefetch href//example.com用于DNS预解析域名。 preconnect指定被链接资源应该在页面加载前进行连接。可以提前建立连接以减少资源加载时间。例如link relpreconnect hrefhttps://example.com用于预连接资源。 prefetch指定被链接资源应该在页面加载时预取。可以提前获取资源以加快后续资源加载速度。例如link relprefetch hrefimage.jpg asimage用于预取图片资源。 prerender指定被链接资源应该在后台进行预渲染。可以在后台渲染页面以提前展示给用户。例如link relprerender hrefhttps://www.example.com/page.html用于预渲染页面。 search指定当前文档是一个搜索入口。用于指定当前页面是一个搜索入口页面。例如link relsearch href/search titleSearch用于指定搜索入口。 next指定当前文档是下一个文档。用于指定当前页面的下一个文档。例如link relnext hrefnext.html用于指定下一个文档。 prev指定当前文档是前一个文档。用于指定当前页面的前一个文档。例如link relprev hrefprev.html用于指定前一个文档。 help指定当前文档是一个帮助文档。用于指定当前页面是一个帮助文档。例如link relhelp href/help titleHelp用于指定帮助文档。 license指定当前文档是一个许可证文档。用于指定当前页面是一个许可证文档。例如link rellicense href/license titleLicense用于指定许可证文档。 Canonical标签
Canonical标签应该有一部分人是有一点了解的主要是用于放我们的网站不可避免的出现了相同内容的东西有几个url地址的情况这个时候可以在head标签之添加一行Canonical的标签指定一个标注页面的地址告诉搜索引擎按照哪个链接作为标准版本有利于降低相同内容收录导致权重分散的情况。
搜索引擎会通过算法对网页内容及链接进行识别对内容完全相同或者高度相似的网页会计算出一个系统认为规范的网页结果建立索引并供用户查询。支持Canonical标签以后站长可以通过将元素和relcanonical属性添加到该网页非规范版本的部分为搜索引擎指定规范网页。添加此链接和属性可以告诉搜索引擎“在内容相同或高度相似的所有网页中该网页为最规范最有价值的页面推荐将该网页排在搜索结果中靠前的位置。”可通过在每个非规范版本的HTML网页的部分中添加一个relcanonical链接来进行指定规范网址。
relcanonical 可与相对链接或绝对链接一起使用但建议使用绝对链接以最大程度地减少可能出现的混乱或问题。如果网站需要更换域名且使用的服务器不能创建服务器端重定向网址的情况下就可以使用relcanonical 链接元素指定希望百度收录域的网址。用法是 使用Canonical 标签时要特别注意的两点
1百度虽然支持Canonical标签但并不保证完全遵守该标签。请站长注意最好在完全相同的网页中使用Canonical标签——这样可以提升Canonical标签的使用效果。之前的帮助文档中的确提到高度相似的网页也可以使用Canonical标签但在实际过程中我们发现相似网页使用Canonical标签的成功率较低。
2还有一点非常非常重要请各位站长在设置Canonical标签前仔细检查两个网页是否真的完全相同——一旦百度发现其中一个Canonical标签有问题会不信任该站点的所有Canonical标签。
alternate标签
如今移动的流量越来越大可以说不属于PC端的流量因此也就越来越多的站长么开始优化移动端的排名但是我们会发现pc如果简单的做个响应式、适配还是会很在灵活性的问题尤其时结构比较复杂的网站可以说只有单独建立移动站点才能更好的满足业务需求但是虽然说移动和PC是两个站点了但是本质上是一个网站内容都是一份的只是结构和排版上有点区别而已一方面我们可以站长后台提交适配规则来解决PC和移动页面的URL对应关系。
同时我们可以采用alternate和Canonical标签来完善这个问题我们可以在pc端加上 在移动页面加上 通过在PC端和移动使用对应的标签来指定对应页面的地址来告诉搜索引擎pc和移动的关系结构。 link标签的属性 我们知道标签就是定义文档与外部的关系它最常见的的用途是链接样式表。通常写的时候它只存在head部分中不过它可以出现任何次数。接下来我们具体的分析一下link标签中的属性
href 规定被连接文档的位置
link relstylesheet href./ease.css typetext/css /hreflang 规定被链接文档中文本的语言 *几乎没有主流浏览器支持
media 规定被链接文档被显示在什么设备上
*rel 规定当前文档与被链接文档之间的关系
1.pingback pingback是网志中常用的用来通知网志系统文章被引用情况的一种手段当其他人链接至Web作者的网页时Web作者将获取通知。这个方法使得Web作者可以追踪什么人链接至他的文章。
link relpingback hrefwww.fujieace.com/xmlrpc.php /2.profile
link relprofile hrefhttp://gmpg.org/xfn/11我们经常在模板中经常会看到如下 link 标签这个到底有什么用呢 不同浏览器可以根据自己设定的默认样式来呈现网页比如你把朋友定义成“friend”而我要按照拼音来定义成“pengyou”彼此之间无法统一该 功能就变得没有丝毫的意义。所以我们在HTML文档的标签中使用 profile 属性引入一个声明声明在这个HTML文档中使用了 XML Friends Network (XFN) 微格式然后按照这份XFN微格式中约定的方式来描述关系网络于是即使是不同用户代理器访问这些数据只要其遵循XFN的约定即可正确的读取出其中的关系 数据。
3.canonical 移动站relcanonical标签是为了解决网站由于网站url链接不一样但网页内容是一样而造成百度重复收录的问题对于这样的情况如果不采用百度relcanonical标签后果将导致百度对两个相同的网页收录和排名的问题上不知情久而久之当网站存在大量这样的网页的时候可能导致网站大量重复内容而被降权、不收录甚至被K。
使用relcanonical标签的基本样式link relcanonical href网页权威链接/写好这段代码之后将其放入非权威的网页的头部中即可。
4.dns-prefetch 浏览器主动去执行域名解析的功能,DNS预获取 dns-prefetch 提升页面载入速度 DNS Prefetch即DNS预获取是前端优化的一部分。一般来说在前端优化中与 DNS 有关的有两点 一个是减少DNS的请求次数另一个就是进行DNS预获取 。
link reldns-prefetch href//api.share.zhix.net5.preconnect 浏览器要建立一个连接一般需要经过DNS查找TCP三次握手和TLS协商如果是https的话这些过程都是需要相当的耗时的所以preconnet就是一项使浏览器能够预先建立一个连接等真正需要加载资源的时候就能够直接请求了。
link relpreconnect href//example.com6.prefetch 能够让浏览器预加载一个资源HTMLJSCSS或者图片等可以让用户跳转到其他页面时响应速度更快。
link relprefetch href/library.js asscript7.prerender prerender不仅会加载资源还会解执行页面进行预渲染但是这都是根据浏览器自身进行判断。 浏览器可能会 1.分配少量资源对页面进行预渲染 2.挂起部分请求直至页面可见时 3.可能会放弃预渲染如果消耗资源过多
link relprerender href//example.com/next-page.html8.alternate 在PC站点当中,在前加入
link relalternate hrefhttp://m.abc.com/在对应的移动站点中前加入
link relcanonical hrefhttp://www.abc.com/9.stylesheet 文档的外部样式表。
link relstylesheet hrefstyle.min.css typetext/css mediaall /10.icon 为网页标题添加自定义图标
link relicon hrefhttps://xxx/wp-content/uploads/2019/12/VidMate-fav.png sizes64x64 /type 属性 type 属性规定被链接文档的 MIME 类型。
该属性最常见的 MIME 类型是 “text/css”该类型描述样式表。
link relstylesheet typetext/css hreftheme.css /最下面的link标签的属性原文链接https://blog.csdn.net/meng2lin/article/details/105725584
