标签 bug fixing 下的文章

这篇文章个人觉得很受用，故仔细翻译了一下，有些地方可能翻译的不好，请见谅！

翻译后发现貌似已经有人翻译过，但是翻译的水平就有点。。。。。那篇文章中不仅忽略了知识点，并且出现了明显的语义和语法错误，有一定的误导作用，所以请务必重新阅读老高的翻译。文章中容易出错的地方老高已经注释（在文章中以【】标出）。

如需转载，请注明出处！

web开发者在发布你的作品前需要考虑的技术细节 What technical details should a programmer of a web application consider before making the site public!

原文地址： 来自stackexchange.com quora的回答

界面和用户体验

  • 要意识到浏览器的实现标准不一，请确保你的网站在主流浏览器中的正常展现。至少要针对一个最新的Gecko引擎（火狐）的浏览器、一个基于Webkit引擎（Safari或者其他移动端）的浏览器、Chrome、你想要支持的IE浏览器（可以借助IE应用程序兼容性VPC镜像）和Opera浏览器。同时需要考虑到在不同的操作系统下浏览器是如何渲染你的网站。
  • 需要考虑来自其他浏览器的用户如何使用你的网站：智能手机、屏幕朗读器和搜索引擎，举个例子。--一些易用性信息：网页易读性倡议（WAI）和网站508规范（Section508），移动站开发：移动互联网开发者论坛（MobiForge）。
  • 构架：如果在不影响用户的情况下部署升级。有一个或者多个用来更改架构、代码或者内容更新的可用测试或运行环境，确保他们部署的可控性，以防止造成破坏。有一个自动化部署方案，用来提交更改到生产环境。最优的解决方案是结合使用一个版本控制系统（CVS, Subversion等【译者注：为啥没GIT】）或一个自动构造机制（Ant，NAnt等）。
  • 不要直接给用户展现不友好的错误信息。
  • 不要用纯文本的形式呈现用户的Email，否则他们会被垃圾邮件骚扰。
  • 给用户生成的链接加上rel="nofollow"属性，以避免SEO作弊。
  • 为你的站点建立合理的限制机制，这一条同时属于安全细则。
  • 理解什么是渐进增强（progressive enhancement）【译者注：与之相对的是优雅降级（graceful degradation）】。
  • 如果一个请求提交成功，请重定向至其他地方，防止用户的重复提交。
  • 不要忘了考虑无障碍阅读，这对网站的优化来讲是一个好主意，而且有些情况下他是法律强制必须有的。 无障碍网页应用（WAI-ARIA）和Web内容无障碍指南2（WCAG 2）在这方面可以帮到你！
  • 不要让用户思考该如何操作

安全

性能

  • 必要时使用缓存，理解并使用HTTP缓存技术和HTML5的Manifest技术。
  • 图片优化 - 不要使用一个20KB大小的的图片最为重复背景。
  • 学习如何使用gzip压缩内容。
  • 合并/链接多个样式表或多个脚本文件以减少浏览器的请求数，并且使用gzip压缩文件中重复的内容。
  • 看一看雅虎高性能站点，有很多不错的点子，包括提高前端性能和他们的YSlow工具（需求使用Firefox、Safira、Chrome、或Opera浏览器）。同时，Google page speed（使用浏览器插件）也是一个不错的性能调校工具，他同时也会优化你的图片。
  • 针对小并且相关的图片使用CSS image sprite技术。
  • 访问量大的站点需要考虑将不用内容分至不同的域名下。
  • 静态内容（如图片、css、js脚本还有不需要cookie的普通内容）应该被分配到一个不使用cookie的域名下，因为一个域名下的所有cookie和子域下的cookie将会被包含在所有对应的域名下。一个好的主意是使用CND加速，但是考虑到CND可能会挂，到时候本地的拷贝也会提供服务。
  • 最小化一个浏览器需要渲染一个页面所需要的请求数。
  • 利用工具Google Closure Compiler最小化你的js文件，还有其他的最小化工具。
  • 确保有一个favicon.ico在服务器的根目录，就算html里没有提到他，浏览器也会自动请求他。如果你没有一个favicon.ico，那么会导致很多的404错误，并浪费带宽。

SEO

  • 使用搜索引擎友好的URL，如使用www.phpgao.com/technical_details.html，而不用www.phpgao.com/index.php?p=XXX。
  • 将你的#变为#!，然后再服务端使用$_REQUEST["escaped_fragment"]接收google机器人发来的请求，换句话说，google会把./#!page=1变为?_escaped_fragments_=page=1。同时，针对使用火狐beta4或者Chrome浏览器的用户，使用history.pushState({"foo":"bar"}, "About", "./?page=1");，是一个不错的选择。这样的话即使浏览器的地址栏有变化，但是页面不会重新加载。这样就允许你使用?代替#以保留动态内容，同时告诉服务器当你通过邮件发送的链接到底是什么页面，同时 ajax不需要额外的请求。【这一段如果看不懂：请参考URL的井号】
  • 不要给你的链接添加诸如**点我**的说明。这样做是在浪费SEO优化的机会，同时让读者不容易理解。
  • 需要提供一个XML网站地图，最好使用默认的地址/sitemap.xml。
  • 当你有多个URL指向相同的页面，请使用[指出你需要强调的页面，这个问题可以在Google Webmaster Tools被找到。
  • 使用谷歌站长工具和Bing站长工具。
  • 一开始就是用Google分析（或者一个开源分析工具，例如Piwik）。
  • 了解robots.txt和搜索引擎爬虫的工作机制。
  • 在(www.phpgao.com)或(phpgao.com)之间选择一个，然后使用301重定向将域名重定向到主域名，以防止分权。【博主选用了带www的域名www.phpgao.com，所以访问不带www的域名phpgao.com会被301重定向】
  • 要知道有一些不守规矩的爬虫。
  • 如果你有一些非文本的内容，可以借助Google's sitemap extensions for video 等工具。

技术

  • 理解HTTP，诸如GET,POST,sessions，cookies还有“无状态”的含义。
  • 使用符合W3C规则的XHTML/HTML + CSS页面并确保他们通过验证。此行的目的是避免出现浏览器的怪异模式，同时作为一个奖励，它会更加兼容非传统的浏览器，如屏幕朗读器和手机设备。
  • 理解js在浏览器中如何工作【dom原型】。
  • 理解js、样式表和其他资源如何被载入并解析为一个页面并考虑他们对渲染性能的影响。除非你在分析应用或者使用html5-shims做测试，否则把你的脚本放在html的最后是一个不错的选择。
  • 理解js的沙盒的工作机制，尤其是你在使用iframes的时候。
  • 意识到js是可以被禁用的，而Ajax也仅仅是一个扩展功能，而不是基准功能。尽管大部分用户多ajax置之不顾，但是要记住无脚本已经越来越流行，移动设备也可能不会像你期待的那样运行，并且Google在索引你的站点时几乎不会运行你的JS脚本。
  • 了解301和302重定向的区别（这也是一个SEO论题）
  • 尽可能的掌握你的产品部署平台。
  • 考虑使用样式表重置或者normalize.css.
  • 考虑js框架（jQuery、MooTools、Prototype、Dojo或YUI 3），他们会屏蔽很多不同浏览器使用JS操作DOM的差异。【简化操作，屏蔽差异】
  • 同时考虑到渲染性能和js框架，建议使用诸如Google Libraries API的公共服务库载入框架，好处是浏览器在已经缓存的情况下不需要在从网站下载。【如果每个网站都是用公共库，命中率将大大提高】
  • 不要重复造轮子。再做任何事情之前先google之，看看有没有合适的组建或者已经实现的例子。有99%的几率你需要的功能已经被实现并开源。
  • 另一个方面，在你最终决定需求之前，不要一开始就上很多个库。尤其是针对客户端，最重要的是轻量、快速和灵活。

Bug修复

  • 你必须知道这个事实，纵观整个软件周期，你将花费20%的时间写代码，剩下80%的时间都在维护他，所以好好码吧！
  • 建立一个良好的错误报告解决方案。
  • 有一个客户反馈系统。
  • 将应用的工作原理写成文档，以便作为将来支持和运维的参考。
  • 有计划行的备份你的站点！（同时确保他们是可恢复的备份）Ed Lucas的回答中包含了一些建议。建立一个恢复机制，而不是备份机制。
  • 使用版本控制系统保存你的文件，如Subversion、 Mercurial 和 Git.
  • 不要忘了做验收检测。Selenium可以帮你的忙。
  • 确保你有足够的空间保存log4j, log4net 或log4r生产的日志。如果你的生产环境出错，你可以用日志找到问题的根源。
  • 记录日志时请确保你同时记录了可处理和不可处理的错误。汇报/分析日志，他将会告诉你系统哪里出了问题。