首頁 > 新聞 > 改版 > 紐約時報網站改版背后的技術

紐約時報網站改版背后的技術

nytimes-redesign-1024x568

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

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

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

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

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

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

一個聰明的框架

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

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

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

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

模塊化 Javascript

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

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

新的 PHP 渲染框架

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

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

提高服務器端緩存速度

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

前端優(yōu)化：

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

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

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