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


这%20600%20ms%20是不可避免的%203G%20网络消耗,你对此无能为力 。

  • Server%20Response%20Time%20(200%20ms)
  • Client-Side%20Rendering%20(200%20ms)
  • 服务器响应时间%20(200%20ms)
  • 客户端渲染%20(200%20ms)
400%20ms%20which%20you%20can%20optimize%20by%20updating%20your%20server%20and%20structuring%20your%20page%20Appropriately%20(what%20the%20tool%20tries%20to%20help%20you%20with)
这%20400%20ms%20是你可以优化的,只要你合理地更新你的服务器,并以适当的方式构建你的页面(这正是%20PageSpeed%20Insights%20这个工具可以帮到你的) 。
Delivering%20the%20sub%20one%20second%20rendering%20experience
实现半秒渲染的体验
After%20subtracting%20the%20network%20latency,%20we%20are%20left%20with%20just%20400%20milliseconds%20in%20our%20budget,%20and%20there%20is%20still%20a%20lot%20of%20work%20to%20do:%20server%20must%20render%20the%20response,%20client-side%20application%20code%20must%20execute,%20and%20the%20browser%20must%20layout%20and%20render%20the%20content.%20With%20that%20in%20mind,%20the%20following%20criteria%20should%20help%20us%20stay%20within%20the%20budget:
在除去网络延迟之后,我们的预算只剩下区区%20400%20ms%20了,但我们仍然还有大量的工作要做:服务器必须渲染出响应内容,客户端应用程序代码必须执行,而且浏览器必须完成内容的布局和渲染 。了解了这些之后,下面这些准则将帮助我们控制住预算:
(1)%20Server%20must%20render%20the%20response%20(<%20200%20ms)
(1)%20服务器必须在%20200%20ms%20以内渲染出响应内容
Server%20response%20time%20is%20the%20time%20it%20takes%20for%20a%20server%20to%20return%20the%20initial%20html,%20factoring%20out%20the%20network%20transport%20time.%20Because%20we%20only%20have%20so%20little%20time,%20this%20time%20should%20be%20kept%20at%20a%20minimum%20-%20ideally%20within%20200%20milliseconds,%20and%20preferably%20even%20less!
服务器响应时间就是在除去网络传输时间之后,一台服务器首先返回%20HTML%20所花费的时间 。因为我们剩下的时间实在太少了,这个时间应该控制在最低限度——理想情况下应该低于%20200%20ms,而且越少越好!
(2)%20Number%20of%20redirects%20should%20be%20minimized
(2)%20重定向的次数应该减至最少
Additional%20HTTP%20redirects%20can%20add%20one%20or%20two%20extra%20network%20roundtrips%20(two%20if%20an%20extra%20DNS%20lookup%20is%20required),%20incurring%20hundreds%20of%20milliseconds%20of%20extra%20latency%20on%203G%20networks.%20For%20this%20reason,%20we%20strongly%20encourage%20webmasters%20to%20minimize%20the%20number,%20and%20ideally%20eliminate%20redirects%20entirely%20-%20this%20is%20especially%20important%20for%20the%20HTML%20document%20(avoid%20“m%20dot”%20redirects%20when%20possible).
额外的%20HTTP%20重定向会增加一次或两次额外的网络往返(如果需要再次查询%20DNS%20的话就是两次),这在%203G%20网络上将导致几百毫秒的额外延迟 。因此,我们强烈建议网站管理员们减少重定向的次数,而且最好完全消除重定向——这对%20HTML%20文档来说尤其重要(尽可能避免重定向到%20“m.”%20二级域名的行为) 。
(3)%20Number%20of%20roundtrips%20to%20first%20render%20should%20be%20minimized
(3)%20首次渲染所需的网络往返次数应该减至最少
Due%20to%20how%20TCP%20estimates%20the%20capacity%20of%20a%20connection%20(i.e.%20TCP%20Slow%20Start),%20a%20new%20TCP%20connection%20cannot%20immediately%20use%20the%20full%20available%20bandwidth%20between%20the%20client%20and%20the%20server.%20Because%20of%20this,%20the%20server%20can%20send%20up%20to%2010%20TCP%20packets%20on%20a%20new%20connection%20(~14KB)%20in%20first%20roundtrip,%20and%20then%20it%20must%20wait%20for%20client%20to%20acknowledge%20this%20data%20before%20it%20can%20grow%20its%20congestion%20window%20and%20proceed%20to%20deliver%20more%20data.
由于%20TCP%20在评估连接状况方面采用了一套特殊机制(参见%20TCP%20慢启动),一次全新的%20TCP%20连接无法立即用满客户端和服务器之间的全部有效带宽 。在这种情况下,服务器在首次网络往返中,通过一个新连接(约%2014kB)只能发送最多%2010%20个%20TCP%20包,接下来它必须等待客户端应答这些数据,然后才能增加它的拥塞窗口并继续发送更多数据 。
Due%20to%20this%20TCP%20behavior,%20it%20is%20important%20to%20optimize%20your%20content%20to%20minimize%20the%20number%20of%20roundtrips%20required%20to%20deliver%20the%20necessary%20data%20to%20perform%20the%20first%20render%20of%20the%20page.%20Ideally,%20the%20ATF%20content%20should%20fit%20under%2014KB%20-%20this%20allows%20the%20browser%20to%20paint%20the%20page%20after%20just%20one%20roundtrip.%20Also,%20it%20is%20important%20to%20note%20that%20the%2010%20packet%20(IW10)%20limit%20is%20a%20recent%20update%20to%20the%20TCP%20standard:%20you%20should%20ensure%20that%20your%20server%20is%20upgraded%20to%20latest%20version%20to%20take%20advantage%20of%20this%20change.%20Otherwise,%20the%20limit%20will%20likely%20be%203-4%20packets!


推荐阅读