圣沃工程建设工程公司网站,室内设计网课推荐,优秀flash网站设计,百度自助建站官网在现代 Web 开发中#xff0c;页面加载速度是影响用户体验和搜索引擎优化#xff08;SEO#xff09;的关键因素之一。为了提高页面加载速度#xff0c;浏览器提供了一系列资源提示关键词#xff0c;包括 defer、async、preload、prefetch、prerender 和 preconnect#x…在现代 Web 开发中页面加载速度是影响用户体验和搜索引擎优化SEO的关键因素之一。为了提高页面加载速度浏览器提供了一系列资源提示关键词包括 defer、async、preload、prefetch、prerender 和 preconnect帮助开发者优化资源加载的优先级和顺序。
一、渲染阻塞回顾
在深入探讨资源提示关键词之前我们需要回顾一下渲染阻塞的概念。渲染阻塞是指某些资源如 CSS 和 JavaScript在加载和解析过程中会阻止页面的渲染从而延迟页面的首次内容绘制FCP和首次可交互时间TTI。
一DOM 和 CSSOM
浏览器在解析 HTML 时会构建 DOM文档对象模型而 CSS 样式会被解析为 CSSOMCSS 对象模型。只有当 DOM 和 CSSOM 构建完成后浏览器才会生成渲染树并开始渲染页面。
二JavaScript 的阻塞特性
JavaScript 是一种可以动态修改 DOM 和 CSSOM 的语言。因此当浏览器遇到 script 标签时必须立即执行脚本以确保后续内容的正确解析。如果脚本是外部的浏览器需要暂停解析 HTML等待脚本下载和执行完成后再继续解析。
三CSS 的阻塞特性
CSS 也会阻塞渲染因为浏览器需要在渲染页面之前解析所有 CSS 样式。如果 CSS 文件过大或加载过慢会导致页面渲染延迟。
二、资源提示关键词
为了优化页面加载速度现代浏览器提供了以下资源提示关键词帮助开发者更好地控制资源加载的顺序和优先级。
一defer 和 async
defer 和 async 是用于优化 JavaScript 加载的两个属性它们可以减少 JavaScript 对页面渲染的阻塞。
1. async
async 表示脚本的加载和执行是异步的不会阻塞 DOM 的构建。脚本会在下载完成后立即执行但不会影响后续 HTML 的解析。
script async srcscript.js/script特点
适用于不依赖于 DOM 完全加载的脚本。适合用于加载第三方库如统计代码。
2. defer
defer 表示脚本的加载是异步的但执行会在 DOM 完全解析后、DOMContentLoaded 事件触发前完成。这意味着脚本不会阻塞 DOM 的构建但会在页面加载完成后执行。
script defer srcmyscript.js/script特点
适用于依赖于 DOM 完全加载的脚本。适合用于初始化页面功能的脚本。
二preload
preload 是一种预加载机制用于告诉浏览器提前加载某些资源。这些资源会在页面加载时立即可用从而减少加载时间。
link relpreload hrefstyle1.css asstyle
link relpreload hrefmain1.js asscript特点
适用于页面中必须立即加载的资源。可以通过 as 属性指定资源类型帮助浏览器优化加载策略。
三prefetch
prefetch 是一种预加载机制用于在浏览器空闲时加载页面将来可能用到的资源。这些资源会被缓存以便在用户访问相关页面时快速加载。
link relprefetch href/path/to/style.css asstyle特点
适用于用户可能访问的下一个页面的资源。可以显著提升多页面应用MPA的用户体验。
四prerender
prerender 是一种更激进的预加载机制它会在后台渲染整个页面。这意味着当用户点击链接时页面已经加载完成用户可以立即看到内容。
link relprerender hrefhttps://www.keycdn.com特点
适用于用户极有可能访问的页面。可能会增加服务器负载需要谨慎使用。
五preconnect
preconnect 是一种资源提示用于告诉浏览器提前建立连接。它可以在实际请求资源之前完成 DNS 查找、TCP 握手和 TLS 协商从而减少请求延迟。
link hrefhttps://cdn.domain.com relpreconnect crossorigin特点
适用于需要频繁请求的外部资源如 CDN。可以显著减少首次请求的延迟。
六dns-prefetch
dns-prefetch 是一种资源提示用于告诉浏览器提前进行 DNS 查找。它可以在用户浏览页面时后台进行 DNS 解析从而减少后续请求的延迟。
link reldns-prefetch href//fonts.googleapis.com
link reldns-prefetch href//www.google-analytics.com
link reldns-prefetch href//cdn.domain.com特点
适用于外部资源如字体、CDN的 DNS 解析。可以显著减少首次请求的延迟。
三、最佳实践
一合理使用 defer 和 async
使用 async 加载不依赖于 DOM 完全加载的脚本。使用 defer 加载依赖于 DOM 完全加载的脚本。
二预加载关键资源
使用 preload 预加载页面中必须立即加载的资源。使用 prefetch 预加载用户可能访问的下一个页面的资源。
三提前建立连接
使用 preconnect 提前建立连接减少首次请求的延迟。使用 dns-prefetch 提前进行 DNS 查找减少后续请求的延迟。
四避免过度预加载
预加载资源会增加服务器负载需要根据实际需求合理使用。避免预加载过多资源以免浪费带宽和服务器资源。
