【翻译】Web开发必学知识点

赵一楠 发表在:编程 分类下 2018年10月2日

译者按:StackExchange上有一个关于web开发中需要注意的知识点的帖子非常火,已经有2k的点赞了,非常全也非常好,所以决定翻译出来供大家使用。

原文链接:What should every programmer know about web development?

title_image

尽管大多数人对清单中所列都有所耳闻。但是个别的几条可能还没仔细了解过,或者没全弄明白,甚至没听过。

API和用户体验:

  • 了解浏览器所兼容的标准并非完全一致,保证你的网站能兼容主流浏览器。起码在最新的Gecko引擎(Firefox)、WebKit引擎(Safari以及个别移动端浏览器)、Chrome、IE浏览器(非必须,可使用“应用兼容性VPC镜像”测试)以及Opera中进行测试。还应该考虑在不同操作系统下,浏览器渲染机制的不同性
  • 顾及网站的不同使用场景,而不仅仅顾及哪些主流浏览器:手机、读屏软件以及搜索引擎。举例来说,一些无障碍信息:WAISection508,移动开发:MobiForge
  • 部署Staging:如何部署网站更新而不影响用户访问。准备一个或多个测试或staging的环境用于架构、代码修改或者内容替换,另外应保证部署过程完全受控且不会带来任何问题。然后通过自动化的将经过测试的代码部署到生产环境中。需使用版本管理工具(git,Subversion等)以及自动化构建工具(Ant, NAnt, etc.)等,来实现该功能。
  • 别把不友好的错误信息直接展示给用户。
  • 别把用户的邮箱地址以明文显示出来,防止用户被垃圾邮件骚扰。
  • 为用户的链接加上rel=nofollow属性,以避免垃圾网站的干扰。
  • 网站限制设置一些限制条件,这也属于安全范畴。
  • 学习如何实现渐进式增强 Progressive Enhancement
  • POST请求成功后应进行页面跳转,以避免刷新页面重复提交请求。
  • 重点关注无障碍 Accessibility,这永远是个好点子,个别情况也属于法律要求。可以参考WAI_ARIAWCAG 2的相关资源。
  • 学习别让我考虑怎么做

安全相关

  • 需要慢慢消化吸收OWASP开发指南,这篇文章所涵盖的web安全相关知识非常全面。
  • 学习注入攻击以及如何防范,尤其是SQL注入
  • 对于用户输入的内容,以及任何通过请求发送的内容(尤其是含有cookie和隐式表单数据的请求)要保持警惕。
  • 使用“盐”对密码进行哈希加密,对于不同的数据条目使用不同的“盐”,以避免彩虹攻击(rainbow attacks)。使用慢哈希算法储存密码,比如bcrypt(时间验证)或scrypt(更强大,同时也较新)(如果安全的保存密码)。避免直接使用MD5或SHA等类型。
  • 不要使用自创的身份验证系统。尤其在细节上和无法测试等方面很容易出错,甚至只有当你的网站被黑客攻击以后才发现有漏洞。
  • 学习处理信用卡的一些规则。(同时也可以了解一下这个问题
  • 对于用户登陆页面,以及任何需要输入敏感信息(比如信用卡信息)的页面,使用SSL/HTTPS。Let's Encrypt可以提供免费的证书。
  • 避免session劫持
  • 避免跨站脚本攻击(XSS)。
  • 避免跨站请求伪造攻击(CSRF)。
  • 避免点击劫持(Clickjacking)。
  • 保持你的系统里的所有软件为最新版。
  • 采取防范措施,保证数据库的连接是安全的。
  • 了解最新的攻击手段以及危及你的网站的技术漏洞。
  • 学习Google浏览器安全手册
  • 学习网络应用黑客手册
  • 考虑使用最小特权原则。尝试使用非root账户运行你的app服务器。(这是一个tomcat的示例
  • 在所有由用户提供的含有target="_blank"的链接中,加上res="noopener noreferrer",以避免目标页面中的JavaScript对页面进行重定向,比如重定向至一个伪登陆页面,更多信息
  • 可以使用验证内容安全政策(strict Content Security Policy)

性能相关

  • 必要时使用缓存,理解并使用HTTP缓存特性以及HTML5 Manifest
  • 对图片进行优化:不要用20KB的图片作为平铺背景。
  • 学习如何使用gzip等技术压缩内容。
  • 将多个样式表或脚本文件进行合并,以减少浏览器连接/请求的次数,同时设置gzip对重复的文件进行压缩。
  • 浏览一下雅虎出色性能网站,里面有很多不错的文章,包括如何提升前端性能以及如何使用YSlow工具(需要Firefox, Safari, Chrome 或 Opera)。另外,Google网页速度(同浏览器插件一同使用)是另一款性能测试工具,它还能对你网站的图片进行优化。
  • 使用SVI sprite技术用于小的彼此相关的图片,比如:工具栏。SVG上色有些困难,可以看看这篇文章
  • 高访问量的网站应考虑拆分组件并部署在不同的服务器上,比如:
  • 静态资源(如:图片、CSS、JS脚本以及其他不需要cookie权鉴才能访问的文件)应部署在一个单独的不使用cookie的服务器上,这样做是因为在向网站发送的时候,无论是主域名还是其子域名请求都会附带cookie。这里有个方法是使用CDN(内容分发网络),但是需注意CDN请求可能会失败,这里可以通过使用备用CDN或者直接提供本地备份。
  • 减少浏览器渲染页面所需要发送HTTP请求的总次数。
  • 选择一个模板引擎并使用任务管理程序gulp或grunt进行渲染/预渲染。
  • 保证你网站根目录下有一个favicon.ico文件。因为即使HTML未引入该文件,浏览器还是会自动请求该文件。如果没有/favicon.ico文件则会导致大量404报错,占用你服务器的带宽。

SEO(搜索引擎优化)

  • 使用搜索引擎友好的URL,例如:用 example.com/pages/45-article-title 而非 example.com/index.php?page=45
  • 如果使用#用于动态内容变化,那么把#变为#!然后
  • 不要使用诸如"请点这儿"的链接,这样做就是在是浪费SEO的机会,这同时也为使用读屏软件的用户带来一些困难。
  • 创建一个XML网站地图,最好将其放在默认位置/sitemap.xml
  • 当有多个URL指向同一个内容时使用,该问题也可以通过Google网络管理员工具进行处理。
  • 使用Google网络管理员工具Bing网络管理员工具
  • 从网站上线开始就安装使用Google Analytics(或者其他开源分析工具如Piwik)。
  • 了解robots.txt的作用以及搜索引擎爬虫的工作方式。
  • www.example.com的请求重定向(用301 Moved Permanently)至example.com(或反过来)以避免两个网址同时占用Google排名。
  • 了解个别爬虫的工作还是有一定问题的。
  • 如果你有一些非文本的内容需要在 Google’s sitemap 中,比如视频。Tim Farley回答或许可以让你看到很多有价值的东西。

技术相关

  • 学习HTTP协议,以及GET、POST、session、cookie以及“无状态”等概念。
  • 让你的XHTML/HTMLCSS符合W3C规范,并确认它们都是合格的。我们最终的目标是避免浏览器的怪异模式(quiks mode),这也将使得网站对于非标准浏览器(如读屏软件和移动设备)更加友好。
  • 学习浏览器是如何处理JavaScript的。
  • 学习浏览器是如何加载JavaScript、CSS样式表和其他资源的,并了解其对视觉上的影响。一般认为脚本应该放在页面的底部,但分析程序或HTML5填充程序属于例外。
  • 学习JavaScript的沙箱的工作原理,尤其是当你想使用iframe时。
  • 注意JavaScript可以被禁用或者将要被禁用,而AJAX将成为插件,而非必须。尽管人们都普遍使用它们,但请注意NoScript已经越来越火,移动设备工作方式有所不同,同时Google在收录网站的时候并不会运行你的JavaScript代码。
  • 学习301和302重定向状态码之间的区别(这也是一个SEO问题)。
  • 尽可能的了解你将要的部署平台。
  • 考虑使用“重置样式表”normalize.css
  • 考虑使用JavaScript框架(例如jQueryMooToolsPrototypeDojoYUI 3),它们会很好的兼容于不同的浏览器。
  • 把视觉效果和JS框架合在一起讨论,考虑使用一个Service,如:Google Libraries API 来装载框架,这样可以让浏览器可能早就把这个JS框架已经cache了而不需要再从你的网站上下载了。
  • 不要重新造轮子,在开始工作之前找找有没有类似的组件或示例。有99%的可能性某人已经完成并发布了OSS版本的代码。
  • 另外,在了解你的需求之前,一开始不要恨不得把20个库都用上。尤其是客户端,保持轻量级、快速和灵活性总是更重要的。

漏洞修复

  • 明白你将花费20%的时间写编码,80%的时间维护,所以写代码的时候要谨慎。
  • 设计一个好的错误报告机制。
  • 设计一个入口可以让用户与你取得联系,向你提出建议和批评。
  • 写项目文档,这样可以让维护你的软件和系统的人更容易上手。
  • 常备份(也确保这些备份有效)!制定备份恢复策略,而不仅仅是备份策略。
  • 使用版本控制工具来备份文件,例如:SubversionMercurialGit
  • 别忘了做验收测试。可以使用Selenium这样的框架。如需要进行自动化测试,可以使用持续集成工具,例如Jenkins
  • 使用log4jlog4netlog4r等框架,以确保你有足够的日志。如果出了问题,这是可以让你快速找到问题的方式。
  • 记录日志时,确保你记录了你捕获了处理和未处理异常。报告和分析日志可以让你知道你网站的问题。

其他

  • 实施服务器端和客户端监控和分析(应该是主动的而不是被动的)。
  • 使用UserVoice和Intercom(或其他类似的工具)等服务,可以让你和用户保持紧密的联系。
  • 遵从Vincent DriessenGit分支模型

这里有多的东西被省略了,不是因为它们没用,而是因为它们要么太细、超出范围,要么对于想要了解自己想知道的知识的人它们有点太宽泛了。文章可能有遗漏或者有错误,所以请随意编辑这篇帖子。

user avatar
取消

0 条评论