做Web開發需要了解開發技術(2)

　　了解 處理信用卡的一些規則 . (這里也有一個問題你可以查看一下) (陳皓注：有兩上vendor可以幫助你，一個是 Authorize.Net 另一個是 PayFlow Pro)

　　使用 SSL/HTTPS 來加密傳輸登錄頁面或是任可有敏感信息的頁面，比如信用卡號等。

　　知道如何對付session 劫持。(陳皓注：請參看wikipedia的這Session Hijacking，)

　　避免 跨站腳本攻擊(XSS)。(陳皓注：參看酷殼站前幾天發的《新浪微博的XSS攻擊事件》)

　　避免 跨站偽造請求攻擊 cross site request forgeries (XSRF).

　　保持你的系統里的所有軟件更新到最新的patch。

　　確保你的數據庫連接是安全的。

　　確保你能了解最新的攻擊技術，以及你系統的脆弱處。

　　請讀一下 The Google Browser Security Handbook.

　　請讀一下 The Web Application Hacker’s Handbook.

　　(陳皓注：之前本站的“一些資源”提到過Mozilla的安全編程規范，還有Ruby on Rails的Web安全的開發教程)

　　性能

　　只要需要，請實現cache機制，了解并合理地使用 HTTP caching 以及 HTML5 Manifest.

　　優化頁面 —— 不要使用20KB圖片來平鋪網頁背景。(陳皓注：還有很多網頁頁面優化性的文章，你可以STFG – Search The Fucking Google一下。如果你要調試的話，你可以使用firebug或是chrome內置的開發人員的工具來查看網頁裝載的性能)

　　學習如何 gzip/deflate 網頁 (deflate 更好).

　　把多個CSS文件和Javascript文件合并成一個，這樣可以減少瀏覽器的網絡連數，并且使用gzip壓縮被反復用到的文件。

　　學習一下 Yahoo Exceptional Performance 這個網站上的東西，上面有很多非常不錯的改善前端性能的指導，以及 YSlow 這個工具。 Google page speed 是另一個用來做性能采樣的工具。這兩個工具都需要安裝 Firebug 。

　　為那些小的圖片使用 CSS Image Sprites，就像工具條一樣。 (參看 “最小化 HTTP 請求” ) (陳皓注：把所有的小圖片合并成一個圖片，然后用CSS把顯示其中的一塊，這樣，這些小圖片只用傳輸一次，酷殼的Wordpress樣式的那個RSS訂閱列表中的小圖標就是這樣做的)

　　繁忙的網絡應該考慮把網頁的內容分開存放在不同的域名下。(陳皓注：比如有專門的圖片服務器——圖片相當耗帶寬，或是專門的Ajax服務器)

　　靜態網頁 (如，圖片，CSS，JavaScript，以及一些不需要訪問cookies的網頁) 應該放在一個不使用cookies的獨立的域名下，因為所有在同一個域名或子域名下的cookie會被這個域名下的請求一同發送。另一個好的選擇是使用 Content Delivery Network (CDN).

　　使用單個頁面的HTTP請求數最小化。

　　為Javascript使用 Google Closure Compiler 或是 其它壓縮工具(陳皓注：壓縮Javascript代碼可以讓你的頁面減少網絡傳輸從而可以得到很快的喧染。注意，并不是所有的工具都可以正確壓縮Javascript的，Google的這個工具甚至還可以幫你優化你的代碼)

　　確認你的網站有一個 favicon.ico 文件放在網站的根下，如 /favicon.ico. 瀏覽器會自動請求這個文件，就算這個圖標文件沒有在你的網頁中明顯說明，瀏覽器也會請求。如果你沒有這個文件，就會出大量的404錯誤，這會消耗你的服務器帶寬。(陳皓注：服務器返回404頁面會比這個ico文件可能還大)

　　SEO (搜索引擎優化)

　　使用 “搜索引擎喜歡的” URL，如：使用 example.com/pages/45-article-title 而不是 example.com/index.php?page=45 (陳皓注：這里的URL是說Wordpress的，后者是默認的)

　　如果你的動態頁面要使用 # ，那么請把其改成 #! ，而在服務端，你需要處理$_REQUEST["_escaped_fragment_"] 這是Google搜索引擎需要的。換句話說，./#!page=1 會被Google搜索引擎轉成 ./?_escaped_fragments_=page=1。 (陳皓注：通常來說URL中的#后的東西都不會被傳到服務器上，所以，為了要讓Google可以抓取AJAX的東西，你需要使用#!，而Google會把“#!”轉成“_escaped_fragment_”來向服務器發請求，Twitter的大量的鏈接者是#!的，比如：https://twitter.com/#!/your_activity)。另外，用戶也許會使用Firefox 或 Chromium， history.pushState({"foo":"bar"}, "About", "./?page=1"); 是一個很不錯的命令。所以，就算是我們的地址欄上的地址改變了，頁面也不會重新裝載。這可以讓你使用 ? 而不是 #! 也能無刷地保住當前的動態的頁面，這可以讓AJAX的請求被瀏覽器記住。

　　別使用 “click here” 這樣的鏈接。這樣一來，無法SEO，而且對于一些需要使用讀屏人來說很不友好(陳皓注：關于讀屏軟件，可參看本站的“如果看不見你還能編程嗎”)

　　做一個 XML sitemap，并放在網端的根下 /sitemap.xml. (陳皓注：這個文件可以讓搜索引擎了解你的網站圖)

　　當你有多個URL指向同一個網頁的使用，使用 你可以使用 Google Webmaster Tools 來查看相關的問題。

　　使用 Google Webmaster Tools 和 Yahoo Site Explorer.

　　安裝 Google Analytics (或是別的開源的網站分析工具，如： Piwik).

　　了解 robots.txt 和搜索引擎爬蟲是如何工作的。

　　重定向請求 (使用 301 重定向網站) ，如果你要把 www.example.com 定向到 example.com(或是其它的變更) 這樣可以防止Google的rank因為域名的變化發生改變。(陳皓注：301重定向一般用作域名變更)

　　知道并不是所有的爬蟲都是好的，有些爬蟲的行為并不好。(陳皓注：比如向你的網站發大量的請求導致服務器性能低下)

　　如果你有一些非文本的內容需要在 Google’s sitemap 中，比如視頻什么的。Tim Farley的答案，可以讓你看到很多有價值的東西。

　　技術

　　理解什么是 HTTP 比如 GET, POST, sessions, cookies等，了解什么是 “stateless” 無狀態。

原文轉自：http://www.kjueaiud.com