在釋出站點前,Web開發者需要關注哪些技術細節?

edithfang發表於2014-05-19

問:對於一個Web開發人員來說,在釋出一個站點之前,他需要處理哪些細節性的問題。假如Jeff Atwood能在站點上忽略了對HttpOnly cookies,sitemaps和cross-site request forgeries的關注,那我還能忽略些什麼呢?

對於一個設計或提供站點內容的人來說,他們總認為站點的可用性及內容總比這個平臺重要的多,當然在這個方面,Web開發人員沒有什麼話語權。對於一 個Web開發人員來說,其更多需要關注的是站點的穩定性,是否表現良好,安全性,是否滿足了其他商業目標(例如花費不少太高,構建時間不少太長,在 Google提供的搜尋結果中是否有個良好的排名)。

我們可以從這個角度上討論這個問題:一個Web開發者在可信網路環境下做了些成成果,並且他打算將這個成果部署到當前這個糟糕的網際網路環境上。另外,我也尋找一個更具體的答案而非一個模糊的”Web標準”,我的意思是已經瞭解了HTTP上的HTML、JavaScript、CSS技術,且認為你已經是一個專業的Web開發人員。那麼,除此之外還有那些標準,在什麼環境下使用?為什麼?請提供一個連結到標準的規範。

答:以下大部分的觀點也許大部分都已知悉,但是其中有少量的觀點你獲取從來沒有看過,別擔心,你不必全部理解他們,或許對你來說你永遠也不需要了解到他們。

一、介面設計及使用者體驗

  • 你需要知道各種瀏覽器實現標準不一致,你需要保證你的站點在主流瀏覽器上能夠良好執行。至少需要測試:基於Gecko引擎的瀏覽器(例如:Firefox),基於Webkit引擎的瀏覽器(例如Safari和其他一些手機瀏覽器),Chrome,IE及Opera。同時也需要考慮在不同的作業系統上,各種瀏覽器如何渲染你的站點。
  • 考慮你的站點將會被如何使用:是在手機端訪問,PC上的瀏覽器訪問,亦或是搜尋引擎。
  • 在避免影響使用者的情況下如何釋出更新。是否有一個或者多個測試/臨時以便在不打斷站點訪問的情況下進行架構、程式碼及內容的更新。是否有自動化的方式對線上站點進行釋出。這些可以使用一套版本控制系統及自動化構建方式來有效實施。
  • 不允許向使用者提示不友好的錯誤資訊。
  • 不要以純文字的方式提供出使用者的email地址,因為他們會收到過多的垃圾郵件而死亡。
  • 在使用者生成的連結上增加rel=”nofollow”屬性,以避免垃圾郵件。
  • 對你的站點建立些限制,當然這應該是經過深思熟慮的-這也屬於安全性範圍。
  • 學習如何逐步提高站點功能。
  •  為避免重複提交,當POST成功執行後需要進行頁面跳轉。
  •  不要忘記考慮輔助功能。它總是一個好主意,且在某些情況下這是一個法律要求。 WAI-ARIA和WCAG2個在這方面的良好資源。
  • 不要讓我想該如何進行操作。

二、安全性

  •  有很多需要闡述,但是OWASP開發指南中依據對Web站點安全性從頭到腳進行了介紹。
  •  要了解注入特別是SQL隱碼攻擊,並學會如何避免他。
  •  永遠不要相信使用者的輸入,也不是來自於請求別的(包括cookie和隱藏的表單欄位值)。
  •  不要使用單獨類似MD5或SHA加密策略,在進行雜湊密碼值時,使用作料或多種作料以防止彩虹攻擊。對於短密碼,採用一個短雜湊演算法處理,例如:bcrypt或scrypt。
  • 不要使用你想象中的身份認證系統,很容易得到一個微妙的錯誤和不可測試的問題,甚至你自己都不知道會怎麼回事。
  • 瞭解處理信用卡規則。
  • 使用SSL/HTTPS處理任何敏感資料。
  • 防止會話劫持。
  • 避免跨站點指令碼攻擊。
  • 避免跨站點請求偽造。
  • 避免點選劫持。
  • 確保你的系統安裝了最新的補丁。
  • 確保你的資料庫連線資訊是安全的。
  • 瞭解最新的攻擊技術以免影響到你的平臺。
  •  閱讀谷歌安全手冊。
  •  閱讀web應用程式黑客手冊。
  • 考慮最小許可權的負責人機制。

三、效能

  • 如果有必要的話實現快取策略。理解Http caching和html5 manifest並在合適的地方使用它們。
  • 優化影像-不要使用20 KB大小的影像做重複背景。
  • 瞭解如何gzip/deflate內容。
  • 合併/連線多個樣式表或多個指令碼檔案,以減少瀏覽器連線的數量,並通過gzip來壓縮多個檔案中的重複內容。
  • 閱覽雅虎卓越效能站點,其中包含大量很棒的指南,例如端到端的效能提升方法,YSlow工具。Goole page speed是是一個優化參考的好去處。
  • 使用CSS image sprite技術減少圖片請求。(ps:前段時間用node-canvas做了個本地化的css-sprite工具,有需要的可以找我拿原始碼^_^)。
  • 訪問量大的站點可以將內容劃分到多個域下,但不要超過4個域。
  • 靜態內容(例如圖片,css檔案,js檔案及一些靜態文字)應該存放在一個單獨的域下面,並且不能使用cokies,因為在每次請求時,都會將cookies帶上。CDN(內容分發網路)是一個不錯的選擇。
  • 減少一個瀏覽器頁面上發起的http請求數量。
  • 使用JavaScript檔案壓縮技術。
  •  確保在站點的根目錄下有一個favicon.ico檔案,即使該檔案未被任何使用,流量器也會自動載入它。如果沒有這個檔案的話,將會導致大量的404錯誤,從而佔用你的伺服器頻寬。

四、SEO(搜尋引擎優化)

  • 使用搜尋引擎友好的的url,例如:使用example.com/pages/45-article-title 而非example.com/index.php?page=45
  • 當使用#動態內容更改#到#!然後在伺服器$_REQUEST[“_escaped_fragment_”]是什麼Googlebot使用,而不是#!換句話說,#!頁= 1/變成/?_escaped_fragments_=頁= 1。此外,對於可能使用FF.b4或鉻,history.pushState使用者({“foo”的:“酒吧”}“。?/頁=1”,“關於”,);是一個偉大的命令。因此,即使在位址列改變了頁面不會重新載入。這使您可以使用?而不是#!保持動態內容,並告訴伺服器當您傳送電子郵件,我們是這個頁面後的連結,以及AJAX並不需要再作額外的要求。(Google翻譯,沒有完全理解…)
  • 不要使用”click here”這樣的連結,這樣會浪費SEO的機會並且也會讓人更加難以理解。
  • 要有一個XML站點地圖,最好是在預設位置/sitemap.xml的。
  • 當你有兩個指向不同的地址,可以使用,這個問題也可以從谷歌網站管理員
  • 使用Google Webmaster Tools 和 Bing Webmaster Tools.
  • 使用Google Analytics。
  • 瞭解機器人搜尋演算法和搜尋引擎爬蟲的工作方式。
  • 重定向請求(使用301永久移動)要求www.example.com到example.com(或者反過來),以防止分裂谷歌兩個網站之間的排名。
  • 你還要知道還有很多噁心的爬蟲程式運作在網路上。(以前在做一個百科詞條整理時,對某網站的詞條進行了深度遍歷,但程式執行不久IP就被封殺了。)

五、技術點

  • 理解HTTP協議,例如:GET,POST,Session,Cookies以及“無狀態”的含義。
  • 根據W3C規範寫你的XHTML/ HTML和CSS,並確保他們通過驗證。這是為了避免瀏覽器的使用非標準的瀏覽器,如螢幕讀取器和移動裝置的正常工作。
  • 瞭解JavaScript在瀏覽器中的執行機制。
  • 理解JavaScript、css及其他資源在頁面上是如何被載入的,並考慮他們對效能的影響。現在普遍接受將指令碼放在應用程式或html5底部執行。
  • 瞭解JavaScript沙箱的工作原理,特別是如果你打算使用iframe。
  • 你要注意到JavaScript是可以被禁止的,並且AJAX是一個擴充而非基線。很多普通使用者已經離開了它,NoScript越來越受歡迎,移動裝置或許不會像你想象的那樣執行,谷歌將無法執行大部分的的JavaScript。(不解,noscript標籤是定義在未能執行js時的輸出,當是當前js橫行的時代,真的還有很多使用者禁用js嗎???)
  • 理解重定向301和302的區別。(這也是SEO中的一項)
  • 儘可能深入瞭解你的開發環境。
  • 考慮使用Reset CSS或Normalize.css。
  • 考慮JavaScript框架(如jQuery,MooTools,Prototype,Dojo或YUI3),這將使用JavaScript進行DOM操作時,隱藏了很多的瀏覽器差異。
  • 考慮到JS框架及效能,可以使用一個服務,如谷歌庫API來載入框架,使瀏覽器可以使用它已經快取,而不是從你的網站下載一個副本的框架副本。(CDN)
  • 不要重複造輪子。做任何事情之前先搜尋關於如何做到這一點的元件或例子。有99%的可能性有人已經做到了和釋出了一個開源版本的程式碼。
  • 在明確你的需求之前,不要使用20個庫去堆砌功能。特別是在客戶端訪問,其最重要的就是讓事情輕便、快速和靈活。

六、Bug修復

  • 你要知道你將要花費80%的時間去維護你20%時間寫的程式碼,所以編碼時請仔細。
  • 建立一個良好的錯誤報告解決方案。
  • 有一個能讓大家提供建議或提出批評的系統。
  • 將未來支援的功能及維護人員記錄在文件中。
  • 頻繁的備份! (並且確保這些備份是功能性)埃德·盧卡斯的回答有一些忠告。有一個恢復策略,而不只是一個備份策略。
  • 有一個版本控制系統來存放檔案,例如Subversion,Mercurial或Git。
  • 不要忘記做些驗收測試,類似Selenium框架可以提供方便。
  • 請確保您有足夠的日誌記錄在案,例如使用框架log4j,log4net或log4r。如果你的網站發生了錯誤,你要知道發生了什麼事情。
  • 當登入時請務必同時捕獲處理異常和未處理的異常。報告/分析日誌的輸出,因為它會告訴你網站中的關鍵問題。
很多知識都省略了,並不是因為他們不是有用的答案,而是它們要麼過於詳細,要麼超出了範圍,亦或對某些人來說過於深入。大家應該知道這知識概述,請隨意暢談,因為我可能錯過了一些東西或者也犯了一些錯誤。
評論(1)

相關文章