通常，與用戶(hù)相關(guān)的內容不適于使用頁(yè)面緩存，原因是針對每個(gè)用戶(hù)的內容會(huì )有細微的不同。通過(guò) JavaScript 和 cookies，甚至可以在顯示某些自定義用戶(hù)數據時(shí)采用頁(yè)面緩存。本文將研究 Ruby on Rails 中的高級頁(yè)面緩存。
有了頁(yè)面緩存，Rails 就可以不再介入。在某種程度上，這是件好事，因為您的確可以獲得優(yōu)秀的性能。Rails 只需創(chuàng )建 HTML 頁(yè)面，將其放入目錄，之后，就可以置之于腦后。從那時(shí)起，就由應用服務(wù)器管理這些頁(yè)面，且頁(yè)面進(jìn)入應用服務(wù)器無(wú)需任何循環(huán)。從性能的角度而言，頁(yè)面緩存真是天賜之福。
我也鐘愛(ài)頁(yè)面緩存，Rails 使之簡(jiǎn)單利落。只需使用一行代碼就可以啟用緩存。如果再加入一些代碼，就能通過(guò)簡(jiǎn)單地刪除文件操作或使用 Rails 較高層的 API 終止緩存。這里存在一個(gè)問(wèn)題。并不是每個(gè)網(wǎng)站都能使用頁(yè)面緩存。如果頁(yè)面上的數據會(huì )根據訪(fǎng)問(wèn)它的用戶(hù)而改變，那么就不能進(jìn)行頁(yè)面緩存。而且，如果很難判斷頁(yè)面何時(shí)到期終止，就會(huì )發(fā)現頁(yè)面緩存的要求太過(guò)苛刻。
比如，幾乎在每個(gè)頁(yè)面上，ChangingThePresent.org（參閱 側欄）都有某些用戶(hù)數據是根據當前登錄的用戶(hù)而變化的。圖 1 顯示了我們最新主頁(yè)的一部分。（我們一直在努力完善它，所以它有可能會(huì )改變。）這個(gè)頁(yè)面呈現出的問(wèn)題相對簡(jiǎn)單。如果能判斷用戶(hù)是否已經(jīng)登錄，就可以用 Flash、JavaScript、DHTML 或任何其他基于瀏覽器的代碼動(dòng)態(tài)定制視圖。您會(huì )發(fā)現已登錄的用戶(hù)可以登出系統或查看其配置文件，而已登出的用戶(hù)則可以注冊或再次登錄。
圖 1. ChangingThePresent.org 上的登錄和登出視圖
|
|
在 真實(shí)世界中的 Rails 系列文章中，在國際上享有盛譽(yù)的作家兼講演人 Bruce Tate 將帶您深入到真實(shí)世界中的 Rails 開(kāi)發(fā)。作為 WellGood LLC 公司的 CTO，他主要負責設計、構建和維護慈善性質(zhì)的門(mén)戶(hù)網(wǎng)站 ChangingThePresent.org，在這里，癌癥研究員可以貢獻一小時(shí)的研究時(shí)間，您可以為保護熱帶雨林做出自己的一份貢獻，您也可以資助白內障手術(shù)，讓失明的人得以重見(jiàn)光明。許多用戶(hù)都通過(guò) ChangingThePresent 找到了數千家非贏(yíng)利組織，此網(wǎng)站的影響和規模還在不斷擴大。
現在，您可以找到數十篇幫助您構建簡(jiǎn)單 Rails 應用程序的文章。本系列無(wú)意介紹構建簡(jiǎn)單 blog 的基礎知識，而是會(huì )帶您深入到每個(gè) Rails 網(wǎng)站都必須要面對和解決的實(shí)際問(wèn)題。通過(guò)本系列文章，您將學(xué)習如何優(yōu)化 Rails 以及如何讓站點(diǎn)更加穩定。而且，您還將了解如何通過(guò)添加插件來(lái)解決 Rails 的一些基本限制。讀完本系列的全部文章之后，您將對如何實(shí)際運行 Rails 站點(diǎn)有一個(gè)初步的了解。
|
|
圖 2 顯示了稍微有些高級的用戶(hù)數據視圖，我們的站點(diǎn)就使用了這個(gè)視圖。圖 2 中的兩個(gè)視圖有極大的不同。為了處理頁(yè)面緩存，我必須先解決所有的差異。對于每個(gè)已登錄的用戶(hù)，我都必須替換掉頁(yè)面的登出內容，使之顯示登錄用戶(hù)的登錄 ID 和用戶(hù)圖片。緩存這些內容會(huì )帶來(lái)另一層面的挑戰，因為每個(gè)用戶(hù)的數據都不盡相同。
圖 2. 兩個(gè)截然不同的視圖
這種情況并非 ChangingThePresent.org 所獨有。如果需要個(gè)性化用戶(hù)體驗，那么不可修改的 Rails 頁(yè)面緩存的使用就會(huì )受到限制。但如果定制不多，那么實(shí)際上還是能很容易地緩存這些頁(yè)面的。
解決這些問(wèn)題的方法很多。我更傾向于使用如下這些技巧：
- 在 Rails 框架的約束之內，取消頁(yè)面緩存并使用段緩存替代它。
- 先加載頁(yè)面的大部分，然后使用 JavaScript 和 Ajax 加載該頁(yè)面較小的動(dòng)態(tài)部分。服務(wù)器端代碼可以檢測用戶(hù)是否登錄，然后用 Ajax 呈現合適的部分。
- 將某些用戶(hù)狀態(tài)（比如用戶(hù)是否已登錄）存儲在客戶(hù)端的 cookie 中。然后，根據 cookie 的內容，使用 JavaScript 動(dòng)態(tài)更改頁(yè)面的外觀(guān)。
在這三種技巧中，我更喜歡第三種，因為第一和第二種技巧都會(huì )將 Rails 應用程序牽扯進(jìn)來(lái)。要獲得最大限度的可伸縮性，就要盡量多地使用靜態(tài)內容。在本文中，我會(huì )側重于介紹第三種方式。請不要使用該方法存儲任何不能丟失的敏感數據，比如 ICBM 啟動(dòng)代碼或信用卡號。對于我們所處理的這些有限的數據而言，這種方法效果很好。
使用 Show and tell 還是 hide and seek？
在我剛開(kāi)始試著(zhù)緩存這個(gè)主頁(yè)時(shí)，我本可以簡(jiǎn)單地用 JavaScript 替換這些鏈接?？梢詫⑦@種技巧看成是 Show-and-tell?；谖覀儗σ训卿浻脩?hù)的了解，可以使用 JavaScript 選擇性地替換或注入 Web 頁(yè)的部分內容，從而為用戶(hù)提供正確的體驗。為了進(jìn)一步細分，我會(huì )進(jìn)行如下操作：
- 創(chuàng )建只具有所有用戶(hù)的公共元素的 Web 頁(yè)。
- 當用戶(hù)登錄時(shí)，將一些有關(guān)該用戶(hù)的數據存入 cookie，比如說(shuō)登錄信息。
- 然后，使用 JavaScript 依據 cookie 的內容注入 HTML 段，借此填充該頁(yè)面的剩余部分。
對于 ChangingThePresent 主頁(yè)而言，show-and-tell 技巧有些威力過(guò)度，因為我只有兩套鏈接要根據所登錄的用戶(hù)加以顯示。因此，我選擇了第二種技巧，我稱(chēng)之為 hide-and-seek。首先，顯示出所有用戶(hù)的公共頁(yè)面元素，并通過(guò)每種數據可能 的隱藏版本顯示頁(yè)面的變化部分。這就是 hide 部分。然后，根據用戶(hù)的角色使用 JavaScript 在文件中找到該用戶(hù)的內容并顯示出來(lái)。這就是 seek 部分。您可能會(huì )想，顯示所有可能數據的版本有點(diǎn)威力過(guò)度，實(shí)際上，選擇性地為不同的安全角色啟用多種特性時(shí)，這種方式是十分常見(jiàn)的。hide-and-seek 方式非常適合 ChangingThePresent 主頁(yè)。要實(shí)現這種方法，可以執行如下操作：
- 創(chuàng )建只具有所有用戶(hù)的公共元素的 Web 頁(yè)。
- 將用戶(hù)按類(lèi)型分區。為每個(gè)用戶(hù)類(lèi)型添加內容版本。就我的具體情況而言，ChangingThePresent 主頁(yè)的用戶(hù)類(lèi)型包括登錄用戶(hù)和登出用戶(hù)。最初，讓此內容可見(jiàn)。
- 當用戶(hù)登錄時(shí)，將一些可區分用戶(hù)分組的數據存入 cookie，比如說(shuō)用戶(hù)角色或登錄狀態(tài)。
- 當用戶(hù)訪(fǎng)問(wèn)此頁(yè)時(shí)，選擇性地顯示用戶(hù)類(lèi)型的內容版本。
實(shí)現 hide and seek
對于 ChangingThePresent 主頁(yè)而言，hide-and-seek 實(shí)現起來(lái)異常簡(jiǎn)單。在之前的圖 1 中，此主頁(yè)有一個(gè)部分顯示的是與用戶(hù)帳戶(hù)相關(guān)的一些鏈接。這些鏈接可以根據用戶(hù)是否登錄而變化。首要工作是構建此頁(yè)的所有公共內容。我在本文并未給出具體做法。第二頁(yè)需要顯示出所有用戶(hù)的全部動(dòng)態(tài)內容，而不管用戶(hù)是否已經(jīng)登錄：
清單 1. 在單一視圖中創(chuàng )建動(dòng)態(tài)內容的所有版本
<div id=‘logged_out‘>
<%= link_to "login", :controller => ‘members‘, :action => ‘login‘ %>
<br />
<%= link_to "register", :controller => ‘members‘, :action => ‘signup‘ %>
</div>
<div id=‘logged_in‘ style="display: none;">
<%= link_to "your profile", :controller => ‘profiles‘, :action => ‘show‘ %>
<%= link_to "logout" , :controller => "members", :action => "logout" %>
</div>
|
您可能已經(jīng)注意到 my profile 鏈接。起初，該鏈接指向用戶(hù)特定的配置文件，但這樣可能會(huì )妨礙我們的主頁(yè)緩存。相反，我只簡(jiǎn)單地將此鏈接指向了無(wú)任何用戶(hù) ID 的索引操作。然后，索引操作會(huì )將用戶(hù)重定向到正確的配置文件頁(yè)：
清單 2. 將用戶(hù)重定向到正確的配置文件頁(yè)
def index
redirect_to my_profile_url
end
|
在清單 2，my_profile_url 是一個(gè)方法，該方法可以根據用戶(hù)的類(lèi)型（這可能是名人、顧問(wèn)或會(huì )員）決定正確的配置文件 URL。每個(gè)用戶(hù)類(lèi)型都有一個(gè)單獨的配置文件頁(yè)。這時(shí)，程序的功能已經(jīng)完成，您總共可以看到四個(gè)鏈接，logged_in 和 logged_out 各有兩個(gè)鏈接：
- login
- register
- your profile
- logout
下一步，獲取含有當前用戶(hù)類(lèi)型的 cookie。對于 ChangingThePresent，我在登錄時(shí)創(chuàng )建了一個(gè) cookie，其中含有當前的登錄 ID。之后，在登出時(shí)再銷(xiāo)毀這個(gè) cookie：
清單 3. 在登錄和登出時(shí)創(chuàng )建和銷(xiāo)毀 cookies
def login
if request.post?
self.current_user = User.authenticate(params[‘user_login‘], params[‘user_password‘])
...
if logged_in?
set_cookies
...
end
end
def logout
end
private
def set_cookies
cookies[:login] = current_user.login
cookies[:image] = find_thumb(current_user.member_image)
end
def logout
cookies.delete :login
cookies.delete :image
...
end
|
在清單 3 中，logged_in? 是一個(gè)私有方法，如果當前用戶(hù)已登錄則返回 true。上述的 Rails 方法會(huì )在您登錄時(shí)創(chuàng )建三個(gè) cookie，并在登出時(shí)刪除它們。這里不需要為數據費神。尚且不需用到數據?？梢赃@樣理解：無(wú)需調用 Rails 框架，我就可以判斷用戶(hù)是否登錄。我無(wú)需確保 cookie 到期終止是否與站點(diǎn)的到期終止規定相符。在我的例子中，二者是相符的，所以我現在盡可以開(kāi)始頁(yè)面緩存了。
下一步，根據用戶(hù)的 cookie 選擇性地隱藏和顯示正確的條目。將如下的 JavaScript 代碼添加到 public/javascripts/application.js 中：
清單 4. 支持 show and hide 登錄 div 的 JavaScript 代碼
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(‘;‘);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==‘ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function handle_cached_user() {
var login_cookie = readCookie(‘login‘);
var logged_in = document.getElementById(‘logged_in‘);
var logged_out = document.getElementById(‘logged_out‘);
if(login_cookie == null) {
logged_in.style.display = ‘none‘;
logged_out.style.display = ‘block‘;
} else {
logged_out.style.display = ‘none‘;
logged_in.style.display = ‘block‘;
}
}
|
第一個(gè)函數從 Javascript 中讀取 cookie 值，第二個(gè)函數處理此 DOM?？梢酝ㄟ^(guò)使用 Prototype 庫簡(jiǎn)化這段代碼，但我包括了基本的 DOM 查找以便于讀者理解。最后一步是在頁(yè)面加載時(shí)調用 JavaScript 函數。我向布局中添加了如下代碼：
清單 5. 當頁(yè)面加載時(shí)調用 JavaScript 函數
<script type="text/javascript">
window.onload = function() {
handle_cached_user();
<%= render_nifty_corners_javascript %>
<%= yield :javascript_window_onload %>
}
</script>
|
上述 JavaScript 代碼十分簡(jiǎn)單。在頁(yè)面加載時(shí)，將加載 handle_cached_user 函數，而它會(huì )相應地顯示或隱藏正確的內容?，F在，我盡可以通過(guò)向控制器中添加如下代碼來(lái)啟用頁(yè)面緩存：
上述代碼效果極佳。我還是需要定期地從緩存中刪除前頁(yè)，這樣我才能使該頁(yè)期滿(mǎn)終止。為此，我只需簡(jiǎn)單地定期刪除 public/index.html。hide-and-seek 方式對于有幾類(lèi)用戶(hù)的頁(yè)面十分有效，但對于如圖 2 中所示的用戶(hù) partial 效果卻不佳。對于后者，需要綜合使用 hide-and-seek 和 show-and-tell 技巧。
實(shí)現 show-and-tell
再來(lái)看看 圖 2。我將使用 hide-and-seek — 根據用戶(hù)是否已登錄 — 選擇 partial 的正確版本，然后使用 show-and-tell 技巧根據我之前在清單 3 的行 4 和行 5 中所寫(xiě)的 cookies 的內容填充頁(yè)面的動(dòng)態(tài)部分。請記住，對于 show-and-tell，我特別更改了頁(yè)面的元素以符合單個(gè)用戶(hù)的情況。
首先，完成在這兩個(gè) partial （即登出用戶(hù)和登錄用戶(hù)）上呈現的靜態(tài)內容。我假設用戶(hù)已經(jīng)登出，所以我會(huì )通過(guò)附加 display: none 風(fēng)格隱藏 logged_in div。之后，如果必要，我就可以用 JavaScript 顯示或隱藏它們。請注意，我使用了相同的兩個(gè)名稱(chēng)：logged_in 和 logged_out，來(lái)識別每個(gè) div，這樣便無(wú)需對我為這個(gè)主頁(yè)所編寫(xiě)的 JavaScript 進(jìn)行修改：
清單 6. 呈現登錄和登出這兩個(gè) partial
<div class="boxRight sideColumnColor">
<div id=‘logged_in‘>
<%= render :partial => ‘common/logged_in‘ style="display: none; %>
</div>
<div id=‘logged_out‘>
<%= render :partial => ‘common/logged_out‘ %>
</div>
</div>
|
接下來(lái)，完成 logged_in partial 的內容。注意，每個(gè)包含動(dòng)態(tài)內容的 HTML 組件都有一個(gè) ID，從而我可以使用 JavaScript 找到它并隨后將其替換：
清單 7. 顯示 logged_in partial
<div id=‘logged_in‘ style="display: none;">
<%= link_to %(<span class="mainBodyDark">Hi, </span>) +
%(<span class="textLarge mainBodyDark"><b id=‘bold_link‘>) + "my_login" +
%(</b></span>), {:controller => ‘profiles‘, :action => ‘show‘, :id => ‘my_login‘},
{:id => ‘profile_link‘} %>
<br/>
<div id=‘picture_and_link‘>
<a href="http://member/my_login" id=‘link_for_member_thumbnail‘>
<img id=‘member_thumbnail‘
alt="Def_member_thumbnail"
src="/images/default/def_member_thumbnail.gif" /></a>
</div>
<div id="not_mine">Not my_login?</div>
<br/>
<%= image_button "logout", :controller => "members", :action => "logout" %>
|
如果對 Rails 有足夠的了解，您可能會(huì )注意到其中的幾個(gè)定制幫助程序函數。從中可以看到四處很明顯的動(dòng)態(tài)內容，我需要使用 JavaScript 為每個(gè)加載的頁(yè)面替換這些內容：三處登錄，一處會(huì )員圖像。此處的 JavaScript 代碼對 handle_cached_user 函數作了一處修改，并且還含有一個(gè)為動(dòng)態(tài)用戶(hù)處理頁(yè)面更新的方法。針對本文的具體情況，我稍微對這段代碼做了少許簡(jiǎn)化?？梢詫⑷缦潞瘮堤砑拥?application.js 文件中：
清單 8. 替換用戶(hù) partial 的元素
function handle_user_partial() {
var login_cookie = readCookie(‘login‘);
var image_cookie = readCookie(‘image‘);
var profileLink = document.getElementById(‘profile_link‘);
profileLink.href = ‘/member/‘ + login_cookie;
document.getElementById(‘bold_link‘).firstChild.nodeValue=login_cookie;
document.getElementById(‘not_mine‘).firstChild.nodeValue="Not " + login_cookie + "?";
document.getElementById(‘link_for_member_thumbnail‘).href="/member/" + login_cookie;
document.getElementById(‘member_thumbnail‘).src=image_cookie.replace(/%2[Ff]/g,"/");
document.getElementById(‘member_thumbnail‘).alt=login_cookie;
}
|
在清單 8 中，這個(gè) JavaScript 函數首先讀取此 cookies 并獲取 DOM 樹(shù)的一部分：即到當前的用戶(hù)配置文件的鏈接，稱(chēng)為 profile_link。然后是 handle_user_partial 函數：
- 將登錄用戶(hù)的名稱(chēng)（存儲在 login_cookie 內）替換成 my_login 以為用戶(hù)配置文件頁(yè)創(chuàng )建正確的 URL。
- 將登錄用戶(hù)名插入到 DOM 元素中，此元素使用粗體文本表示登錄用戶(hù)。
- 將簡(jiǎn)單的句子 “Not login?” 插入到 DOM 元素中，這個(gè)元素包含
login partial 中的 logout 標題。
- 找到包含會(huì )員圖像的 dom 元素，將一般圖像的 URL 替換成會(huì )員圖像的 URL，會(huì )員圖像保存在
image_cookie 中。
- 此外，還要將此圖像的
alt 標記替換成 login 名稱(chēng)，以防圖像不出現。
在 DOM 中導航時(shí)，會(huì )發(fā)現有時(shí)需要直接轉到 DOM 元素，而有時(shí)又需要轉到該元素的特定子元素，比如在處理文本的時(shí)候。我就使用了 firstChild 函數根據需要尋找 DOM 元素的第一個(gè)子元素。由于語(yǔ)法更為友好，所以 Prototype 庫使處理特定的 DOM 元素較為容易一些，但這超出了本文的討論范圍。
我已經(jīng)創(chuàng )建好了所有的 cookies，最后一步就是從 handle_cached_user 函數調用 JavaScript。請記住，該函數在 public/javascripts/application.js中：
清單 9. 將 handle_user_partial 函數添加到 handle_cached_user
function handle_cached_user() {
var login_cookie = readCookie(‘login‘);
var logged_in = document.getElementById(‘logged_in‘);
var logged_out = document.getElementById(‘logged_out‘);
if(login_cookie == null) {
logged_in.style.display = ‘none‘;
logged_out.style.display = ‘block‘;
} else {
handle_user_partial();
logged_out.style.display = ‘none‘;
logged_in.style.display = ‘block‘;
}
}
|
請注意，else 條件中的 handle_cached_user 函數下面還有額外兩行代碼。這兩行代碼可以在使 logged_in DOM 元素可見(jiàn)之前進(jìn)行適當的替代。剩下所需做的就是使用本篇文章和 上個(gè)月 的那篇文章中所介紹的頁(yè)面緩存指令來(lái)緩存整個(gè)頁(yè)。
結束語(yǔ)
本篇文章中介紹的這種高級技巧為我們打開(kāi)了許多方便之門(mén)。在 ChangingThePresent.org 上，我們估計使用非常簡(jiǎn)單的基于時(shí)間的清除器能夠緩存超過(guò) 75% 的頁(yè)面。通過(guò)使用稍微有些復雜的清除技巧，我們就能緩存超過(guò) 90% 的頁(yè)面，而且還可能更多。如果您想試圖影響我們的圖像緩存計劃，那么您只能觸及應用服務(wù)器 1% 到 3% 的 Web 請求。
但同時(shí)，我們也應該看到不利的一面。我向此系統添加了明顯的復雜性。我必須維護更加復雜的 HTML 代碼，并確保 HTML 和 JavaScript 能夠保持同步。但好的一面是在需要獲得更好的性能時(shí)，我就能夠使用最為簡(jiǎn)單和有效的緩存技術(shù)。您也可以嘗試使用這種技巧 — 訪(fǎng)問(wèn) ChangingThePresent.org 并加載主頁(yè)。接下來(lái)，加載每個(gè)頂端的菜單。您會(huì )發(fā)現我們會(huì )頁(yè)面緩存六個(gè)頂端菜單中的四個(gè)。創(chuàng )建一個(gè)賬號并重載每一個(gè)菜單。您能猜到哪個(gè)頁(yè)面被緩存了么？在下一篇文章中，在繼續深入真實(shí)世界中的 Rails 的同時(shí)，我將帶您探究能增進(jìn) ActiveRecord 性能的一些技巧。
參考資料
學(xué)習
獲得產(chǎn)品和技術(shù)
關(guān)于作者
|
|
|
|
Bruce Tate 居住在德克薩斯州的首府奧斯汀，他是一位父親，同時(shí)也是山地車(chē)手和皮艇手。他是 WellGood LLC 的 CTO 及 ChangingThePresent.org 的首席架構師，他還是九本暢銷(xiāo)書(shū)的作者，包括 Beyond Java、From Java to Ruby 和 Ruby on Rails: Up and Running。他在 IBM 工作了 13 年，現在是 RapidRed 顧問(wèn)的創(chuàng )始人，在那里他潛心研究基于 Ruby 的輕量級開(kāi)發(fā)策略和架構以及 Ruby on Rails 框架。他現在還與很多 Rails 開(kāi)發(fā)人員合作，構建和維護一個(gè)慈善性質(zhì)的門(mén)戶(hù)網(wǎng)站 ChangingThePresent.org。
|
|
