构建现代化网站的 20 个技巧

标签： 程序员 网站 | 发表时间：2013-03-12 10:19 | 作者：刘志成
出处：http://blog.jobbole.com

英文原文： 20 tips for building modern sites，翻译： 开源中国

在过去几年中，我们与web开发者花了很多时间交流，听得最多的一件事情就是创建一个能很好的跨越各种类型 浏览器版本与各种设备的网站有多么难。我们为jQuery项目写代码的时候一直有这个问题。因此我们整理了20条编码模式与经验，它们是从出席无休止的会议和读了几百篇专稿中摘取出来的。我们希望能在你建站的时候给你节省一些时间（和麻烦）。

构建现代化网站的 20 个技巧

构建现代化网站的 20 个技巧

跨浏览器基础

网站不需要在所有浏览器里渲染得一样

一件普遍被开发者所关心的事情是确保他们的网站在所有浏览器中渲染得一样，包括非现代的一些。那一般并不需要。更好的路线是考虑逐渐增强你的网站，对非 现代浏览器的用户提供一个可靠的工作基线，而给用现代浏览器的用户提供一个更丰富的UI。

从固体模版开始以简化开发

许多的技巧已经创建进项目模版如 HTML5 Boilerplate 以节省你一些时间。这些准则对以现代浏览器为目标的项目和需要旧浏览器（一直回退到IE6）支持的项目工作得一样好。

关注稳定的标准

当一个新又酷的特性出现的时候很容易令人兴奋，但其中的一些可能仍然在为技术参数实验、仍然在开发中。重要的是要记得，在规范发展的早期是很容易变化的，这有可能影响你的网站的稳定性和你的用户的体验。通过 关注稳定的标准，你可以确保你的用户能获得他们期望的体验，你的网站会更易维护。

用IE兼容检测工具帮助你的网站迁移到基于标准的代码

标准是IE10的一个核心部分，帮助开发者迁移他们的代码以便能发挥这项长处，这对IE工程项目组来说无比重要。这就是为什么他们创造了 IE兼容检测工具，它能实时分析你的网站，准确的找到通常问题的类型并给出解决方法。通过在你的代码中包括一个简单的JavaScript脚本文件，在你的页面你就能得到可视化的结果。它也可以被集成进 Fidder HTTP 分析工具。

谨慎使用polyfills和shims（模拟标准API）

如果你必须在不同浏览器实现系统的体验， polyfills和shims提供了代码和标签，可以帮助模拟标准的API和功能。需要谨记的是，确保你引入的代码适合你的需要，并且可以在日后维护。

开发时多浏览器测试

尽管相对以前，现代浏览器已经 接近统一标准，但还是有不同。偶尔的多浏览器测试避免不会在最后一刻发现大问题——甚至已经上线了。确保查看所有浏览器调试器比如IE的 F12 Dev Tools，检查有没有警告或错误信息。一些老浏览器比如IE7没有内建调试器，可以用 Firebug Lite调试。或者使用跨浏览器解决方案如 BrowserStack。

用工具参与创建过程来检测错误和缩小文件大小

有好一批创建工具如  HTML validators,  CSS validators,  Uglify,   JSHint, 或者  GruntJS ，他们能找到潜在的问题，增强项目代码的标准，减少文件的大小提升性能。如果你的IDE或者代码编辑器支持它们，这些步骤就不会成为绊脚石。例如，Visual Studio提供了在创建过程中运行外部工具和合并/ 压缩脚本文件的能力。

HTML

总是使用标准模式避免怪癖模式

直接用<!DOCTYPE html>吧！现代化网站不需要怪癖模式，不需要考虑90年代中期为了兼容现代化的浏览器比如IE6和FireFox 2.大多数现今的网页在怪癖模式下要么文档声明无效，要么出现无关文本。很容易导致布局异常，而且很难调试。

理解有限向后兼容的HTML标签

新HTML5标签比如<section>,<header>和<footer>改善标签的语义化，但需要特殊的辅助脚本让IE6,7和8认识他们。页面在太旧的浏览器或者禁止脚本时无法使用HTML5标签，那么使用<div>标签是对这些情况比较靠谱的解决方法。

将CSS在HTML文件顶部引入

在文档body中引入CSS会导致页面全空，直到CSS加载后才显示。CSS文件应该放 在HTML文档的head中，让浏览器尽早地读取他们。

将JS在HTML文件底部引入

浏览器会先检索、解析和执行加载的脚本，然后渲染剩余的页面内容，以防脚本创建新元素。脚本在底部后，浏览器可以 一直渲染页面直到脚本加载完全，以便用户尽快加载页面显示出来。

避免HTML中脚本标签

不同于引入脚本，脚本标签需要浏览器停止渲染（处理脚本），阻碍后续资源文件的分析和下载。这导致页面初始加载减慢，甚至留下可怕的“空白页”体验。而且脚本分散在内联标签里 很难维护。

不要在HTML元素中使用内联脚本事件

例如<button onclick=”validate()”>Validate</button>。这种做法违反了标签、表示和行为之间的清爽原则。而且，如果相关的脚本实在文档底部加载，用户可能先点击了页面触发事件从而 尝试调用脚本程序，但是其实脚本还没加载——引发错误！

CSS

熟悉和使用CSS级联规则

简单的id和class选择器是好用的，但是这也意味着标签混乱，到处是无法重用的的id和class。应该用标签，子元素标签，同列标签和，小部分的id和class标签组合，使css更简单和通用。避免使用“!imporant”。

面向未来的使用前缀特定属性

新草案制定时，一些浏览器厂商会通过添加前缀以实现可能支持的标准。为了确保CSS标签以后可用，带前缀的和标准的属性名称都用上最好。 这篇文章还提供了一个JavaScript解决方法。

用优雅的CSS处理兼容性，而不是hack

CSS hack随着浏览器的更新，显得不可靠。解决方法是为html或body标签 添加特定浏览器的class，并在css规则中使用。 条件注释也可以在特定浏览器版本时使用需要的CSS文件。

JavaScript

总是将功能探测优先于浏览器(navigator.userAgent)探测。

判断是否存在一个特定功能（或错误）时，’userAgent’字符串是一个糟糕的指标。更严重的时，解析userAgent的代码时错误的。例如，一个浏览器探测库期待主版本号是一个一位数字，所以会把Firefox 15报告为Firefox 1，把IE 10报高为IE 1！更可靠的是 直接探测功能或问题，并用它作为代码分支决策的标准。我们推荐 Modernizr，它是实现功能探测的最简单方法。

尽可能在Ready后立刻执行脚本

技术上如jQuery的$(document).ready()使脚本在HTML页面加载完后立即执行，也是脚本可以安全执行的最早时刻。然而复杂的脚本会让页面显得迟缓，并阻止用户立刻操作页面。所以，一些比如tooltip（提示框）,dialog（对话框）在需要显示时初始化，不造成页面卡顿。

如果Ajax关系用户交互，越早请求越好

Ajax请求会花费很长时间，而且不需要 等待HTML页面渲染就可以发起请求。所以，把$(document).ready()放在Ajax请求完成回调函数中更好。

延迟加载非必要的脚本（如Facebook Like，Google +1，Twitter）。

所有人都希望他们的网页在社交网络上流行，但是社交网络的脚本往往很大，可能会引起用户响应迟缓。在 请求这些脚本前等待页面加载完毕，可以使页面响应更快。更妙的是，重新考虑这些按钮是否有必要，以及它们是否改善了你的页面整体体验。

相关文章

构建现代化网站的 20 个技巧，首发于 博客 - 伯乐在线。

相关 [现代化 网站 技巧] 推荐：

构建现代化网站的 20 个技巧

- - 博客 - 伯乐在线
英文原文： 20 tips for building modern sites，翻译： 开源中国. 在过去几年中，我们与web开发者花了很多时间交流，听得最多的一件事情就是创建一个能很好的跨越各种类型 浏览器版本与各种设备的网站有多么难. 我们为jQuery项目写代码的时候一直有这个问题. 因此我们整理了20条编码模式与经验，它们是从出席无休止的会议和读了几百篇专稿中摘取出来的.

【译】18个网站优化技巧

- - 淡忘~浅思
快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的. 网站页面的加载速度也是衡量网站性能的一个重要因素. 如果网站不是以最好的性能在运行，迟缓的加载会让你在低的排名和搜索流量上花费更大的代价. 页面的加载速度会对用户的行为和转化率产生很大的影响. 有哪些简单的方式可以优化加载速度呢.

13个WordPress技巧和教程的网站

- 阿德 - cnBeta.COM
WordPress即使不是世上最流行，那也是数一数二的开源博客和内容管理系统. 有超过250万的网站和博客采用这款屡获奖项的网络软件. 并且WordPress的潜在用户群也在日益扩张，他们中不乏开发者、设计人员、投稿人和自由作家这些独具技术和知识的群体. 我自己的自由职业业务也有超过9成与 WordPress多少有关系，并且我发现为客户提供高质量、经济实惠的个性化的WordPress网站会快速增加我的业务.

设计电子商务网站的10个技巧

- 雄杰 - 所有文章 - UCD大社区
        导读：随着先进科学技术的应用，人们无需外出逛几个小时来“猎”东西，直接坐在家里就可以购买所需商品，支付服务费用. 人们习惯了周到的服务和漂亮的橱窗，对网店的选择也不例外. 因此，电子商务网站的设计就是一切的关键了. 如果你想做一个网店，你最应该考虑如何设计你的电子商务网站从中获利. 你可以在市场上以合理的价格出售最好的商品，但在网络上，如果你的网站设计简陋，即使商品质量非常棒，你的销量也会大打折扣.

让网站灵敏轻便的几个小技巧

- - 盒子UI
在网站或软件的策划和设计过程中，我们经常听到这样的讨论：“这个功能设计得太重了”又或“我们希望能够处理得轻一些”. 似乎轻设计是时下炙手可热 的话题，也是方兴未艾的Web2.0大浪下设计师们的最爱(看看那些在全世界遍地开花的SNS网站，无论是视觉元素还是交互流程均能轻则轻). 本文主要从 实践和总结的角度出发，提出了让设计变得更轻的6个技巧.

网站运营中活动组织的三个技巧

- - CSDN博客互联网推荐文章
在网站运营中，有一项非常重要的工作，那就是组织活动. 不管是社交网站还是电商平台，甚至是官方微博，日常运营都离不开活动的组织，活动可以有效的提升用户的活跃度、提高网站粘性，对于电商平台还可以直接促进销售. 活动如此重要，那在组织活动的过程中有哪些技巧呢. 首先，活动主题及奖品可以融入品牌及情感因素.

人人都能用的10条网站易用性技巧

- - 前端观察
嗯，WebAIM团队博客的一篇关于网站易用性的文章，比较基础，简单翻译一下：. 这样有两个好处：屏幕阅读器能识别logo图片代表的含义，图片未加载到时，也能告诉非视障用户那里是你的logo. 前端界. 或者，你用背景图来实现logo的话，也可以添加title属性来实现：.

优化网站加载速度的14个技巧

- - 码农网
优化了加载速度的网站不仅可以提高其搜索引擎的排名，同时也可以降低网站的跳出率，提高其转换率，还能提供更好的终端用户体验，这是当今基于Web环境取得成功的关键. 下面我将介绍几个优化网站加载网页速度的简单方法，一起来看一下. 即使网站已经格外优化，但是除非服务器响应时间非常快，否则就不会有什么大的效果.

提升网站性能开发的10个技巧

- - 程序师
随着网络的高速发展，网络性能的持续提高成为能否在芸芸 App 中脱颖而出的关键. 高度联结的世界意味着用户对网络体验提出了更严苛的要求. 假如你的网站不能做到快速响应，又或你的 App 存在延迟，用户很快就会移情你的竞争对手. 以下为大家总结 10 条有关性能提升的经验，以供参考：.   采用反向代理服务器(Reverse Proxy Server)来对应用进行加速和保护.

SEO 技巧：通过赞助 WordPress 主题快速提高网站排名

- - 我爱水煮鱼
现在网上有很多免费的 WordPress 主题下载，这些免费主题中的一大部分是含有付费链接的，并且 footer.php 是加密的，这些链接就是 WordPress 主题赞助商链接. 通过赞助 WordPress 主题，快速增加网站反链，可以对网站进行搜索引擎优化（SEO），提高网站在搜索引擎中的排名.