衡阳网站建设要点推广网站备案花钱吗

当前位置： 首页 > news >正文

衡阳网站建设要点推广,网站备案花钱吗,拜博网站建设,网站悬浮窗口当你打开浏览器的网络标签时#xff0c;你会看到大量的活动。资源正在下载#xff0c;信息正在提交#xff0c;事件正在记录#xff0c;等等。 由于有太多的活动#xff0c;有效地管理这些流量的优先级变得至关重要。带宽争用是真实存在的#xff0c;当所有请求同时触发时… 当你打开浏览器的网络标签时你会看到大量的活动。资源正在下载信息正在提交事件正在记录等等。 由于有太多的活动有效地管理这些流量的优先级变得至关重要。带宽争用是真实存在的当所有请求同时触发时有些HTTP请求的优先级并不像其他请求那样高。例如如果你必须选择你可能更希望某人的付款请求成功完成而不是仅仅表示他们尝试过的分析请求。而让你的主要图片尽快显示无疑比在页面底部渲染你的标志更为重要。 幸运的是浏览器拥有越来越多的工具来帮助优先处理所有这些网络活动。这些“优先级提示”帮助浏览器在资源有限时对哪些请求应该优先处理做出更少的假设和更明确的决策。 这是一套有用的工具当它们得到很好的利用时它们可以对页面性能产生实质性的影响包括那些越来越重要的核心网络指标。让我们探索其中的一些以及它们最有帮助的一些场景。 这是一套有用的工具当它们得到很好的利用时它们可以对页面性能产生实质性的影响包括那些越来越重要的核心网络指标。让我们探索其中的一些以及它们最有帮助的一些场景。 优先加载的资源 现代浏览器有一个受到良好支持的方法可以告诉浏览器当前页面最终需要哪些资源link relpreload … /。当它放在文档的head中时浏览器会被指示尽快以“高”优先级下载它。 公平地说浏览器中的预加载扫描器已经非常擅长这方面的工作。因此预加载通常最适用于晚些时候发现的资源 - 任何不直接由你的HTML加载的东西比如通过内联样式属性加载的背景图像。但它也适用于任何其他可能不像你希望的那样被浏览器优先考虑的东西。 例如默认情况下Chrome 会以非常高的优先级加载字体但如果某人的网络连接速度很慢它会使用备用字体并降低该优先级。 考虑一个仅通过CSS font-face规则加载的字体 font-face {font-family: Inter Variable;src: url(./font.woff2) format(woff2); } 在加载时由于网络连接慢该字体获得了最低的下载优先级尽管它对于页面的视觉体验非常重要。 但我们可以通过预加载该资源来覆盖浏览器的决定 head!– Other stuff… –link relpreload href/font.woff2 asfont /head 现在它更受欢迎了 你可以直接在链接标签上使用 fetchpriority 来明确指示相对优先级这在同时预加载多个资源时非常有用。 这是一个假设的场景你想预加载两种字体但想让其中一种优先于另一种 link relpreload href./font-1.woff2 asfont fetchprioritylow / link relpreload href./font-2.woff2 asfont fetchpriorityhigh / 网络活动的结果会反映这些指示。 何时使用 通常当资源不直接由HTML加载但对页面的体验至关重要时例如字体、CSS背景图像等使用预加载。当预加载多种同类型的资源且你明确知道哪个最重要时加入fetchpriority属性。 优先化 fetch() 请求 我认为Fetch API 是现代网络的最佳工具之一。与 XMLHttpRequest 相比它有一些很好的功能比如在外发请求时发出优先信号的能力。 最容易想到的用例是分析请求。当带宽有限并且有多个请求在执行时浏览器会自行决定优先级。但我们作为工程师应该知道通常的分析请求应该优先于页面目的更为关键的其他请求。现代的fetch()使这变得简单。 下面是两个请求几乎同时入队的简单设置 fetch(http://localhost:8000/pay, {method: POST,body: paymentBody, });fetch(http://localhost:8000/log, {method: POST,body: loggingBody, }); 默认情况下浏览器会自动将它们都视为 高 优先级 现在我们要明确地告诉浏览器每个请求的优先级 fetch(http://localhost:8000/pay, {method: POST,body: paymentBody,priority: high });fetch(http://localhost:8000/log, {method: POST,body: loggingBody,priority: low }); 这次优先级是不同的 可能的担忧是low优先级的请求可能会丢失 - 如果用户过早离开页面请求可能会被取消。这是一个真正的问题。根据几个因素关闭标签页或转到下一个页面可能导致一个重要但相对低优先级的请求被中止。 幸运的是fetch() 还接受一个     keepalive 选项。当设置为true时即使页面终止浏览器也会完成该请求。 何时使用 当你知道多个请求正在并发执行并且你明确知道哪个最重要或哪个可以安全地被降级时指示fetch()的优先级。 优先化img /请求 如果我们不做任何特殊处理浏览器会尽量确定页面上最重要的图像。为了说明这一点我加载了以下图像它们之间的距离很大所以只有一个会在页面首部显示。 img src./cat-1.jpeg / div styleheight: 5000px/div img src./cat-2.jpeg / div styleheight: 5000px/div img src./cat-3.jpeg / 浏览器发现了哪个最重要但这花了一秒钟。当开始下载时这三者都是“低”优先级。但很快页面首部的那个切换到了“高”优先级。 当我为第一张图片添加fetchpriority属性时情况变得更加可预测 img src./cat-1.jpeg fetchpriorityhigh / 此后cat-1.jpeg 从一开始就以最高的优先级加载。虽然最初令人费解但这是有道理的。浏览器非常擅长确定资源的关键性但它从明确的指示中受益。如果你知道一张图片很重要就明确说明。 顺便说一句这个特性与本地图像延迟加载非常搭这是现在非常受支持的特性。 img src./cat-1.jpeg fetchpriorityhigh/ div styleheight: 5000px/div img src./cat-2.jpeg loadinglazy / div styleheight: 5000px/div img src./cat-3.jpeg loadinglazy / 有了这个浏览器就知道如何加载图像只在合适的时候加载。在我的情况下它甚至不会开始请求初始加载时屏幕外的图像。相反它会等到它们更接近视口。 何时使用 当你知道它们对页面体验非常重要时对图像使用明确的fetchpriority。主图像是一个很好的开始它甚至可以影响页面的核心网络指标 - 特别是LCP最大内容绘制。 优先化 script / 标签 页面上带有src属性的任何普通script /在获取时都会得到高优先级但这有一个权衡在它加载并执行之前它会阻止解析页面的其余部分。出于这个原因async属性很有用。它会以低优先级在后台请求脚本并在准备好后立即执行。知道这一点以下设置行为是可预测的 script src/script-async.js async onloadconsole.log(async)/script script src/script-sync.js onloadconsole.log(sync)/script scriptconsole.log(inline);/script 异步脚本在优先级中被降低 控制台确认在 async 脚本加载过程中允许解析和执行后续脚本。 非阻塞但高优先级的脚本 大多数时候这种行为都很好。但有时你可能希望脚本既以“高”优先级加载又异步加载。 一个可能的场景是在落地页的英雄部分安装一个小的 SPA。为了保留页面的核心网络指标特别是LCP和FID首次输入延迟很快将被下一个绘制的交互所取代你需要高度优先这个脚本毕竟它负责构建和供电你的应用。但同时你不希望它阻止页面的其余部分进行解析。 所以我们给它一个fetchpriority script src/script-async.js async onloadconsole.log(async) fetchpriorityhigh/script script src/script-sync.js onloadconsole.log(sync)/script scriptconsole.log(inline);/script 现在它以提高的优先级下载同时仍然不阻止页面的其他部分 控制台验证了这一点。有了更高的优先级异步脚本加载得更快。在这种情况下甚至比同步和内联的还要快。 虽然我这里没有特意玩它但是是的fetchpriority 也适用于延迟的脚本。 何时使用 当你提前知道脚本的优先级并且怀疑浏览器可能没有足够的信息来自行决定时将 fetchpriority 放在你的脚本上。正如我所提到的对于你希望以非阻塞、异步的方式加载的脚本优先化它们特别有帮助。 有意使用 很容易对这样的工具过于热衷导致过度使用。所以要小心 - 这样做可能会付出代价。正如俗话所说“强调一切强调无。”事实上过度使用可能实际上使得浏览器更难管理网络争用损害页面的性能。 MDN 甚至特意在他们的优先级提示文档中指出 仅在浏览器可能无法自动推断加载资源的最佳方式的特殊情况下使用它。过度使用可能会导致性能下降。 所以不要因为这些工具存在就觉得有义务使用它们。小心使用。 回顾何时提示 这里有很多内容所以让我们快速回顾一下你可能选择使用优先级提示的时机。这些都不是详尽无遗的。只是一些好的开始。 当你希望浏览器知道多个晚些时候发现的资源其中一些比其他资源更对页面至关重要时提示预加载的资源。提示你知道是用户体验的关键部分的 fetch() 请求或者可以安全地被降级以为更重要的请求让路。提示你希望尽快加载和显示的首屏图像。提示对页面功能至关重要的脚本但你不希望阻止页面的其他部分包括其他资源被解析和下载。 让浏览器猜得少些 浏览器非常擅长弄清楚如何以及何时下载使我们的页面运行的东西。但它并不总是那么好。它不知道一个页面存在的原因也不知道它的各个部分背后的意图。所以偶尔它可以使用一些额外的帮助。 这就是为什么这些优先级提示存在的原因为了使指令清晰并且让浏览器很少有机会做出错误的决策。下次当你研究自己应用程序的网络活动时记住它们当有意义时使用它们来帮助使你的页面性能更加智能。 欢迎长按图片加刷碗智为好友定时分享 Vue React Ts 等。 最后 vue2与vue3技巧合集 VueUse源码解读