Web應用程式開發是傾向於在客戶端運行所有使用者邏輯和互動程式碼,讓伺服器暴露REST或RPC介面。編譯器是針對JS作為一個平台,第二版 ECMAScript正是考慮到這一點在設計。客戶端框架例如Backbone, Ember和Require鼓勵創建功能豐富的應用程序,不僅有豐富的程式碼,而且各個元件,元件與資料之間有很多交互作用。
這真的很好,或許還能產生一些優秀的使用者體驗,但毫無疑問的是,這是很難開發web應用程式和web頁面。
根本原因是在互聯網上服務你的程式碼和數據,運行在一些隨機的瀏覽器上,在javascript中,這是一種你需要特別小心的語言,它是一個完全缺乏 程式碼部署的平台。而且它不會很快就得到改善。我覺得如果星際迷航是現實生活,那麼Jean-Luc Picard隊長每隔一段時間不能打架的原因是他仍然是克林儀表板加載。
我想強調的是三個相對常見的錯誤和容易的解決方案,並且談談一些我們遇到的從ReadyForZero學到的特別的事情。
剝離「快取清除」頭資訊
你可能使用CDN來快取靜態資源,這當然是合理的。如果你向伺服器請求非快取的資源(例如在AWS
http://www.jb51 .net/js/main__V0123456789abcdef__.js
這很容易做到,你可以選擇任意的Hash演算法來產生一段指紋資訊作為這個字串,這樣它就會隨著檔案內容變化而變化。當新的url被引用時,它不可 能被緩存,這樣就可以取得到伺服器上的新版本。錯誤就發生在這裡。網路上有很多都建議剝離「快取清除」頭訊息,而是讓你的伺服器直接提供新版本的檔案。 如果你有多台伺服器叢集這可能導致你的網站上不同檔案(如:html、js)的版本不一致(如js已更新但是html(從另一台伺服器請求)仍然是舊的),不僅如此,更嚴重是它很容易導致CDN快取了錯誤的版本。這個錯誤是這樣發生的:
·初始階段,所有的伺服器都是HTML1 和JS1.
·伺服器A重啟了,並提供HTML2和JS2.
·一個客戶端向CDN請求main__V2__. js,這個時候這個檔案是新的所以CDN上沒有快取。
·CDN把這個請求傳給了你設定的custom origin, 碰巧這個請求發到了伺服器B上。
·伺服器B剝離了「快取清除」字串並傳回舊的版本。
·CDN把舊版的的檔案當新的快取了。
這件事情考慮起來很簡單明了,但是盲目的聽從網路上的建議很可能導致錯誤。更糟的是在你這看起來一切都是好的你根本不知道發生了錯誤,但是其它地 區的用戶使用了不同CDN很可能緩存了錯誤的版本。解決方案是不要剝離“快取清除”字串並將靜態資源存放在能夠正確支援各個版本的地方。
2. 處理龐大的JS炸彈
每個人都知道,我們需要壓縮我們的javascript文件,並把它們連接在一起。但盲目地這樣做並非明智之舉。如果連接的檔案很大,那麼更有效的方法就是並行化。另外,如果你需要頻繁的修改文件的某一部分,你可能會導致很多地方失效,而文件很大部分卻沒有被修改過。
如果把頻繁修改的部分分開出來,那麼就可以解決兩邊的問題。我建議使用require.js - 它可以實現對你的javascript的真正的依賴關係管理,而且第一次使用的時候,設定很簡單(稍後添加會很痛苦),而且可以幫助你理解和管理依賴關係,包括一些進階選項,例如非同步載入。
要注意的:require.js會等待一段時間後會放棄載入資源,這個可以透過指定waitSeconds選項實現,這個選項的預設值似乎7秒,它依賴你的用戶在哪裡(例如:手機),可以是很短的時間。
3. 沒有總結錯誤事件
你不能只讓你的javascript上線使用,而不關心它的運作情況。你不可能測試每一個瀏覽器和每個使用者的狀態組合。另外,不同的載入時間可能導致怪異的狀態。所以,建立某種回饋機制來判斷你的使用者是否遇到錯誤,變得十分重要。這很簡單,你只需指定一個全域錯誤處理程序,收集錯誤,並發送會伺服器。以下是一個例子:
棘手的部分是,很多時候會出現一些非0的錯誤,因為使用者可能安裝了各種怪異的插件或其他。所以你需要追蹤穩定的狀態到底是什麼,還有是否有任何的偏差。
ReadyForZero,我們在頂層捕獲onError事件,並把它們發送會伺服器,然後產生一個日報,匯總多少個用戶發生了錯誤,和這些錯誤發生在哪裡。我們發現很多時候,錯誤訊息並不足夠,所以我們同樣需要從我們的事件系統回傳最後幾個事件。透過分析使用者最近觸發的Backbone或JQuery事件,對於取得當時使用者觸發錯誤時候的上下文訊息,有很大的幫助。
垂手可得的改進
令人沮喪的是下面這些點不是我們必須擔心的。公司更應該關注在產品上,快速高品質地把它們弄出來。但請記住如果這些垂首可得的改進獲得實施,你將能更專注於大動作上。
人們總是被一些瑣事糾纏住花費了大量時間,但是僅僅讓你的應用正常運作就能獲得大的成長。
1,你的客戶端程式碼有沒有記憶體外洩?你確定嗎?你是怎麼知道的?
2,在ReadyForZero[註1]我們有很多聰明的人們致力於推動這門藝術。
[註1]ReadyForZero:是由 Y Combinator資助的公司,公司的目的是透過網路平台幫助消費者擺脫信用卡債務。