Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

High Performance Networking in Google Chrome #3

Open
zhuzhuaicoding opened this issue Apr 3, 2017 · 0 comments
Open

High Performance Networking in Google Chrome #3

zhuzhuaicoding opened this issue Apr 3, 2017 · 0 comments

Comments

@zhuzhuaicoding
Copy link
Owner

zhuzhuaicoding commented Apr 3, 2017

The many facets of performance

  1. Chrome工作在多进程模型
  2. Chroem使用Blink渲染,使用 "V8" JavaScript runtime
  3. 如果浏览器在网络层被阻塞,等待资源到达,优化V8 javascript执行,Blink渲染,渲染管道不会做很多工作。

现代web应用

  1. 1280KB大小
  2. 88个资源
  3. 15+不同的hosts

资源请求生命周期

xnavtiming png pagespeed ic qe85z-uuim
给定Web上的资源的URL,浏览器首先检查其本地和应用程序高速缓存。如果您先前已经获取了资源并提供了适当的缓存头(Expires,Cache-Control等),那么我们可能允许我们使用本地副本来满足请求 - 最快的请求是一个请求没有做或者,如果我们必须重新验证资源,如果它已过期,或者如果我们以前没有看到它,则必须调度昂贵的网络请求。

给定主机名和资源路径,Chrome首先检查检查现有已建立的连接 - 套接字由{scheme,host,port}组成。或者,如果已配置代理或指定代理自动配置(PAC)脚本,则Chrome将通过相应的代理检查连接。 PAC脚本允许基于URL或其他指定规则的不同代理,每个代理可以拥有自己的套接字池。最后,如果上述条件都不匹配,则请求必须首先将主机名解析为其IP地址,即DNS查询。

幸运的话,这个主机名已经被缓存过。否则,必须先发起一个 DNS Query。如果没有,则在任何其他工作可能发生之前,必须先发送DNS查询。执行DNS查找所需的时间将根据您的互联网提供商,网站的受欢迎程度以及主机名处于中间缓存的可能性以及该域的权威服务器的响应时间而变化。换句话说,有很多因素在起作用,但一个DNS查找到几百毫秒是不寻常的。

通过解析的IP地址,Chrome现在可以打开到目的地的新TCP连接,这意味着我们必须执行“三次握手”:SYN> SYN-ACK> ACK。该交换机为每个新的TCP连接添加了一个完整的延迟延迟 - 不需要快捷方式。根据客户端和服务器之间的距离以及选择的路由路径,这可能会产生几十到几百甚至几千毫秒的延迟。所有这些工作和延迟之前,甚至一个单字节的应用程序数据已经触电!

TCP握手完成后,如果我们连接到安全目的地(HTTPS),则必须进行SSL握手。这可以增加客户端和服务器之间的两个额外的RTT。如果SSL会话被缓存,那么我们可以通过一次额外的RTT。

最后,Chrome能够发送HTTP请求(上述的Nav Timing图中的requestStart)。一旦收到请求,服务器可以处理该请求,然后将响应数据返回到客户端。这导致了最少的网络往返时间,以及服务器上的处理时间。然后一个请求就完成了。但是,如果是一个HTTP重定向的话?在这种情况下,我们可能必须重复整个周期。在您的网页上有几个无偿重定向?你可能想重新审视那个决定!

你一直在计算所有的延误吗?为了说明这个问题,我们来假设典型宽带连接的最坏情况:本地缓存未命中,之后是相对较快的DNS查询(50ms),TCP握手,SSL协商以及相对快速(100ms)的服务器响应时间,往返时间为80毫秒(美国大陆的平均往返行程):

DNS的50ms
80ms用于TCP握手(一个RTT)
160ms用于SSL握手(两个RTT)
40ms请求到服务器
100ms用于服务器处理
40ms用于响应服务器
对于单个请求,这是470毫秒,与实际服务器处理时间相比,网络延迟开销超过80%,我们有一些工作要做!实际上,甚至470毫秒可能是一个乐观的估计:

如果服务器响应不适合初始TCP拥塞窗口(4-15 KB),则会引入一个或多个额外的延迟往返时间
如果我们需要获取缺少的证书或执行在线证书状态检查(OCSP),SSL延迟可能会更糟,这两者都需要一个全新的TCP连接,这可以增加数百甚至数千毫秒的额外延迟。

何为“足够快”?

DNS,握手和往返时间的网络开销在我们早期的情况下占主导地位 - 服务器响应时间仅占总延迟的20%! 但是,在宏伟计划的事情上,这些延误有关系吗? 如果你正在阅读这篇文章,那么你可能已经知道答案了:是的,非常重要。

Delay User Reaction
0 - 100ms 迅速Instant
100 - 300ms 有点慢Small perceptible delay
300 - 1000ms 机器还在工作Machine is working
1s+ 想想别的事Mental context switch
10s+ 好吧,我下次再回来I'll come back later...

上表同样适用于页面的性能表现:渲染页面,或者至少提供250毫秒以内的视觉反馈,以保持用户的参与。这就是针对速度。谷歌,亚马逊,微软以及数千个其他网站的研究表明,额外的延迟会直接影响到您网站的底线:更快的网站产生更多的网页浏览量,更高的用户参与度,以及更高的转化率。

所以,你有它,我们的最佳延迟预算是250毫秒,但正如我们在上面的例子中看到的,DNS查询,TCP和SSL握手的组合以及请求的传播时间加起来为370毫秒。我们比预算低50%,而且在服务器处理时间我们还没有考虑到!

对于大多数用户甚至Web开发人员来说,DNS,TCP和SSL延迟是完全透明的,并且在我们中的少数人下降或思考的网络层进行协商。然而,这些步骤中的每一个对于整体用户体验至关重要,因为每个额外的网络请求可以增加几十或几百毫秒的延迟。这就是为什么Chrome的网络堆栈远远超过一个简单的套接字处理程序。

深入Chrome的网络模块

多进程架构

Chrome的多进程架构对浏览器中每个网络请求的处理方式都有重要的意义。Chrome实际上支持四种不同的执行模型,以确定如何执行流程分配。

默认情况下,桌面Chrome浏览器使用每个站点的流程模型,将不同的站点彼此隔离,但将同一站点的所有实例分组到同一进程中。 但是,为了简单起见,让我们假设一个最简单的例子:每个打开选项卡的一个不同的过程。 从网络性能的角度来看,这里的差异并不大,但是流程标签模型更容易理解。
xkernel-renderer png pagespeed ic vljglux4cs
每一个tab有一个渲染进程(render process),其中包括了用于解析页面(interpreting)和排版(layout out)的WebKit的排版引擎(layout engine), 即上图中的HTML Render。还有V8引擎和两者之间的DOM Bindings, 如果您对这部分很好奇,可以看Chromium wiki

这些“渲染”过程中的每一个都在具有对用户计算机(包括网络)的有限访问权限的沙盒环境中执行。 为了获得对这些资源的访问,每个渲染过程都与浏览器(内核)进程通信,这可以对每个渲染器强加安全性和访问策略。

Inter-process communication (IPC) and Multi-process resource loading

Chrome中的渲染器和内核进程之间的所有通信都是通过IPC完成的。 在Linux和OSX上,使用了一个socketpair(),它提供了用于异步通信的命名管道传输。 来自渲染器的每条消息都被序列化并传递给专用的I/O线程,它将其分派到内核进程。 在接收端,内核进程提供了一个过滤器接口,允许Chrome拦截资源IPC请求(请参阅ResourceMessageFilter),这些请求应由网络堆栈处理。
xchrome-ipc png pagespeed ic chovpautfe
优点:资源请求在I/O线程上处理;UI活动和网络事件不会相互干扰。资源过滤器运行在浏览器进程里的I/O线程,拦截资源请求消息,转发给浏览器进程的ResourceDispatcherHost单例。

单例界面允许浏览器控制每个渲染器对网络的访问,但也可以实现高效,一致的资源共享:

  1. 套接字池和连接限制:6个HTTP连接/HTTPS连接(同一个{host,port})
  2. 套接字重用:持久TCP连接在服务请求之后保留在套接字池中一段时间,以启用连接重用,从而避免了每个新连接强加的额外的DNS,TCP和SSL(如果需要)设置开销。
  3. 套接字后期绑定:一旦套接字准备好发送应用程序请求,允许更好的请求优先级(例如,在套接字连接时到达较高优先权请求),更好的吞吐量(例如,重新使用 在开启新连接的情况下,现有套接字可用的情况下为“暖”TCP连接,以及用于TCP预连接的通用机制以及许多其他优化。
  4. 会话状态一致性:身份验证,Cookie和缓存数据在所有渲染过程之间共享。
  5. 全局资源和网络优化:浏览器能够对所有渲染过程和未完成的请求做出决策。 例如,给出由前台选项卡启动的请求的网络优先级。
  6. 优化预测:通过观察所有网络流量,Chrome能够构建和优化预测模型以提高性能。
  7. ...

就渲染过程而言,它只是简单地通过IPC发送资源请求消息,该消息被标记为唯一的请求ID到浏览器进程,并且浏览器内核进程处理其它的。

Cross-platform resource fetching

网络堆栈被实现为大多数单线程(有单独的缓存和代理线程)跨平台库,这允许Chrome重用相同的基础架构并提供相同的性能优化,以及提供在所有的平台上更大的优化机会。
网络实现源码

net/android Bindings to the Android runtime
net/base Common net utilities, such as host resolution, cookies, network change detection, and SSL certificate management
net/cookies Implementation of storage, management, and retrieval of HTTP cookies
net/disk_cache Disk and memory cache implementation for web resources
net/dns Implementation of an asynchronous DNS resolver
net/http HTTP protocol implementation
net/proxy Proxy (SOCKS and HTTP) configuration, resolution, script fetching, ...
net/socket Cross-platform implementations of TCP sockets, SSL streams, and socket pools
net/spdy SPDY protocol implementation
net/url_request URLRequest, URLRequestContext, and URLRequestJob implementations
net/websockets WebSockets protocol implementation

这些代码是值得阅读的,每个组件都有完善的文档和单元测试。

Architecture and performance on mobile platforms

  • 不是单纯地直接对桌面端浏览器的适配,那样不能保证最好的用户体验。
    移动端区别:
  • 桌面用户可以使用鼠标导航,可能有重叠的窗口,大屏幕,大多数不受电源限制,通常拥有更稳定的网络连接,并且可以访问更大的存储和内存池
  • 移动用户使用触摸和手势导航,具有更小的屏幕,电池和功率受限,通常在计量连接上,并且具有有限的本地存储和存储器。
    没有所谓的“代表性手机设备”。参差不齐的硬件能力。为了提供最佳性能,Chrome必须适应每个设备的操作限制。幸运的是,各种执行模式允许Chrome做到这一点!
  • 在Android设备上,Chrome可以使用与桌面版相同的多进程体系结构
  • 在iOS设备上,由于底层平台的沙箱限制,它的确是这样 - 它运行一个单一但多线程的进程。
    针对网络性能优化:使用和其它版本一样的网络协议栈。根据推断优化技术的优先级,套接字超时,管理逻辑,缓存大小这些可变因素调整设备和使用中的网络的能力。
    开启WI-FI,才会prerender。保留电池寿命,移动端chrome可能会选择空闲套接字的懒关闭- 套接字只有在打开了新的套接字后才会关闭来最大化降低无线电的使用程度。

Speculative optimization with Chrome's Predictor #
Chrome有一个单例的Predictor对象,在浏览器内核中初始化。负责观察网络方式,学习,预测未来的用户行为。由Predictor处理的一些例子:

  • 用户将鼠标悬停在链接上是对即将到来的导航事件的一个很好的指标,Chrome可以通过调度目标主机名的推测性DNS查找以及潜在地启动TCP握手来帮助加速。 在用户点击时,平均需要大约200 ms,我们很有可能已经完成了DNS和TCP步骤,从而可以为导航事件消除数百毫秒的额外延迟。
  • 在多功能框(URL)栏中键入会触发建议,这可能类似地启动DNS查找,TCP预连接,甚至可以在隐藏的选项卡中预渲染页面!
  • 我们每个人都有一个我们每天访问的最喜爱的网站的列表。 Chrome可以在这些网站上学习子资源,并推测预先解析,甚至可以预先获取它们,以加速浏览体验。 而这样的例子不胜枚举...

当您使用它时,Chrome会学习网络的拓扑结构以及您自己的浏览模式。 如果它的工作很好,它可以消除每个导航数百毫秒的延迟,并使用户更接近“即时页面加载”的圣杯。 为了实现这一目标,Chrome利用四项核心优化技术:

DNS pre-resolve resolve hostnames ahead of time, to avoid DNS latency
TCP pre-connect connect to destination server ahead of time, to avoid TCP handshake latency
Resource prefetching fetch critical resources on the page ahead of time, to accelerate rendering of the page
Page prerendering fetch the entire page with all of its resources ahead of time, to enable instant navigation when triggered by the user

调用这些技术中的一个或多个的每个决定针对大量约束进行了优化。 毕竟,每个都是一个投机优化,这意味着如果做得不好,可能会导致不必要的工作和网络流量,甚至更糟的是,对用户触发的实际导航的加载时间有负面影响。

Chrome如何解决这个问题? 预测器消耗尽可能多的信号,包括用户生成的动作,历史浏览数据以及来自渲染器和网络堆栈本身的信号。

与负责协调Chrome中所有网络活动的ResourceDispatcherHost不同,Predictor对象在Chrome中为用户和网络生成的活动创建了一些过滤器:

  • IPC通道滤波器来监视渲染过程中的信号
  • 将ConnectInterceptor对象添加到每个请求中,以便可以观察流量模式并记录每个请求的成功度量

作为一个例子,渲染过程可以使用以下任何提示触发浏览器进程的消息,这些提示在ResolutionMotivation(url_info.h)中方便地定义:

enum ResolutionMotivation {
  MOUSE_OVER_MOTIVATED,     // Mouse-over initiated by the user.
  OMNIBOX_MOTIVATED,        // Omni-box suggested resolving this.
  STARTUP_LIST_MOTIVATED,   // This resource is on the top 10 startup list.
  EARLY_LOAD_MOTIVATED,     // In some cases we use the prefetcher to warm up
                            // the connection in advance of issuing the real
                            // request.

  // The following involve predictive prefetching, triggered by a navigation.
  // The referring_url_ is also set when these are used.
  STATIC_REFERAL_MOTIVATED,  // External database suggested this resolution.
  LEARNED_REFERAL_MOTIVATED, // Prior navigation taught us this resolution.
  SELF_REFERAL_MOTIVATED,    // Guess about need for a second connection.

  // <snip> ...
};

给出这样的信号,预测器的目标是评估其成功的可能性,然后在资源可用的情况下触发活动。 每个提示都可能有成功的可能性,优先级和到期时间戳,以及可以用来维护投机优化的内部优先级队列的提示组合。 最后,对于来自该队列的每个派遣请求,预测器还能够跟踪其成功率,从而允许其进一步优化其未来决策。

Chrome network architecture in a nutshell

  • Chrome使用多进程架构,它将渲染过程与浏览器进程隔离开来
  • Chrome维护资源调度程序的单个实例,该实例在所有渲染过程中共享,并在浏览器内核进程中运行
  • 网络堆栈是一个跨平台(大多数)单线程库
  • 网络堆栈使用非阻塞操作来管理所有网络操作
  • 共享网络堆栈允许高效的资源优先级,重用性,并为浏览器提供跨所有运行进程执行全局优化的能力
  • 每个渲染过程通过IPC与资源调度员进行通信
  • 资源调度器通过自定义IPC过滤器拦截资源请求
  • 预测器拦截资源请求和响应流量,以学习和优化未来的网络请求
  • 预测器可以推测基于学习的流量模式调度DNS,TCP以及资源请求,当用户浏览页面时会节省数百毫秒

Lifetime of your browser session...

##Optimizing the cold-boot experience
冷启动时,Chrome会记住十个最可能访问的hostname

地址栏活动优化

根据用户输入,Omnibox会自动建议一个动作,该操作是基于您的导航历史的URL或搜索查询。 在引擎盖下,每个提出的行动都对查询进行评分,以及其过去的表现。 事实上,Chrome允许我们访问chrome://predictors来检查这些数据。

Chrome维护用户输入的前缀的历史记录,它提出的操作以及每个的命中率。对于我自己的个人资料,您可以看到,每当我在Omnibox中输入“g”时,我将有76%的机会进入Gmail。一旦我添加了一个“m”(对于“gm”),那么信心就提高到了99.8% - 其实在412次访问中,我没有最终去Gmail,进入“gm”只有一次!

但是,你在想,这与网络堆栈有什么关系?那么可能的候选人的黄色和绿色的颜色也是ResourceDispatcher的重要信号!如果我们有可能的候选人(黄色),Chrome可能会触发目标主机的DNS预取。如果我们有高可信度候选人(绿色),则Chrome主机名解析后,Chrome也可能会触发TCP预连接。最后,如果在用户仍在审核的同时完成,则Chrome甚至可以在隐藏的选项卡中预渲染整个页面。

或者,如果根据以前的导航历史记录输入的前缀不匹配,则Chrome可能会发出DNS预取和TCP预连接到您的搜索提供商,以预期可能的搜索请求。

一般用户需要数百毫秒来填写他们的查询,并评估自动填充建议。在这种情况下,Chrome可以预取,预连接,甚至在某些情况下甚至预渲染页面,这样当用户准备好按“输入”键时,网络延迟的大部分已经被淘汰了!

优化缓存

最好最快的请求就是没有请求。。 每当我们谈论性能时,如果我们没有谈论缓存,我们会感到失望 - 您正在为您的页面上的所有资源提供Expires,ETag,Last-Modified和Cache-Control响应标头,对吧? 如果没有,停止,去解决它,我们会等待。
Chrome具有两个不同的内部缓存实现:一个由本地磁盘支持,另一个将所有内容存储在内存中。内存中的实现用于隐身浏览模式,并且在您关闭窗口时都将被清除。两者都实现相同的内部接口(disk_cache::Backend和disk_cache::Entry),这大大简化了体系结构,如果您倾向于使用,您可以轻松实验自己的实验缓存实现。

在内部,磁盘缓存实现自己的一组数据结构,所有数据结构都存储在您的配置文件的单个缓存文件夹中。在这个文件夹中,有一些索引文件,当浏览器启动时被记录,并且存储实际数据的数据文件以及HTTP头和其他记账信息。作为一个有趣的脚本,大小为16KB的资源存储在共享数据块文件中,较大的文件在磁盘上获得自己的专用文件。最后,针对回收,磁盘缓存维护LRU,其使用诸如访问频率和资源年龄等等级度量。
xinternals-cache png pagespeed ic oe7f-he4n5
如果您对Chrome缓存的状态感到好奇,请打开一个新标签页并导航至chrome://net-internals/#httpCache。 或者,如果您想查看实际的HTTP元数据和缓存响应,还可以访问chrome://cache,它将枚举缓存中当前可用的所有资源。 从该页面搜索您要查找的资源,然后单击该URL以查看精确的缓存的头文件和响应字节。

使用prefetch优化DNS

我们已经多次提到DNS预解决方案,所以在我们深入实施之前,让我们来看看可能触发的情况,以及为什么:

  • 在渲染过程中运行的Blink文档解析器可能会提供当前页面上所有链接的主机名列表,Chrome可能或可能不会提前预先决定。
  • 渲染器进程可以触发鼠标悬停或“按钮”事件作为用户执行导航意图的早期信号。
  • 地址框可能会根据高可能性建议触发解决请求。
  • Chrome预测器可能会根据以前的导航和资源请求数据请求主机名解析 - 下面更多。
  • 该页面的所有者可以向Chrome明确指出哪些主机名应该预先解析。
    在所有情况下,DNS预解析被视为提示。 Chrome不保证预解析会发生,而是使用每个信号与其自身的预测器结合来评估提示并决定一个行动方案。在“最坏情况”中,如果我们无法及时预先解析主机名,用户将不得不等待明确的DNS解析,其次是TCP连接时间,最后是实际的资源获取。然而,当发生这种情况时,预测器可以记录并调整其未来的决策 - 随着您的使用,它变得更快,更智能。

我们之前未提及的优化之一是Chrome可以了解每个站点的拓扑结构,然后使用此信息来加速未来的访问。具体来说,一个页面平均由88个资源组成,这些资源由30多个不同的主机提供。那么,每次执行导航时,Chrome可能会记录页面上热门资源的主机名,并且在将来访问期间,它可能会选择触发DNS预解析,甚至为某些或全部的TCP预连接他们!
xsubresource-stats png pagespeed ic 6fe0fo9-_a
要检查Chrome存储的子资源主机名,请导航至chrome://dns并搜索您的个人资料的任何热门目的地主机名。在上面的示例中,您可以看到Chrome记忆为Google+的六个子资源主机名,以及触发DNS预分辨率或执行TCP预连接的情况的统计数据,以及预期每个请求的请求数。这种内部会计是什么使Chrome预测器能够执行其优化。

除了所有内部信号之外,站点的所有者还可以在其页面上嵌入额外的标记,以请求浏览器预先解析主机名:

  <link rel =“dns-prefetch”href =“// host_name_to_prefetch.com”>
为什么不依靠浏览器中的自动化机械?在某些情况下,您可能需要预先解析页面上任何位置未提及的主机名。典型的例子当然是重定向:链接可以指向主机,如分析跟踪服务,然后将用户重定向到实际目的地。 Chrome本身不能推测出这种模式,但是您可以通过提供手动提示来帮助它,并让浏览器提前解决实际目的地的主机名。

那么这是怎么实现的呢?这个问题的答案就像我们涵盖的所有其他优化,都取决于Chrome的版本,因为该团队一直在尝试新的更好的方法来提高性能。然而,广义而言,Chrome中的DNS基础设施有两个主要的实现:从历史上看,Chrome依赖于平台无关的getaddrinfo()系统调用,并将查找的实际责任委托给操作系统,但是这种方法在被Chrome自己实现的异步DNS解析器所取代的过程。

依靠操作系统的原始实现具有以下优点:代码越来越简单,并且能够利用操作系统的DNS缓存。然而,getaddrinfo()也是一个阻塞系统调用,这意味着Chrome必须创建并维护一个专用的工作线程池,以允许它并行执行多个查找。这个未连接的池被限制在六个工作线程,这是一个基于硬件最低公分母的经验数字 - 结果是,更多的并行请求可能会超载一些用户的路由器!

对于使用工作池进行预解析,Chrome只需调度getaddrinfo()调用,阻塞工作线程直到响应准备就绪,此时它只会丢弃返回的结果并开始处理下一个预取请求。丢弃它?结果会被操作系统DNS守护进程缓存缓存起来,用作下一次getaddrinfo() 直接响应。简单,有效,在实践中工作得很好。

好,有效,但不够好! getaddrinfo()调用会隐藏Chrome中的大量有用信息,例如每个记录的生存时间戳(TTL)时间戳以及DNS缓存本身的状态。为了提高性能,Chrome团队决定实施自己的跨平台异步DNS解析器。
xasync-dns png pagespeed ic yf8jk4ewnm

通过将DNS解析移动到Chrome中,新的异步解析器启用了许多新的优化:

  • 更好地控制重传定时器,以及并行执行多个查询
  • 记录TTL的可见性,这使得Chrome可以提前刷新常用的记录(popular records)
  • 更好的双栈实现(IPv4和IPv6)
  • 根据RTT或其他信号向不同的服务器提供故障切换

以上所有这些都是Chrome中持续实验和改进的想法。 这给我们带来了一个明显的问题:我们如何知道和衡量这些想法的影响? 简单,Chrome跟踪每个个人资料的详细网络性能统计信息和直方图。 要检查收集的DNS指标,请打开一个新标签页,然后访问chrome://histograms/DNS。

xdns-prefetch png pagespeed ic esx-ppo81j

上述直方图显示DNS预取请求的延迟分布:大约50%(最右边的列)的预取查询在20ms(最左边的列)内完成。 请注意,这是基于最近浏览会话(9869个样本)的数据,对用户是私有的。 如果用户选择在Chrome中报告其使用统计信息,那么该数据的摘要将被匿名化,并定期上传给开发团队,查看其实验的影响并进行相应的调整。

通过预连接优化TCP连接

我们已经预先解析了主机名称,如地址栏或Chrome预测器估计的那样,我们很可能有一个浏览事件即将发生。 为什么不进一步推测性地预连接到目标主机,并在用户发出请求之前完成TCP握手? 通过这样做,我们可以消除延迟延迟的另一个完整的往返行程,这可以轻松地为用户节省数百毫秒。 那么这正是TCP-preconnect是什么,它是如何工作的!
要查看已触发TCP预连接的主机,请打开一个新的选项卡并访问chrome://dns。
xpreconnect png pagespeed ic llimjnwsej
首先,Chrome检查其套接字池,以查看主机名是否有可用的套接字,它可能可以重用 - 保持活动的套接字在池中保留一段时间,以避免TCP握手和慢启动处罚(slow-start penalties)。 如果没有可用的套接字,则可以启动TCP握手,并将其放在套接字池中。 然后,当用户启动导航时,可以立即发送HTTP请求。

查看所有打开的套接字的状态:chrome://net-internals#sockets

xnetinternals-sockets png pagespeed ic hicvwincdq

请注意,您还可以钻入每个套接字并检查时间轴:连接和代理时间,每个数据包的到达时间等。 最后但并非最不重要的是,您还可以导出此数据进行进一步分析或错误报告。有一个良好的工具是任何性能优化的关键,chrome://net-internals是Chrome中所有网络连接的关键。

Optimizing resource loading with prefetch hints

有时,页面的作者可以根据其网站的结构或布局提供额外的导航或页面上下文,并帮助浏览器优化用户体验。 Chrome支持两个这样的提示,可以嵌入到页面的标记中:

  <link rel =“subresource”href =“ javascript/myapp.js”>
  <link rel =“prefetch”href =“/images/big.jpeg”>

子资源和预取看起来非常相似,但语法非常不同。当链接资源将其关系指定为“预取”时,它是浏览器在未来导航中可能需要此资源的指示。换句话说,这是一个跨页提示。相比之下,当资源将关系指定为“子资源”时,它是对浏览器的早期指示,即资源将在当前页面上使用,并且可能希望稍后在文件中。

正如你所期望的,提示的不同语义导致资源加载器的行为非常不同。标有预取的资源被认为是低优先级,只有在当前页面加载完成后,才可能被浏览器下载。而资源资源一经遇到就会以高优先级获取,并且将与当前页面上的其余资源进行竞争。

在使用良好且正确的上下文中,这两个提示可以帮助您优化网站上的用户体验。最后,还需要注意的是,预取是HTML5规范的一部分,而且Firefox和Chrome已经支持。子资源目前仅在Chrome中可用

Optimizing resource loading with browser prefreshing

不幸的是,并不是所有网站所有者都能够或愿意为浏览器提供标记中的子资源提示。此外,即使这样做,我们必须等待HTML文档从服务器到达,然后才能解析提示,并开始获取必要的子资源,具体取决于服务器响应时间以及客户端与服务器,这可能需要几百甚至几千毫秒。

不过,正如我们刚才看到的那样,Chrome已经在学习流行资源的主机名来执行DNS预取。那么为什么它不能做同样的事情,但要进一步执行DNS查找,使用TCP预连接,然后还推测预取资源?那么这就是“预付”可以做什么呢?

用户发起对目标URL的请求
Chrome向Predictor查询与目标URL相关联的学习子资源,并启动DNS预取,TCP预连接和资源预清除的顺序
如果学习的子资源在缓存中,则从磁盘加载到内存中
如果学习的子资源丢失或已过期,则进行网络请求
资源脱机是Chrome中每个实验优化的工作流程的一个很好的例子 - 从理论上讲,它应该能够实现更好的性能,但是还有许多权衡。只有一种方法可靠地确定是否将剪切并进入Chrome:将其实现并作为A / B实验在一些预发布渠道中与真实用户,实际网络和实际浏览模式一起运行。

截至2013年初,Chrome团队正处于讨论实施的早期阶段。如果根据收集的结果进行切割,我们可能会在今年晚些时候在Chrome中进行预清。改进Chrome网络性能的过程永远不会停止,团队一直在尝试新的方法,想法和技术。

Optimizing navigation with prerendering

我们已经涵盖的每个优化都有助于减少用户直接导航请求和其选项卡中生成的页面呈现之间的延迟。然而,要真正实现即时的体验呢?基于我们前面看到的UX数据,这种交互必须在不到100毫秒的时间内发生,这对于网络延迟没有太大的空间。我们可以在100毫秒的时间内传送渲染的页面吗?

当然,您已经知道答案了,因为这是许多用户使用的常见模式:如果您打开多个选项卡,则在选项卡之间切换是即时的,并且绝对要等待在单个前台选项卡中的相同资源之间的导航。那么如果浏览器提供了一个API呢?

  <link rel =“prerender”href =“http://example.org/index.html”>
你猜到了,这是Chrome中的prerendering!而不是仅仅下载单一资源,而是像“预取”提示所做的那样,“预渲染”属性可以向Chrome表明,应该将隐藏的选项卡中的页面及其所有子资源预先放置。隐藏的选项卡本身对用户是不可见的,但是当用户触发导航时,该选项卡从后台交换为“即时体验”。

好奇试试吧您可以访问prerender-test.appspot.com进行演示,然后访问:chrome://net-internals/#prerender查看您的个人资料的预渲染页面的历史和状态
xnetinternals-prerender png pagespeed ic l_ahmq09px

正如您所期望的,将隐藏选项卡中的整个页面渲染可以消耗大量资源,包括CPU和网络,因此只能在我们高度信任隐藏选项卡被使用的情况下使用! 例如,当您使用地址框时,可能会触发高度可信建议的prerender。 同样地,如果Google搜索结果评估第一条结果是最可能的的话(也称为Google即时网页),Google搜索有时会将prerender提示添加到其标记中:

请注意,您还可以将预先渲染提示添加到您自己的网站!但是,在您做之前,请注意,prerendering有一些限制和限制,您应该牢记:

  • 所有进程最多允许有一个预先投递选项卡
  • 不允许HTTPS和HTTP认证的页面
  • 如果所请求的资源或其任何子资源需要进行非幂等请求(只允许GET请求),则抛弃该方法
  • 所有资源都以最低的网络优先级获取
  • 以最低的CPU优先级呈现页面
  • 如果需要的内存超过100MB,页面将被放弃
  • 插件初始化被推迟,如果存在HTML5媒体元素,则预渲染将被放弃
    换句话说,prerendering不能保证发生,只适用于安全的页面。另外,由于JavaScript和其他逻辑可能在隐藏页面中执行,最好的做法是利用页面可见性API来检测页面是否可见 - 这是您应该做的事情!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant