每个程序员应该知道的WEB开发的那些事儿

时间:2021-06-04 03:00:29

大部分开发者都已经知道下面列表中的大部分技术。但是,可能有那么一两项是你之前不知道、没有认真研究过、或者压根就没有听说过的。


界面和用户体验

  • 注意,不同的浏览器用不同的方式实现了标准协议;因此要确保网站在所有的浏览器上都能正常运行。可以针对浏览器类型,做一个最小集合的测试:Gecko引擎(适用于FireFox),WebKit引擎(适用于Safari,Chrome,还有一些手机浏览器),IE浏览器(使用了应用兼容性VPC图像),还有Opera。还要考虑到,不同的浏览器会在不同的操作系统*问网站。
  • 考虑下,永辉会不会使用其他主流浏览器访问网站,例如手机,屏幕阅读器,搜索引擎等待。可以参考WAI, Section508,MobiForge。
  • 注意:怎样进行升级而不会影响用户。
  • 不要将不友好的错误提示直接显示给用户。
  • 不要将用户邮箱地址放在文本文件中,因为很有可能会在无意中删除这些文本文件。
  •  用户增加的链接中增加属性 rel="nofollow",这样可以避免这些信息被删除。
  • 基于安全因素,在网站中增加一些有效的约束。
  • 学习优化网站。
  • 在一个POST成功后,重定位这个POST,这样可以防止由于反复提交带来的刷新。
  • 一定要使用账户登录功能。这个功能非常好,而且在一些条件下,这是必须的(法律要求)。参考WAIARIA和WCAG 2。
安全
  • 关于网络安全的资料非常多,不过OWASP开发指导是可以很好的选择,它囊括了网站安全的全部技术。
  • 知道什么是SQL注入,并且知道怎样预防。
  • 千万不要相信用户输入信息,也不要相信回复请求的信息(例如cookies,隐藏表格数据)。
  • 哈希密码使用了一些额外的技术阻止被黑。使用慢速哈希算法保存密码,例如bcrypt(跨平台文件加密工具),或者scrypt(更强,更新)。NIST证明PBKDF2也可以用于哈希密码,而且FIPS已经在.NET上被证明过了。避免直接使用MD5和SHA。
  • 不要尝试使用自己想的授权系统。这种授权系统很可能会因为测试方式过于脆弱或者压根就不能测,进而得到一些错误的数据,而且这些错误的数据很可能在网站被攻击时才会被发现。
  • 知道处理信用卡的流程。
  • 当需要访问任何敏感信息时,需要使用SSL/HTTPS登录这些页面。
  • 知道怎样抵抗骇客攻击。
  • 避免跨站脚本(XSS)。
  • 密码跨站请求(XSRF)。
  • 保持网站系统总是使用最新的版本。
  • 保证数据库连接信息的安全性。
  • 当有网站受到攻击或者有异常时,能够马上提醒网站开发者。
  • 读谷歌浏览器安全手册。
  • 读网络应用黑客手册。

性能
  • 有可能的话实现超高速缓存,理解和合理使用HTTP缓存,例如HTML5 Manifest。
  • 优化图片--不要使用20KB的图片作为重复背景。
  • 学习压缩/解压缩。
  • 整合/压缩多个样式表或者脚本文件,以此减少浏览器连接数量,并提高对重复文件的压缩性能。
  • 浏览雅虎期望的性能这个网站,有很多非常好的指导,例如改进头端性能和YSlow工具,谷歌网页加速工具。不过这两个都要安装Firebug。
  • 使用CSS图片精灵处理小图片,例如工具栏。
  • 繁忙的网站可以考虑跨域分割控件。
  • 由于一个域或者子域内的所有cookies都会跟随请求被发送到这个域还有子域,所以静态内容(例如,图片,CSS,JavaScript,不需要访问cookies的基本内容)可以放在一个独立的不使用cookies的域。CDN(Content Delivery Network)是一个不错的选择。
  • 减少浏览器请求网页时产生的HTTP请求数目。
  • 使用谷歌封闭编译器编译JavaScript和其他的迷你工具。
  • 确保网站的根目录上有favicon.ico文件,例如,./favicon.ico。浏览器会自动请求favicon.ico文件,即使HTML空间从来没有在HTML页面中请求这个文件。如果网站没有/favicon.ico文件,当请求事件发生时,会引起非常多的404错误,然后耗尽服务器带宽。
SEO(搜索引擎优化)
  • 使用“友好搜索引擎”URL,例如使用  example.com/pages/45-article-title ,而不是 example.com/index.php?page=45。
  • 当使用?来代表动态内容,而不是#;在服务器上,使用 $_REQUEST["_escaped_fragment_"]代表网络爬虫作用内容,而不要用#!;例如,使用 ./#!page=1代替 ./?_escaped_fragments_=page=1,而在客户端使用FF.b4或者Chromium,对应的写成 history.pushState({"foo":"bar"}, "About", "./?page=1") 。因此,即使地址栏已经更新,但是网页没有刷新。用?代替#!可以保持动态内容,并且告诉服务器当通过电子邮件发送连接时,接收者可以直接查看这个链接所连接的页面。而AJAX不需要做其他额外的请求。
  • 不要使用连接表明“点击这里”。这样做,只会浪费搜索引擎优化的机会,而且它会让使用屏幕阅读器的用户觉得这样做很不方便。
  • 有XML网站地图,最好将网站地图放在这个位置:/sitemap.xml。
  • 当网站开发人员用多个URL同时指向同一个网页内容时,最好使用  <link rel="canonical" ... />,参考谷歌网络大师工具。
  • 使用谷歌网络大师工具,和Bing网络大师工具。
  • 在开始搭建网站的时候,就安装上谷歌分析器。
  • 知道robots.txt和搜索引擎网络爬虫是怎么工作的。
  • 将对www.example.com认为是对example.com的网页请求,否则谷歌可以对两个网站进行网络排名,其实是一个网站 
  • 知道网络爬虫在哪些地方性能不高。
  • 如果网络开发者用非文本查看谷歌网站地图上的扩展应用,例如视频,可以参考这个链接的内容  Tim Farley's answer 。
技术
  • 知道HTTP和GET, POST, sessions, cookies,还有其他。
  • 通过W3C手册写XHTML/HTML或者CSS的网页,并且确保它们是有效的。这样做的目的是可以检查浏览器的兼容模式,看看这些网页是否能在非标准的浏览器上正常工作,例如,屏幕阅读器和手机设备。
  • 知道浏览器是怎么处理JavaScript的。
  • 知道网页是怎么处理所需要的JavaScript,样式表,和其他资源的。并且知道这些资源是如何影响用户的直观感受的。可以选择的方法有很多,例如将脚本放在网页的结尾。
  • 知道JavaScript沙盒是怎么工作的,尤其是要使用内联框架的时候。
  • 注意JavaScript可以被禁止,而在这个时候,AJAX可以当作扩展功能,而不仅仅是一个基础功能。可能现在大部分的用户都不用AJAX,但是记住,没有哪个脚本语言有作为主流脚本语言的趋势,手机设备也没有像预期的那样发展,而且谷歌在建立索引表的时候也不会运行这些JavaScript。
  • 学习301重定向和302重定向间的区别。
  • 尽可能多的学习部署的网站平台。
  • 考虑使用样式表重置(Reset Style Sheel)或者normalize.css。
  • 考虑JavaScript的框架结构(例如JQuery,MooTools,Prototype,Dojo或者YUI3),因为使用JavaScript进行DOM操作的时候,JavaScript框架可以让开发者忽略掉浏览器差异。
  • 将直观性能和JS框架结合起来,考虑使用类似Google Libraries API这样的服务可以让浏览器使用已经缓存下来的框架拷贝,而不是从网站上反复下载。
  • 不要反复做同一件事。在做任何事之前,先上网搜索下有没有现成的,或者类似的例子。有99%的可能性,已经有人做好了,并且已经发布了一个OSS 版本的源码。
解决问题
  • 要有心理准备:为了保证代码的和谐,以后需要花20%的时间开发,而要花80%的时间维护。
  • 建立一个好的问题报告机制。
  • 有用户可以向开发者报告建议和批评的途径。
  • 为了将来更好的维护和支持,记录每个应用是如何运行的。
  • 多做备份!(并且保证这些备份都是有效备份)。有存储机制,不是备份机制。
  • 使用版本控制系统保存文件,例如SVN,Mecurial或者Git.
  • 不要忘记做验收测试,可以借用一些工具,例如Seleninum。
  • 在使用 log4j,log4net,log4r 这些工具的时候,保证网站有足够的空间保存打印信息。如果网站有问题,log可以帮助找到原因。
  • 打印信息时,网站能够记录能够处理或者不能处理的意外情况。报告/分析打印信息,因为它可能在关键时刻帮助定位网站问题。
读者可能会忽略这篇文章中的一些信息,忽略它们并不是因为它们不重要,而是因为它们过于细节,或者超出范围,或者离题太远。但是,从事网络开发的人,最好能够看看这些内容,如果我有时间,可能还会针对这些内容加上更多的注释或者链接的。读者可以修改它,我也可能忽略了什么东西,或者犯了错误。

来源于:http://programmers.stackexchange.com/questions/46716/what-should-every-programmer-know-about-web-development