每个程序员应该知道的WEB开发的那些事儿

最新推荐文章于 2020-08-18 10:39:15 发布

风之谷呼呼

最新推荐文章于 2020-08-18 10:39:15 发布

阅读量936

点赞数

分类专栏：生活

生活专栏收录该内容

27 篇文章 0 订阅

订阅专栏

大部分开发者都已经知道下面列表中的大部分技术。但是，可能有那么一两项是你之前不知道、没有认真研究过、或者压根就没有听说过的。

界面和用户体验

注意，不同的浏览器用不同的方式实现了标准协议；因此要确保网站在所有的浏览器上都能正常运行。可以针对浏览器类型，做一个最小集合的测试：Gecko引擎（适用于FireFox），WebKit引擎（适用于Safari，Chrome，还有一些手机浏览器），IE浏览器（使用了应用兼容性VPC图像），还有Opera。还要考虑到，不同的浏览器会在不同的操作系统上访问网站。
考虑下，永辉会不会使用其他主流浏览器访问网站，例如手机，屏幕阅读器，搜索引擎等待。可以参考WAI, Section508，MobiForge。
注意：怎样进行升级而不会影响用户。
不要将不友好的错误提示直接显示给用户。
不要将用户邮箱地址放在文本文件中，因为很有可能会在无意中删除这些文本文件。
在用户增加的链接中增加属性 rel="nofollow"，这样可以避免这些信息被删除。
基于安全因素，在网站中增加一些有效的约束。
学习优化网站。
在一个POST成功后，重定位这个POST，这样可以防止由于反复提交带来的刷新。
一定要使用账户登录功能。这个功能非常好，而且在一些条件下，这是必须的（法律要求）。参考WAIARIA和WCAG 2。

安全

关于网络安全的资料非常多，不过OWASP开发指导是可以很好的选择，它囊括了网站安全的全部技术。
知道什么是SQL注入，并且知道怎样预防。
千万不要相信用户输入信息，也不要相信回复请求的信息（例如cookies，隐藏表格数据）。
哈希密码使用了一些额外的技术阻止被黑。使用慢速哈希算法保存密码，例如bcrypt(跨平台文件加密工具)，或者scrypt（更强，更新）。NIST证明PBKDF2也可以用于哈希密码，而且FIPS已经在.NET上被证明过了。避免直接使用MD5和SHA。
不要尝试使用自己想的授权系统。这种授权系统很可能会因为测试方式过于脆弱或者压根就不能测，进而得到一些错误的数据，而且这些错误的数据很可能在网站被攻击时才会被发现。
知道处理信用卡的流程。
当需要访问任何敏感信息时，需要使用SSL/HTTPS登录这些页面。
知道怎样抵抗骇客攻击。
避免跨站脚本(XSS)。
密码跨站请求(XSRF)。
保持网站系统总是使用最新的版本。
保证数据库连接信息的安全性。
当有网站受到攻击或者有异常时，能够马上提醒网站开发者。
读谷歌浏览器安全手册。
读网络应用黑客手册。

性能

有可能的话实现超高速缓存，理解和合理使用HTTP缓存，例如HTML5 Manifest。
优化图片--不要使用20KB的图片作为重复背景。
学习压缩/解压缩。
整合/压缩多个样式表或者脚本文件，以此减少浏览器连接数量，并提高对重复文件的压缩性能。
浏览雅虎期望的性能这个网站，有很多非常好的指导，例如改进头端性能和YSlow工具，谷歌网页加速工具。不过这两个都要安装Firebug。
使用CSS图片精灵处理小图片，例如工具栏。
繁忙的网站可以考虑跨域分割控件。
由于一个域或者子域内的所有cookies都会跟随请求被发送到这个域还有子域，所以静态内容（例如，图片，CSS，JavaScript，不需要访问cookies的基本内容）可以放在一个独立的不使用cookies的域。CDN（Content Delivery Network）是一个不错的选择。
减少浏览器请求网页时产生的HTTP请求数目。
使用谷歌封闭编译器编译JavaScript和其他的迷你工具。
确保网站的根目录上有favicon.ico文件，例如，./favicon.ico。浏览器会自动请求favicon.ico文件，即使HTML空间从来没有在HTML页面中请求这个文件。如果网站没有/favicon.ico文件，当请求事件发生时，会引起非常多的404错误，然后耗尽服务器带宽。

SEO(搜索引擎优化）

使用“友好搜索引擎”URL，例如使用 example.com/pages/45-article-title ，而不是 example.com/index.php?page=45。
当使用？来代表动态内容，而不是#；在服务器上，使用 $_REQUEST["_escaped_fragment_"]代表网络爬虫作用内容，而不要用#！；例如，使用 ./#!page=1代替 ./?_escaped_fragments_=page=1，而在客户端使用FF.b4或者Chromium，对应的写成 history.pushState({"foo":"bar"}, "About", "./?page=1") 。因此，即使地址栏已经更新，但是网页没有刷新。用？代替#！可以保持动态内容，并且告诉服务器当通过电子邮件发送连接时，接收者可以直接查看这个链接所连接的页面。而AJAX不需要做其他额外的请求。
不要使用连接表明“点击这里”。这样做，只会浪费搜索引擎优化的机会，而且它会让使用屏幕阅读器的用户觉得这样做很不方便。
有XML网站地图，最好将网站地图放在这个位置：/sitemap.xml。
当网站开发人员用多个URL同时指向同一个网页内容时，最好使用 <link rel="canonical" ... />，参考谷歌网络大师工具。
使用谷歌网络大师工具，和Bing网络大师工具。
在开始搭建网站的时候，就安装上谷歌分析器。
知道robots.txt和搜索引擎网络爬虫是怎么工作的。
将对www.example.com认为是对example.com的网页请求，否则谷歌可以对两个网站进行网络排名，其实是一个网站。
知道网络爬虫在哪些地方性能不高。
如果网络开发者用非文本查看谷歌网站地图上的扩展应用，例如视频，可以参考这个链接的内容 Tim Farley's answer 。

技术

知道HTTP和GET, POST, sessions, cookies，还有其他。
通过W3C手册写XHTML/HTML或者CSS的网页，并且确保它们是有效的。这样做的目的是可以检查浏览器的兼容模式，看看这些网页是否能在非标准的浏览器上正常工作，例如，屏幕阅读器和手机设备。
知道浏览器是怎么处理JavaScript的。
知道网页是怎么处理所需要的JavaScript，样式表，和其他资源的。并且知道这些资源是如何影响用户的直观感受的。可以选择的方法有很多，例如将脚本放在网页的结尾。
知道JavaScript沙盒是怎么工作的，尤其是要使用内联框架的时候。
注意JavaScript可以被禁止，而在这个时候，AJAX可以当作扩展功能，而不仅仅是一个基础功能。可能现在大部分的用户都不用AJAX，但是记住，没有哪个脚本语言有作为主流脚本语言的趋势，手机设备也没有像预期的那样发展，而且谷歌在建立索引表的时候也不会运行这些JavaScript。
学习301重定向和302重定向间的区别。
尽可能多的学习部署的网站平台。
考虑使用样式表重置（Reset Style Sheel)或者normalize.css。
考虑JavaScript的框架结构（例如JQuery，MooTools，Prototype，Dojo或者YUI3)，因为使用JavaScript进行DOM操作的时候，JavaScript框架可以让开发者忽略掉浏览器差异。
将直观性能和JS框架结合起来，考虑使用类似Google Libraries API这样的服务可以让浏览器使用已经缓存下来的框架拷贝，而不是从网站上反复下载。
不要反复做同一件事。在做任何事之前，先上网搜索下有没有现成的，或者类似的例子。有99%的可能性，已经有人做好了，并且已经发布了一个OSS 版本的源码。

解决问题