-
用户之所以访问我们的网站，并不是为了看那些精心制作的壮丽图景，华美流畅的
CSS动画以及语义丰富的HTML标记，他们关心的是网站内容能不能满足其需求，也就是网站的功能是不是他们想要的！有些人喜欢尝鲜，它们会使用
HTML5以及CSS3中的新属性，但是不做浏览器适配，这样的话就导致在有些浏览器中我们的界面看上去十分高大上，而且一些不支持新属性的浏览器中看上去却格格不入。所以我建议当使用CSS3或者HTML5新属性的时候，首先去查看一下属性在各浏览器的支持情况，针对那些不支持新属性的浏览器做出优雅的替代方案。你可以在 HTML5 Readiness 查看新属性在浏览器中的支持情况。
渐进增强是网页前端开发的基础，什么是渐进增强呢？从基础层面上说，就是将 HTML, CSS, JavaScript 分成不同的三个层面， HTML 是结构层， CSS 是表现层， JavaScript 是行为层。我们让上方的层依赖于下方的层，也就是 JavaScript 依赖 CSS, CSS 又依赖于 HTML。和渐进增强模型相似的，还有一个称之为平稳退化的开发模型，这两种方式的主要区别在于，渐进增强模型关注的重点是内容，而平稳退化模型关注的重点是浏览器。
- 我们可以通过
Http请求去获取我们需要的图像或者CSS资源，默认情况下，浏览器会成对的下载这些资源，由于带宽的限制，你不可能一次就把所有的资源全部下载下来。通常来说，一次获取两个资源，可以将处理器的负载保持在合适的水平上，不至于影响到运行在用户电脑上的其它程序。但是JavaScript文件受到浏览器的特殊照顾，只要用HTTP请求来获取这种文件，那么其它资源的下载都要停止，这也是我们为什么将对JS文件的引用放置到页面末尾。
JavaScript 所做的大部分工作，就是在行为层中改善用户体验，也就是拓展网站现有的功能对其锦上添花。 但是，我们切不可乱用 JavaScript, 怎么检测我们是否乱用呢？ 最好的办法就是关闭浏览器的 JavaScript 功能，以用户的角度看看网站是否还能正常工作。
还有一个值得注意的问题是，由于浏览器渲染 CSS 的速度要比 JavaScript 快的多，所以在能用 CSS 替代 JavaScript 的情况下，那就替代它。
- 在编写应用程序时，最好能把所有的变量都集中在
JavaScript文件或函数头部，这样的话，它们就能立即被缓存起来，供稍候使用。比如像下面这样。
var first = 1,
second = 2,
third = 3;
匿名函数就是那种没有名字的函数，使用它的一个巨大优势就在于原本会落入到全局作用域的变量，现在就全部局限在该匿名函数的内部了。比如下面这个例子，我们将 eat 和 sleep 全部放置到 Person 对象当中，显得更加直观。
(function() {
var Person = {
eat: function() {
console.log("I am eating!");
},
sleep: function() {
console.log("I am sleeping!");
}
}
Person.eat();
})();
当然，在对象中嵌入函数和在对象中添加变量一样，也有相同的性能忧患。一个函数在对象中嵌套的越深，调用时所需的解析时间就越长。
在使用函数的时候，如果在函数名后加上括号，则表示立刻调用，如果不加括号，则表示不想立刻调用，比如在我们添加事件监听的时候，往往使用不加括号的形式。
JavaScript有两种常见的开发模式，分别是 “函数与闭包模式” 和 “事件驱动模式”。所谓函数与闭包模型就是将所有的内容封装城一个对象，并且在不暴露那个对象中其它函数和局部变量的情况下，创造出一套可以在整个应用程序中使用的公共API.而事件驱动模式更为直接，就是直接设置好函数，在事件监听器中调用即可。JQuery中有个ready()方法，它与原生的load事件有所不同。load事件会等到包括图片在内的所有资源都加载好了之后，才被触发。而ready()方法不会等到所有图片都加载完了才去执行回调代码，而是只等DOM对象被构建好之后就开始执行，这样用户的体验就会更加平滑一些。
