江苏龙网

  1. 主页 > 生活百科 > >

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

移动页面


Lower%20roundtrip%20latencies%20are%20one%20of%20the%20key%20improvements%20in%204G%20networks.%20This%20will%20help%20enormously,%20by%20reducing%20the%20total%20network%20overhead%20time,%20which%20is%20currently%20over%2050%%20of%20our%20one%20second%20budget%20on%203G%20networks.%20However,%203G%20is%20the%20dominant%20network%20type%20around%20the%20world,%20and%20will%20be%20for%20years%20to%20come%20-%20you%20have%20to%20optimize%20pages%20with%203G%20users%20in%20mind.
较低的网络往返延迟是%204G%20网络的一处关键改良 。减少所有的网络损耗时间对网页性能将有巨大帮助，而目前在%203G%20网络上这些损耗就占用了我们一秒预算中的大半时间 。不管怎样，3G%20仍然是全球最主流的移动网络，并且在今后几年都将如此——我们在优化网页时不得不把%203G%20用户放在心上 。
I%20am%20using%20a%20JavaScript%20library,%20such%20as%20JQuery,%20any%20advice?
我正在使用一个%20JavaScript%20类库，比如%20jQuery，有什么建议吗？
Many%20JavaScript%20libraries,%20such%20as%20JQuery,%20are%20used%20to%20enhance%20the%20page%20to%20add%20additional%20interactivity,%20animations,%20and%20other%20effects.%20However,%20many%20of%20these%20behaviors%20can%20be%20safely%20added%20after%20the%20ATF%20content%20is%20rendered.%20Investigate%20moving%20the%20execution%20and%20loading%20of%20such%20JavaScript%20until%20after%20the%20page%20is%20loaded.
大多数%20JavaScript%20类库，比如%20jQuery，通常用来增强页面、提供附加的交互、动画和其它效果 。但是，大多数这些行为可以安全地在首屏渲染之后再加入进来 。研究一下是否可以把这些%20JavaScript%20的加载和执行推迟到页面加载之后 。
I%20am%20using%20a%20JavaScript%20framework,%20to%20construct%20the%20page,%20any%20advice?
我在正使用一个%20JavaScript%20框架来渲染整个页面，有什么建议吗？
If%20the%20content%20of%20the%20page%20is%20constructed%20by%20client-side%20JavaScript,%20then%20you%20should%20investigate%20inlining%20the%20relevant%20JavaScript%20modules%20to%20avoid%20extra%20network%20roundtrips.%20Similarly,%20leveraging%20server-side%20rendering%20can%20significantly%20improve%20first%20page%20load%20performance:%20render%20JS%20templates%20on%20the%20server,%20inline%20the%20results%20into%20HTML,%20and%20then%20use%20client-side%20templating%20once%20the%20application%20is%20loaded.
如果页面内容是由客户端%20JavaScript%20来渲染的，那么你应该研究一下是否可以把相关的%20JavaScript%20模块都内嵌进来，以免产生额外的网络往返开销 。同样，利用服务器端渲染可以显著地改善首次页面加载的性能：在服务器端渲染%20JS%20模板，并内嵌到%20HTML%20中，然后一旦应用程序加载完成就立即在客户端渲染模板 。
How%20will%20SPDY%20and%20HTTP%202.0%20help?SPDY%20和%20HTTP%202.0%20协议会有什么帮助？SPDY%20and%20HTTP%202.0%20both%20aim%20to%20reduce%20latency%20of%20page%20loads%20by%20making%20more%20efficient%20use%20of%20the%20underlying%20TCP%20connection%20(multiplexing,%20header%20compression,%20prioritization).%20Further,%20server%20push%20can%20further%20help%20improve%20performance%20by%20eliminating%20extra%20network%20latency.%20We%20encourage%20you%20to%20investigate%20adding%20SPDY%20support%20on%20your%20servers,%20and%20switching%20to%20HTTP%202.0%20once%20the%20standard%20is%20ready.
SPDY%20和%20HTTP%202.0%20协议的目标都是通过更有效地利用底层的%20TCP%20连接（多路复用、头压缩、优先化处理），来减少页面的加载延迟 。而且服务器%20push%20通过消除额外的网络延迟，可以进一步促进性能的改善 。我们建议你为服务器增加对%20SPDY%20协议的支持，并且当%20HTTP%202.0%20标准就绪之后就立即切换过去 。
How%20do%20I%20identify%20critical%20CSS%20on%20my%20page?如何判断页面中的哪些%20CSS%20是%20critical%20CSS？（译注：“Critical%20CSS”%20是指首屏渲染所必需的最小化的%20CSS%20代码集合 。）
In%20Chrome%20Developer%20Tools,%20open%20the%20Audits%20panel,%20and%20run%20a%20Web%20Page%20Performance%20report,%20in%20the%20generated%20report,%20look%20for%20Remove%20unused%20CSS%20rules.%20Or%20use%20any%20other%20third%20party%20tool,%20or%20script,%20to%20identify%20which%20CSS%20selectors%20are%20applied%20on%20each%20page.
在%20Chrome%20开发者工具中，打开审计（Audits）面板，然后运行一次网页性能（Web%20Page%20Performance）报告 。在生成的报告中，试一下“删除未使用的%20CSS%20规则（Remove%20unused%20CSS%20rules）” 。也可以使用其它第三方工具或脚本，来识别每个页面分别应用了哪些%20CSS%20选择符 。
Can%20these%20best%20practices%20be%20automated?这些最佳实践可以自动化吗？Absolutely.%20There%20are%20many%20commercial%20and%20open-source%20web%20performance%20optimization%20(WPO)%20products%20which%20can%20help%20you%20meet%20some%20or%20all%20of%20the%20criteria%20above.%20For%20open-source%20solutions,%20take%20a%20look%20at%20the%20PageSpeed%20optimization%20tools.


推荐阅读


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

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