本文转自：http://www.cnblogs.com/50614090/archive/2011/08/19/2145620.html
一、 WEB前台的优化规则
一、尽量减少 HTTP 请求
有几种常见的方法能切实减少 HTTP 请求：
1、 合并脚本跟样式文件，如可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。
2、 CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。
二、使用浏览器缓存
在用户浏览网站的不同页面时，很多内容是重复的，比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。
根据服务器端的响应header，一个文件对浏览器而言，有几级不同的缓存状态。
1、服务器端告诉浏览器不要缓存此文件，每次都到服务器上更新文件。
2、服务器端没有给浏览器任何指示。
3、在上次传输中，服务器给浏览器发送了Last-Modified或Etag数据，再次浏览时浏览器将提交这些数据到服务器，验证本地版本是否最新的，如果为最新的则服务器返回304代码，告诉浏览器直接使用本地版本，否则下载新版本。一般来说，有且只有静态文件，服务器端才会给出这些数据。
4、服务器强制要求浏览器缓存文件，并设置了过期时间。在缓存未到期之前，浏览器将直接使用本地缓存文件，不会与服务器端产生任何通信。
我们要做的是尽量强制浏览器到第四种状态，特别是对于JS、CSS、图片等变动较少的文件。
三、使用压缩组件
IE和Firefox浏览器都支持客户端GZIP，传输之前，先使用GZIP压缩再传输给客户端，客户端接收之后由浏览器解压，这样虽然稍微占用了一些服务器和客户端的CPU，但是换来的是更高的带宽利用率。对于纯文本来讲，压缩率是相当可观的。如果每个用户节约50%的带宽，那么租用来的那点带宽就可以服务多一倍的客户，并且缩短了数据的传输时间。
四、图片、JS的预载入
预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL 作为参数传入。
function preLoadImg(url) {
var img = new Image();
img.src = url;
}
可以在登录页面预载入JS和图片
五、将脚本放在底部
脚本放在顶部带来的问题，
1、 使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞
2、 在下载脚本时会阻塞并行下载
放在底部可能会出现JS错误问题，当脚本没加载进来，用户就触发脚本事件。
要综合考虑情况。
六、将样式文件放在页面顶部
如果样式表任在加载，构建呈现树就是一种浪费，样式文件放在页面底部可能会出现两种情况：
1、 白屏
2、 无样式内容的闪烁
七、使用外部的JS和CSS
将内联的JS和CSS做成外部的JS、CSS。减少重复下载内联的JS和CSS。
八、切分组件到多个域
主要的目的是提高页面组件并行下载能力。但不要跨太多域名，建议采用2个子域名。
九、精简JS
可以做到两个级别
1、精简：从代码中移除不必要的字符以减少其大小，
2、混淆：在精简的同时，还会改写代码，函数、变量名被转换成更短的字符串
可以使用ShrinkSafe来精简JS http://shrinksafe.dojotoolkit.org/
十、精简CSS
从代码中移除不必要的字符以减少其大小，
可以使用CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor /
十一、 精简图片、Flash
对大图片、Flash，要在效果和大小之间做出平衡。
二、页面请求分析
从输入URL到页面呈现需要下面5个步骤
1． 输入URL地址或者点击URL的一个链接
2． 浏览器根据URL地址，结合DNS，解析出URL对应的IP地址
3． 发送HTTP请求
4． 开始连接请求的服务器并且请求相关的内容
5． 浏览器解析从服务器端返回的内容，并且把页面显现出来
上面基本上就是一个页面从请求到实现的基本过程，下面我们将剖析这个过程。
当输入URL之后，浏览器就要知道这个URL对应的IP是什么，只有知道了IP地址，浏览器才能准备的把请求发送到指定的服务器的具体IP和端口号上面。浏览器的DNS解析器负责把URL解析为正确的IP地址。这个解析的工作是要花时间的，而且这个解析的时间段内，浏览器不是能从服务器那里下载到任何的东西的。浏览器和操纵系统提供了DNS解析缓存支持。
当获得了IP地址之后，那么浏览器就向服务器发送HTTP的请求，过程如下：
1．浏览器通过发送一个TCP的包，要求服务器打开连接
2．服务器也通过发送一个包来应答客户端的浏览器，告诉浏览器连接开了。
3．浏览器发送一个HTTP的GET请求，这个请求包含了很多的东西了，例如我们常见的cookie和其他的head头信息。
这样，一个请求就算是发过去了。
请求发送去之后，之后就是服务器的事情了，服务器端的程序把最后的结果发送到客户端。
其实首先到达浏览器的就是html的那些文档，所谓的html的文档，就是纯粹的html代码，不包含什么图片，脚本，CSS等的。也就是页面的html结构。因为此时返回的只是页面的html结构。这个html文档的发送到浏览器的时间是很短的，一般是占整个响应时间的10%左右。
这样之后，那么页面的基本的骨架就在浏览器中了，下一步就是浏览器解析页面的过程，也就是一步步从上到下的解析html的骨架了。
如果此时在html文档中，遇到了img标签，那么浏览器就会发送HTTP请求到这个img响应的URL地址去获取图片，然后呈现出来。如果在html文档中有很多的图片，flash，那么浏览器就会一个个的请求，然后呈现，如果每个图片都要请求，那么就要进行之前说的那些步骤：解析url，打开tcp连接等等。打开连接也是要消耗资源的，就像我们在进行数据库访问一样，我们也是尽可能的少开数据库连接，多用连接池中的连接。道理一样，tcp连接也是可以重用的。http1.1提出了持久连接（persistent connection）的概念，也就是说同一条 HTTP 连接，可以同时处理多个请求，减少tcp连接。
当页面的html骨架载入了之后,浏览器就开始解析页面中标签,从上到下开始解析。
首先是head标签的解析，如果发现在head中有要引用的JS脚本，那么浏览器此时就开始请求脚本，此时整个页面的解析过程就停了下来，一直到JS请求完毕。之后页面接着向下解析，如解析body标签，如果在body中有img标签，那么浏览器就会请求img的src对应的资源，如果有多个img标签，那么浏览器就一个个的解析，解析不会像JS那样等待的，会并发的下载。
本文链接
IE 下与元素重叠的区域为 img（该元素在上img在下),且该元素无背景(background:none、transparent)，无可见内容(如 display none,visibllity hidden,left:-9999px; ) ,则该区域无法触发鼠标事件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>test</title>
<style>
.ad-gallery{
position: relative;
width: 400px;
height: 350px;
overflow: hidden;
}
.ad-gallery .ad-prev,.ad-gallery .ad-next{
position: relative;
display: inline-block;
*display: inline;
*zoom:1;
float: left;
width:200px;
height: 100%;
z-index:100;
background-image: url('about:blank'); /* IE <10，与元素重叠的区域为 img（该元素在上img在下),且该元素无背景(background:none、transparent)，无可见内容(如 display none,visibllity hidden,left:-9999px; ) ,则该区域无法触发鼠标事件 */
}
.ad-gallery .prevHandle ,.ad-gallery .nextHandle{
position:absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
*top:50%;
*left:50%;
*margin-left: -50px;
*margin-top: -75px;
width: 100px;
height: 150px;
line-height: 150px;
background: #313131;
font-size: 14px;
text-align: center;
color: #ddd;
background: #313131;
display: none;
/*visibility: hidden;*/
/*left:-9999px; */
}
.ad-gallery .ad-img{
position: absolute;
top:0;
left:0;
z-index: 0;
width: 100%;
height: 100%;
}
.ad-gallery .desc{
position: absolute;
left: 0px;
bottom: 0px;
margin:0;
width: 100%;
height: 50px;
line-height: 50px;
background: #313131;
color: #eee;
text-indent: 10px;
z-index: 99;
}
.opacity60{
*filter:alpha(opacity=60);/*IE6、7*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)";/*IE8*/
opacity: 0.6;
}
</style>
</head>
<body>
<div id="gallery" >
<img src="/cnblogs_com/ecalf/431722/o_7_4c135bd08efea.jpg" />
<div ><div >上一张</div></div>
<div ><div >下一张</div></div>
<div >image description</div>
</div>
<!--test-->
<div >
<img width="100" height="50" src="/cnblogs_com/ecalf/431722/o_7_4c135bd08efea.jpg" />
<div onmouseover="alert(1);"></div>
</div>
<script>
var gallery = document.getElementById("gallery");
var elmInGallery = gallery.getElementsByTagName("*");
var mouseover = function(event){
event = event||window.event;
var target = (event.srcElement||event.target);
console.log('============= event log ===============');
console.log('1. ',this.className,' | ',target.className,' | ',target==this?'eventSrc':'eventTraval');
if((/ad-prev|ad-next/).test(this.className)){
console.log('2. ','handle active');
this.getElementsByTagName("div")[0].style.display = "block";
}
};
for(var i=0;i<elmInGallery.length;i++){
elmInGallery[i].onmouseover = mouseover;
}
</script>
</body>
</html>
本文链接
摘取自：http://www.cnblogs.com/kei0/archive/2012/08/29/2661947.html
PNG图片格式特点：
Png这种图片格式包括了许多子类，但是在实践中大致可以分为256色的png和全色的png，你完成可以用256色的png代替gif，用全色的png代替jpeg，Png是完全支持alpha透明的(透明，半透明，不透明)，尽管有两个怪异的现象（在ie6下）。
png是一种无损耗的图像格式，这也意味着你可以对png图片做任何操作也不会使 得图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式。
PNG在ie中的怪异表现：
由上面可以总结：
(a)全透明的png8可以在任一浏览器正常显示（就像gif一样）。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明，其它浏览器都能正常显示半透明。这个bug并不需要特殊对待，因为在不支持半透明的浏览器下只是显示为全透明，对用户体验影响不大，它反而是透明gif的加强版。
(b)第二个bug没有什么好的方法解决，只能通过(AlphaImageLoader滤镜和htc)方法来处理。
更多关于PNG：
PNG8
256色PNG的别名，无损格式，体积最小，但最多只支持256色
PNG24
全色PNG的别名，除了png8的特点，理论上可以存储2的24次方种颜色，但ie6之前的版本对此格式兼容有问题
PNG32
全色PNG的别名，除了以上的特点外，体积稍大
相比GIF
PNG 8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以，大多数情况下，你都应该用PNG8不是GIF（除了非常小的图片GIF会有更好的压缩外）。
相比JPEG
JPEG比全色PNG具有更加好的压缩，因此也使得JPEG适合照片，但是编辑JPEG过程中容易造成质量的损失，所以全色PNG适合作为编辑JPEG的过渡格式.
更多图片格式详解：
淘宝UED：图片格式与设计那点事儿
本文链接