做为一个web开发人员，哪些技术细节是在发布站点前你须要考虑到的

前日在cnblogs上看到一遍文章《每一个程序员都必读的12篇文章》，其中大多数是E文的。

先译其中一篇web相关的”每一个程序员必知之WEB开发”。

原文：

http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before

 

问：对于一个web开发人员来讲，在发布一个站点以前，他须要处理哪些细节性的问题。假如Jeff Atwood能在站点上忽略了对HttpOnly cookies，sitemaps,和cross-site request forgeries的关注，那我还能忽略些什么呢？

对于一个设计或提供站点内容的人来讲，他们总认为站点的可用性及内容总比这个平台重要的多，固然在这个方面，web开发人员没有什么话语权。对于一个web开发人员来讲，其更多须要关注的是站点的稳定性，是否表现良好，安全性，是否知足了其余商业目标（例如花费不要过高，构建时间不要太长，在google提供的搜索结果中是否有个良好的排名）。

咱们能够从这个角度上讨论这个问题：一个web开发者在可信网络环境下作了些成成果，而且他打算将这个成果部署到当前这个糟糕的互联网环境上。

另外，我也寻找一个更具体的答案而非一个模糊的”web标准”，个人意思是已经了解了HTTP上的HTML、JavaScript、CSS技术，且认为你已是一个专业的web开发人员。那么，除此以外还有那些标准，在什么环境下使用？为何？请提供一个连接到标准的规范。

 

答：如下大部分的观点也许大部分都已知悉，可是其中有少许的观点你获取历来没有看过，别担忧，你没必要所有理解他们，或许对你来讲你永远也不须要了解到他们。

接口设计及用户体验

1. 你须要知道各类浏览器实现标准不一致，你须要保证你的站点在主流浏览器上可以良好运行。至少须要测试：基于Gecko引擎的浏览器(例如：Firefox)，基于Webkit引擎的浏览器(例如Safari和其余一些手机浏览器)，Chrome，IE及Opera。同时也须要考虑在不一样的操做系统上，各类浏览器如何渲染你的站点。
2. 考虑你的站点将会被如何使用：是在手机端访问，pc上的浏览器访问，亦或是搜索引擎。
3. 在避免影响用户的状况下如何发布更新。是否有一个或者多个测试/临时以便在不打断站点访问的状况下进行架构、代码及内容的更新。是否有自动化的方式对在线站点进行发布。这些可使用一套版本控制系统及自动化构建方式来有效实施。
4. 不容许向用户提示不友好的错误信息。
5. 不要以纯文本的方式提供出用户的email地址，由于他们会收到过多的垃圾邮件而死亡。
6. 在用户生成的连接上增长rel=”nofollow”属性，以免垃圾邮件。
7. 对你的站点创建些限制，固然这应该是通过深思熟虑的-这也属于安全性范围。
8. 学习如何逐步提升站点功能。
9. 为避免重复提交，当POST成功执行后须要进行页面跳转。
10. 不要忘记考虑辅助功能。它老是一个好主意，且在某些状况下这是一个法律要求。 WAI-ARIA和WCAG2个在这方面的良好资源。
11. 不要让我想该如何进行操做。

 

安全性

1. 这有不少须要阐述，可是OWASP开发指南中依据对web站点安全性从头到脚进行了介绍。
2. 要了解注入特别是SQL注入，并学会如何避免他。
3. 永远不要相信用户的输入，也不是来自于请求别的(包括cookie和隐藏的表单字段值)。
4. 不要使用单独相似MD5或SHA加密策略，在进行散列密码值时，使用做料或多种做料以防止彩虹攻击。对于短密码，采用一个短散列算法处理，例如：bcrypt或scrypt。
5. 不要使用你想象中的身份认证系统，很容易获得一个微妙的错误和不可测试的问题，甚至你本身都不知道会怎么回事。
6. 了解处理信用卡规则。
7. 使用SSL/HTTPS处理任何敏感数据。
8. 防止会话劫持。
9. 避免跨站点脚本攻击。
10. 避免跨站点请求伪造。
11. 避免点击劫持。
12. 确保你的系统安装了最新的补丁。
13. 确保你的数据库链接信息是安全的。
14. 了解最新的攻击技术以避免影响到你的平台。
15. 阅读谷歌安全手册。
16. 阅读web应用程序黑客手册。
17. 考虑最小权限的负责人机制。

 

性能

1. 若是有必要的话实现缓存策略。理解Http caching和html5 manifest并在合适的地方使用它们。
2. 优化图像-不要使用20 KB大小的图像作重复背景。
3. 了解如何gzip/deflate内容。
4. 合并/链接多个样式表或多个脚本文件，以减小浏览器链接的数量，并经过gzip来压缩多个文件中的重复内容。
5. 阅览雅虎卓越性能站点，其中包含大量很棒的指南，例如端到端的性能提高方法，YSlow工具。Goole page speed是是一个优化参考的好去处。
6. 使用CSS image sprite技术减小图片请求。(ps:前段时间用node-canvas作了个本地化的css-sprite工具，有须要的能够找我拿源码^_^)。
7. 访问量大的站点能够将内容划分到多个域下，但不要超过4个域。
8. 静态内容(例如图片，css文件，js文件及一些静态文本)应该存放在一个单独的域下面，而且不能使用cokies，由于在每次请求时，都会将cookies带上。CDN(内容分发网络)是一个不错的选择。
9. 减小一个浏览器页面上发起的http请求数量。
10. 使用JavaScript文件压缩技术。
11. 确保在站点的根目录下有一个favicon.ico文件，即便该文件未被任何使用，流量器也会自动加载它。若是没有这个文件的话，将会致使大量的404错误，从而占用你的服务器带宽。

 

SEO(搜索引擎优化)

1. 使用搜索引擎友好的的url，例如：使用example.com/pages/45-article-title 而非example.com/index.php?page=45
2. 当使用＃动态内容更改＃到＃！而后在服务器$_REQUEST[“_escaped_fragment_”]是什么Googlebot使用，而不是＃！换句话说，＃！页= 1/变成/？_escaped_fragments_=页= 1。此外，对于可能使用FF.b4或铬，history.pushState用户（{“foo”的：“酒吧”}“。？/页=1”，“关于”，）;是一个伟大的命令。所以，即便在地址栏改变了页面不会从新加载。这使您可使用？而不是＃！保持动态内容，并告诉服务器当您发送电子邮件，咱们是这个页面后的连接，以及AJAX并不须要再做额外的要求。（Google翻译，没有彻底理解…）
3. 不要使用”click here”这样的连接，这样会浪费SEO的机会而且也会让人更加难以理解。
4. 要有一个XML站点地图，最好是在默认位置/sitemap.xml的。
5. 当你有两个指向不一样的地址，可使用<link rel="canonical".../>，这个问题也能够从谷歌网站管理员工具解决。
6. 使用Google Webmaster Tools 和 Bing Webmaster Tools.
7. 使用Google Analytics。
8. 了解机器人搜寻算法和搜索引擎爬虫的工做方式。
9. 重定向请求（使用301永久移动）要求www.example.com到example.com（或者反过来），以防止分裂谷歌两个网站之间的排名。
10. 你还要知道还有不少恶心的爬虫程序运做在网络上。(之前在作一个百科词条整理时，对某网站的词条进行了深度遍历，但程序运行不久IP就被封杀了。)

 

技术点

1. 理解HTTP协议，例如：GET，POST，Session，Cookies以及“无状态”的含义。
2. 根据W3C规范写你的XHTML/ HTML和CSS，并确保他们经过验证。这是为了不浏览器的使用非标准的浏览器，如屏幕读取器和移动设备的正常工做。
3. 了解JavaScript在浏览器中的运行机制。
4. 理解JavaScript、css及其余资源在页面上是如何被加载的，并考虑他们对性能的影响。如今广泛接受将脚本放在应用程序或html5底部执行。
5. 了解JavaScript沙箱的工做原理，特别是若是你打算使用iframe。
6. 你要注意到JavaScript是能够被禁止的，而且AJAX是一个拓展而非基线。不少普通用户已经离开了它，NoScript愈来愈受欢迎，移动设备或许不会像你想象的那样运行，谷歌将没法运行大部分的的JavaScript。(不解，noscript标签是定义在未能执行js时的输出，当是当前js横行的时代，真的还有不少用户禁用js吗？？？)
7. 理解重定向301和302的区别。(这也是SEO中的一项)
8. 尽量深刻了解你的开发环境。
9. 考虑使用Reset CSS或Normalize.css。
10. 考虑JavaScript框架（如jQuery，MooTools，Prototype，Dojo或YUI3），这将使用JavaScript进行DOM操做时，隐藏了不少的浏览器差别。
11. 考虑到JS框架及性能，可使用一个服务，如谷歌库API来加载框架，使浏览器可使用它已经缓存，而不是从你的网站下载一个副本的框架副本。(CDN)
12. 不要重复造轮子。作任何事情以前先搜索关于如何作到这一点的组件或例子。有99％的可能性有人已经作到了和发布了一个开源版本的代码。
13. 在明确你的需求以前，不要使用20个库去堆砌功能。特别是在客户端访问，其最重要的就是让事情轻便、快速和灵活。

 

Bug修复

1. 你要知道你将要花费80%的时间去维护你20%时间写的代码，因此编码时请仔细。
2. 创建一个良好的错误报告解决方案。
3. 有一个能让你们提供建议或提出批评的系统。
4. 将将来支持的功能及维护人员记录在文档中。
5. 频繁的备份！ （而且确保这些备份是功能性）埃德·卢卡斯的回答有一些忠告。有一个恢复策略，而不仅是一个备份策略。
6. 有一个版本控制系统来存放文件，例如Subversion，Mercurial或Git。
7. 不要忘记作些验收测试，相似Selenium框架能够提供方便。
8. 请确保您有足够的日志记录在案，例如使用框架log4j，log4net或log4r。若是你的网站发生了错误，你要知道发生了什么事情。
9. 当登陆时请务必同时捕获处理异常和未处理的异常。报告/分析日志的输出，由于它会告诉你网站中的关键问题。

 

不少知识都省略了，并非由于他们不是有用的答案，而是它们要么过于详细，要么超出了范围，亦或对某些人来讲过于深刻。你们应该知道这知识概述，请随意畅谈，由于我可能错过了一些东西或者也犯了一些错误。

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

 

翻译完了，大汗淋漓啊，有木有！！！若有不对之处，请拍砖。

 

原文：

http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before

 

备注：

HttpOnly Cookie：一种缓解XSS跨站点脚本攻击的技术；

http://desert3.iteye.com/blog/869080

http://blog.codinghorror.com/protecting-your-cookies-httponly/

Sitemap: 一般以xml文件方式，方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页，以便搜索引擎能够更加智能地抓取网站。

http://blog.codinghorror.com/the-importance-of-sitemaps/

Cross-Site Request Forgeries：跨站请求伪造

http://blog.codinghorror.com/cross-site-request-forgeries-and-you/

OWASP:开放式Web应用程序安全项目（OWASP，Open Web Application Security Project）是一个组织，它提供有关计算机和互联网应用程序的公正、实际、有成本效益的信息。其目的是协助我的、企业和机构来发现和使用可信赖软件。

https://www.owasp.org/index.php/Category:OWASP_Guide_Project

HTML5 Manifest：离线缓存

http://www.html5rocks.com/zh/tutorials/appcache/beginner/

deflate：DEFLATE是同时使用了LZ77算法与哈夫曼编码（Huffman Coding）的一个无损数据压缩算法。

http://zh.wikipedia.org/wiki/DEFLATE

CDN：Content Delivery Network(内容分发网络)

内容分发网络是一种新型网络内容服务体系，其基于IP网络而构建，基于内容访问与应用的效率要求、质量要求和内容秩序而提供内容的分发和服务。

http://baike.baidu.com/view/8689800.htm?fromtitle=CDN&fromid=420951&type=search

雅虎站点性能优化：

https://developer.yahoo.com/performance/rules.html

Google page speed

https://developers.google.com/speed/docs/best-practices/rules_intro

Http 301,302

http://blog.csdn.net/ghj1976/article/details/1794684

Normalize.css 与 Reset CSS区别

Normalize.css与Reset CSS主要为定义浏览器统一的默认样式。

http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css

HTML rel canonical 属性值

rel canonical 属性值 -- rel="canonical"属性让搜索引擎知道当前网站中的重复或类似网页中，哪个页面才是站长想让其抓取与收录的。

http://en.wikipedia.org/wiki/Canonical_link_element

http://tools.ietf.org/html/rfc6596

Google Analytics：企业级的网站分析服务

http://www.google.com/analytics/

Robots.txt(Robots exclusion standard)

http://en.wikipedia.org/wiki/Robots_exclusion_standard