摘要：在网站发布前，开发者需要关注有许多的技术细节，比如接口设计、用户体验、安全性、Web 标准、性能、SEO 等，倘若一个疏忽就会影响到整体的体验效果。作为一名 Web 开发者，哪些技术细节需要考虑呢？
　　【编者按】在网站发布前，开发者需要关注有许多的技术细节，比如接口设计、用户体验、安全性、Web 标准、性能、SEO 等，倘若一个疏忽就会影响到整体的体验效果。在Stackexchange上有人提出：作为一名 Web 开发者，哪些技术细节是需要考虑的？作者Hedgehog对该文进行了编译，这些资源有助于你了解一些关键技术，比如 HTML、HTTP、XML、CSS、JavaScript、浏览器兼容性，减少网站加载时间的技巧、XML 站点地图、W3C 规范等。一起来看下：
　　问：对于一个 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。如果你的网站发生了错误，你要知道发生了什么事情。
　　当登录时请务必同时捕获处理异常和未处理的异常。报告 / 分析日志的输出，因为它会告诉你网站中的关键问题。
　　很多知识都省略了，并不是因为他们不是有用的答案，而是它们要么过于详细，要么超出了范围，亦或对某些人来说过于深入。大家应该知道这知识概述，请随意畅谈，因为我可能错过了一些东西或者也犯了一些错误。
　　推荐阅读：
　　译文出自：Cnblog
原文地址：http://iphone.myzaker.com/l.php?l=53797e151bc8e03f1d8b4567