## 6. BUG修复 * 要了解你花费20%的时间写代码而花费80%的时间来维护，因此写代码时一定注意。 * 建立一个好的错误报告解决方案。 * 建立一个别人可以提建议和批评的系统。 * 为未来的支持人员和维护人员建立良好的文档。 * 经常备份！[Ed Lucas 的回答](http://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site#73970)中有一些建议。有一个恢复策略，而不只是一个备份策略。 * 使用版本控制系统，如 [Subversion](http://subversion.apache.org/)、[Mercurial](http://mercurial.selenic.com/) 或 [Git](http://git-scm.org/)。 * 不要忘记验收测试。[Selenium](http://seleniumhq.org/) 等框架可以帮到你。 * 请确保您有足够的日志记录的地方，可以使用框架如[log4j](http://logging.apache.org/log4j/), [log4net](http://logging.apache.org/log4net/) 或 [log4r](http://log4r.rubyforge.org/)。当网站出现问题的时候，你需要能够找到问题所在。 * 日志要记录已处理异常和未处理异常。分析日志输出，因为它会显示出你网站的关键问题。 这里有些省略的东西并不是因为它们没用，而是因为它们过于详细或者超出了范围，或者说的太远了。当然，上面的内容可能也有一些遗漏或者错误。

## 5. 技术 * 理解[HTTP](http://www.ietf.org/rfc/rfc2616.txt)以及GET、POST、session、cookie以及“无状态”的意思。 * 撰写[XHTML](http://www.w3.org/TR/xhtml1/)/[HTML](http://www.w3.org/TR/REC-html40/)和CSS要遵循[W3C规范](http://www.w3.org/TR/)，并确保它们通过[校验](http://validator.w3.org/)。这样做的目的是为了避免浏览器的怪癖模式，并且这使得非标准浏览器如屏幕阅读器和移动设备更加容易实现。 * 理解浏览器是如何处理JavaScript 的。 * 理解JavaScript 、样式表、以及页面使用的其他资源是如何加载的，并考虑它们对感知性能的影响。现在普遍认同的一种做法是把除分析代码等以外的[脚本文件放在页面底部](http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/)。 * 了解JavaScript 沙箱是如何工作的，特别是当你想使用 iframe 的时候。 * 需要注意到，JavaScript是可以被禁用的，因此AJAX只是一个扩展，而不是基准。虽然大部分用户并没有禁用它，但记住，[NoScript](http://noscript.net/)正在变得越来越流行。并且，谷歌在索引你的网站时也不会运行JavaScript。 * 学习[ 301 和 302 重定向之间的不同](http://www.bigoakinc.com/blog/when-to-use-a-301-vs-302-redirect/)。 * 尽可能多地了解你的部署平台。 * 考虑使用 [Reset Style Sheet](http://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet) 或 [normalize.css](http://necolas.github.com/normalize.css/)。 * 考虑使用JavaScript框架(如[jQuery](http://jquery.com/), [MooTools](http://mootools.net/), [Prototype](http://www.prototypejs.org/), [Dojo](http://dojotoolkit.org/) 或 [YUI 3](http://developer.yahoo.com/yui/3/))，这可以避免很多使用JavaScript操作DOM时的差异。 * 在考虑感知性能和框架的同时，考虑使用服务，如Google Libraries API，来加载框架，这样浏览器可以使用已经缓存的框架而不是从你的网站上下载。 * 不要重复造轮子。在做任何事情之前，先搜索相关的组件或者实例。99%的可能别人已经实现了并发布出了开源的代码。 * 在确定需求之前，尽量不要使用超过20个的库，这是非常不利的。特别是客户端WEB，保存轻便、快速、灵活是最重要的。

## 4. SEO * 使用“搜索引擎友好”的URL，如 http://example.com/pages/45-article-title 而不是 http://ofexample.com/index.php?page=45。 * 在动态内容中，把 `#` 改成 `#!` ，然后在服务器端使用`$_REQUEST["_escaped_fragment_"]`。换句话说 ./#!page=1 变成了 ./?_escaped_fragments_=page=1。此外，对于使用 FF.b4 or Chromium 的用户，`history.pushState({"foo":"bar"}, "About", "./?page=1");` 是一个非常棒的命令。因此，即使地址栏已经改变了，页面也不会刷新。 * 不要使用“[点击这里](http://ux.stackexchange.com/questions/12100/why-shouldnt-we-use-the-word-here-in-a-textlink)”这样的链接。你是在浪费一个搜索引擎优化的机会，而且它让使用用屏幕阅读器人们更难阅读。 * 有一个[XML网站地图](http://www.sitemaps.org/)，最好在默认位置 `/sitemap.xml`。 * 当有多个URL指向同一个内容的时候，使用 `` ，这个问题可以通过 [Google Webmaster Tools](http://www.google.com/webmasters/) 来解决。 * 使用 [Google Webmaster Tools](http://www.google.com/webmasters/) 和 [Bing Webmaster Tools](http://www.bing.com/toolbox/webmaster)。 * 安装 [Google Analytics](http://www.google.com/analytics/) 或者其他开源分析工具如：[Piwik](http://piwik.org/)。 * 了解 [robots.txt](http://en.wikipedia.org/wiki/Robots_exclusion_standard) 及搜索引擎蜘蛛 是如果工作的。 * 使用重定向（301）www.example.com 到 example.com(或者反过来)，防止它们平分谷歌网站排名。 * 要知道有 badly-behaved 蜘蛛的存在。 * 如果你的网站有非文本内容，*[Tim Farley](http://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site#167608)* 的回答中有一些非常有用的信息。

## 3. 性能 * 如果有必要的话，实现缓存，请正确理解和使用[HTTP缓存](http://www.mnot.net/cache_docs/)。 * 优化图片。不要使用20K的图片作为平铺背景。 * 学习如何 [gzip/deflate 内容](http://developer.yahoo.com/performance/rules.html#gzip)（[deflate效果更好](http://stackoverflow.com/questions/1574168/gzip-vs-deflate-zlib-revisited)）。 * 合并样式表与脚本文件以减小浏览器链接数，同时提高 gzip 的压缩能力。 * 浏览[雅虎性能卓越的网站](http://developer.yahoo.com/performance/)，以及大量的指南，其中包含提升前端性能和YSlow工具（需要安装Firefox, Safari, Chrome 或 Opera）。此外，[Google page speed](https://developers.google.com/speed/docs/best-practices/rules_intro)([浏览器扩展](https://developers.google.com/speed/pagespeed/insights_extensions))也是一个性能分析工具，它同时可以优化你的图片。 * 对于小的如工具栏图片，使用[CSS Image Sprites](http://alistapart.com/articles/sprites)(参考最小化HTTP请求)。 * 访问量大的网站应该考虑[跨域拆分组件](http://developer.yahoo.com/performance/rules.html#split)。 * 静态内容（如图片、CSS、JavaScript及[不需要访问cookie的内容](http://blog.stackoverflow.com/2009/08/a-few-speed-improvements/)）应该放在一个单独的域下，因为域及其子域的每一个请求都会发送cookie。这里是使用内容分发网络（CDN）的一个很好的选择。 * 减少浏览器渲染页面所需的HTTP请求的总数量。 * 利用[Google Closure Compiler](http://developers.google.com/closure/compiler/)及[其他](http://developer.yahoo.com/yui/compressor/)压缩JS的工具。 * 确保网站根目录下有一个favicon.ico文件，即使在HTML中并没有提到它，[浏览器也会自动加载它](http://mathiasbynens.be/notes/rel-shortcut-icon)。如果你没有 /favicon.ico ，就会返回很多404错误，消耗服务器带宽。

## 2. 安全 * [OWASP开发指南](http://www.owasp.org/index.php/Category%3aOWASP_Guide_Project) 几乎覆盖了网站安全所有的内容。 * 了解注入，尤其是 [SQL注入](http://en.wikipedia.org/wiki/SQL_injection)，并学会如何阻止它。 * 永远不要相信用户的输入，以及其他任何请求（包括Cookies和隐藏域的值）。 * 使用盐值(salt)哈希密码，并对不同的行使用不同的盐值，防止攻击。使用哈希算法如 bcrypt 或 scrypt(更安全，但比较新)([1](http://www.tarsnap.com/scrypt.html), [2](http://it.slashdot.org/comments.pl?sid=1987632&cid=35149842))来存储密码。([如何安全的存储密码](http://codahale.com/how-to-safely-store-a-password/))。[NIST也允许使用PBKDF2来加密密码](http://security.stackexchange.com/q/7689/396)。避免直接使用 MD5 和 SHA 等算法。 * [不要企图拿出自己喜欢的认证系统](http://stackoverflow.com/questions/1581610/how-can-i-store-my-users-passwords-safely/1581919#1581919)。这是很容易出错的，并且是不可测的，甚至直到你被攻击了你才知道。 * 了解[信用卡处理规则](https://www.pcisecuritystandards.org/)。(也可查看[该问题](http://stackoverflow.com/questions/51094/payment-processors-what-do-i-need-to-know-if-i-want-to-accept-credit-cards-on-m)) * 在登录页和任何需要输入敏感数据的页面使用[SSL/HTTPS](http://www.mozilla.org/projects/security/pki/nss/ssl/draft302.txt)。 * [防止 session 被劫持](http://en.wikipedia.org/wiki/Session_hijacking#Prevention)。 * 避免[跨站脚本](http://en.wikipedia.org/wiki/Cross-site_scripting)(XSS)。 * 避免[点击劫持](http://en.wikipedia.org/wiki/Clickjacking)。 * 保持系统更新到最新的补丁。 * 确保数据库连接信息的安全。 * 让自己了解最新的攻击技术和会影响你平台的漏洞。 * 阅读[谷歌浏览器安全手册](http://code.google.com/p/browsersec/wiki/Main)。 * 阅读[WEB应用黑客手册](http://amzn.com/0470170778)。 * 考虑[最小特权原则](https://en.wikipedia.org/wiki/Principle_of_least_privilege)，尽量使用[非root用户](http://security.stackexchange.com/questions/47576/do-simple-linux-servers-really-need-a-non-root-user-for-security-reasons)运行服务器(以[tomcat](http://tomcat.apache.org/tomcat-8.0-doc/security-howto.html#Non-Tomcat_settings)为例)。

## 1. 界面和用户体验 * 注意，浏览器的实现标准是不一致的，请确保你的网站能够兼容所有主流的浏览器。最少需要测试的有 [Gecko](http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29) 引擎([Firefox](http://firefox.com/))，WebKit引擎([Safari](http://www.apple.com/safari/)以及一些手机浏览器)，[Chrome](http://www.google.com/chrome)，你所要支持的 [IE 浏览器](http://en.wikipedia.org/wiki/Internet_Explorer)，以及 [Opera](http://www.opera.com/)。此外，你还需要了解不同系统下，[浏览器是如何渲染网页的](http://www.browsershots.org/)。 * 考虑一下人们不使用主流浏览器的情况，如手机，屏幕阅读器和搜索引擎。一些可用的辅助信息：[WAI](http://www.w3.org/WAI/) 和 [Section508](http://www.section508.gov/)，移动开发：[MobiForge](http://mobiforge.com/)。 * 阶段：如何在不影响用户的情况下部署更新。有一个或多个可以用来改变架构、代码或全部内容，并确保它们在可控范围内实现部署的测试或临时环境。有一种自动化的方式把更新部署到线上网站。最有效的实现方式是结合使用版本控制系统(CVS、Subversion等)和自动构建机制(Ant、NAnt等)。 * 不要直接向用户显示不友好的错误信息。 * 不要用纯文本的方式显示用户的电子邮件，因为他们可能会被垃圾邮件烦到死。 * 为用户生成的链接添加 rel=”nofollow” 属性，以[避免垃圾邮件](http://en.wikipedia.org/wiki/Nofollow)。 * [为你的网站建立周全的限制](http://www.codinghorror.com/blog/archives/001228.html)–这条也同时属于安全方面。 * 学习如何[进一步的提高](http://en.wikipedia.org/wiki/Progressive_enhancement)。 * POST 提交成功后进行重定向，以免刷新造成重复提交。 * 别忘了考虑无障碍访问。这总是不错的，在某些情况下，这甚至是[法律要求](http://www.section508.gov/)的。 [WAI-ARIA](http://www.w3.org/WAI/intro/aria) 和 [WCAG 2](http://www.w3.org/TR/WCAG20/) 里都有关于这方面很好的资源。 * [不要让我思考](http://www.sensible.com/dmmt.html)。

> 原文出处：http://info.9iphp.com/essential-skills-every-web-developer-should-have/  WEB开发本身涵盖了许多领域的许多技术，那么，有哪些是WEB开发者必备的技能呢？这是一个 [Quora](https://www.quora.com/What-are-5-essential-skills-every-Web-Developer-should-have) 上用户提出的问题，其中[Ellyse Taylor](https://www.quora.com/profile/Ellyse-Taylor-1)的回答获得了1900+的赞同，今天就[Coder资源网](http://info.9iphp.com/)就为大家翻译整理其回答内容，希望大家能够从中学到一些东西。 By *Ellyse Taylor*： 可能很多人对下面这个列表中的大部分内容都已经了解了，但其中必定有一些是你之前没有看到过，或者没有完全理解的，甚至有些你可能从来没听说过。