开发一个WEB网站需要知道什么

开发一个WEB项目,到底有多少技术细节需要程序员注意呢?有人在stackOverFlow上提问了这个问题,其中得到2000多赞同的答案如下:我觉的很好,有必要翻译一下。

1 用户体验

  • 需要注意到浏览器之间的差异,确保你的WEB网站可以在主流的浏览器上运行良好,至少要测试Gecko做引擎的火狐浏览器、WebKit引擎的苹果浏览器Safari和一些手机浏览器、谷歌浏览器、IE、欧朋浏览器(Opera),你也需要注意这些浏览器在不同的操作系统上是怎么展现你的网站的。
    除了使用这些主流的浏览器之外,我们还需要注意一些其它设备,例如手机、电子阅读器和搜索引擎,举例来说,一些可以获取的信息WAI和Section508,移动开发平台:MobiForge(这些个是什么鬼请自行查阅,笔者不做解释。)。
  • 迭代阶段:怎么才能在不影响用户访问的情况下更新网站内容,至少有1个或者几个测试的预上线环境来进行架构、代码或者内容清理等变更,同时迭代的过程可以完全控制。有一个全自动化的上线工具,通常需要和版本控制系统结合起来(CVS、SVN、GIT等)外加自动化的编译工具。(Ant NAnt Maven等等)。
  • 不要把一些对用户不友好的报错信息直接展现给用户看(用java的话异常一定要捕获并处理,或者统一使用拦截器来转到404页面)。
  • 不要把用户的邮箱地址(泛指用户的个人隐私信息)放在很明显的地方,否则的话他们会被垃圾邮件烦死。
    用户生成的链接一定要添加属性:rel=’nofollow’来减少垃圾邮件。
  • 给你的网站增加一些周全的限制来保护你的网站,这块其实属于安全领域(安全有2层意思,一个是保证数据不丢失的安全,一个是保证数据不被窃取的安全,大部分人会混淆这2个概念,一些内容托管商也会故意混淆来夸大他们的安全能力。)。
  • 学习怎么做progressive enhancement,这里不太确定怎么翻译,迭代更新?
  • 提供POST请求之后一定要做重定向来防止表单重复提交。
  • 别忘了把可及性考虑在内。在某些情况下,它总是一个好主意,这是一个法律要求。WAI-ARIA和WCAG 2是这个地区的好资源。
  • 别让我思考。(意思是网站要做的足够简单,简单到不用思考就知道怎么用,事实上很多网站体验超级烂。)

2 安全(Security)

  • OWASP development guide涵盖了网站安全性的上上下下,需要好好阅读下。
  • 特别需要知道SQL注入 以及怎么防止SQL注入。
  • 永远不要相信用户输入,或者任何从请求里获取的内容(包括Cookie和隐藏域的值)。
  • 使用带随机盐的机制来对密码进行哈希转换来防止彩虹攻击(指利用强大的CPU计算能力预先算好一些常用密码值的哈希值来进行密码破解,属于暴力破解的优化版)。使用较慢但安全的哈希算法例如bcrypt或者scrypt(甚至更强大)来存储密码如何安全的保存密码)NIST也赞同PBKDF2哈希密码”,和它的FIPS批准净(这里有更多信息)。避免直使用MD5和SHA家族。
  • 不要使用你自己想出来的花哨的安全认证系统 这样太容易因为忽视或者测试不周全而导致你自己被被人黑了都还不知道(重复造轮子在大多数情况下都会费力不讨好)。
  • 知道处理信用卡的规则也可以看看这个问题
  • 登录和任何的传输敏感信息的地方都要使用SSL/HTTPS(比方说信用卡信息等支付信息。)
  • 阻止session劫持
  • 避免跨站脚本攻击(XSS)
  • 避免点击劫持
  • 让你的操作系统更新最新的补丁。
  • 随时关注最新的攻击技术和容易影响你的平台安全的安全漏洞。
  • 阅读谷歌浏览器安全手册
  • 阅读WEB应用渗透手册
  • 考虑最小权限原则总是以最小的用户权限来运行你的WEB容器,绝对不能以root权限运行以非root权限---tomcat例子

3 性能

  • 如果有必要请使用缓存,理解并使用HTTP缓存属性,还有HTML5技术。
  • 管理好图片,别使用一个20KB的图片来重复填充你的背景。
  • 学习怎么压缩解压缩内容
  • 合并样式表和脚本文件来减少浏览器链接的数量并且提升压缩质量。
  • 看看雅虎特别性能,网站,有很多的指导例子,包括怎么提升前端的性能和他们的YSlow工具(火狐、苹果浏览器、谷歌浏览器和欧朋浏览器才能打开),谷歌前端提速 使用了浏览扩展是另外一个性能提升指引,他也指导怎么去合理的管理图片。
  • 使用SVG图片精灵来压缩一些关联的例如工具栏图片,SVG的着色是有一些棘手,可以在这里阅读使用文档。
  • 流量大的网站需要考虑跨域拆分组件技术。
  • 静态内容例如图片、CSS样式表、JS文件或者一些不变的内容等等也不需要访问cookie的,应该放在一台单独的机器上,这个机器上不存储Cookie,因为cookie在请求网站内容或者子域名内容的每一个请求上都携带了cookie,使用内容分发网络更好(CDN),但是需要考虑当CDN服务请求失败的时候需要有一个替代的服务,例如本地服务。
  • 减少浏览器请求WEB页面的链接到最小数量。
  • 选择一个模版引擎,使用gulp或者grunt渲染或者预编译它。
  • 确保网站根目录有一个favicon.ico文件,即使你的HTML文件中不引用它浏览器也会自动请求它,如果没有,会导致很多的404响应,这会消耗网站很多带宽。

4 SEO(搜索引擎优化)

  • 使用对搜索引擎友好的链接地址,例如example.com/pages/45-article-title,不要使用example.com/index.php?page=45。
  • 当在动态生成的内容中使用了#号需要把#号改成##!,在服务器上$_REQUEST[“_escapedfragment“]是googlebot使用的,而没有使用##!,换句话说,FF.b4 or Chromium, history.pushState({“foo”:”bar”}, “About”, “./?page=1”); 是一个超级好的命令,这样即使地址bar改变了页面也不会重新加载,这也能允许你使用?而不使用##!来确定动态内容并且也会告诉服务器,当你通过邮件来发送页面链接的时候,ajax请求不会多一次请求。(这段啥意思没太懂)
  • 不要使用链接名字是点这里这样字面意思的链接,这样不容易让搜索引擎纪录你,别人也不太容易看出来点这里到底是什么意思。
  • 在根目录下保存一个XML网站地图,一般在/sitemap.xml。
  • 使用谷歌WEB管理工具微软Bing管理工具
  • 安装谷歌分析 或者一个开源的工具,比方说Piwik。
  • 知道robots.txt文件是干啥的、网络爬虫是怎么工作的(指爬虫怎么处理robots.txt里的内容)。
  • 重定向请求(使用301永久移动),把www.example.com的请求重定向到example.com(或者另外一种方式)防止谷歌把这2个地址识别为2个网站并且在他们之间排名。
  • 有些爬虫很不友好,你需要警惕它们。
  • 如果你有一些非文本的内容例如视频信息等,看这里Tim Farley’s answer

5 技术

  • 理解HTTP 和Get、Post请求、会话、cookie,理解什么是无状态。
  • 根据W3C规范来编写你的XHTML/HTML和CSS文件,确保它们符合规范,目的是避免浏览器的一些特殊机制并且对于一些非传统的浏览器例如文本阅读器和移动设备会更友好。
  • 理解javascript怎么被浏览器加载的。
  • 理解javascript文件、CSS样式表和一些其它的资源是怎么被页面加载的,并且考虑他们对性能的影响,现在普遍认为把javascript引用放到页面最后面会在一些分析软件和HTML5 shims中有异常。
  • 理解javascript沙箱怎么工作的,特别是你打算使用iframes。
  • 注意javascript有可能会被浏览器禁用,AJAX功能是一个扩展功能,不是基础功能。即使现在大多数的用户默认打开,记住现在去脚本化正在变得越来越流行,移动设备上可能和你想象的不一样,谷歌在索引你的网页时也不会执行你的javascript代码。
  • 学习下301和302重定向区别
  • 考虑使用Reset Style Sheet 或者 normalize.css
  • 把一些基础js合并到一块,考虑使用谷歌第3方包API来加载这些基础的js文件,如果浏览器已经缓存了这些文件,就不会再重复请求和下载了。(例如jquery文件)。
  • 不用重复发明轮子,在创造轮子之前先去搜索引擎搜索一下怎么做,99%的情况下你会找到正确的答案,其他人已经实现过了并且released了。
  • 反过来说,别在你需求没确定的时候就引用了20个第三方包,特别是在WEB客户端这保持轻量级、速度和灵活比一些旗舰功能更重要。

6 修复BUG

  • 一般20%的时间在开发,80%的时间在维护。
  • 建立一个好的错误报警机制。
  • 有一个反馈系统这样别人如果有建议或者批评可以联系到你们。
  • 建立好的文档,未来的人和现在维护的人可以知道系统怎么工作的。
  • 经常备份,并且要确保备份是可用的,不单要有备份机制,还要有一个备份恢复机制。
  • 使用版本控制系统来存储你的所有文件,例如Subversion、Mercurial、Git。
  • 别忘记做验收测试,框架Selenium可以参考下,如果你想把测试完全自动化,或许你可以考虑下持续集成工具,例如Jenkins。
  • 在关键的地方使用日志,开源的技术有log4j、log4net或者jog4r,如果网站出错了,可以追踪下发生了什么。
  • 当纪录日志的时候,确保纪录了所有异常信息,分析日志输入,日志会纪录网站的关键错误。

7 其它

  • 在客户端和服务端都做监控和分析。我们应当主动分析,而不是被动响应。
  • 使用用户之声和Intercom或者其它工具来和你的用户保持联系。
  • 遵循 Vincent DriessenGit Branching model
  • 很多内容都删除了因为它们不是有用的答案,但也是因为它们太详细了,超出了这个问题的答案范围,或者超出了现有的概览的程度,请自由修改这个答案,我也可能有一些没写到或者写的不正确。

8 后记

确实如作者所说,很多东西要么太详细,超出了本文的范围,要么不适合在这里讲出来,在做任何事,写任何文章之前,一定要明确你的目的是什么,确定了目的才有方向,千万不能像无头苍蝇一样乱撞,如果你恰好看到了本文的翻译,也请思考下,你看这篇译文的目的是什么,看完了之后是否达到了你的目的,最后,转载的话请注明出处:http://hushengdong.com/2016/11/12/WEB开发技术点/#more