江苏龙网

  1. 主页 > 生活百科 > >

「译」 如何做到一秒渲染一个移动页面

移动页面

声明：原文版权属于 google，原文以 CC BY 3.0 协议发布，原文中的代码部分以 Apache 2.0 协议发布 。中文翻译部分并非官方文档，仅供参考 。
PageSpeed Insights analyzes a page to see if it follows our recommendations for making a page render in under a second on a mobile network. Research has shown that any delay longer than a second will cause the user to interrupt their flow of thought, creating a poor experience. Our goal is to keep the user engaged with the page and deliver the optimal experience, regardless of device or type of network.
一个网页是否可以在移动环境下用不到一秒的时间完成渲染，是一项非常重要的性能指标 。研究显示，任何超过一秒钟的延迟都将打断用户的思维顺流状态，带来较差的体验 。我们的目标是不论在任何设备或网络条件下，都要维持用户在网页中的沉浸状态，提供更好的体验 。
It is not easy to meet the one second time budget. Luckily for us, the whole page doesn’t have to render within this budget, instead, we must deliver and render the above the fold (ATF) content in under one second, which allows the user to begin interacting with the page as soon as possible. Then, while the user is interpreting the first page of content, the rest of the page can be delivered progressively in the background.
想要达到这个标准并不是那么容易 。不过幸运的是，我们并不需要在这个时间指标内渲染出整个页面，而是要在一秒以内传输并渲染出“首屏内容”（ATF），让用户尽快与页面交互 。接下来，当用户与首屏内容进行交互的同时，页面的剩余部分可以在后台持续加载完成 。
（译注：原文中的“ATF”一词源自传统出版业，指的是报纸头版的中折线以上区域，这块黄金区域往往用来刊登最有吸引力的新闻 。延伸到互联网领域，ATF 指的是页面中不需要滚动就可以看到的首屏内容 。）
Adapting to high latency mobile networks
适应高延迟的移动网络
Meeting the one second ATF criteria on mobile devices poses unique challenges which are not present on other networks. Users may be accessing your site through a variety of different 2G, 3G, and 4G networks. Network latencies are significantly higher than a wired connection, and consume a significant portion of our 1000 ms budget to render the ATF content:
在移动设备上达到“首屏秒开”的准则，需要面对其它网络所遇不到的独特挑战 。用户可能正通过 2G、3G 或 4G 等各种各样的网络来访问你的网站 。移动网络的延迟要明显高于有线连接，并且将消耗我们“首屏秒开”预算中的一大部分：
  • 200-300 ms roundtrip times for 3G networks
  • 50-100 ms roundtrip times for 4G networks
  • 3G 网络的往返时间将消耗 200-300 ms
  • 4G 网络的往返时间将消耗 50-100 ms
3G is the dominant network type around the world, and while 4G deployments are in progress around the world, you should still expect that the majority of users will be accessing your page on a 3G network. For this reason, we have to assume that each network request will take, on average, 200 milliseconds.
3G 是全球范围内占据统治地位的移动网络，而 4G 网络正在普及之中，你需要明白你的主流用户仍然在使用 3G 网络来访问你的页面 。基于这个原因，我们不得不假设平均每次网络请求将消耗 200 ms 。
With that in mind, let’s now work backwards. If we look at a typical sequence of communication between a browser and a server, 600 ms of that time has already been used up by network overhead: a DNS lookup to resolve the hostname (e.g. google.com) to an IP address, a network roundtrip to perform the TCP handshake, and finally a full network roundtrip to send the HTTP request. This leaves us with just 400 ms!
明白了这一点之后，我们来倒推一下时间 。如果我们来分析一下浏览器与服务器之间一次典型的通信过程，会发现 600 ms 的时间就已经被网络本身消耗掉了：一次 DNS 查询用于将主机名（比如 google.com）解析为 IP 地址，一次网络往返用于发起 TCP 握手，以及最后一次完整的网络往返用于发送 HTTP 请求 。我们就只剩下 400 ms 了！
「译」 如何做到一秒渲染一个移动页面

文章插图
 
[Figure%201]%20Render%20a%20mobile%20page%20in%201%20second
[图%201]%20一秒渲染一个移动页面
  • DNS%20Lookup%20(200%20ms)
  • TCP%20Connection%20(200%20ms)
  • HTTP%20Request%20and%20Response%20(200%20ms)
  • DNS%20查询%20(200%20ms)
  • TCP%20连接%20(200%20ms)
  • HTTP%20请求与响应%20(200%20ms)
600%20ms%20mandatory%203G%20network%20overhead%20which%20you%20cannot%20do%20anything%20about


推荐阅读


上一篇：梦见蒸包子热气腾腾 梦见一锅包子是什么意思

下一篇：梦见鸡吃蜈蚣,蚂蚁搬蚯蚓,蚯蚓逃 梦见鸡吃蜈蚣咬我的手不放