StackExchange:Web开发中你需要知道的事

在StackExchange上有人问了这样一个问题:What should every programmer know about web development?(关于Web开发,什么是所有程序员需要知道的?)里面给出的答案非常不错,所以,我翻译转载过来。 顺便说一下,StackExchange真是非常好,大家可以对同一个答案做贡献和修订,看看这个问题的修订过程你就知道了——专业的问答网站应该怎么去做。这就是我在这篇文章中也说过真正的用户体验是什么样的。

好了,下面是正文(我对原文做了一些批注,也许不对或有误导,请大家指正)

下面的这些东西可能对于大多数人并不陌生,但是可能会有些东西你以前并没有看过,或是没有完全搞懂,甚至都没有听说过。(我相信当你看完这个列表后,你会觉得对于我国的Web开发有点弱了,还是那句话,表面上的东西永远是肤浅的)云鼎娱乐城

接口和用户体验

  1. 小心浏览器的实现标准上的不一致,确信让你的网站能够适当地跨浏览器。至少,你的网站需要测试一下下面的浏览器:
    • 最新的 Gecko 引擎 (Firefox),
    • 一个 Webkit 引擎 (Safari, Chrome, 或是其它的移动设备上的浏览器)
    • IE 浏览器 (测试IE的兼容性你可以使用微软IE的 Application Compatibility VPC Images)
    • Opera 浏览器。
  2. 最后,你可以使用一下这个工具 来看看你的网页在不同的浏览器下是怎么被显示出来的。
  3. 多考虑一下人们是怎么来访问你的网站而不是那些主流的浏览器:手机,读屏软件和搜索引擎,例如:一些Accessibility的东西: WAI 和  Section508, 移动设备开发:MobiForge.
  4. 部署Staging:怎么部署网站的更新而不会影响用户的访问。 Ed Lucas的答案 可以让你了解一些(Ed说了一些如版本控制,自动化build,备份,回滚等机制)。
  5. 千万不要直接给用户显示不友好的错误信息。
  6. 千万不要把用户的邮件地址以明文显示出来,这样会被爬虫爬走并被让用户的邮箱被垃圾邮件搞死。
  7. 为用户的链接加上 rel="nofollow" 的属性以 避免垃圾网站的干扰。(nofollow是HTML的一个属性,用于通知搜索引擎“这个链接所指向的网页非我所能控制,对其内容不予置评”,或者简单地说,该链接不是对目标网站或网页的“投票”,这样搜索引擎不会再访问这个链接。这个是用来减少一些特定垃圾页面对原网站的影响,从而可以改善搜索结果的质量,并且防止垃圾链接的蔓延。)
  8. 为网站建立一些的限制 - 这个属于安全性的范畴。(比如你在Google注册邮箱时,你一口气注册超过两个以上的邮箱,gmail要求给你发短信或是给你打电话认证,比如Discuz论坛的会限制你发贴或是搜索的间隔时间等等,更多的网站会用CAPTCHA来确认是人为的操作。 这些限制都是为了防止垃圾和恶意攻击)
  9. 学习如何做 Progressive Enhancement. (Progressive Enhancement是一个Web Design的理念,如:1)基础的内容和功能应该可以被所有的浏览器存取,2)页面布局的应该使用外部的CSS链接,3)Javascript也应该是外部链接还应该是 unobtrusive 的,4)应该让用户可以设置他们的偏好)
  10. 如果POST成功,要在POST方法后重定向网址,这样可以阻止用户通过刷新页面重复提交。
  11. 严重关注Accessibility。因为这是法律上的需求(Section 508是美国的508法案,其是美国劳工复健法的改进,它是一部联邦法律,这个法律要求所有技术要考虑到残障人士的应用,如果某个大众信息传播网站,如果某些用户群体(如残疾人)浏览该网站获取信息时,如果他们无法正常获得所期望的信息(如无法正常浏览),那可以依据相关法规,可以对该网站依法起诉)。 WAI-ARIA 为这方面的事提供很不错的资源.

安全

  1. 在网上有很多关于安全的文章,但是 OWASP 开发指导 涵盖了几乎所有关于Web站点安全的东西。(OWASP(开放Web应用安全项目- Open Web Application Security Project)是一个开放的非营利性组织,目前全球有130个分会近万名会员,其主要目标是研议协助解决Web软体安全之标准、工具与技术文件,长期 致力于协助政府或企业了解并改善网页应用程式与网页服务的安全性。OWASP被视为Web应用安全领域的权威参考。2009年下列发布的美国国家和国际立法、标准、准则、委员会和行业实务守则参考引用了OWASP。美国联邦贸易委员会(FTC)强烈建议所有企业需遵循OWASP十大WEB弱点防护守则)
  2. 了解什么是 SQL 注入攻击 并知道怎么阻止这种攻击。
  3. 永远不要相信用户的输入(包括Cookies,因为那也是用户的输入)
  4. 对用户的口令进行Hash,并使用salt,以防止Rainbow 攻击(陈皓注:Hash算法可用MD5或SHA1等,对口令使用salt的意思是,user 在设定密码时,system 产生另外一个random string(salt)。在datbase 存的??是与salt + passwd 产的md5sum 及salt。 当要验证密码时就把user 输入的string 加上使用者的salt,产生md5s??um 来比对。 理论上用salt 可以大幅度让密码更难破解,相同的密码除非刚好salt 相同,最后??存在database 上的内容是不一样的。google一下md5+salt你可以看到很多文章。关于Rainbow 攻击,其意思是很像密码字典表,但不同的是,Rainbow Table存的是已经被Hash过的密码了,而且其查找密码的速度更快,这样可以让攻击非常快)。使用慢一点的Hash算法来保存口令,如 bcrypt (被时间检证过了) 或是 scrypt (更强,但是也更新一些) 。你可以阅读一下 How To Safely Store A Password(建议我们应该让用户输入比较强的口令,比如Apple ID注册的过程需要用户输入超过8位,需要有大小写和数字的口令,或是做出类似于这样的用户体验的东西)。
  5. 不要试图自己去发明或创造一个自己的fancy的认证系统,你可能会忽略到一些不容易让你查觉的东西而导致你的站点被hack了。(真正的安全系统是协同整个社会的安全系统做出来的一道安全长城,而不是什么都要自己搞,当然,很遗憾不是所有的人都能看懂这个事,包括一些资深的人)
  6. 了解 处理信用卡的一些规则。(有两上vendor可以帮助你,一个是 Authorize.Net 另一个是 PayFlow Pro)
  7. 使用 SSL/HTTPS 来加密传输登录页面或是任可有敏感信息的页面,比如信用卡号等。
  8. 知道如何对付session 劫持。(请参看wikipedia的这Session Hijacking,)
  9. 避免 跨站脚本攻击(XSS)。
  10. 避免 跨站伪造请求攻击 cross site request forgeries (XSRF).
  11. 保持你的系统里的所有软件更新到最新的patch。
  12. 确保你的数据库连接是安全的。
  13. 确保你能了解最新的攻击技术,以及你系统的脆弱处。
  14. 请读一下 The Google Browser Security Handbook.
  15. 请读一下 The Web Application Hacker’s Handbook.

性能

  1. 只要需要,请实现cache机制,了解并合理地使用 HTTP caching 以及 HTML5 Manifest.
  2. 优化页面 —— 不要使用20KB图片来平铺网页背景。(还有很多网页页面优化性的文章,你可以STFG – Search The Fucking Google一下。如果你要调试的话,你可以使用firebug或是chrome内置的开发人员的工具来查看网页装载的性能)
  3. 学习如何 gzip/deflate 网页 (deflate 更好).
  4. 把多个CSS文件和Javascript文件合并成一个,这样可以减少浏览器的网络连数,并且使用gzip压缩被反复用到的文件。
  5. 学习一下 Yahoo Exceptional Performance 这个网站上的东西,上面有很多非常不错的改善前端性能的指导,以及 YSlow 这个工具。 Google page speed 是另一个用来做性能采样的工具。这两个工具都需要安装 Firebug 。
  6. 为那些小的图片使用 CSS Image Sprites,就像工具条一样。
  7. 繁忙的网络应该考虑把网页的内容分开存放在不同的域名下。(比如有专门的图片服务器——图片相当耗带宽,或是专门的Ajax服务器)
  8. 静态网页 (如,图片,CSS,JavaScript,以及一些不需要访问cookies的网页) 应该放在一个不使用cookies的独立的域名下,因为所有在同一个域名或子域名下的cookie会被这个域名下的请求一同发送。另一个好的选择是使用 Content Delivery Network (CDN).
  9. 使用单个页面的HTTP请求数最小化。
  10. 为Javascript使用 Google Closure Compiler 或是 其它压缩工具(压缩Javascript代码可以让你的页面减少网络传输从而可以得到很快的喧染。注意,并不是所有的工具都可以正确压缩Javascript的,Google的这个工具甚至还可以帮你优化你的代码)
  11. 确认你的网站有一个 favicon.ico 文件放在网站的根下,如 /favicon.ico. 浏览器会自动请求这个文件,就算这个图标文件没有在你的网页中明显说明,浏览器也会请求。如果你没有这个文件,就会出大量的404错误,这会消耗你的服务器带宽。(服务器返回404页面会比这个ico文件可能还大)

SEO (搜索引擎优化)

  1. 使用 “搜索引擎喜欢的” URL,如:使用 example.com/pages/45-article-title 而不是 example.com/index.php?page=45 (这里的URL是说Wordpress的,后者是默认的)
  2. 如果你的动态页面要使用 # ,那么请把其改成 #! ,而在服务端,你需要处理$_REQUEST["_escaped_fragment_"] 这是Google搜索引擎需要的。换句话说,./#!page=1 会被Google搜索引擎转成 ./?_escaped_fragments_=page=1。 (通常来说URL中的#后的东西都不会被传到服务器上,所以,为了要让Google可以抓取AJAX的东西,你需要使用#!,而Google会把“#!”转成“_escaped_fragment_”来向服务器发请求,Twitter的大量的链接者是#!的,比如:https://twitter.com/#!/your_activity)。另外,用户也许会使用Firefox 或 Chromium, history.pushState({"foo":"bar"}, "About", "./?page=1"); 是一个很不错的命令。所以,就算是我们的地址栏上的地址改变了,页面也不会重新装载。这可以让你使用 ? 而不是 #! 也能无刷地保住当前的动态的页面,这可以让AJAX的请求被浏览器记住。
  3. 别使用 “click here” 这样的链接。这样一来,无法SEO,而且对于一些需要使用读屏人来说很不友好
  4. 做一个 XML sitemap,并放在网端的根下 /sitemap.xml. (这个文件可以让搜索引擎了解你的网站图)
  5. 当你有多个URL指向同一个网页的使用,使用  你可以使用 Google Webmaster Tools 来查看相关的问题。
  6. 使用 Google Webmaster Tools 和 Yahoo Site Explorer.
  7. 安装 Google Analytics  (或是别的开源的网站分析工具,如: Piwik).
  8. 了解 robots.txt 和搜索引擎爬虫是如何工作的。
  9. 重定向请求 (使用 301 重定向网站) ,如果你要把 www.example.com 定向到 example.com(或是其它的变更) 这样可以防止Google的rank因为域名的变化发生改变。(301重定向一般用作域名变更)
  10. 知道并不是所有的爬虫都是好的,有些爬虫的行为并不好。(陈皓注:比如向你的网站发大量的请求导致服务器性能低下)
  11. 如果你有一些非文本的内容需要在 Google’s sitemap  中,比如视频什么的。Tim Farley的答案,可以让你看到很多有价值的东西。

技术

  1. 理解什么是 HTTP 比如 GET, POST, sessions, cookies等,了解什么是 “stateless” 无状态。
  2. 让你的 XHTML/HTML 和 CSS 符合 W3C 规范,并确认他们都是 合格的。我们的目标是避免浏览器的 “quirks mode”,并且可以让其更容易地能和非标准的浏览器工作,比如读屏器或移动设备。
  3. 理解浏览器是怎么处理 JavaScript 的。(你会看到有些Javascript代码在页面上前面,有些则是在后面,所以你需要对其了解清楚为什么是这样)
  4. 了解浏览器是怎么装载 JavaScript,CSS和其它资源的,了解其对视觉上的影响。(10年前我做网页的时候因为HTML还很弱,所以只能使用table来布局,使用table布局的问题就是整个table读完后页面才会显示,用户的视觉体验并不好)。在某些情况下,你可能需要把你的脚本放在页面的后面。
  5. 理解 JavaScript 的 sandbox 是怎么怎么工作的,尤其是你想使用iframes。
  6. 请注意 JavaScript 可能会被禁止,这样会让你的AJAX失效。就算是大多数用户都开启了Javascript功能,但是也可能在一些情况下脚本是不被运行的,比如移动终端上,搜索引擎抓网页的时候也并不会执行你的脚本。
  7. 学习 301 和 302 转向的区别 (这也是一个SEO的问题).
  8. 尽可能多地学习你的部署平台。(比如:操作系统,Web Server:Apache/Nginx,防火墙,数据库,等等)
  9. 考虑使用一个 Reset Style Sheet.
  10. 考虑使用 JavaScript 框架(如: jQuery, MooTools, Prototype, Dojo 或 YUI 3),它们会很好的兼容于不同的浏览器。(陈皓注:强烈推荐你看一下本站的开源中最好的WEB开发资源一文)
  11. 把视觉效果和JS框架合在一起讨论,考虑使用一个Service,如:Google Libraries API 来装载框架,这样可以让浏览器可能早就把这个JS框架已经cache了而不需要再从你的网站上下载了。

Bug fixing

  1. 明白你会花20%的时间写代码,而80%的时候在维护,所以你要小心编码。
  2. 设计一个好的错误报告机制。
  3. 设计一个入口可以让人们联系到你并给你建议和批评。
  4. 为你开发的东西形成文档,这样可以让后来的人容易维护你的软件和系统。
  5. 频繁备份(也可确保你的这些备份功能正常) Ed Lucas 的回答 有一些忠告。你还需要有一个恢复策略,而不只是一个备份策略。
  6. 使用一个版本控制系统来保存你的代码,如: Subversion 或 Git.
  7. 别忘了做Acceptance Testing,使用 Selenium 能帮到你。
  8. 确保你有足够的日志,你可以使用 log4j, log4n 或 log4r。如果出了问题,这是可以让你快速找到问题的方式。
  9. 当你写日志的时候,确保你记录了你捕获了处理和未处理异常。报告和分析日志可以让你知道你网站的问题。

这里有多的东西被省略了,并不是因为那些可能不是有帮助的答案,而是因为那些东西都太细节了,超出了这个问题的范围,因为这本来就是一个Web开发需要了解东西的Overview。我想你可以去看一下其它人的答案,我有时间,我也会补充别人的答案进来。请随意编辑这个答案,因为可能有些东西忘了,也有可能有些东西不对。

时间: 2024-10-30 14:26:46

StackExchange:Web开发中你需要知道的事的相关文章

PDB文件:每个开发人员都必须知道的 PDB Files

PDB文件:每个开发人员都必须知道的 PDB Files: What Every Developer Must Knowhttp://www.wintellect.com/CS/blogs/jrobbins/archive/2009/05/11/pdb-files-what-every-developer-must-know.aspx PDB文件:每个开发人员都必须知道的 一 什么是PDB文件 大部分的开发人员应该都知道PDB文件是用来帮助软件的调试的.但是他究竟是如何工作的呢,我们可能并不熟悉

详细阐述Web开发中的图片上传问题

Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java Web开发的时候,经验不足,属于能力问题,比如对技术认识不到位. 2.图片上传是一类问题,而不是一个问题.   比如,大家都会做饭,但每个人自己做饭是有不同的.做了一个人吃.一家人吃.喜事待客做好几桌,是不同的问题.   同样的,图片上传,是上传一张还是多张,前端的用户体验如何,后端逻辑处理是否正确,图片存

Web 设计与开发者必须知道的 15 个站点

新闻来源:catswhocode.com公司博客整整一个月没有更新了,最近一段时间,全公司都忙于两件事,为海尔集团做定制,为一个合作伙伴做 OEM,终于有了眉目.工作期间,常用到一些工具与帮助站点,今天读到一篇文章,介绍了15个对 Web 设计与开发师极端有用的站点,里面有不少也是我们一直在使用的,也许对很多人都有用,翻译出来以饷同仁. ColorCombos 配色是 Web 设计的首要大事,Color Combos 帮你预备了数千种配色方案,可以根据色调浏览选取.LIpsum Lorem Ip

Web开发中 前端路由 实现的几种方式和适用场景

浅析Web开发中前端路由实现的几种方式 主题 Web开发 故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因- 叙事体故事讲完,

浅析Web开发中前端路由实现的几种方式

故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因… 叙事体故事讲完,进入正题.首先,我们知道传统而经典的Web开发中,服务器端

[Java Web]2\Web开发中的一些架构

1.企业开发架构: 企业平台开发大量采用B/S开发模式,不管采用何种动态Web实现手段,其操作形式都是一样的,其核心操作的大部分都是围绕着数据库进行的.但是如果使用编程语言进行数据库开发,要涉及很多诸如事务.安全等操作问题,所以现在开发往往要通过中间件进行过渡,即,程序运行在中间件上,并通过中间件进行操作系统的操作,而具体一些相关的处理,如事务.安全等完全由中间件来负责,这样程序员只要完成具体的功能开发即可. 2.Java EE架构: Java EE 是在 Java SE 的基础上构建的,.NE

Web开发中的18个关键性错误

前几年,我有机会能参与一些有趣的项目,并且独立完成开发.升级.重构以及新功能的开发等工作. 本文总结了一些PHP程序员在Web开发中经常 忽略的关键错误,尤其是在处理中大型的项目上问题更为突出.典型的错误表现在不能很好区分各种开发环境和没有使用缓存和备份等. 下面以PHP为例,但是其核心思想对每一个Web程序员都是适用的. 应用程序级别的错误 1.在开发阶段关闭了错误报告 我唯一想问的是:为什么?为什么在开发的时候要关闭错误报告? PHP有很多级别的错误报告,在开发阶段我们必须将它们全部开启.

Web 开发中 20 个很有用的 CSS 库

转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做很多事,而且可以使开发者创造出创新立异的WEB应用. 在这篇文件章中我们找到了一系列对开发者有用的CSS库,它们能帮助开发者在一定的期限内取得有创造性和创新性的成果.我们

Web 开发中很实用的10个效果【附源码下载】

在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记得收藏:) 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 立即下载      在线演示 美!视差滚动在图片滑块中的应用 视差滚动(Parallax Scrolling)已经被广泛应用于网