转自Web开发中需要了解的东西(酷壳)
在StackExchange上有人问了这样一个问题:What should every programmer know about web development?
(关于Web开发,什么是所有程序员需要知道的?)里面给出的答案非常不错,所以,我翻译转载过来。 顺便说一下,StackExchange真是非常好,大家可以对同一个答案做贡献和修订,看看这个问题的修订过程
你就知道了——专业的问答网站应该怎么去做。这就是我在这篇文章中也说过真正的用户体验是什么样的
。
好了,下面是正文(我对原文做了一些批注,也许不对或有误导,请大家指正)
下面的这些东西可能对于大多数人并不陌生,但是可能会有些东西你以前并没有看过,或是没有完全搞懂,甚至都没有听说过。(陈皓注:我相信当你看完这个列表后,你会觉得对于我国的Web开发有点弱了,还是那句话,表面上的东西永远是肤浅的)
接口和用户体验
- 小心浏览器的实现标准上的不一致,确信让你的网站能够适当地跨浏览器。至少,你的网站需要测试一下下面的浏览器:
最后,你可以使用一下这个工具
来看看你的网页在不同的浏览器下是怎么被显示出来的(陈皓注:这个工具就是以前本站介绍过的在不同浏览器和平台上检查你的网站的兼容性
)
- 部署Staging:怎么部署网站的更新而不会影响用户的访问。 Ed Lucas的答案
可以让你了解一些(陈皓注:Ed说了一些如版本控制,自动化build,备份,回滚等机制)。
- 千万不要把用户的邮件地址以明文显示出来,这样会被爬虫爬走并被让用户的邮箱被垃圾邮件搞死。
- 为用户的链接加上
rel="nofollow"
的属性以 避免垃圾网站的干扰
。(陈皓注:nofollow
是
HTML的一个属性,用于通知搜索引擎“这个链接所指向的网页非我所能控制,对其内容不予置评”,或者简单地说,该链接不是对目标网站或网页的“投票”,
这样搜索引擎不会再访问这个链接。这个是用来减少一些特定垃圾页面对原网站的影响,从而可以改善搜索结果的质量,并且防止垃圾链接的蔓延。)
-
为网站建立一些的限制
-
这个属于安全性的范畴。(陈皓注:比如你在Google注册邮箱时,你一口气注册超过两个以上的邮箱,gmail要求给你发短信或是给你打电话认证,比如
Discuz论坛的会限制你发贴或是搜索的间隔时间等等,更多的网站会用CAPTCHA来确认是人为的操作。 这些限制都是为了防止垃圾和恶意攻击)
- 严重关注Accessibility。因为这是法律上的需求
(陈
皓注:Section
508是美国的508法案,其是美国劳工复健法的改进,它是一部联邦法律,这个法律要求所有技术要考虑到残障人士的应用,如果某个大众信息传播网站,如果
某些用户群体(如残疾人)浏览该网站获取信息时,如果他们无法正常获得所期望的信息(如无法正常浏览),那可以依据相关法规,可以对该网站依法起诉)。 WAI-ARIA
为这方面的事提供很不错的资源.
安全
- 在网上有很多关于安全的文章,但是 OWASP 开发指导
涵
盖了几乎所有关于Web站点安全的东西。(陈皓注:OWASP(开放Web应用安全项目- Open Web Application Security
Project)是一个开放的非营利性组织,目前全球有130个分会近万名会员,其主要目标是研议协助解决Web软体安全之标准、工具与技术文件,长期
致力于协助政府或企业了解并改善网页应用程式与网页服务的安全性。OWASP被视为Web应用安全领域的权威参考。2009年下列发布的美国国家和国际立
法、标准、准则、委员会和行业实务守则参考引用了OWASP。美国联邦贸易委员会(FTC)强烈建议所有企业需遵循OWASP十大WEB弱点防护守则)
- 永远不要相信用户的输入(包括Cookies,因为那也是用户的输入)
- 对用户的口令进行Hash,并使用salt,以防止Rainbow
攻击(陈皓注:Hash算法可用MD5或SHA1等,对口令使用salt的意思是,user 在设定密码时,system 产生另外一个random
string(salt)。在datbase 存的是与salt + passwd 产的md5sum 及salt。 当要验证密码时就把user
输入的string 加上使用者的salt,产生md5sum 来比对。 理论上用salt 可以大幅度让密码更难破解,相同的密码除非刚好salt
相同,最后存在database 上的内容是不一样的。google一下md5+salt你可以看到很多文章。关于Rainbow 攻击
,
其意思是很像密码字典表,但不同的是,Rainbow
Table存的是已经被Hash过的密码了,而且其查找密码的速度更快,这样可以让攻击非常快)。使用慢一点的Hash算法来保存口令,如 bcrypt
(被时间检证过了) 或是 scrypt (更强,但是也更新一些) (1
, 2
)。你可以阅读一下 How To Safely Store A Password
(陈皓注:酷壳以前曾介绍过bcrypt这个算法
,这里,我更建议我们应该让用户输入比较强的口令,比如Apple ID注册的过程需要用户输入超过8位,需要有大小写和数字的口令,或是做出类似于这样的用户体验的东西
)。
- 使用 SSL
/HTTPS
来加密传输登录页面或是任可有敏感信息的页面,比如信用卡号等。
性能
- 优化页面 —— 不要使用20KB图片来平铺网页背景。(陈皓注:还有很多网页页面优化性的文章,你可以STFG – Search The
Fucking Google一下。如果你要调试的话,你可以使用firebug或是chrome内置的开发人员的工具来查看网页装载的性能)
- 学习如何 gzip/deflate 网页
(deflate 更好
).
- 把多个CSS文件和Javascript文件合并成一个,这样可以减少浏览器的网络连数,并且使用gzip压缩被反复用到的文件。
- 为那些小的图片使用 CSS Image Sprites
,就像工具条一样。 (参看 “最小化 HTTP 请求” ) (陈皓注:把所有的小图片合并成一个图片,然后用CSS把显示其中的一块,这样,这些小图片只用传输一次,酷壳的Wordpress样式的那个RSS订阅列表中的小图标就是这样做的)
- 繁忙的网络应该考虑把网页的内容分开存放
在不同的域名下。(陈皓注:比如有专门的图片服务器——图片相当耗带宽,或是专门的Ajax服务器)
- 静态网页 (如,图片,CSS,JavaScript,以及一些不需要访问cookies的网页) 应该放在一个不使用cookies
的独立的域名下,因为所有在同一个域名或子域名下的cookie会被这个域名下的请求一同发送。另一个好的选择是使用 Content Delivery Network (CDN).
- 为Javascript使用 Google Closure Compiler
或是 其它压缩工具
(陈皓注:压缩Javascript代码可以让你的页面减少网络传输从而可以得到很快的喧染。注意,并不是所有的工具都可以正确压缩Javascript的,Google的这个工具甚至还可以帮你优化你的代码)
- 确认你的网站有一个
favicon.ico
文件放在网站的根下,如 /favicon.ico
. 浏览器会自动请求这个文件
,就算这个图标文件没有在你的网页中明显说明,浏览器也会请求。如果你没有这个文件,就会出大量的404错误,这会消耗你的服务器带宽。(陈皓注:服务器返回404页面会比这个ico文件可能还大)
SEO (搜索引擎优化)
- 使用 “搜索引擎喜欢的” URL,如:使用
example.com/pages/45-article-title
而不是 example.com/index.php?page=45
(陈皓注:这里的URL是说Wordpress的,后者是默认的)
- 如果你的动态页面要使用
#
,那么请把其改成 #!
,而在服务端,你需要处理$_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的请求被浏览器记住。
- 别使用 “click here” 这样的链接。这样一来,无法SEO,而且对于一些需要使用读屏人来说很不友好(陈皓注:关于读屏软件,可参看本站的“如果看不见你还能编程吗
”)
- 重定向请求 (使用
301 重定向网站
) ,如果你要把 www.example.com
定向到 example.com
(或是其它的变更) 这样可以防止Google的rank因为域名的变化发生改变。(陈皓注:301重定向一般用作域名变更)
- 知道并不是所有的爬虫都是好的,有些爬虫的行为并不好。(陈皓注:比如向你的网站发大量的请求导致服务器性能低下)
- 如果你有一些非文本的内容需要在 Google’s sitemap 中,比如视频什么的。Tim Farley的答案
,可以让你看到很多有价值的东西。
技术
- 理解什么是 HTTP
比如 GET, POST, sessions, cookies等,了解什么是 “stateless” 无状态。
- 让你的 XHTML
/HTML
和 CSS
符合 W3C 规范
,并确认他们都是 合格的
。我们的目标是避免浏览器的 “quirks mode”,并且可以让其更容易地能和非标准的浏览器工作,比如读屏器或移动设备。
- 理解浏览器是怎么处理 JavaScript 的。(陈皓:你会看到有些Javascript代码在页面上前面,有些则是在后面,所以你需要对其了解清楚为什么是这样)
- 了解浏览器是怎么装载
JavaScript,CSS和其它资源的,了解其对视觉上的影响。(陈皓注:10年前我做网页的时候因为HTML还很弱,所以只能使用table来布
局,使用table布局的问题就是整个table读完后页面才会显示,用户的视觉体验并不好)。在某些情况下,你可能需要把你的脚本放在页面的后面
。
- 理解 JavaScript 的 sandbox 是怎么怎么工作的,尤其是你想使用iframes。
- 请注意 JavaScript 可能会被禁止,这样会让你的AJAX失效。就算是大多数用户都开启了Javascript功能,但是也可能在一些情况下脚本是不被运行的,比如移动终端上,搜索引擎抓网页的时候也并不会执行你的脚本。
- 尽可能多地学习你的部署平台。(比如:操作系统,Web Server:Apache/Nginx,防火墙,数据库,等等)
- 把视觉效果和JS框架合在一起讨论,考虑使用一个Service,如:Google Libraries API
来装载框架,这样可以让浏览器可能早就把这个JS框架已经cache了而不需要再从你的网站上下载了。
Bug fixing
- 明白你会花20%的时间写代码,而80%的时候在维护,所以你要小心编码。(陈皓注:参看本站的“多些时间可以少些代码
”一文)
- 为你开发的东西形成文档,这样可以让后来的人容易维护你的软件和系统。
- 频繁备份(也可确保你的这些备份功能正常) Ed Lucas 的回答
有一些忠告。你还需要有一个恢复策略,而不只是一个备份策略。
- 别忘了做Acceptance Testing,使用 Selenium
能帮到你。
- 确保你有足够的日志,你可以使用 log4j, log4n 或 log4r。如果出了问题,这是可以让你快速找到问题的方式。
- 当你写日志的时候,确保你记录了你捕获了处理和未处理异常。报告和分析日志可以让你知道你网站的问题。
这里有多的东西被省略了,并不是因为那些可能不是有帮助的答案,而是因为那些东西都太细节了,超出了这个问题的范围,因为这本来就是一个Web开发
需要了解东西的Overview。我想你可以去看一下其它人的答案,我有时间,我也会补充别人的答案进来。请随意编辑这个答案,因为可能有些东西忘了,也
有可能有些东西不对。
分享到:
相关推荐
web开发中需要知道的东西,这张图片尽可能简要的列出了作为一个web开发者所应了解及懂得的相关技术和概念。十分好的东西
作者简介: 董伟明,豆瓣高级产品开发... 对于Web 开发者、使用Python 语言的运维工程师和运维开发工程师、想提高Python 技能的开发者、想了解Python Web 开发的其他开发者,《Python Web开发实战》都适合阅读。
因为自己对Web开发比较感兴趣,所以最近抽空在写一本开源的书籍《Go Web编程》《Build Web Application with Golang》。写这本书不表示我能力很强,而是我愿意分享,和大家一起分享Go写Web应用的一些东西。 对于从...
因为自己对Web开发比较感兴趣,所以最近抽空在写一本开源的书籍《Go Web编程》《Build Web Application with Golang》。写这本书不表示我能力很强,而是我愿意分享,和大家一起分享Go写Web应用的一些东西。 对于从...
我对这个的观点是,所有的架构都是死的,而Web高性能开发优化策略是活的,我在开发中,所有的东西都不是一定要按照什么固定的模式,去死开发,更多的是针对需要优化的信息进行针对处理,下面说说我的优化策略
因为自己对Web开发比较感兴趣,所以最近抽空在写一本开源的书籍《Go Web编程》《Build Web Application with Golang》。写这本书不表示我能力很强,而是我愿意分享,和大家一起分享Go写Web应用的一些东西。 对于从...
如果你是一个Web开发初学者,那么你难免会在网上搜索HTML, CSS, XML, JS(Javascript), DOM, XSL等等这些词的意思,然而,随着学习的深入。当你把他们搅在一起,你又糊涂了,你会不停的问,HTML是什么?CSS是什么?XML...
对于从PHP/Python/Ruby转过来的同学了解Go怎么写Web应用开发的 对于从C/C++转过来的同学了解Web到底是怎么运行起来的 我一直认为知识是用来分享的,让更多的人分享自己拥有的一切知识这个才是人生最大的快乐。 这...
今天初步了解了一下Web前端开发,计算机技术这东西就要多用多练,一只菜的不能再菜的小菜鸟开始漫长的自学之路了 web系统前端是指系统中用户接触到的部分。 打开几个不同网站的网页,观察一下,有网页文件的后缀吗?...
要了解 Spring Web Flow 是什么东西,最好的办法莫过于查看示例,图 2 展示了一个简化的购物车的流 程。 图 1 购物车示例 图 2 所示流程用 Spring Web Flow 2.0 的配置文件表示如下: 清单 1 用 Spring Web Flow ...
因为自己对Web开发比较感兴趣,所以最近抽空在写一本开源的书籍《Go Web编程》《Build Web Application with Golang》。写这本书不表示我能力很强,而是我愿意分享,和大家一起分享Go写Web应用的一些东西。 对于从...
JavaWeb开发技术详解书籍的ppt+源码介绍性的东西,适合了解java
先把JAVA275(精通)学好,数据库至少会一种(掌握),HTML(掌握),JSP(掌握),UML(掌握),XML(掌握),JAVA314(精通),Struts框架(精通),Hibernate...上面的是基础,你会发现每一个项目都有新的东西,开源的东西太多了。
虽然这么看起来很简单,但这里需要认真了解的东西很 多。在开发前,需要对这些概念弄清楚,在开发过程中还要考虑兼容,性能等各 种问题。 分析并解决实现中的若干技术问题:介绍企业官网个性化页面的背景及 HTML5 ...
本项目提供了实现一个购物车的实际例子,允许你添加、删除物品,经历结账过程,查看订单等,这个例子可以让你了解在结账过程中,如何利用AngularJS在视图之间进行切换。 本项目创建的购物车提供了所需的大部分...
作为初学者,我鼓励您不要将本网站视为您需要了解的最终清单,而是将其视为您可以学习的内容和可以从哪里开始的示例。 这些技能是根据我建议您采用的学习路径按时间顺序排列的,但您可以随意自由跳跃。 你是如何选择...
这个学期学习了WEB客户端程序设计,对网页制作有了一定的了解,这个学期完成了老 师布置的2个项目,我一直做得是前台界面设计,所以对前台比对后台了解些,通过这2 个项目的锻炼,我觉得我自己的前台界面开发能力有很...
稻草人 稻草人为数据科学提供低代码Web开发。 演示版 ... 现有的用于快速Web开发的无代码解决方案提供了对源代码和个性化设置的有限访问权限,或者它们需要大量会员费。 稻草人是您要找的东西吗? 稻
现代Web开发构建关于Web开发的现代版本。 立即开始使用ES2015,TypeScript,SASS,代码质量和样式检查,测试,最小化,捆绑等等。 :) ModernWebDevBuild抽象化了所有构建管道样板。 如果您不想深入了解如何设置正确...
您是否刚刚了解了一些您认为其他人也会发现很棒的东西? 如果您对以上任何一项的回答为“是”,我们希望您编写一个Web开发教程并将其发布在cdnjs上! 超级容易! 贡献 只需分叉存储库并复制 每个教程都应该有一个...