前端优化方案-JavaScript 优化方案 收藏 此文于2010-06-04被推荐到CSDN首页

前端优化方案-JavaScript 优化方案 收藏 此文于2010-06-04被推荐到CSDN首页
如何被推荐？

Author: 李丽媛

Date: 2010/6/2

Email: lly219#gmail.com

2       JavaScript 优化方案

2.1          测试驱动开发

为了编写可维护的 JavaScript ，测试驱动是必不可少的。因为每个测试都起到质量反馈的作用，给后期维护和修改创建了一个安全保护网并提供了一份可执行的文档。通过测试，我们可以保证所有的功能被覆盖，也避免了重写代码后再进行测试的高昂代价。

解决方案 ：以后的开发中使用 JsUnit 和 JSMock 进行测试驱动。

 

2.2          框架

现在已经形成部分框架，但都不够复用和抽象。并且缺少文档说明，让后期开发人员很难进行维护和使用。

解决方案 ：对框架进行封装、抽象、改进，并且完善文档。

 

2.3          文件压缩（ YUI Compressor ）

a)         移除注释

b)         移除额外的空格

c)         细微优化

d)         标识符替换

解决方案 ：代码发布时，使用以上压缩工具进行压缩。

 

2.4          使用 JSON

JSON 是一种轻量级的数据格式，体现在它的结构定义非常简单，而且已成为当今 Web 端的主流数据格式标注。

解决方案 ：把能更改为 JSON 数据格式的数据尽量进行更改。

 

2.5          浏览器兼容

Web 时代，主流浏览器兼容是必须的。而且当 IE 9 来到时，向下兼容可能会出现一些问题。时代在发展， Google 都摈弃了 IE6 ， 既然都有权要求用户使用 IE 浏览器，为何不能要求用户对浏览器升级，或满足使用其它浏览器的用户呢？

       解决方案 ：更改代码，使其兼容主流浏览器。

 

2.6          使用一些提高 JavaScript 效率的基本常识方法

a)         使用三元操作符代替 if…else… ；

b)         减少 DOM 访问；

c)         尽量使用 switch ；

d)         简化常用对象定义（ var obj = {}; 代替 var obj = new Object(); ）；

e)         避免使用 Eval ；

f)          尽量使用语言本身的构造和内建函数；

g)         对高级对象采用缓存；

h)         避免过多的应用层次和不必要的方法调用。

    解决方案 ：编写代码过程中遵循以上方法。

   

2.7          代码的可读性

是程序员都可以写出机器可读的代码，但是要做一名好的程序员就必须写出人类可读的代码。

解决方案 ：在需要的地方增加注释；降低代码的层次嵌套；遵循代码的重用规则；规范命名等等；。

 

2.8          常量和全局变量

JavaScript 文件较多，里面的常量和全局变量过杂过乱。

解决方案 ：常量单独放到一个 js 文件中进行定义和管理；全局变量应有详细的文档说明。

 

2.9          查找瓶颈

a)         局域网不慢，互联网慢则为加载慢；

b)         Chrome 不慢， IE 慢则为渲染慢；

c)         越用越慢则为内存泄露。

        解决方案 ：针对 a) 可对文件进行压缩；动态加载；加载提示。针对 b) 可缓存经常用到的节点查询结果；注意 DOM 的刷新；减少加载减少解析；晚加载晚解析。针对 b) 可参见： JS内存泄露 。

 

2.10       split 应使用 ascii 码

看到分割的时候使用了一些常用的字符，这样当字符串中出现该字符时，就会产生影响。

    解决方案 ： split 分割时使用 ascii 码。

 

2.11       14 Rules for Faster-Loading Web Sites

解决方案 ：根据实际情况选择适合的规则，逐一改进。

 

3 ．图片优化方案
3.1.         规范命名

a)         命名有意义，让人一看便知；

b)         按标准分类，放入相应的文件夹中。

    解决方案 ：对图片重新进行整理，重命名，重新分类，重新切片。牵扯到的 CSS ， JavaScript 也一律进行修改。

 

3.2.         图片压缩

解决方案 ：由美工进行修改。

 

3.3.         格式统一，可按照需求使用 gif 和 jpg

解决方案 ：由美工进行修改。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/Vanessa219/archive/2010/06/03/5644683.aspx