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

考虑到%20TCP%20的这种行为，优化你的内容就显得十分重要。传输必要数据、完成页面首次渲染所需的网络往返次数应该减至最少。理想情况下，首屏内容应该小于%2014KB——这样浏览器才能在一次网络往返之后就可以绘制页面。同时，还有一个关键点需要留意，10%20个数据包上限（IW10）源自%20TCP%20标准的最近一次更新：你应该确保你的服务器软件已经升级到最新版本，以便从这次更新中获益。否则，这个上限将可能降到%203～4%20个数据包。
(4)%20Avoid%20external%20blocking%20JAVAScript%20and%20css%20in%20above-the-fold%20content
(4)%20避免在首屏内容中出现外链的阻塞式%20JavaScript%20和%20CSS
Before%20a%20browser%20can%20render%20a%20page%20to%20the%20user,%20it%20has%20to%20parse%20the%20page.%20If%20it%20encounters%20a%20non-async%20or%20blocking%20external%20script%20during%20parsing,%20it%20has%20to%20stop%20and%20download%20that%20resource.%20Each%20time%20it%20does%20that,%20it%20is%20adding%20a%20network%20round%20trip,%20which%20will%20delay%20the%20time%20to%20first%20render%20of%20the%20page.
浏览器必须先解析页面，然后才能向用户渲染这个页面。如果它在解析期间遇到一个非异步的或具有阻塞作用的外部脚本的话，它就不得不停下来，然后去下载这个资源。每次遇到这种情况，都会增加一次网络往返，这将延后页面的首次渲染时间。
As%20a%20result,%20the%20JavaScript%20and%20CSS%20needed%20to%20render%20the%20above%20the%20fold%20region%20should%20be%20inlined,%20and%20JavaScript%20or%20CSS%20needed%20to%20add%20additional%20functionality%20to%20the%20page%20should%20be%20loaded%20after%20the%20ATF%20content%20has%20been%20delivered.
结论就是，首屏渲染所需的%20JavaScript%20和%20CSS%20应该内嵌到页面中，而用于提供附加功能的%20JavaScript%20和%20CSS%20应该在首屏内容已经传输完成之后再加载。
(5)%20Reserve%20time%20for%20browser%20layout%20and%20rendering%20(200%20ms)
(5)%20为浏览器的布局和渲染工作预留时间%20(200%20ms)
The%20process%20of%20parsing%20the%20HTML,%20CSS,%20and%20executing%20JavaScript%20takes%20time%20and%20client%20resources!%20Depending%20on%20the%20speed%20of%20the%20mobile%20device,%20and%20the%20complexity%20of%20the%20page,%20this%20process%20can%20take%20hundreds%20of%20milliseconds.%20Our%20recommendation%20is%20to%20reserve%20200%20milliseconds%20for%20browser%20overhead.
解析%20HTML%20和%20CSS、执行%20JavaScript%20的过程也将消耗时间和客户端资源！取决于移动设备的速度和页面的复杂度，这个过程将占用几百毫秒。我们的建议是预留%20200%20ms%20作为浏览器的时间消耗。
(6)%20Optimize%20JavaScript%20execution%20and%20rendering%20time
【「译」如何做到一秒渲染一个移动页面】(6)%20优化%20JavaScript%20执行和渲染耗时
Complicated%20scripts%20and%20inefficient%20code%20can%20take%20tens%20and%20hundreds%20of%20milliseconds%20to%20execute%20-%20use%20built-in%20developer%20tools%20in%20the%20browser%20to%20profile%20and%20optimize%20your%20code.%20For%20a%20great%20introduction,%20take%20a%20look%20at%20our%20interactive%20course%20for%20Chrome%20Developer%20Tools.
执行复杂的脚本和低效的代码可能会耗费几十或上百毫秒——可以使用浏览器内建的开发者工具来收集概况、优化代码。如果你想深入这个话题，不妨看看我们的《Chrome%20开发者工具交互教程》。

Note:%20The%20above%20is%20also%20not%20the%20complete%20list%20of%20all%20possible%20optimizations%20-%20it%20is%20a%20list%20of%20top%20mobile%20criteria%20to%20deliver%20a%20sub%20one%20second%20rendering%20time%20-%20and%20all%20other%20web%20performance%20best%20practicesshould%20be%20applied.%20Check%20out%20PageSpeed%20Insights%20for%20further%20advice%20and%20recommendations.
请注意：以上并未列举出所有可能的优化方案——只列出了一些移动端达成半秒渲染时间的基本准则——其它所有的网页性能最佳实践也应该运用起来。到%20PageSpeed%20Insights%20来看看，获取进一步的建议和推荐方案。
For%20a%20deep-dive%20on%20the%20above%20mobile%20criteria,%20also%20check%20out
如果需要深入探索上述移动端准则，请参阅：

Optimizing%20the%20Critical%20Rendering%20Path%20for%20Instant%20Mobile%20Websites%20(slides,%20video).
Instant%20Mobile%20Websites:%20Techniques%20and%20Best%20Practices%20(slides,%20video)
为极速移动网站优化渲染的关键路径%20(幻灯片、视频).
极速移动网站：技巧与最佳实践%20(幻灯片,%20视频)

FAQ
常见问题
How%20do%204G%20networks%20impact%20above%20mobile%20criteria?
4G%20网络对上述移动端准则有何影响？