随笔- 4  文章- 18  评论- 12 

[译]作为一个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

 
 
分类: html

web开发人员的更多相关文章

  1. 成为一个高效的web开发人员,只需要三步

    想成为一名专业的web开发人员并不像你想象的那么容易,开发人员在开发自己的web项目时常常需要牢记很多东西,他们要不断寻找新理念,新创意,在特定时间内开发出高质量的产品,一名优秀的程序员必须明白时间的 ...

  2. Web开发人员必读的12个网站

    The more you actually create, the more you’ll learn.(创造的越多,学习的越多),世界上有无数个开发人员会在网上分享他们的开发经验,我们无法向所有人学 ...

  3. 【特别推荐】Web 开发人员必备的经典 HTML5 教程

    对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...

  4. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  5. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  6. Web 开发人员必备的12款 Chrome 扩展程序

    之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序.这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流 ...

  7. 值得 Web 开发人员收藏的20个 HTML5 实例教程

    当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...

  8. 值得 Web 开发人员收藏的16款 HTML5 工具

    HTML5 正在迅速改变创建和管理网站的方式.HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5 开发各种网站和应用程序. ...

  9. SlimerJS – Web开发人员可编写 JS 控制的浏览器

    SlimerJS 是一个提供给 Web 开发人员,可通过脚本编程控制的浏览器.它可以让你使用 Javascript 脚本操纵一个网页:打开一个网页,点击链接,修改的内容等,这对于做功能测试,页面自动机 ...

  10. Web开发人员常犯的10个错误

    说到开发一个运行在现代网络中的网站:Web开发人员需要选择虚拟主机平台和底层数据存储,准备编写HTML.CSS和JavaScript用的工具,要有设计执行方式,以及一些可用的JavaScript库/框 ...

随机推荐

  1. R语言做文本挖掘 Part5情感分析

    Part5情感分析 这是本系列的最后一篇文章,该.事实上这种单一文本挖掘的每一个部分进行全部值获取水落石出细致的研究,0基础研究阶段.用R里面现成的算法,来实现自己的需求,当然还參考了众多网友的智慧结 ...

  2. swift UI特殊培训38 与滚动码ScrollView

    有时我们适合页面的全部内容,我们需要使用ScrollView,额外的内容打通滚动. 什么样的宽度和高度首先,定义,健身器材轻松. let pageWidth = 320 let pageHeight ...

  3. ABP之动态WebAPI

    ABP之动态WebAPI ABP的动态WebApi实现了直接对服务层的调用(其实病没有跨过ApiController,只是将ApiController公共化,对于这一点的处理类似于MVC,对服务端的 ...

  4. Codeforces 443 B. Kolya and Tandem Repeat

    纯粹练JAVA.... B. Kolya and Tandem Repeat time limit per test 2 seconds memory limit per test 256 megab ...

  5. jquery expand

    /** * jquery-expand-1.0.js * author:tww **/ (function(){ /** * jQuery fadeTo expand. **/ jQuery.fn._ ...

  6. hdu 4831 Scenic Popularity(模拟)

    pid=4831" style="font-weight:normal">题目链接:hdu 4831 Scenic Popularity 题目大意:略. 解题思路: ...

  7. JavaScript之再谈回调与闭包

    前些阵子写了几篇关于回调和闭包的博文,感觉自己都是似懂非懂,最近在项目中又碰到了类似的情况,故在此咱们来重弹js中的回调与闭包. 先说说回调: 百度百科: 回调函数就是一个通过函数指针调用的函数.如果 ...

  8. T4模版引擎之生成数据库实体类

    在通过T4模版引擎之基础入门 对T4有了初步印象后,我们开始实战篇.T4模板引擎可以当做一个代码生成器,代码生成器的职责当然是用来生成代码(这不是废话吗).而这其中我们使用的最普遍的是根据数据库生成实 ...

  9. POJ 3233 Matrix Power Series(矩阵高速功率+二分法)

    职务地址:POJ 3233 题目大意:给定矩阵A,求A + A^2 + A^3 + - + A^k的结果(两个矩阵相加就是相应位置分别相加).输出的数据mod m. k<=10^9.     这 ...

  10. [CLR via C#]5.4 对象哈希码和dynamic基元类型

    原文:[CLR via C#]5.4 对象哈希码和dynamic基元类型 FCL的设计者认为,如果能将任何对象的任何实例放到一个哈希表集合中,会带来很多好处.为此,System.Object提供了虚方 ...