javascript开发性能优化篇

前端开发性能优化篇

撰写人：庞玉胜

Javascript篇

优化图片

合并图片

优化图片spirite.就是把多张图片合成一张。为了减少请求的次数。 雅虎的解释：

在Spirite中水平排列你的图片，垂直排列会稍稍增加文件大小；

Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；

便于移动，不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。 100×100的图片为1万像素，而1000×1000就是100万像素。

图片的合并虽然可以减少请求的次数，但是会增加图片的大小。所以我们要知道什么情况下需要合并，什么情况下不需要合并。 不要缩放图片

要保持图片和在网页上图片大小一致。大了占地方，小了失真。 不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需

要：

<img width="100" height="100" src="mycat.jpg" alt="My Cat" /> 那么你的图片（mycat.jpg）就应该是100×100像素而不是把一个500×500像素的图片缩小使用。

设置图片的宽高

指定图像的宽度和高度，可以通过消除不必要的回流和重绘，使得图片更快的渲染

建议非动画图片使用PNG格式

你可以检查一下你的GIF图片中图像颜色的数量是否和调色板规格一致。 使用imagemagick中下面的命令行很容易检查： identify -verbose image.gif

如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。

尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。由于浏览器支持有限，设计者们往往不太乐意使用PNG格式的图 片，不过这都是过去的事情了。现在只有一个问题就是在真彩PNG格式中的alpha通道半透明问题，不过同样的，GIF也不是真彩格式也不支持半透明。因 此GIF能做到的，PNG（PNG8）同样也能做到（除了动画）。下面这条简单的命令可以安全地把GIF格式转换为PNG格式：

convert image.gif image.png

“我们要说的是：给PNG一个施展身手的机会吧！”

在所有的PNG图片上运行（或者其它PNG优化工具）。例如：

pngcrush image.png -rem alla -reduce -brute result.png 在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息（如EXIF信息）：

jpegtran -copy none -optimize -perfect src.jpg dest.jpg 增加域

1. 将资源分配到多个域上，通过增加(增倍)并行的下载数来提高页面的速度。

在http 1.1上。IE6,7最大连接数是2个。IE8是6个。Firefox2 是2个. Firefox3 是6个。

Safari 3,4 opera 9 ,10是4个 chrome1,2 是6个.

2. 避免请求图片时候，请求会带着cookie.

事件委托

在现在的 web 应用程序中，事件处理程序越来越多，越来越复杂，页面中随处可见的事件监听已经司空见惯，但同时引出了一个性能的问题。没绑定一个事件处理器都是有代价的。第一：加重了页面

的负担。（代码多了，文件大了）第二：每添加一个事件监听，载入页面时都会增加一次对被监听节点的访问。特别是页面onload的时候，就会拥堵页面的加载。占用的处理CPU的处理时间。第三：浏览器跟踪每个事件处理器，消耗内存。

一个简单的处理方法就是使用事件委托-----事件逐层冒泡并被父级元素捕获。使用事件委托只需要给最外层绑定一个处理器，就可以处理其子元素上触发的所有事件。利用事件冒泡，我们在父级节点捕获事件，判断这个事件的来源，做相应的处理。这样减少了对象事件的绑定，减少了事件的管理，同时减少了内存，提高了性能。这里说一句题外话，如果事件管理不好，会造成浏览器内存不断增大，甚至浏览器崩溃。事件管理不好，即使关闭浏览器，也不能释放内存。

、

1.1-事件流

Domready

windows.onload事件，是等所有外部元素（如图片）加载完才触发的，

这样就有可能需要：对于包含大量图片但只需html dom加载完就要执行javascript初始化.这时候就需要domready. S

function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

重绘和重排

重排是指当一个元素的几何属性发生改变，导致其他元素的几何属性（大小位置）发生改变。这个过程叫重排。

重绘是指浏览器会重新绘制受影响的部分到屏幕上。这个过程叫重绘。

什么时候会发生重排？

1. 添加或者删除可见的元素。

2. 元素改变位置。

3. 元素尺寸改变

4. 内容改变

5. 浏览器尺寸改变

渲染树变化的排队与刷新

由于每次重排都会产生计算的消耗，大多数浏览器通过队列化修改并批量执行来优化重排过程。而如下属性会强制刷新队列并要求计划任务立即执行。

offsetTop , offsetLeft , offsetWidth , offsetHeight scrollTop , scrollLeft , scrollWidth , scrollHeight clientTop , clientLeft , clientWidth , clientHeight getComputedStyle ( currentStyle in IE)

以上属性和方法需要返回最新的布局信息，因此浏览器不得不执行渲染队列中的“待处理变化”，而触发重排以返回正确的值。 如何减少重绘和重排

尽量使用cssText或者class类

例如：对一个元素进行修改。

e.style.display=’block’;

e.style.width=’15px’;

e.style.height=’15px’;

.

我们可以使用cssText

e.style.cssText=’width:15px;height;15px;display:block; ;’

或者使用class类

e.className=’className’;

这样只对DOM修改了一次。

使元素脱离文档流

e.style.display=’none’;

//对元素进行批量操作

e.style.display=’block;

创建文档碎片

var fragment=document.createDocumentFragment();

//向fragment添加碎片，

//然后将fragment 添加到父亲节点。

克隆对象

var new=element.cloneNode(true);

运算

位运算（最快的操作）

1. 按位与（&）

在项目中，开启某项权限的操作。例如

登录后的权限标记位。0：具备所有的权限，无限制；1：第一次会话/添加好友的时候，需要输入短信验证码；2：屏蔽短信传情的按钮；4：五节营销心情短语换成小图标；8：限制0/1好友的

用户自动登录；16：开启飞信助手；32：屏蔽新消息声音提醒的功能；64：屏蔽功能：在登录的时候自动向飞信助手发送消息，128：屏蔽数据上报的功能

假设我们想开启五节营销和飞信助手。

五节营销：4的二进制 100 飞信助手：16的二进制 10000 。 那么我们只需要配置一个20（4+16）.当我们在程序中判断是否开启飞信助手的时候，

我们只需要判断 20&4 是否等于0.等于0就没有开启。大于0就开启了。

10100

100 &

---------------

2. 按位或（|）

。。。。。

循环操作

//避免每次都查看数组a的长度

for(var i=0,len …… 此处隐藏：5328字，全部文档内容请下载后查看。喜欢就下载吧 ……