从零到 Go：24 小时内登上 Google 主页的 Go 语言应用“火鸡”doodle 开发纪实
openkk 13年前
<p>本文是 Google 搜索团队软件工程师 Reinaldo Aguiar 发表在 <a href="/misc/goto?guid=4958318860782989327">Go 语言</a>博客的客座文章，他分享了<strong>在一天之内</strong>完成首款 Go 程序的开发并发布给数百万受众的经历。</p> <p>我最近有幸参与了一项虽小却曝光率极高的“20% 项目”——<a href="/misc/goto?guid=4958318861592331648" target="_blank">2011 年感恩节的 Google Doodle</a>。<a title="Google+ 互动 doodle：感恩节 2011" href="/misc/goto?guid=4958318862406293821">这幅 doodle</a> 中的火鸡由不同样式的头、翅膀、羽毛与爪子随机组合而成。用户可以通过点击火鸡的不同部位自定义组合。这种互动通过 JavaScript、CSS 实现，由浏览器实时渲染出各种火鸡。</p> <p><a><img style="display:block;margin-left:auto;margin-right:auto;" class="aligncenter size-medium wp-image-46915" alt="从零到 Go：24 小时内登上 Google 主页的 Go 语言应用“火鸡”doodle 开发纪实" src="https://simg.open-open.com/show/a821f5f853c65f69f59bba84b8f29ca7.png" width="300" height="182" /></a>用户制作出的个性化火鸡可以分享到 Google+ 上。点击“分享”按钮（图中未给出）即可在用户的 Google+ 流中生成一篇含有火鸡图片的帖子。要满足这种需求，图片必须是单独一张，且与用户所制作的火鸡完全相同。</p> <p>由于火鸡的八个部位（头、双爪、几片羽毛等）各有 13 种样式，用户可能设计出八亿多种火鸡。预先制作好八亿多张图片显然行不通。因此，必须在服务端实时生成图片。出于即时扩展性与高度可用性的共同需求，合适的平台非常明显：Google App Engine！</p> <p>接下来要决定的就是选用哪款 App Engine runtime 了。图像处理任务极度依赖 CPU，所以这种情况下性能是决定性因素。</p> <p>为确保可靠，我们首先进行了测试。我们为新版 <a href="/misc/goto?guid=4958318863196745879" target="_blank">Python 2.7 runtime</a>（该版本提供基于 C 的图像处理库 <a href="/misc/goto?guid=4958184668454326579" target="_blank">PIL</a>） 与 Go runtime 准备了一些等效的演示应用。各应用分别合成几张小图片生成图像文件，编码为 JPEG，并将 JPEG 数据作为 HTTP 响应发回客户端。Python 2.7 应用处理请求的中位响应时间为 65 毫秒，而 Go 应用的中位延时仅为 32 毫秒。</p> <p>因此这成为了试用 Go runtime 的大好机会。</p> <p>此前我对 Go 语言毫无经验，而时间又很紧：两天内达到生产需求。虽然紧张，我还是将它视作从另一常被忽略的方面——开发速度——测试 Go 的机会。完全没有 Go 语言开发经验的人能在多快的时间内掌握并开发出高性能高扩展性的应用？</p> <h3>设计</h3> <p>基本步骤是在 URL 中编码火鸡各态、实时绘制并编码图像。</p> <p>各 doodle 的基础是背景图画：</p> <p><a><img style="display:block;margin-left:auto;margin-right:auto;" class="aligncenter size-medium wp-image-46916" alt="从零到 Go：24 小时内登上 Google 主页的 Go 语言应用“火鸡”doodle 开发纪实" src="https://simg.open-open.com/show/10d152cc6ee0fe8e46a8737cd62a813e.jpg" width="300" height="165" /></a>有效的请求 URL 形如：<a href="/misc/goto?guid=4958318864703846240" target="_blank"><code>http://google-turkey.appspot.com/thumb/20332620</code></a></p> <p><code>/thumb/</code> 后面跟着的数字字串（十六进制）代表各外观元素要绘制的形状，如下图所示：</p> <p><a><img style="display:block;margin-left:auto;margin-right:auto;" class="aligncenter size-full wp-image-46917" alt="从零到 Go：24 小时内登上 Google 主页的 Go 语言应用“火鸡”doodle 开发纪实" src="https://simg.open-open.com/show/8ddb3b85511fcb8210286976e5a5e6e5.png" width="514" height="322" /></a>程序的请求接管器解析 URL 决定各组件所选定的元素，在背景上绘制对应图像，并返回 JPEG 成品。</p> <p>如果出错则返回默认图像。不必返回错误页面，因为用户不可能看到——浏览器肯定是在加载 <code>image</code> 标记中的 URL。</p> <h3>实现</h3> <p>在软件包层面，我们声明了一些数据结构，描述火鸡的各个元素、对应图像所在文件夹，以及各图像应绘制在背景图上的位置。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;">var</span> ( <span style="color:#008000;">//</span><span style="color:#008000;"> 各外观元素存储位置的文件夹映射。</span><span style="color:#008000;"> </span> dirs = map[string]string{ "h": "img/heads", "b": "img/eyes_beak", "i": "img/index_feathers", "m": "img/middle_feathers", "r": "img/ring_feathers", "p": "img/pinky_feathers", "f": "img/feet", "w": "img/wing", } <span style="color:#008000;">//</span><span style="color:#008000;"> urlMap 映射各 URL 字符与所对应的外观元素。</span><span style="color:#008000;"> </span> urlMap = [...]string{"b", "h", "i", "m", "r", "p", "f", "w"} <span style="color:#008000;">//</span><span style="color:#008000;"> layoutMap 映射各外观元素与在背景图像上的位置。</span><span style="color:#008000;"> </span> layoutMap = map[string]image.Rectangle{ "h": {image.Pt (109, 50), image.Pt (166, 152)}, "i": {image.Pt (136, 21), image.Pt (180, 131)}, "m": {image.Pt (159, 7), image.Pt (201, 126)}, "r": {image.Pt (188, 20), image.Pt (230, 125)}, "p": {image.Pt (216, 48), image.Pt (258, 134)}, "f": {image.Pt (155, 176), image.Pt (243, 213)}, "w": {image.Pt (169, 118), image.Pt (250, 197)}, "b": {image.Pt (105, 104), image.Pt (145, 148)}, } )</pre> </div> <p>上述各点的几何位置是通过图像中各元素的实际位置而得到的。</p> <p>每次请求都从磁盘加载图像是很浪费的重复行为，因此我们在收到首个请求时就将全部 106 幅图像（13×8 个元素 + 1 幅背景 + 1 幅默认图）加载到全局变量中。</p> <div class="cnblogs_code"> <pre><span style="color:#0000ff;">var</span> ( <span style="color:#008000;">//</span><span style="color:#008000;"> elements 映射各外观元素及其图像。</span><span style="color:#008000;"> </span> elements = make (map[string][]*image.RGBA) <span style="color:#008000;">//</span><span style="color:#008000;"> backgroundImage 含背景图像数据。</span><span style="color:#008000;"> </span> backgroundImage *image.RGBA <span style="color:#008000;">//</span><span style="color:#008000;"> defaultImage 是出错时返回的图像。</span><span style="color:#008000;"> </span> defaultImage *image.RGBA <span style="color:#008000;">//</span><span style="color:#008000;"> loadOnce 用于仅在首次请求时调用 load 函数。</span><span style="color:#008000;"> </span> loadOnce sync.Once )<span style="color:#008000;">//</span><span style="color:#008000;"> load 函数从磁盘读取各 PNG 图像，并存储到对应的全局变量中。</span><span style="color:#008000;"> </span>func load () { defaultImage = loadPNG (默认图像文件) backgroundImage = loadPNG (背景图像文件) <span style="color:#0000ff;">for</span> dirKey, dir := range dirs { paths, err := filepath.Glob (dir + "/*.png") <span style="color:#0000ff;">if</span> err != nil { panic (err) } <span style="color:#0000ff;">for</span> _, p := range paths { elements[dirKey] = append (elements[dirKey], loadPNG (p)) } } }</pre> </div> <p>请求按下述顺序处理：</p> <ol> <li>解析请求 URL，按顺序解码出各字符的十进制值。</li> <li>为背景图像创建副本，作为最终图像的基础。</li> <li>在背景图像上绘制各图像元素（使用 <code>layoutMap</code> 判断应绘制的位置。）</li> <li>将图像编码为 JPEG</li> <li>将 JPEG 直接写入 HTTP 响应写入器中，将图像返回给用户。</li> </ol> <p>如果出错，则将 <code>defaultImage</code> 返回给用户，并在 App Engine 控制台记下日志，供日后分析之用。</p> <p>下面是含说明注释的请求接管器代码：</p> <div class="cnblogs_code"> <pre>func handler (w http.ResponseWriter, r *http.Request) { <span style="color:#008000;">//</span><span style="color:#008000;"> Defer 函数可以从错乱中恢复。</span><span style="color:#008000;"> </span> <span style="color:#008000;">//</span><span style="color:#008000;"> 恢复时将错误情况记录到 App Engine 控制台并给用户发送默认图像。</span><span style="color:#008000;"> </span> defer func () { <span style="color:#0000ff;">if</span> err := recover (); err != nil { c := appengine.NewContext (r) c.Errorf ("%s", err) c.Errorf ("%s", "Traceback: %s", r.RawURL) <span style="color:#0000ff;">if</span> defaultImage != nil { w.Header () .Set ("Content-type", "image/jpeg") jpeg.Encode (w, defaultImage, &imageQuality) } } }() <span style="color:#008000;">//</span><span style="color:#008000;"> 在首次请求时从磁盘加载图像。</span><span style="color:#008000;"> </span> loadOnce.Do (load) <span style="color:#008000;">//</span><span style="color:#008000;"> 创建背景副本，作为绘制基础。</span><span style="color:#008000;"> </span> bgRect := backgroundImage.Bounds () m := image.NewRGBA (bgRect.Dx (), bgRect.Dy ()) draw.Draw (m, m.Bounds (), backgroundImage, image.ZP, draw.Over) <span style="color:#008000;">//</span><span style="color:#008000;"> 处理请求字串中的各个字符。</span><span style="color:#008000;"> </span> code := strings.ToLower (r.URL.Path[len (prefix):]) <span style="color:#0000ff;">for</span> i, p := range code { <span style="color:#008000;">//</span><span style="color:#008000;"> 解码遇到的十六进制字符 p。</span><span style="color:#008000;"> </span> <span style="color:#0000ff;">if</span> p < 'a' { <span style="color:#008000;">//</span><span style="color:#008000;"> 是数字</span><span style="color:#008000;"> </span> p = p - '0' } <span style="color:#0000ff;">else</span> { <span style="color:#008000;">//</span><span style="color:#008000;"> 是字母</span><span style="color:#008000;"> </span> p = p - 'a' + 10 } t := urlMap[i] <span style="color:#008000;">//</span><span style="color:#008000;"> 按索引查找元素类型</span><span style="color:#008000;"> </span> em := elements[t] <span style="color:#008000;">//</span><span style="color:#008000;"> 按类型查找元素图像</span><span style="color:#008000;"> </span> <span style="color:#0000ff;">if</span> p >= len (em) { panic (fmt.Sprintf ("元素索引越界 %s: "+ "%d >= %d", t, p, len (em))) } <span style="color:#008000;">//</span><span style="color:#008000;"> 将元素绘制到 m 上</span><span style="color:#008000;"> </span> <span style="color:#008000;">//</span><span style="color:#008000;"> 使用 layoutMap 指定其位置。</span><span style="color:#008000;"> </span> draw.Draw (m, layoutMap[t], em[p], image.ZP, draw.Over) } <span style="color:#008000;">//</span><span style="color:#008000;"> 编码为 JPEG 图像并写为响应。</span><span style="color:#008000;"> </span> w.Header () .Set ("Content-type", "image/jpeg") w.Header () .Set ("Cache-control", "public, max-age=259200") jpeg.Encode (w, m, &imageQuality) }</pre> </div> <p>为简洁起见，这些代码段中我省略了一些辅助函数。完整代码请参阅<a href="/misc/goto?guid=4958318865493936665" target="_blank">源码</a>。</p> <h3>性能</h3> <p><a><img style="display:block;margin-left:auto;margin-right:auto;" class="aligncenter size-large wp-image-46918" alt="从零到 Go：24 小时内登上 Google 主页的 Go 语言应用“火鸡”doodle 开发纪实" src="https://simg.open-open.com/show/d155da24daf72e1c95525797a29a4e08.png" width="550" height="135" /></a>该图表从 App Engine 控制台截取，展示了发布后的平均请求时间。显然，即使在高负载情况下也没有超过 60 ms，中位延迟时间为 32 ms。考虑请求接管器在处理图像并实时编码，这已经相当快了。</p> <h3>结论</h3> <p>我觉得 Go 语言的语法直观、简单且洁净。我过去常与解析型语言打交道，尽管 Go 是静态录入编译型语言，编写这款应用的感觉却更像是在用动态解析型语言。</p> <p>开发服务器提供了可以在程序有变动后迅速重新编译的 <a href="/misc/goto?guid=4958318866287897957" target="_blank">SDK</a>，所以开发部署与解析型语言一样快。而且非常简单——我只花了不到一分钟就配置好了开发环境。</p> <p>Go 语言优秀的文档也帮助了我迅速完成开发。文档是从源代码生成的，各函数的文档与相关联的源码直接链接。这不仅可以让开发者迅速理解特定函数的作用，还鼓励开发者深入挖掘软件包的实现，简化了对良好编程风格与规则的掌握。</p> <p>编写这款应用的过程中，我只参考了三份资源：App Engine 的 <a href="/misc/goto?guid=4958318867072267403" target="_blank">Hello World Go 示例</a>、<a href="/misc/goto?guid=4958318867859327530" target="_blank">Go 软件包文档</a>以及<a href="/misc/goto?guid=4958318868653568558" target="_blank">一篇演示 Draw 软件包的博文</a>。感谢开发服务器的迅速部署，以及该语言自身的优异特性，我得以在 24 小时内掌握该语言，并开发出超快、满足生产需求的 doodle 生成器。</p> <p>应用的完整源码（包括图像文件）可以在 <a href="/misc/goto?guid=4958318865493936665" target="_blank">Google Code 项目</a>中下载到。</p> <p>向设计该 doodle 的 Guillermo Real 与 Ryan Germick 致以特别的谢意。</p> <p><em>原文：<a href="/misc/goto?guid=4958318870165547595" target="_blank">From zero to Go: launching on the Google homepage in 24 hours</a></em></p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958318870949158816" target="_blank">谷奥</a> </div>