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

原文地址：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分支模型。