黄冈网站建设收费,建一个英文网站需要多少钱,重庆妇科医院咨询,网站建设详细流程前言
资源加载优先级是指在页面渲染的过程中#xff0c;浏览器决定加载哪些资源并优先加载它们的一种机制。正确配置资源加载的优先级可以显著改善页面加载性能#xff0c;确保关键资源优先加载#xff0c;提高用户感知的加载速度。
Web 资源加载方式
同步加载
同步加载…前言
资源加载优先级是指在页面渲染的过程中浏览器决定加载哪些资源并优先加载它们的一种机制。正确配置资源加载的优先级可以显著改善页面加载性能确保关键资源优先加载提高用户感知的加载速度。
Web 资源加载方式
同步加载
同步加载是指浏览器在加载 HTML 页面时按照资源出现的顺序依次加载和解析每个资源加载完成后才会继续加载下一个资源。
当浏览器遇到一个资源请求如script、link、img时会立即发送请求并阻塞页面渲染直到该资源加载完成。这种方式可以确保资源按顺序执行但也可能导致页面阻塞特别是对于较大的资源。
异步加载
异步加载是指浏览器在遇到异步资源时会继续渲染页面而不等待该资源的加载和执行从而提高页面的加载性能。
通过设置 script 标签的 async 或 defer 属性可以实现脚本的异步加载。异步脚本在下载过程中不会阻塞页面的渲染但执行时可能会影响到正在进行的渲染。
预加载Preload
预加载是一种通过告知浏览器提前加载将来可能会用到的关键资源的机制以便在需要时能够更快地获取这些资源。预加载通常用于加载与当前页面交互无关但在后续页面中可能会用到的资源比如异步加载的脚本、字体、图片等
我们可以通过在页面的head 部分使用 link 元素来指定预加载资源。
!-- 预加载样式表 --
link relpreload hrefstyles.css asstyle /!-- 预加载脚本 --
link relpreload hrefscript.js asscript /!-- 预加载图片 --
link relpreload hrefimage.jpg asimage /适用场景
关键资源优化 预加载适用于首屏渲染所需的关键资源如页面的主样式表、主脚本等。通过在页面加载过程中提前加载这些关键资源可以提高页面加载速度。异步加载的资源 适用于那些在页面加载时不会立即使用但在稍后可能会用到的资源。例如异步加载的脚本、字体或一些后续页面中可能用到的图片。资源依赖关系 当某个资源依赖于其他资源时预加载可以确保这些依赖资源在需要时已经被提前加载。关键用户路径优化 针对一些特定的用户路径预加载可以确保用户在进行特定操作时所需的资源已经就绪提高用户体验。
预取Prefetch
预取Prefetch是一种告知浏览器在空闲时提前获取将来可能会用到的资源的机制以便在用户导航到相关页面时能够更快地加载这些资源。预取通常用于加载与当前页面无关但在用户即将访问的下一个页面中可能会用到的资源以提高用户在导航时的加载速度。
我们通过在页面的 部分使用 元素来指定预取资源。
!-- 预取样式表 --
link relprefetch hrefstyles.css asstyle /!-- 预取脚本 --
link relprefetch hrefscript.js asscript /!-- 预取图片 --
link relprefetch hrefimage.jpg asimage /适用场景
下一页面的资源 预取适用于加载用户即将访问的下一个页面所需的资源。通过在当前页面上提前获取下一个页面可能用到的资源可以在用户导航时提高加载速度。 一个项目中的具体例子是项目课件详情页需要加载进行课件解析的内容而且用户大概率会进入到课件解析页这时候就可以使用预取来提前加载课件解析页的资源以提高用户在导航时的加载速度。 预取用户可能浏览的内容 预取可以用于加载用户可能浏览的内容例如懒加载的图像、异步加载的组件等。
预渲染Prerender
预渲染是一种在用户尚未点击链接之前提前加载并渲染链接指向的页面的技术。它实际上是在后台构建并渲染下一个页面以便在用户导航至该页面时可以瞬间呈现。
我们 使用link 元素的 rel 属性来指定预渲染。
!-- 预渲染下一个页面 --
link relprerender hrefnext-page.html /适用场景 预渲染通常适用于对用户体验要求极高的场景例如单页应用SPA中的某个视图或特定的 landing 页面。
Fetch Priority
Fetch Priority获取优先级是一种在网络请求时指定资源加载优先级的机制。它允许开发者通过设置优先级控制浏览器在处理多个请求时哪些资源应该首先被获取和加载。 Fetch Priority 主要用于优化页面加载性能确保关键资源能够尽快加载提高用户体验。
在发起网络请求时可以通过设置请求的 priority 参数来指定资源的优先级。优先级分为 “very-low”、“low”、“medium”、“high”、“very-high” 五个级别。
fetch(example.jpg, { priority: high }).then((response) response.blob()).then((data) {// 处理获取到的数据});注意事项 兼容性 Fetch Priority 可能不被所有浏览器完全支持因此在使用时需要注意浏览器的兼容性。 网络条件 实际的资源加载优先级可能受到网络条件的影响例如在弱网络环境下即使设置了高优先级也可能因为网络延迟而无法立即获取资源。 合理使用 Fetch Priority 应该根据具体的页面需求合理使用不宜过度设置以免产生不必要的网络负担。
总结
资源加载方式适用场景示例代码同步加载关键脚本、必要资源script srcmain.js/script异步加载非关键脚本、提高性能script async srcanalytics.js/script预加载 (Preload)关键资源、异步加载资源、资源依赖关系link relpreload hrefstyle.css asstyle预取 (Prefetch)下一个页面的资源、提前加载用户可能浏览的内容link relprefetch hrefnext-page.html预渲染 (Prerender)对用户体验要求极高的场景link relprerender hrefnext-page.htmlFetch Priority精细化控制资源加载顺序、网络请求优先级fetch(example.jpg, { priority: high }) 本文首发于个人博客前端开发笔记由于笔者能力有限文章难免有疏漏之处欢迎指正
