发现的一篇关于前端优化的文章，总结的很全面，要做到面面俱到很难，往往是想优化而没有时间去优化，就像我们公司，一个项目连着一个项目~新员工的培训都省了，还想优化前端啊，不过我真的想有机会和老大好好的整合下公司网站的前端代码~不过要把前端优化的工作放在平时的写代码中去，就不需要刻意的后期优化了。在项目开发中，后台需要搭建好框架，前端更是需要搭建好框架，并且在页面实现中得到实现，只有这样才能事半功倍。

前段时间简单的研究了下前端优化相关的知识，本文算是一个阶段性的总结，或者当做一个优化的参考List。

前言

前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么？

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
   总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；第二类则是代码级别的优化，例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

jQuery的ready方法的是开发中经常用到的，作用相当于我们的body onload，是当页面DOM准备就绪的时候才运行的代码，最常用的就是在DOM渲染加载之前，先给document绑定ready事件，然后当页面DOM都准备好之后才运行这个事件。
关于jQuery的ready有以下几种用法

最常用也是最标准的ready方法

$(document).ready(){
});

简写的jQuery ready()

$(function(){
});

这是因为jQuery的选择器第一个参数假如为空，那么默认的是document

项目中假如碰到了上传图片文件时，需要在后台加检测程序，判断图片类型是否合法，以防止一些非法的文件上传，如果对js的Image对象比较熟悉我们可以使用下面的方法在前端层次上检查下图片类型是否合法。

       var img = new Image();
        img.onload = function(){
            alert('load');
        };
        img.onerror = function(){
            alert('error');
        };
        img.src = 'logo.png';

最近一次的开发中遇到了IE下setTimeout传参数的问题，在IE下setTimeout是不会传参数的，例如下面的代码，在IE下就不会传入a,b两个参数

setTimeout(function(a,b){
alert(a+b);
},1000,'hello,','world!'); 

在实际项目中我们有些需求必须传入参数要setTimeout的function进行处理，那么我们就需要利用js的call及其apply的方法，来解决IE下的setTimeout传参bug：

公司网站越来越多的使用了wBox，比如最新的产品普加邻居，封装了wBox(jQuery的一款弹出框插件)，房产展示页面的房贷计算器采用的就是wBox，搜索结果页面采用的也是wBox，但是相对于其他页面，搜索结果页面每一个li下面会有三个不同的wBox样式，我不可能每个都是手写一段wBox代码吧~

昨天同事负责一个首页广告，广告采用的是多帧GIF动画，在HTML演示页面中采用的是jpg，运用Image对象的load事件来加上广告，这样就避免了广告播放出来而图片还没有加载完成的尴尬局面，但是却遇到了一个超级郁闷的事情，那就是在IE中load事件不停的执行，找了很多原因，最后在google上找到了：原来是多帧GIF引起的Image().load事件重复触发的问题。又一次长见识了！而且还有人发帖说可以通过这个bug来模拟js的多线程~

解决方法：

var img=new Image();
> img.load=function(){
>     //do something
>    img.load=null;//重新赋值为null
> }
> img.src='××.gif';

onbeforeunload 是window的一个事件，目前Firefox，IE都支持，主要用来提示用户是否真的要离开该页面，通常在一些比较重要的数据提交之前，防止用户误操作导致数据丢失。典型的应用如gmail中，在写邮件的时候，如果刷新页面或者关闭页面，会出现提示。

但是在IE下点击一些a标签时，也会触发onbeforeunload事件。并且href中写javascript:void(0)也不行，而在Firefox中不会出现类似的情况。于是查资料对onbeforeunload事件重新认识了一下：

a标签触发事件的顺序

onclick、onbeforeunload跟href三者之间的先后运行关系是这样的：onclick > onbeforeunload > href，知道了这个道理，我们就可以通过一些方法阻止onbeforeunload。另外在IE浏览器中，假如href为#，那么也不会触发onbeforeunload事件。

今天查看我网站的地图已经被谷歌收录了5900条，而百度也开始收录了，很欣慰~再接再厉，今天写的这一篇Google map api教程是关于在Google地图上添加control按钮的，用到的是Google Map API的**GControl**对象，通过initialize的方法插入一个div到地图上，再通过new **GControlPosition**设置按钮的位置，最后通过Gmap的**addControl**方法添加这个按钮。最终效果截图如下：

实现方法原理分析

首先建立一个GControl的原型control，然后定义其initialize 方法：主要是建立一个div，并且制定div的onclick事件，最后通过gmap.getContainer().appendChild(buttonDiv)插入到地图中去。
最后定义getDefaultPosition的方法，通过GControlPosition对象设置按钮所在地图的具体位置。

最近花了两晚上的时间写了一个google地图的应用程序，采用了map api，weather api，localsearch api，我想的是有空写一些关于Google Map API的文章，今天就写一个关于自动缩放地图到合适级别的方法，这里说的自动缩放，指的是地图上已经加入了很多Gmarker点，而这些点任何地方都有，我们为了要它们在地图上能够都显示出来，必须要个Google Map设置一个合适的缩放级别和中心点，这里用的方法是Google Map API的GLatLngBounds。

假设我们创建的Google Map对象为gmap = new GMap2()，我们添加所有GMarker都保存在一个名字为markers的数组里，它们的点遍布各地，我们要做的就是要这些点都在地图上显示出来，也就是自动缩放地图（set auto zoom）。

IE6在背景图片缓存上有一个bug：它会每次都从服务器端读取背景图片。例如我们使用a:hover更换背景图片，在IE6下会出现每次鼠标滑过则重新向服务器请求图片，如果服务器反应较慢，那么hover效果就会出现短暂的空白，令人极度不爽。虽然可以通过CSS sprites的方式解决问题的，但效果差强人意。

示例：
a{ background:url(normal.gif); } a:hover { background:url(hover.gif); }
如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果，在firefox下是没有什么问题的，第一次加载之后，浏览器都会从缓存读取背景图片.

解决方法

具体的解决方法就是在页面中加入一段简单的javascript脚本，告诉IE6：本地有背景图片的话就不要麻烦服务器了。 document.execCommand("BackgroundImageCache",false,true);

关于这段脚本的放置方式有两种：