原文地址:”The Technology Behind the NYTimes.com Redesign”

紐約時報英文網(wǎng)站今年進行了一次改版，這次改 版不僅僅是給一艘大船重新刷了遍油漆那么簡單，除了外觀上的重新設計，我們也對代碼進行了大量的重構，采用了新的框架，讓網(wǎng)站更快，也為以后代碼的維護、升級便利性進行了重新設計。Reed Emmons，是這次改版的負責人，在這篇文章將分享我們?nèi)绾巫尲~約時報這首老船更快更酷。

很少有機會能夠在像紐約時報這么老資格和規(guī)模的網(wǎng)站進行一場「從頭來過」的重構和設計工作，我這里說的從頭來過，不僅僅是視覺設計上的重新設計，更 是一個重新發(fā)明整個數(shù)碼傳媒平臺。紐約時報的上次一次視覺改版是在2006年，但是我們得回溯到2000千禧年才有如此規(guī)模的從底層的重構和改版。我們決 定重構用戶端和服務端以支持我們新的服務、設計和新聞報道，比如說更佳的網(wǎng)站性能、響應式布局等等。盡管有些舊有的代碼依舊保留或者進行了深度重構，大部 分老的代碼都被刪除或者僅僅是用來做參考。

靜態(tài)頁面發(fā)布:歷史的教訓

直到今天為止，紐約時報的大部分網(wǎng)頁內(nèi)容還是靜態(tài) html 頁面，這些頁面儲存在我們數(shù)據(jù)中心的硬盤上。當編輯發(fā)布一篇新的文章時，會生成和寫入一個 html 文件。我們擁有自己的 html 模板，可以讓我們根據(jù)需求添加不同的插件。當一篇文章要渲染的時候，引擎會自動添加廣告和渲染。這套系統(tǒng)的速度和性能足以支持紐約時報網(wǎng)站的高流量，所以 到今天為止，也不是特別需要升級這套系統(tǒng)。

這套系統(tǒng)一個很大的不足就是缺乏動態(tài)控制性。網(wǎng)頁的 html 是固定的，但是其中的腳本和樣式表是需要不斷改變的，我們的前端開發(fā)團隊必須圍護歷史上創(chuàng)建的每一套模板。這也導致了為什么一個兩年前發(fā)布的新聞同上周發(fā) 布的文章，會存在一些不同。我們團隊的一個前端架構師Eitan Konigsburg，在去年的開放日活動曾經(jīng)就我們的技術架構歷史做過分享。

一個聰明的框架

為了適應更高級和復雜的設計，我們構建了自己的響應式 JavaScript 引擎，可以讓我們根據(jù)自己的需求使用不用的media queries斷點，這個引擎可以通過直接在 html 中添加不同的 class 類命來實現(xiàn)響應式設計。同時，我們使用了 LESS 預處理，使得css 更易圍護的同時也滿足了我們大部分用戶的瀏覽器兼容性需求。盡管對于用戶來說，網(wǎng)站的變化十分精細，但是一篇文章在不同的設備和瀏覽器，可以產(chǎn)生20種不 同的適應變化。以下為我們使用 LESS 的一個例子。

.ribbon {
   ...
   // responsive
   // 1020
   .viewport-medium-50 & {
      .offset(0, 1, 0, left);
    }

   // 1200
   .viewport-large-20 & {
      .offset(0, 2, 0, left);
   }
}

根據(jù)不同的分辨率和設備方向，我們的框架可以自動渲染出不同的界面，還可以根據(jù)需求添加不同類型的廣告，每篇文章對應的網(wǎng)頁有超過100個可以自定義修改的地方。

模塊化 Javascript

這次重構需要大量的 js 代碼重寫以支持大量的訂制功能。一個功能強大的前端框架是十分有必要的，這可以讓我們使用不同的 js 模塊并且能良好兼容共存。Backgon.js 和 RequireJs 給我們提供了一套框架和標準code。我們選擇 Backbon 因為相比 RequireJS它提供了令人滿意的靈活性和自定義性。Jquery,Modernize,SockJS,Underscore.js 和 Hammer.js 是我們使用的一些庫，我們同樣使用了諸如 Mocha 和 Chai 來進行測試。

除此之外，我們還使用了一些其他的新技術：

新的 PHP 渲染框架

切換到一個對動態(tài)內(nèi)容要求更好的網(wǎng)站，我們需要使用一個新的渲染引擎，可以快速地利用于大量的有不同需求的文章。現(xiàn)有的 PHP 框架提供了堅實的基礎，但是我們?nèi)匀贿x擇重新構建一個。為了滿足訂制服務不同的內(nèi)容需求，我們在開發(fā)的時候使用考慮到增加靈活性的需求，我們的框架必須動 態(tài)呈現(xiàn)不同的布局和配置在同一頁的能力。

新架構簡化了開發(fā)的，還讓我們可以僅用幾行代碼就能創(chuàng)建強大的應用程序。現(xiàn)在開發(fā)一個應用可以使用已有的組件，顯著地減少了開發(fā)時間。此外，可用模塊的復用節(jié)省了我們的大量的時間。

提高服務器端緩存速度

有如此多的動態(tài)頁面，我們的平臺需要一個強大的反向代理來保證 PHP 后臺不會崩潰。去年五月紐約時代的移動端的Varnish 系統(tǒng)成功給了我們信心，我們相信 Varnish 也是這次我們的最佳選擇。Varnish 是高度可配置，從服務器緩存中讀取速度極大地加快了。它使得那些經(jīng)常變化的界面能被緩存更短時間。

前端優(yōu)化：

利用 Grunt，我們優(yōu)化了我們的代碼，減少了 http 請求，現(xiàn)在我們的文章頁包含被同步下載的三個壓縮了的 css 和 js 文件，相比以前的80多個沒精簡的文件，這是一個顯著的改善。在網(wǎng)頁的底部，我們使用 RequireJS 異步加載多個文件進行前端渲染。無 Cookie 的 CDN 和緩存HEAD 的設置使得我們的讀者將下載更少字節(jié)的代碼。配合 Varnish 系統(tǒng)，如今我們打開一篇文章能控制在500-1000毫秒之內(nèi)。

所有的js 都可能造成阻塞，所以最大的性能改進來自于廣告的異步加載。廣告是令人頭疼的，我們不能簡單地直接將代碼添加到 DOM 之中，而不擔心頁面的內(nèi)容被覆蓋。相反，所有的廣告必須在 iframe和 Content 載入完畢后才進行加載，以避免導致頁面渲染的潛在問題。

開發(fā)的過程中我們還使用了圖片 sprites，我們所有的圖片都存在一個叫 sprite-me 的文件夾中，配合 grunt 和 less 我們可以很方便地生成和使用不同的圖標和圖片，確定圖像的 postion 位置。最后，我們使用 Underscore 編譯的 HTML 模板，所以他們可以容易地”required”，并迅速地渲染出來。

總結：

如今我們的新平臺包含了更強大的發(fā)布和互動功能，我們還在不斷地改進這個平臺，不斷地迭代。這個新平臺也讓我們的團隊能更加敏捷地進行新的學習和開發(fā)。盡管我們還有很多遺留技術問題，但是我們已經(jīng)建立了一個值得依賴的技術團隊，相信以后大家能更好地開發(fā)解決問題。

下一次，我們的團隊的其他開發(fā)者將深入介紹這次重構使用的這些技術，從 Websockets 到 php 框架，盡請期待。

本譯文在 Google doc 上公開，如果您發(fā)現(xiàn)某些翻譯的錯誤、不妥，或?qū)δ承┱Z句有更好的翻譯，歡迎修改和潤色。

https://docs.google.com/document/d/1kEGcSm6AiUBgsPKDiHo0FJYGhEtNElA5Iagizy2vA1Q/edit?usp=sharing