前端性能优化精品PPT课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
var aTest = []; var oTest = {pro1:"pro1",pro2:"pro2"};
JAVASCRIPT性能优化
二、执行时间优化
据测试，javascript的执行效率要比编译型的C程序慢5000 倍；比解释型的Java慢100倍；比解释型的Perl慢10倍。 1、尽量使用局部变量 在函数中，总是使用var来定义变量。无论何时使用var都 会在当前的范围类创建一个局部变量。如果不使用var来 定义变量，那么变量会被创建在window范围内，那么每 次使用这个变量的时候，解释程序都会搜索整个范围树。 同时全局变量要在页面从浏览器中卸载后才销毁，而局部 变量在函数执行完毕即可销毁，过多的全局变量增加了不 必要的内存消耗。
}
其他：if(!Ext.isEmpty(oTest)){ // dosomething
}
JAVASCRIPT性能优化
6、使用数组和对象字变量 var aTest = new Array; var oTest = new Object; oTest.pro1 = "pro1" oTest.pro2 = "pro2";和下面的代码作用是完全相 同的，但是下面的代码可以节省更多的字节。
4、反转循环 循环在各种编程语言中得到大量应用，所以保持 循环的高效性尤为重要。按照反向的顺序进行循 环迭代是一种有效的方法。
for(var i=aValues.length-1; i >= 0; i--){ //do something
} 反转循环有利于减低算法的复杂度。它用常数0作 为循环控制语句以减小执行时间。
同时也要尽量减少else if语句的数量，并且将条件 按照二叉树的方式进行排列
8、switch和if 一般来说超过两种情况时，最好使用switch语句。常用 switch来代替if语句，最高可令执行快10倍。在javascript 中就更加可以从中获益，因为case语句可以使用任何类型 的值。
9、避免字符串连接 一旦一次要使用多个字符串的连接（比如，大于五个）， 最好使用如下方式：
var i=aValues.length-1; do{
//do somethin }while(--i>=0) 这个循环已经被完全优化了
6、展开循环 可以考虑将循环展开，一次执行多个语句。
7、优化if语句 使用if语句和多个else语句时，一定要把最有可能 的情况放在第一个，然后是第二可能出现的情况， 如此排列，这样就减少了要进行多次测试才能遇 到正确条件的情况。
//do something i++; }while(i < aValues.length)
这段代码比用while循环更快，因为它用循环反转来进一步地优化：
var i=பைடு நூலகம்Values.length-1; do{
//do something i--; }while(i>=0) 也可以将自减操作直接放进控制语句中，以减少额外的语句。
5、翻转循环 用do..while循环来替代while循环以进一步减少执行时间。假设有如下 while循环：
var i=0; while(i < aValues.length){ //do something i++;
} 可用do..while循环重写上面的代码而不改变行为：
var i=0; do{
11、存储常用的值 当多次使用到一个值得时候，可先将其存储在局部变量中 以便快速访问。尤其对于通常使用对象的特性来进行访问 的值更加重要。如：
2、避免使用with语句 使用with语句能够减少一定的代码长度，但 是在使用with语句时，要强制解释程序不仅 在范围树内查找局部变量，还强制检测每 个变量及指定的对象，看其是否为特性。 因为，我们也可以在函数中定义同明的变 量。
3、选择正确的算法 只要有可能就应该用局部变量或者数字索 引的数组来替代命名特性。如果命名特性 要多次使用，就先将它的值存储在局部变 量中，一避免多次使用线性算法请求命名 特性的值
JAVASCRIPT性能优化
5、缩短否定检测 一般的写法：
if(oTest != undefined){ // dosomething
} if(oTest != null){
// dosomething } if(oTest != false){
// dosomething }
简洁的写法：
if(!oTest){ // dosomethin
JAVASCRIPT性能优化
• 合适的JS打包容量 单个TCP-IP包中能放入的字节数是1160，所以最好将每个 javascript文件的大小控制在1160字节以内以获取最优的 下载时间
• 打包的原理 1、删除注释 2、删除制表符、空格和换行 在程序的每行结尾都必须正 确地添加分号 3、替换变量名 将所有变量名替换成无意义的简短变量名 4、替换布尔值 true等于1，false等于0，因此可以将字面 量的true都用1来替换，而false用0来替换
var buf = new Array();
for(var i = 0; i < 100; i++){
buf.push(i.toString());
}
var all = buf.join("");
10、优先使用内置方法
只要可能，就应该考虑优先使用内置方法。 因为内置方法是用C++或者C之类的语言编 译的，运行起来比必须实时编译的 javascript要高效的多。比如你可能像要自 己编写一个求阶乘的函数，但是实际上你 应该使用javascript内置的Math.pow()方法。
前端性能优化
一.JAVASCRIPT性能优化 一.包括两部分：下载时间和执行时间
二.页面元素优化 三. 包括：图片下载优化、页面标签优化
三.内存优化 包括：各个浏览器的处理内核介绍、 缓存的使用、内存释放、
四. 内存测试工具的使用
JAVASCRIPT性能优化
一、下载时间优化 编译性语言：在诸如java,c,c++的语言中， 开发人员根本无需考虑变量名的长度以及 长篇大论的注释，因为这些在编译时都会 被删除。 解释性语言 ：javascript作为一种解释性 语言 ，编写的javascript程序文件会原模原 样地下载到客户端
JAVASCRIPT性能优化
二、执行时间优化
据测试，javascript的执行效率要比编译型的C程序慢5000 倍；比解释型的Java慢100倍；比解释型的Perl慢10倍。 1、尽量使用局部变量 在函数中，总是使用var来定义变量。无论何时使用var都 会在当前的范围类创建一个局部变量。如果不使用var来 定义变量，那么变量会被创建在window范围内，那么每 次使用这个变量的时候，解释程序都会搜索整个范围树。 同时全局变量要在页面从浏览器中卸载后才销毁，而局部 变量在函数执行完毕即可销毁，过多的全局变量增加了不 必要的内存消耗。
}
其他：if(!Ext.isEmpty(oTest)){ // dosomething
}
JAVASCRIPT性能优化
6、使用数组和对象字变量 var aTest = new Array; var oTest = new Object; oTest.pro1 = "pro1" oTest.pro2 = "pro2";和下面的代码作用是完全相 同的，但是下面的代码可以节省更多的字节。
4、反转循环 循环在各种编程语言中得到大量应用，所以保持 循环的高效性尤为重要。按照反向的顺序进行循 环迭代是一种有效的方法。
for(var i=aValues.length-1; i >= 0; i--){ //do something
} 反转循环有利于减低算法的复杂度。它用常数0作 为循环控制语句以减小执行时间。
同时也要尽量减少else if语句的数量，并且将条件 按照二叉树的方式进行排列
8、switch和if 一般来说超过两种情况时，最好使用switch语句。常用 switch来代替if语句，最高可令执行快10倍。在javascript 中就更加可以从中获益，因为case语句可以使用任何类型 的值。
9、避免字符串连接 一旦一次要使用多个字符串的连接（比如，大于五个）， 最好使用如下方式：
var i=aValues.length-1; do{
//do somethin }while(--i>=0) 这个循环已经被完全优化了
6、展开循环 可以考虑将循环展开，一次执行多个语句。
7、优化if语句 使用if语句和多个else语句时，一定要把最有可能 的情况放在第一个，然后是第二可能出现的情况， 如此排列，这样就减少了要进行多次测试才能遇 到正确条件的情况。
//do something i++; }while(i < aValues.length)
这段代码比用while循环更快，因为它用循环反转来进一步地优化：
var i=பைடு நூலகம்Values.length-1; do{
//do something i--; }while(i>=0) 也可以将自减操作直接放进控制语句中，以减少额外的语句。
5、翻转循环 用do..while循环来替代while循环以进一步减少执行时间。假设有如下 while循环：
var i=0; while(i < aValues.length){ //do something i++;
} 可用do..while循环重写上面的代码而不改变行为：
var i=0; do{
11、存储常用的值 当多次使用到一个值得时候，可先将其存储在局部变量中 以便快速访问。尤其对于通常使用对象的特性来进行访问 的值更加重要。如：
2、避免使用with语句 使用with语句能够减少一定的代码长度，但 是在使用with语句时，要强制解释程序不仅 在范围树内查找局部变量，还强制检测每 个变量及指定的对象，看其是否为特性。 因为，我们也可以在函数中定义同明的变 量。
3、选择正确的算法 只要有可能就应该用局部变量或者数字索 引的数组来替代命名特性。如果命名特性 要多次使用，就先将它的值存储在局部变 量中，一避免多次使用线性算法请求命名 特性的值
JAVASCRIPT性能优化
5、缩短否定检测 一般的写法：
if(oTest != undefined){ // dosomething
} if(oTest != null){
// dosomething } if(oTest != false){
// dosomething }
简洁的写法：
if(!oTest){ // dosomethin
JAVASCRIPT性能优化
• 合适的JS打包容量 单个TCP-IP包中能放入的字节数是1160，所以最好将每个 javascript文件的大小控制在1160字节以内以获取最优的 下载时间
• 打包的原理 1、删除注释 2、删除制表符、空格和换行 在程序的每行结尾都必须正 确地添加分号 3、替换变量名 将所有变量名替换成无意义的简短变量名 4、替换布尔值 true等于1，false等于0，因此可以将字面 量的true都用1来替换，而false用0来替换
var buf = new Array();
for(var i = 0; i < 100; i++){
buf.push(i.toString());
}
var all = buf.join("");
10、优先使用内置方法
只要可能，就应该考虑优先使用内置方法。 因为内置方法是用C++或者C之类的语言编 译的，运行起来比必须实时编译的 javascript要高效的多。比如你可能像要自 己编写一个求阶乘的函数，但是实际上你 应该使用javascript内置的Math.pow()方法。
前端性能优化
一.JAVASCRIPT性能优化 一.包括两部分：下载时间和执行时间
二.页面元素优化 三. 包括：图片下载优化、页面标签优化
三.内存优化 包括：各个浏览器的处理内核介绍、 缓存的使用、内存释放、
四. 内存测试工具的使用
JAVASCRIPT性能优化
一、下载时间优化 编译性语言：在诸如java,c,c++的语言中， 开发人员根本无需考虑变量名的长度以及 长篇大论的注释，因为这些在编译时都会 被删除。 解释性语言 ：javascript作为一种解释性 语言 ，编写的javascript程序文件会原模原 样地下载到客户端