web页面的优化
众所周知，一个web页面通常会包括HTML(XHTML、XML)、CSS、Javascript，而其中HTML(XHTML、XML)为结构化语言，用于构建页面结构和相关数据；CSS则负责页面的样式，即页面的表现形式；Javascript则负责页面的行为，即完成页面的各种交互。
页面的这三个部分是相辅相成的，在构建web页面的过程中，要尽量保持三者松耦合的关系，从而实现对一个部分的改动而不影响另外两个部分。
要实现三者的松耦合，首先必然是从文件级别上隔离三个部分，即在HTML页面中引入相关的CSS文件和Javascript文件，但同时在实际的开发过程中要注意尽量做到以下几点：
- HTML代码中不包含CSS
- HTML代码中不包含Javascript
- Javascript代码中不包含HTML
- CSS代码中不包含Javascript
- Javascript代码中不包含CSS
1、HTML代码中不包含CSS，指的是在HTML代码中尽量不包含CSS代码，即嵌入到HTML元素中的样式设置以及嵌入到<head>中的CSS代码，使整个HTML页面中只包括页面的结构元素。
2、HTML代码中不要包含Javascript，如以下代码所示:
<input type="button" value="click me" id="mybutton" onclick="do()"/>
推荐使用下面的代码：
var btn = document.getElementById('mybutton');
btn.addEventListener("click", do);
3、Javascript代码中不包含HTML，如下代码所示：
var div = document.getElementById("my-div");
div.innerHTML = "<h3>Error</h3><p>Invalid e-mail address.</p>";
当然，在Javascript代码中完全隔绝HTML很难，所以我们可以根据实际情况来权衡使用。同时，我看到过一种有效隔离HTML和Javascript代码的手段，就是Javascript 模版技术，以下是jQuery Template的用法：
// HTML
<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div>
<img src="BookPictures/${picture}" alt="" />
<h2>${title}</h2>
price: ${formatPrice(price)}
</div>
</script>
// Javascript
// Create an array of books
var books = [{ title: "ASP.NET 4 Unleashed", price: 37.79, picture: "AspNet4Unleashed.jpg" }];
// Render the books using the template
$("#bookTemplate").tmpl(books).appendTo("#bookContainer");
function formatPrice(price) {
return "$" + price.toFixed(2);
}
4、CSS代码中不包含Javascript，指的是在CSS代码中要慎用可计算的样式，如IE 8的 expression，CSS3的calc等等，从使用角度来讲全是很强大，从代码维护的角度来看，不推荐使用。出现了Bug的时候，需要同时Check Javascript和CSS代码。
5、Javascript代码中不要包含CSS，我们经常需要在Javascript中去动态改变某一个Dom元素的样式，经常写出如下代码：
element.style.color = 'red';
这样的代码会导致当需求改变的时候，需要在Javascript代码中全文检索 red 关键字，深怕漏掉一点。推荐的做法是在Javascript中操纵Dom对象的Class来改变样式，需求改变的时候，只需要调整CSS文件就可以了，如以下代码所示：
//在CSS文件中定义样式类型
.red-class{
color: red;
}
//Javascript中改变样式
element.className += " red-class";
// jQuery
$(element).addClass("red-class");
另外，为了提高web页面的响应速度，尽量避免在HTML页面中引入大量的外部CSS文件和Javascript文件，我们知道每引用一个.css或者.js文件都会引起一个HTTP请求，而一个HTTP请求的代价是很大的，了解具体的信息请参照http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol，http://en.wikipedia.org/wiki/Transmission_Control_Protocol
同时，浏览器对于HTTP请求的并发数量是有限制的，每个浏览器不等，基本在4个左右。
当HTML页面中引用了大量的外部Javascript文件和CSS文件，我们可以考虑通过合并以及压缩Javascript，CSS文件来达到减少HTTP请求数量，以及HTTP结果的目的。
Grunt是一个基于任务的JavaScript项目命令行构建工具，通过Grunt可以将多个文件合并成一个文件，并且进行压缩处理。Grunt没有开发平台的限制，只要是前端项目，都可以使用Grunt来配置任务。
另外如果你是ASP.NET的项目的话，ASP.NET 4.5加入了Bundle，通过Bundle技术合并压缩Javascript和CSS。关于Bundle技术可以参考 http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification。
另外一个会影响web页面响应速度的是Javascript的全局变量数。JavaScript全局变量在很小的程序中可能会带来方便，但随着程序越来越大，它很快变得难以处理。因为一个全局变量可以被程序的任何部分在任意时间改变，使得程序的行为被极大地复杂化。在程序中使用全局变量降低了程序的可靠性，所以我们应该尽量少的引入全局变量。
定义Javascript的方式有三种：
// 在所有函数外部使用var定义变量
var foo = 10;
// 没有使用var，直接声明变量
foo = 10;
window.foo = 10;
通过立即执行函数可以达到减少Javascript的全局变量数，参见下面的代码：
(function(win) {
"use strict";
var doc = win.document;
// declare other variables here
// other code goes here
}(window));
如果你需要将该对象返回，可以使用如下的方式：
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
这样的话只会引入一个全局变量 module1，而且该对象具有很好的封装性，其内部变量“_count”，在外部是无法访问的。
web页面的优化是一个长久的问题，在这列举了一些改进方法，但还有很多，需要慢慢探究和添加。
