经典访谈题:web前端性能优化方法的预加载

发布时间:2019-11-20 09:31:50

在昨天的文章“经典访谈题——延迟加载的web前端性能优化方法”中,我们谈到了延迟加载技术。由于存在延迟加载,因此存在预加载。今天的文章是关于如何通过预加载实现web性能优化的。

加载

预加载技术是指在将来的某个时间加载浏览器所需的资源,并在特定的时间段内直接使用。作为开发人员,我们必须比普通用户更了解web资源的加载顺序,才能通过预加载技术来通知浏览器web所需的核心资源,从而提高web页面的访问速度。

预加载技术包括很多方面,包括dnsprefetch、preconnect、prefetch、subrource和prerender。让我们一个一个地看看。

DnsPrefetching公司

顾名思义,dnsPrefetching就是预先解析dns。

开发人员可以通过代码告诉浏览器尽早解析特定的dns。当他们请求域名下的文件时,他们可以直接使用DNS下的文件,而不是解析DNS。这种方法在使用第三方库时特别有效。

要使用它,请将以下代码添加到head标记

预连接

预连接类似于dnspref刻蚀。它预先建立tcp握手连接,必要时建立tls连接。

在现代浏览器中,将尽可能地预测网站所需的连接。通过预先连接,可以消除实时请求时dns解析和tcp连接的时间。

开发人员可以通过代码告诉浏览器哪些资源可以预先连接。代码片段如下

预取

预取是将将来某个时间要使用的资源通知浏览器。它可以预先请求并缓存。当确实需要时,可以直接从缓存中获取。预取可以预取图像、css、js和其他资源文件。

通过下面的代码,我们可以预拉和缓存图片。

当然,浏览器在任何情况下都不会执行预取操作,例如,在网络状况不好的情况下,浏览器不会请求大量资源,Firefox只会在空闲时间执行预取操作。

子资源

子资源用于指定加载资源的高优先级。使用的方法如下。

与预取不同,预取指定未来页所需的低优先级资源,而子资源指定当前页所需的高优先级资源。因此,在指定要在当前页中使用的资源时,建议使用子资源,而要在后续页中使用的资源则提前加载预取。

预渲染

prerender允许浏览器提前加载指定页上的所有资源。

prenderwe可以理解这一点:浏览器实际上会在后台打开一个隐藏的选项卡,其中会下载页面上所需的所有资源。如果用户输入指定的链接,将立即显示隐藏页,并且用户无法区分该页是上一个隐藏页还是重新打开的页。

并非所有页面都适合预渲染功能。如果用户无法进入指定的链接页面,则许多预先加载的资源文件将浪费大量带宽。

我们可以分析一些更适合使用预渲染功能的页面:

单击下一页时,可以使用prerender属性预加载下一页的内容。

注册后,新用户会选择登录,登录页面完成后,会跳转到主页面。这两个进程更适合预渲染属性的预加载。

今天的文章将集中讨论预加载的web性能优化方法,其他关于web性能优化的文章稍后将不断更新。