Page 192 - Web性能权威指南
P. 192

优化 Gmail 性能

                   Gmail 使用了大量 JavaScript，而且也不断拓展了现代浏览器的性能边界。要提升
                   首次加载性能，Gmail 团队尝试了各种技术，目前包括如下这些：
                   •   把首次绘制所需的 CSS 单独拿出来，优先于其他 CSS 文件发送；
                   •   递增地交付较小的 JavaScript 块，以实现递增式执行；
                   •   使用定制的外部更新机制，即客户端在后台下载新的 JavaScript 文件，然后
                     在页面刷新时更新。

                   鉴于 Gmail 如此庞大的用户数量，如果所有打开的浏览器都要更新脚本，那哪怕
                   一次简单的 JavaScript 更新，都可能演变为一次自残式的 DoS 攻击。为此，Gmail
                   会在用户使用旧版本页面时，在后台预先加载更新文件，这样既可以分散负荷，
                   又能提升下一次刷新时的速度。这个过程每天都重复不止一次。

                   在此基础上，为了让用户感觉第一次加载的速度很快，Gmail 团队还在 HTML 文档
                   中嵌入了关键性 CSS 和 JavaScript，然后以块的形式递增加载其余 JavaScript 文件，
                   以加快脚本执行——第一次打开 Gmail 时显示的进度条，反映的就是这个过程！




                 11.7 嵌入资源

                 嵌入资源是另一种非常流行的优化方法，把资源嵌入文档可以减少请求的次
                 数。比如，JavaScript 和 CSS 代码，通过适当的 script 和 style 块可以直接放在
                 页面中，而图片甚至音频或 PDF 文件，都可以通过数据 URI（data:[mediatype]
                 [;base64],data）的方式嵌入到页面中：

                     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAA
                               AAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="
                          alt="1x1 transparent (GIF) pixel" />

                            前面的例子是在文档中嵌入了一个 1×1 的透明 GIF 像素。而任何 MIME
                            类型，只要浏览器能理解，都可以通过类似方式嵌入到页面中，包括
                            PDF、音频、视频。不过，有些浏览器会限制数据 URI 的大小，比如 IE8
                            最大只允许 32 KB。


                 数据 URI 适合特别小的，理想情况下，最好是只用一次的资源。以嵌入方式放到页
                 面中的资源，应该算是页面的一部分，不能被浏览器、CDN 或其他缓存代理作为单
                 独的资源缓存。换句话说，如果在多个页面中都嵌入同样的资源，那么这个资源将
                 会随着每个页面的加载而被加载，从而增大每个页面的总体大小。另外，如果嵌入


                                                                              HTTP 1.x   ｜   177
   187   188   189   190   191   192   193   194   195   196   197