在制作网站之前，前端程序员应该考虑哪些技术细节？

原文地址：What should every programmer know about web development?

界面和用户体验

• 注意浏览器的实现标准上的不一致，确保你的网站在所有主流浏览器。至少需要测试最近的Gecko 引擎（Firefox）、Webkit引擎（Safari和一些手机浏览器）、Chrome、你支持的IE浏览器（利用IE应用程序兼容性VPC镜像）和Opera。也要考虑在不同操作系统上浏览器如何渲染你的网站。
• 考虑人们可能使用主流浏览器以外的方式来访问网站：例如手机、屏幕阅读器和搜索引擎。一些辅助信息： WAI 和 Section508，移动开发： MobiForge。
• 模拟环境：如何不影响用户地部署更新。有一个或多个测试或部署环境来实现框架、代码或清除内容的改变并确保它们能够以一种可控制的方式部署，而不破坏任何东西。有自动方法部署许可的更改到线上环境。这是最有效地实现结合使用版本控制系统（CVS, Subversion等）和自动化构建机制（Ant, NAnt等）。
• 不要直接给用户显示不友好的错误信息。
• 不要把用户的邮件地址以明文显示出来，这样用户的邮箱会被垃圾邮件搞死。
• 添加rel=“nofollow”属性的用户生成的链接，避免垃圾邮件。
• 为你的网站设置一些合理的使用限制（这也与网站安全相关。）。
• 知道如何实现渐进增强。
• 用户发出POST请求后，总是将其重导向（redirect）至另外一个网页。
• 不要忘记网站的可访问性（accessibility，即残疾人如何使用网站）。对于美国网站来说，有时这是法定要求。WAI-ARIA有一些这方面很好的参考资料。
• Don't make me think

安全

• 在网上有很多关于安全的文章，但是 《OWASP 开发指南》 涵盖了几乎所有关于 Web 站点安全的东西。
• 了解什么注入特别是 SQL 注入攻击 并知道怎么阻止。
• 永远不要相信用户的输入（包括 Cookies和表单的隐藏字段值）。
• 对用户的密码进行 Hash和 salt 加密，以防止  彩虹表攻击。使用慢一点的 Hash 算法来保存密码，如 bcrypt (经受时间考验的) 或是 scrypt (更强，但是也更新一些) (1, 2)。  How To Safely Store A Password。NIST 建议使用 PBKDF2 to 加密密码 , 并且 FIPS approved in .NET (具体内容 )。避免直接使用 MD5 或 SHA。
• 不要试图自己去发明或创造一个自己的花俏的认证系统，这很容易在意想不到的和不可测试的地方出错并且直到你被黑你才知道它。
• 了解 处理信用卡的一些规则 . (这里也有一个问题你可以查看一下)。
• 使用 SSL/HTTPS 来加密传输登录页面或是任何有敏感信息的页面（如银行卡信息）。
• 对付session劫持。
• 避免跨站点执行（cross site scripting，XSS）。
• 避免跨域伪造请求（cross site request forgeries，XSRF）。
• 避免点击挟持（clickjacking）。
• 及时打上补丁，让你的系统始终跟上最新版本。
• 确认你的数据库连接信息的安全性。
• 了解最新的攻击技术和你使用的平台的漏洞。
• 阅读Google的浏览器安全手册。
• 阅读网络软件黑客手册。

性能

• 有必要的话，就使用缓存。理解和合理使用HTTP caching与HTML5离线储存。
• 优化图片。不要使用20KB的图片文件平铺背景。
• 学习如何用 gzip/deflate 压缩内容。
• 合并/连接多个样式表或脚本文件来减少浏览器的 http 网络连接数以及减小 gzip 压缩后的文件总体积。
• 学习一下 Yahoo Exceptional Performance 这个网站上的东西，上面有很多非常不错的改善前端性能的指导，以及 YSlow 这个工具。 Google page speed 是另一个用来做性能采样的工具。这两个工具都需要安装 Firebug。
• 用到大量的小体积图片（比如工具栏）的地方使用 CSS Image Sprite，目的是减少 http 请求数。
• 用到大量的小体积图片（比如工具栏）的地方使用 SVG Image Sprite。SVG的着色是有点棘手。你可以在这里阅读。
• 大流量的网站应该考虑将网页对象分散在多个域名。（比如有专门的图片服务器——图片相当耗带宽，或是专门的 Ajax 服务器）。
• 静态内容（比如图片、CSS、JavaScript、以及其他cookie无关的网页内容）都应该放在一个不需要使用cookie的独立域名之上。因为域名之下如果有cookie，那么客户端向该域名发出的每次http请求，都会附上cookie内容。这里使用内容分发网络（CDN）的一个很好的选择，但考虑这样的情形，CDN may fail by including alternative CDNs, or local copies that can be served instead.
• 将浏览器完成网页渲染所需要的http请求数最小化。
• 选择一个模板引擎并使用自动化构建工具如gulp或grunt渲染/预编译它。
• 确保网站根目录下有 favicon.ico 文件，因为即使网页中根本不包括这个文件，浏览器也会自动发出对它的请求。所以如果这个文件不存在，就会产生大量的 404 错误，消耗光你的服务器的带宽。（服务器返回 404 页面会比这个 ico 文件可能还大）。

SEO

• 使用"搜索引擎友好"的URL形式，比如example.com/pages/45-article-title，而不是example.com/index.php?page=45。
• 如果你的动态页面要使用 # ，那么请把其改成 #! ，而在服务端，你需要处理$_REQUEST["_escaped_fragment_"] 这是 Google 搜索引擎需要的。换句话说，./#!page=1 会被 Google 搜索引擎转成 ./?_escaped_fragments_=page=1。另外，用户也许会使用 Firefox 或 Chromium， history.pushState ({"foo":"bar"}， "About"， "./?page=1"); 是一个很不错的命令。所以，就算是我们的地址栏上的地址改变了，页面也不会重新装载。这可以让你使用 ? 而不是 #! 也能无刷地保住当前的动态的页面，这可以让 AJAX 的请求被浏览器记住。
• 要使用"点击这里"之类的超级链接，因为这样等于浪费了一个SEO机会，而且对使用屏幕阅读器的人更难操作。
•  创建一个 XML sitemap 文件，它的缺省位置一般是/sitemap.xml（即放在网站根目录下）。（这个文件可以让搜索引擎了解你的网站地图）
• 当你有多个 URL 指向同一个内容时，在网页代码中使用<link rel=”canonical” … />。可以使用 Google Webmaster Tools 来查看相关的问题。
• 使用 Google Webmaster Tools  和  Bing Webmaster Tools。
• 从一开始就使用 Google Analytics（或者开源的访问量分析工具 Piwik。
• 了解 robots.txt 和搜索引擎爬虫是如何工作的。
• 将www.example.com的访问请求导向example.com（使用301 Moved Permanently重定向），或者采用相反的做法，目的是防止Google把它们当做两个网站，分开计算排名。
• 知道并不是所有的爬虫都是好的，有些爬虫的行为并不好。（比如向你的网站发大量的请求导致服务器性能低下）
• 如果你的网站有非文本的内容（比如视频、音频等等），你应该参考 Google 的 sitemap 扩展协议。Tim Farley 的答案，可以让你看到很多有价值的东西。

技术

• 理解 HTTP 协议，以及诸如 GET、POST、sessions、cookies 之类的概念，包括”无状态”（stateless）是什么意思。
• 让你的 XHTML/HTML 和 CSS 符合 W3C 规范，使得它们能够通过检验。这可以使你的网页避免触发浏览器的怪异模式（quirks mode），并且可以让其更容易地能和非标准的浏览器工作，比如读屏器或移动设备。
• 理解浏览器是怎么处理 JavaScript 。
• 理解网页上的 JavaScript 文件、样式表文件和其他资源是如何装载及运行的，考虑它们对页面性能有何影响。如今广泛地认为适当地将脚步放到页面的底部但典型的例外是分析app或HTML5 shime。
• 理解 JavaScript 沙箱（Javascript sandbox）的工作原理，尤其是如果你打算使用 iframe。
• 知道JavaScript可能无法使用或被禁用，因此Ajax是一种延伸，不是一个基准。就算是大多数用户都开启了 Javascript 功能，记住NoScript正变得越来越流行，移动设备可能无法按预期的工作，而Google索引网页时不运行大部分的脚本文件。
• 了解 301 重定向和 302 重定向之间的区别（这也是一个 SEO 相关问题）。
• 尽可能多地了解你的部署平台。
• 考虑使用 Reset Style Sheet 或 normalize.css。
• 考虑JavaScript框架（如 jQuery, MooTools, Prototype, Dojo or YUI 3），使用JavaScript操作DOM时可以使你不用考虑浏览器之间的差异。
• 把perceived performance和JS框架结合，考虑使用服务如Google Libraries API 来加载框架因此浏览器可以使用它缓存好的框架的副本而不是从你的网站下载一个重复的副本。
• 不要重新发明轮子。在做任何事之前寻找一个现有组件或例子。你有 99% 的可能找到别人已经发布的开源版本。
• 不要一开始就做非常多的功能和组件，特别是在客户端的 Web 上，你需要保持系统是轻量级，快速，灵活的。

修复bug

• 要知道你将花20%的时间写代码剩下80%来维护，所以你要小心编码。
• 建立一个有效的错误报告机制。
• 建立某些途径或系统，让用户可以与你接触，向你提出建议和批评。
• 为你开发的东西形成文档，解释清楚系统是怎么运行的，这样可以让后来的人容易维护你的软件和系统。
• 频繁备份（也可确保你的这些备份功能正常）你还需要有一个恢复策略，而不只是一个备份策略。
• 使用一个版本控制系统来保存你的代码，如： Subversion、 Mercurial 或 Git。不要忘了做验收测试，想Selenium这样的框架能帮助你。
• 特别 地如果你想让测试完全自动化，或许使用像Jenkins的持续集成工具。
• 当你写日志的时候，确保你记录了你捕获了处理和未处理异常。报告和分析日志可以让你知道你网站的问题。

其他

• 实现服务器端和客户端的监控和分析（ 应该是积极的，而不是被动的）。 
• 使用UserVoice 和 Intercom（或任何其他类似的工具）不断保持与用户联系。
• 遵循 Vincent Driessen  的 Git分支模型。