`

在发布站点前,Web开发者需要关注哪些技术细节?

    博客分类:
  • web
 
阅读更多

摘要:在网站发布前,开发者需要关注有许多的技术细节,比如接口设计、用户体验、安全性、Web标准、性能、SEO等,倘若一个疏忽就会影响到整体的体验效果。作为一名Web开发者,哪些技术细节需要考虑呢?

【编者按】在网站发布前,开发者需要关注有许多的技术细节,比如接口设计、用户体验、安全性、Web标准、性能、SEO等,倘若一个疏忽就会影响到整体的体验效果。Stackexchange上有人提出:作为一名Web开发者,哪些技术细节是需要考虑的?作者Hedgehog对该文进行了编译,这些资源有助于你了解一些关键技术,比如HTML、HTTP、XML、CSS、JavaScript、浏览器兼容性,减少网站加载时间的技巧、XML站点地图、W3C规范等。一起来看下:


 

问:对于一个Web开发人员来说,在发布一个站点之前,他需要处理哪些细节性的问题。假如Jeff Atwood能在站点上忽略了对HttpOnly cookies,sitemaps和cross-site request forgeries的关注,那我还能忽略些什么呢?

对于一个设计或提供站点内容的人来说,他们总认为站点的可用性及内容总比这个平台重要的多,当然在这个方面,Web开发人员没有什么话语权。对于一 个Web开发人员来说,其更多需要关注的是站点的稳定性,是否表现良好,安全性,是否满足了其他商业目标(例如花费不少太高,构建时间不少太长,在 Google提供的搜索结果中是否有个良好的排名)。

我们可以从这个角度上讨论这个问题:一个Web开发者在可信网络环境下做了些成成果,并且他打算将这个成果部署到当前这个糟糕的互联网环境上。另 外,我也寻找一个更具体的答案而非一个模糊的”Web标准”,我的意思是已经了解了HTTP上的HTML、JavaScript、CSS技术,且认为你已 经是一个专业的Web开发人员。那么,除此之外还有那些标准,在什么环境下使用?为什么?请提供一个链接到标准的规范。

答:以下大部分的观点也许大部分都已知悉,但是其中有少量的观点你获取从来没有看过,别担心,你不必全部理解他们,或许对你来说你永远也不需要了解到他们。

一、接口设计及用户体验

  • 你 需要知道各种浏览器实现标准不一致,你需要保证你的站点在主流浏览器上能够良好运行。至少需要测试:基于Gecko引擎的浏览器(例 如:Firefox),基于Webkit引擎的浏览器(例如Safari和其他一些手机浏览器),Chrome,IE及Opera。同时也需要考虑在不同 的操作系统上,各种浏览器如何渲染你的站点。
  • 考虑你的站点将会被如何使用:是在手机端访问,PC上的浏览器访问,亦或是搜索引擎。
  • 在避免影响用户的情况下如何发布更新。是否有一个或者多个测试/临时以便在不打断站点访问的情况下进行架构、代码及内容的更新。是否有自动化的方式对在线站点进行发布。这些可以使用一套版本控制系统及自动化构建方式来有效实施。
  • 不允许向用户提示不友好的错误信息。
  • 不要以纯文本的方式提供出用户的email地址,因为他们会收到过多的垃圾邮件而死亡。
  • 在用户生成的链接上增加rel=”nofollow”属性,以避免垃圾邮件。
  • 对你的站点建立些限制,当然这应该是经过深思熟虑的-这也属于安全性范围。
  • 学习如何逐步提高站点功能。
  •  为避免重复提交,当POST成功执行后需要进行页面跳转。
  •  不要忘记考虑辅助功能。它总是一个好主意,且在某些情况下这是一个法律要求。 WAI-ARIA和WCAG2个在这方面的良好资源。
  • 不要让我想该如何进行操作。

二、安全性

  •  有很多需要阐述,但是OWASP开发指南中依据对Web站点安全性从头到脚进行了介绍。
  •  要了解注入特别是SQL注入,并学会如何避免他。
  •  永远不要相信用户的输入,也不是来自于请求别的(包括cookie和隐藏的表单字段值)。
  •  不要使用单独类似MD5或SHA加密策略,在进行散列密码值时,使用作料或多种作料以防止彩虹攻击。对于短密码,采用一个短散列算法处理,例如:bcrypt或scrypt。
  • 不要使用你想象中的身份认证系统,很容易得到一个微妙的错误和不可测试的问题,甚至你自己都不知道会怎么回事。
  • 了解处理信用卡规则。
  • 使用SSL/HTTPS处理任何敏感数据。
  • 防止会话劫持。
  • 避免跨站点脚本攻击。
  • 避免跨站点请求伪造。
  • 避免点击劫持。
  • 确保你的系统安装了最新的补丁。
  • 确保你的数据库连接信息是安全的。
  • 了解最新的攻击技术以免影响到你的平台。
  •  阅读谷歌安全手册。
  •  阅读web应用程序黑客手册。
  • 考虑最小权限的负责人机制。

三、性能

  • 如果有必要的话实现缓存策略。理解Http caching和html5 manifest并在合适的地方使用它们。
  • 优化图像-不要使用20 KB大小的图像做重复背景。
  • 了解如何gzip/deflate内容。
  • 合并/连接多个样式表或多个脚本文件,以减少浏览器连接的数量,并通过gzip来压缩多个文件中的重复内容。
  • 阅览雅虎卓越性能站点,其中包含大量很棒的指南,例如端到端的性能提升方法,YSlow工具。Goole page speed是是一个优化参考的好去处。
  • 使用CSS image sprite技术减少图片请求。(ps:前段时间用node-canvas做了个本地化的css-sprite工具,有需要的可以找我拿源码^_^)。
  • 访问量大的站点可以将内容划分到多个域下,但不要超过4个域。
  • 静态内容(例如图片,css文件,js文件及一些静态文本)应该存放在一个单独的域下面,并且不能使用cokies,因为在每次请求时,都会将cookies带上。CDN(内容分发网络)是一个不错的选择。
  • 减少一个浏览器页面上发起的http请求数量。
  • 使用JavaScript文件压缩技术。
  •  确保在站点的根目录下有一个favicon.ico文件,即使该文件未被任何使用,流量器也会自动加载它。如果没有这个文件的话,将会导致大量的404错误,从而占用你的服务器带宽。

四、SEO(搜索引擎优化)

  • 使用搜索引擎友好的的url,例如:使用example.com/pages/45-article-title 而非example.com/index.php?page=45
  • 当 使用#动态内容更改#到#!然后在服务器$_REQUEST[“_escaped_fragment_”]是什么Googlebot使用,而不是#!换句 话说,#!页= 1/变成/?_escaped_fragments_=页= 1。此外,对于可能使用FF.b4或铬,history.pushState用户({“foo”的:“酒吧”}“。?/页=1”,“关于”,);是一个伟 大的命令。因此,即使在地址栏改变了页面不会重新加载。这使您可以使用?而不是#!保持动态内容,并告诉服务器当您发送电子邮件,我们是这个页面后的链 接,以及AJAX并不需要再作额外的要求。(Google翻译,没有完全理解…)
  • 不要使用”click here”这样的链接,这样会浪费SEO的机会并且也会让人更加难以理解。
  • 要有一个XML站点地图,最好是在默认位置/sitemap.xml的。
  • 当你有两个指向不同的地址,可以使用<link rel="canonical".../>,这个问题也可以从谷歌网站管理员
  • 使用Google Webmaster Tools 和 Bing Webmaster Tools.
  • 使用Google Analytics。
  • 了解机器人搜寻算法和搜索引擎爬虫的工作方式。
  • 重定向请求(使用301永久移动)要求www.example.com到example.com(或者反过来),以防止分裂谷歌两个网站之间的排名。
  • 你还要知道还有很多恶心的爬虫程序运作在网络上。(以前在做一个百科词条整理时,对某网站的词条进行了深度遍历,但程序运行不久IP就被封杀了。)

五、技术点

  • 理解HTTP协议,例如:GET,POST,Session,Cookies以及“无状态”的含义。
  • 根据W3C规范写你的XHTML/ HTML和CSS,并确保他们通过验证。这是为了避免浏览器的使用非标准的浏览器,如屏幕读取器和移动设备的正常工作。
  • 了解JavaScript在浏览器中的运行机制。
  • 理解JavaScript、css及其他资源在页面上是如何被加载的,并考虑他们对性能的影响。现在普遍接受将脚本放在应用程序或html5底部执行。
  • 了解JavaScript沙箱的工作原理,特别是如果你打算使用iframe。
  • 你 要注意到JavaScript是可以被禁止的,并且AJAX是一个拓展而非基线。很多普通用户已经离开了它,NoScript越来越受欢迎,移动设备或许 不会像你想象的那样运行,谷歌将无法运行大部分的的JavaScript。(不解,noscript标签是定义在未能执行js时的输出,当是当前js横行 的时代,真的还有很多用户禁用js吗???)
  • 理解重定向301和302的区别。(这也是SEO中的一项)
  • 尽可能深入了解你的开发环境。
  • 考虑使用Reset CSS或Normalize.css。
  • 考虑JavaScript框架(如jQuery,MooTools,Prototype,Dojo或YUI3),这将使用JavaScript进行DOM操作时,隐藏了很多的浏览器差异。
  • 考虑到JS框架及性能,可以使用一个服务,如谷歌库API来加载框架,使浏览器可以使用它已经缓存,而不是从你的网站下载一个副本的框架副本。(CDN)
  • 不要重复造轮子。做任何事情之前先搜索关于如何做到这一点的组件或例子。有99%的可能性有人已经做到了和发布了一个开源版本的代码。
  • 在明确你的需求之前,不要使用20个库去堆砌功能。特别是在客户端访问,其最重要的就是让事情轻便、快速和灵活。

六、Bug修复

  • 你要知道你将要花费80%的时间去维护你20%时间写的代码,所以编码时请仔细。
  • 建立一个良好的错误报告解决方案。
  • 有一个能让大家提供建议或提出批评的系统。
  • 将未来支持的功能及维护人员记录在文档中。
  • 频繁的备份! (并且确保这些备份是功能性)埃德·卢卡斯的回答有一些忠告。有一个恢复策略,而不只是一个备份策略。
  • 有一个版本控制系统来存放文件,例如Subversion,Mercurial或Git。
  • 不要忘记做些验收测试,类似Selenium框架可以提供方便。
  • 请确保您有足够的日志记录在案,例如使用框架log4j,log4net或log4r。如果你的网站发生了错误,你要知道发生了什么事情。
  • 当登录时请务必同时捕获处理异常和未处理的异常。报告/分析日志的输出,因为它会告诉你网站中的关键问题。

很多知识都省略了,并不是因为他们不是有用的答案,而是它们要么过于详细,要么超出了范围,亦或对某些人来说过于深入。大家应该知道这知识概述,请随意畅谈,因为我可能错过了一些东西或者也犯了一些错误。

推荐阅读:

分享到:
评论

相关推荐

    web性能权威指南

    涵盖Web开发者技术体系中应该掌握的所有网络及性能优化知识。全书以性能优化为主线,从TCP、UDP和TLS协议讲起,解释了如何针对这几种协议和基础设施来优化应用。然后深入探讨了无线和移动网络的工作机制。最后,揭示...

    《The Tangled Web》:“破解Web乱局”324页完整、文字(非扫描)PDF版

    《The Tangled Web》是Michal在多年对浏览器安全原创研究和“浏览器安全在线手册”基础上精心打造的,是目前仅有的一本专门关注Web浏览器安全的特色书籍,细致地揭示了浏览器的内部工作机制,深入地分析了浏览器的...

    WEB开发好助手FireBug

    Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。 &lt;br&gt;Firebug插件虽然功能强大,但是它已经和Firefox浏览器无缝地结合在一起,使用简单直观。如果你...

    Python基于搜索的目标站点内容监测系统_(项目源码+数据库脚本+文档+LW+PPT)

    这个基于Python技术栈的Web应用程序项目源代码提供了一个通用的框架,使得开发者能够学习如何构建可扩展的管理系统。 通过深入研究源代码,您将了解使用Python进行Web应用开发的关键技术和实践方法。 项目的核心...

    《构建高性能WEB站点》-带目录

    该书深入而系统地分享了构建高性能...从后台到前台,从网络传输到数据存储,设计诸多技术原理和实现细节。这本书为你提供构建高性能网站的完整解决方案,它会称为每个致力于开发承载百万级用户规模网站开发者的工具箱。

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    除在保密期内的保密论文和在技术保护期限内的论文外,允许论文被查阅和借阅,可以公布(包括以电子信息形式刊登)论文的全部内容或中、英文摘要等部分内容。论文的公布(包括以电子信息形式刊登)授权东南大学研究生...

    每个程序员都应该了解的知识有哪些?(一)

     问题:那些技术细节是需要程序员把站点开发给公众之前考虑的?像Jeff Atwood(Stack Overflow创始人)这样的都可以忘了使用HttpOnly cookies, sitemaps和cross-site request forgeries,还有哪些可能被遗忘的...

    FireFox Chrome IE浏览器调试JavaScript

    Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。这是一款让 人爱不释手的插件,如果你以前没有接触过它,也许在阅读本文之后,会有一试的欲望。笔者在撰写...

    Java毕业设计-基于springboot开发的公交线路查询系统-毕业论文(附毕设源代码).rar

    资源介绍:基于Spring Boot开发的公交线路查询系统 本资源是一套完整的基于Spring Boot框架开发的...通过学习和使用该系统,开发者可以深入了解Spring Boot框架的开发流程和技术细节,提升自己的开发能力和实践经验。

    XML高级编程

    Web站点的开发者能够学到把自己的站点提高一个层次的技术,而编程者和软件系统程序员能够学到XML如何和他们的系统相配合,以及如何使用它来解决应用程序集成中的问题。 XML应用程序天生就具备分布性而且通常是面向...

    ASP.NET4权威指南源代码下载

    《ASP.NET 4权威指南》是ASP.NET领域的又一鸿篇巨制,由资深ASP.NET专家亲自执笔,知名微软技术社区和权威技术专家一致鼎力推荐。 它是国内第一本关于ASP.NET 4的著作。从广度上讲,内容系统而全面,全书一共包含4个...

    《ASP.NET 4权威指南》(基于C# 4.0和Visual Studio 2010)

    《ASP.NET 4权威指南》是ASP.NET领域的又一鸿篇巨制,由资深ASP.NET专家亲自执笔,知名微软技术社区和权威技术专家一致鼎力推荐。它是国内第一本关于ASP.NET 4的著作。从广度上讲,内容系统而全面,全书一共包含4个...

    软件界面设计工具_3款合集

    Balsamiq Mockups是一款免费的带有手绘风格的原型设计软件,可以帮助你设计桌面应用软件,Web 2.0 站点, RIA富网络应用程序, Web站点和Web应用软件。 功能和亮点: 操作方面:拖拽,控件分组,甚至元素之间的对齐...

    Cyber​​ Web Tools「Cyber Web Tools」-crx插件

    它估计输入字段与活动网页的细节,并提供过滤。这些输入字段在形式上进一步分类。输入详细信息是Id,名称,标签名称,类型,值。 03. OWASP 它包括可以执行Web应用程序安全测试的工具。一些测试工具是跨站点请求伪造...

    人才招聘系统2.5.1源码

    12、 缓存技术完美解决服务器压力负荷:为解决伪静态对服务器的要求,系统采用.Net的缓存技术来完美解决伪静态的服务器压力问题,保证在高访问量、高负荷下仍然正常工作。 13、 功能实用、性能安全、价格公道:一份...

    Linux内核工作原理 word版本 强烈推荐

    Linux主要用来浏览WEB,管理WEB站点,撰写与发送EMAIL,以及玩游戏。Linux绝对不是玩具而是具有专业水平的操作系统,它的爱好者遍及世界。 Linux的源头要追溯到最古老的UNIX。1969年,Bell实验室的Ken Thompson开始...

Global site tag (gtag.js) - Google Analytics