Google+开发团队分享经验

     <p> 本文是从 <a href="/misc/goto?guid=4958202399460601801">Mark Knichel</a> 这篇文章翻译而来。</p>    <p> 大家好，我是 Google+ 基础架构团队的工程师。早在 7 月份，当 <a href="/misc/goto?guid=4958202400198160752">Joseph Smarr</a> 开发出了 Ask Me Anything 栏目后，很多人都想知道一些关于 Google+ 技术架构方面的信息。我们几个工程师觉得应该写一些关于这个题目的文章，给大家分享。</p>    <p> 对于 Google+ 团队，我们头一个要认真处理的问题就是：页面生成速度。在谷歌，我们十分在意速度，下面就是我们用来提升速度的 5 项技术。</p>    <p> <strong>1. 我们喜欢 Closure</strong></p>    <p> 我们喜欢 Closure。非常的。我们使用 Closure 类库，模板以及编译器来生成 Google+ 所有页面上的所有元素——包括驱动这些页面的 JavaScript。但真正让我们获得速度的是以下几点：</p>    <p> — Closure 模板即能用于 Java 也能用于 JavaScript，生成的页面即能在 Server 端运行，也能在浏览器里运行。通过这种方式，内容总是能理解展现，我们还可以在后台加载 JavaScript (“修饰”页面，在页面元素上挂载事件监听器)</p>    <p> — Closure 能让我们在写 JavaScript 脚本时仍然可以享用严格的类型和错误检查，死代码清除，跨模块提示，以及其它的很多辅助优化便利。</p>    <p> (访问 <a href="/misc/goto?guid=4958200219686078247">http://code.google.com/closure/</a> 来获取更多关于 Closure 的信息)</p>    <p> <strong>2. 在正确的时间正确的使用 JavaScript</strong></p>    <p> 为了管理驱动 Google+ 的 JavaScript，我们把它分割成小的模块，这样可以异步的分别加载它们。你只需要下载最少的必须的模块。由两种技术来实现这些：</p>    <p> — 客户端保存历史浏览记录的信息(URL 里的字符串信息代表这你当前处在某个页面上)，用这种方法来调配 JavaScript 模块。</p>    <p> — 如果 JavaScript 没有加载完成，这个页面上的任何操作都会被禁止，直到加载完成。</p>    <p> 这种技术框架也是 Google+ 在客户端页面导航时避免重新加载页面的技术基础。</p>    <p> <strong>3. 页面之间切换时避免刷新页面</strong></p>    <p> 一旦 JavaScript 被加载，所有的页面内容都使用 JavaScript 生成，不需要再到服务器端去取，这样做效率更高些。我们设置了一个全局的监听器，监听所有标记的点击事件。如果允许的话，我们会把点击转化成页面内部的切换。如果条件不允许，客户端会生成这个页面，如果你在链接上使用鼠标中键或控制键的点击，我们会让浏览器按常规链接打开这个页面。</p>    <p> 页面上锚标记总是指向一个常规的 URL (例如，你在 HTML5 里的历史记录里的 URL)，这样，你能容易的拷贝/分享这个页面链接。</p>    <p> <strong>4. 部分(HTML)页面块刷新</strong></p>    <p> 在客户端，一旦我们接收到部分数据，我们就立即生成这块内容，让它可见，不必等到整个页面加载后才能显示。</p>    <p> 为了实现这些，我们通过：</p>    <p> — 首次请求时，我们就把所有数据异步的取回</p>    <p> — 只有在需要生成这部分页面数据时，才会遇到延迟现象</p>    <p> 这种技术也能让我们尽早的加载 CSS，JavaScript，图片以及其它资源，使网站更快，响应效果更好。</p>    <p> <strong>5. iFrame 是我们的朋友</strong></p>    <p> 为了能并行的加载 JavaScript，避免浏览器卡住(<a href="/misc/goto?guid=4958202401615643552">http://goo.gl/lzGq8</a>)，我在页面的 body 标记的顶部的一个 Iframe 里加载 JavaScript。在 iframe 里加载 JavaScript 增加了代码的复杂度(通过 Closure，我们很好的解决了这个问题)，但是为了速度的提升，值得这样做。</p>    <p> 做一个解释，你们也许注意到了我们是使用 XHR，而不是使用 style 标记来加载 CSS 的 – 这并不是我们做的优化，这是做是因为我们达到了 IE 浏览器里每个样式表文件里 CSS 选择器的上限！</p>    <p> <strong>最后注解</strong></p>    <p> 这些只是整个 Google+ 面纱下事情如何运转的一小部分介绍，我们以后会写更多像这样的文章。请在评论里留下你的想法！</p>    <p> <strong>译者注：</strong>Mark Knichel 发布了这篇文章后，很多人在评论里表达了不同的观点，有些人认为 iFrame 是一种应该被淘汰的技术，有些人认为 Closure template 影响了程序的可维护性。但我反过来一些，这似乎正说明了谷歌的程序员在开发上享有很高的自由度，他们可以使用任何他们自己喜欢的技术。</p>    <div id="come_from">     来自:     <a id="link_source2" href="/misc/goto?guid=4958202402352848635" target="_blank">外刊IT评论</a>    </div>