首页
新闻

栏目分类

新闻

你的位置:油管加速器 > 新闻 > 让.更快-第一部分

让.更快-第一部分

发布日期:2022-08-05 15:05    点击次数:73

< --="" -="">[注]本文译自:飞狗 . :< -="">近年来.发生了许多的变化——我们推出了故事、过滤器、创建工具、直接消息传递以及许多其它功能和增强功能,然而随着产品的迭代发展,带来的其中一个副作用就是我们的网络性能开始下降。在过去的一年里我们做出了相应的努力来改善这一状况。到目前为止,我们将信息流页面的加载时间减少了%,这个系列的文章将会具体的阐述为了达到这些优化,我们做了些什么。 信息流页面展示完成时间在过去一年里的性能改进(单位毫秒)< -="_-"> 正确的资源下载和执行的优先级并减少页面加载期间的浏览器阻塞时间是提高应用性能的主要手段之一。在我们的案例中,许多种类型的优化被证明比减少代码大小更为立竿见影,减少的代码大小通常比较少,只有做了很多增量的改进后才开始累加(不过我们会在后续的文章中进行讨论)。它们对产品开发的破坏性较小,需要更改和重构的代码也很少。因此刚开始我们把精力集中于资源预取()方面。文件、异步请求()、图片预取()(以及需要注意的地方)< -="">一般的,我们希望尽可能早的通知浏览器加载页面时所需的是哪些资源。作为开发者我们哪个提前知道我们将需要哪些资源,但是浏览器可能在页面加载的后期才能知道需要哪些资源。这些资源主要是动态加载的内容(其它脚本,图片,异步请求等),因此浏览器只有先解析和执行一些脚本之后才能知道这些依赖的资源。< -="">无需等待浏览器自己发现这些资源,我们可以向浏览器提示它应该立即开始获取这些资源。我们这样做的方法是使用预加载标签。他们看起来像这样:<>&; =&#;&#; =&#;--.&#; =&#;&#; =&#;/&#; /&;< -="">在,我们将这些预加载提示用于关键页面加载路径上的两种资源:动态加载的和预加载 数据请求。动态加载的脚本是通过(&#;...&#;)特定客户端路由加载的脚本。我们维护服务器端入口点和客户端路由脚本之间的映射列表——因此,当我们在服务器端收到页面请求时,我们知道特定服务器端入口点将需要哪些客户端路由脚本,所以我们可以在渲染初始页面时为这些特定于路由的脚本添加预加载。< -="">例如,对于入口点,我们知道客户端路由最终将请求.,因此可以添加以下内容:<>&; =&#;&#; =&#;//.&#; =&#;&#; =&#;/&#; /&;< -="">同样的,假如我们知道特定页面入口将发出特定的请求,那么我们应该预加载该请求。这一点特别重要,因为这些查询有时可能会花费很长时间,并且在此数据可用之前无法呈现页面。因此,我们希望服务器能够在页面生命周期中尽早生成响应。<>&; =&#;&#; =&#;//?=&#; =&#;&#; =&#;/&#; /&;< -="">在较慢的连接上,页面加载行为的更改更加明显。通过模拟的快速连接(下面的第一个瀑布-没有任何预加载),apex加速器推荐我们看到.及其关联的查询仅在.完成加载后才开始。但是,在进行预加载的情况下,只要页面可用,.及其查询都可以开始加载。这也减少了加载任何非关键的延迟加载脚本的时间,这可以在第二个瀑布中看到。这里,.和.(取决于.)几乎在.完成之后立即开始加载。 没有预加载< ="--">有预加载< ="--">预加载优先级的好处< -="-">除了可以更快地开始下载资源外,链接预加载还具有增加异步脚本下载的网络优先级的额外好处。这对于关键加载路径上的异步脚本而言非常重要,因为这些脚本的默认优先级为“ 低”。这 意味着请求和视口中的图像将具有更高的网络优先级,而视口之外的图像将具有相同的网络优先级。这可能导致渲染页面所需的关键脚本被阻止或必须与其他资源共享带宽(如果您有兴趣,请参考这里)深入讨论中的资源优先级)。谨慎使用(在一分钟内会对此进行更多介绍)可以对我们希望浏览器在初始加载期间如何优先确定内容的优先级(如果我们知道应该优先分配哪些资源)进行控制。预加载优先级的问题< -="">预加载的问题在于,它提供的额外控制会带来额外工作量,即正确设置资源优先级。例如,在移动和网络总体速度非常慢且数据包丢失严重的区域中进行测试时,我们注意到<>&; =&#;&#; =&#;&#;&;< -="">对脚本的网络请求的优先级高于&;/&;关键页面呈现路径上 包的标签的优先级,从而导致总体页面加载时间的增加。< -="">这源于我们在页面上布置预加载标签的方式。我们只是为将由客户端路由作为当前页面的一部分异步下载的包提供预加载提示。<>&;!-- --&;飞狗&; =&#;&#; =&#;.&#; =&#;&#; /&;飞狗&; =&#;&#; =&#;...&#; =&#;&#; /&;飞狗...飞狗&;!-- --&;飞狗&; =&#;.&#; =&#;/&#;&;&;/&;飞狗&; =&#;.&#; =&#;/&#;&;&;/&;< ="--">< -="">仅预加载异步路由包 在已登出页面的示例中,我们在.和.之前过早下载(预加载).,并且由于预加载的资源以最高优先级下载但未解析/编译,因此它们阻止了&能够开始解析/编译。数据保护程序团队还发现了与预加载类似的问题,并在此处撰写了有关其解决方案的文章。在他们的情况下,他们选择始终将异步资源的预加载放在请求它们的资源的脚本标记之后 。在我们的案例中,我们选择了一种稍微不同的方法。我们决定为所有商品添加预加载标签脚本资源,并按照需要的顺序放置它们。这确保了我们能够尽早开始在页面中预加载所有脚本资源(包括直到将某些服务器端数据添加到页面之后才能呈现为的同步脚本标签),并确保我们能够可以控制脚本资源加载的顺序。< ="--"><>&;!-- --&;飞狗&; =&#;&#; =&#;.&#; =&#;&#; /&;飞狗&; =&#;&#; =&#;.&#; =&#;&#; /&;飞狗&;!-- --&;飞狗&; =&#;&#; =&#;.&#; =&#;&#; /&;飞狗...飞狗&;!-- --&;飞狗&; =&#;.&#; =&#;/&#;&;&;/&;飞狗&; =&#;.&#; =&#;/&#;&;&;/&;飞狗&; =&#;.&#; =&#;/&#; &;&;/&;图片预取()< -="">.一个主要的页面是信息流页面,包括了含有图片和视频的无限滚动。我们的实现是,先加载一批文章,其它的文章在用户向下滚动时再加载。但是我们不想让用户每次滚动到底部加载时等待(在加载新的文章时)。因此在当前信息流页面结束前加载对于用户体验来说就非常重要了。 由于以下几个原因,在实践中很难做到这一点:我们不希望屏幕外的批量加载占用用户当前正在查看的信息流部分的和带宽优先级我们不想过分地预加载帖子,以免浪费用户带宽,而用户可能再也不需要向下滚动查看内容,但是另一方面,如果预加载不足,则用户经常会遇到提要结束。.需要兼容各种屏幕尺寸和设备,因此我们使用 属性显示信息流图片(可让浏览器根据用户的屏幕尺寸决定使用哪种图像分辨率)。这意味着确定要预加载的图像分辨率并不容易,并且存在预加载浏览器永远不会使用的图像的风险。< -="">我们用于解决该问题的方法是构建一个具有优先级的任务管理,以处理异步队列(在这个案例下,就是指下一批信息流文章的预取)。这个预取任务在空闲优先级进行队列的初始化(使用),因此除非浏览器未执行任何其他重要工作,否则它不会开始。但是,如果用户滚动到当前提要的结尾足够近的位置,我们将通过取消挂起的空闲回调并将此预取任务的优先级提高到“高”,从而立即触发预取。 < ="--">< -="">下一批文章的数据到达后,我们将在后台对该预加载的一批帖子中的所有图像按照顺序进行有序化预取。我们以帖子在信息流中显示的顺序(而不是并行显示)的顺序进行顺序预取,以便我们可以优先下载和显示最接近用户视口的帖子中的图像。为了确保我们实际上预取了正确的图像大小,我们使用了一个隐藏的媒体预取组件,其尺寸与当前信息流一致。在此组件内部是一个&;&;使用属性,与真实中的属性相同。这意味着我们可以将图像预取的选择权留给浏览器,以确保它使用与渲染真实信息流文章时相同的逻辑来选择正确的图像以显示在媒体预取组件上。这也意味着,只要我们使用设置为与目标显示组件相同尺寸的媒体预取组件,就可以预取站点其他内容(例如,个人资料页面)上的图像。< -="-">以上,这样做的组合效果是,将照片加载时间减少了%(即,将信息流帖子添加到和该帖子中的图像实际加载并变为可见之间的时间),以及将照片加载时间减少了%。用户在信息流的末尾等待下一页所花费的时间。敬请期待第二部分< -="">第部分:早期刷新和渐进式(以及为什么不必将 / 推送用于将资源推送到浏览器的原因)< -="-">欢迎关注,共同成长:< -=""> - 知乎专栏-前端杂谈 < -="_">- / < -="">- 掘金-叶雨森 < -="">- 欢迎关注公众号-前端杂谈() <>

Powered by 油管加速器 @2013-2022 RSS地图 HTML地图