JavaScript优化基本篇

本文章适合于与作者一样想要学习JavaScript的的"非前台专业"的大学生或者后台工程师.

如果,你想进行进一步的优化,那么请点击JavaScript性能优化小知识点总结

个人笔记整理:


一.缩短代码下载时间 
源码 如下:

window.onload=function love(){
    var words=new Array("这是一个数组");
    var str=words.join("")
    var i= 0;
    var arr=str.split("");
    var timer = document.getElementById("text").innerHTML(function (){
     document.getElementById("text").innerHTML =   document.getElementById("text").innerHTML +arr[i];
     i++;
    }
   },200);
}

A.将之前为了提高可读性命名的长的变量名，函数名重新命名.(这一步建议放在较后位置) 
个人推荐一个在线工具网站:在线工具箱

window.onload = function L() {
    var w=new Array("这是一个数组");
    var w=words.join("")
    var i= 0;
    var a=s.split("");
    var t = setInterval(function() {
        if (i < s.length) {
            document.getElementById("text").innerHTML = document.getElementById("text").innerHTML + a[i];
            i++;
        }
    }, 200);
}

B. 使用JavaScript的简略语法 
1. 减少语句声明.将布尔值改为1&0， 
2. 将new Array()  &  new Object用“[]” and “{}”替代等等(其实这样也可以缩短运行时间). 
3. 在条件非语句中使用逻辑非操作符“！”来替代. 
4. 合理使用”+=”,以及”-=”

window.onload = function L() {
    var w = ["这是一个数组"],
        s = w.join(""),
        i = 0,
        a = s.split(""),
        t = setInterval(function() {
            if (i < s.length) {
                document.getElementById("text").innerHTML += a[i];
                i++;
            }
        }, 200);
   }


 if(s!=null) 可以改为 if(!s)

C.let与var的区别 
手册：使用 let 来声明常量,使用 var 来声明变量。一个常量的值在编译时并不需要获取,但是你只能为它赋值一次。也就是说你可以用常量来表示这样一个值:你只需要决定一次,但是需 要使用很多次。

window.onload = function L() {
    let w = ["这是一个数组"];
    var s = w.join(""),
        i = 0,
        a = s.split(""),
        t = setInterval(function() {
        if (i < s.length) {
            document.getElementById("text").innerHTML += a[i];
            i++;
        }
       }, 200);
   }

D.去除不必要的字符，包括注释，不必要的空格，换行.可以使用格式化工具,现实中,这是优化的最后一步. 
个人推荐:在线工具箱

window.onload=function L(){let w=["这是一个数组"];var s=w.join(""),i=0,a=s.split(""),t=setInterval(function(){if(i<s.length){document.getElementById("text").innerHTML+=+a[i];i++}},200)}

二.合理声明变量


注意:Javascript是执行前对整个文件的声明部分做完整分析(包括局部变量)，从而确定实变量的作用域。


直接上代码

function fuTestConsoleLog(){
    var intTestA=0;
    intTestB=0;
}


funtion test1(){
    console.log(intTestA);
    //未声明
    //因为显式声明为局部变量,函数执行之后,销毁.
}


funtion test2(){
    console.log(intTestB);
    //可以,因为隐式声明为全局变量,浏览器关闭后销毁.
}

下面是一段引用,来自前端开发指南|菜鸟教程


过分依赖全局变量是我们组所有人 – 特别是我自己 –特别有负罪感的一件事。
关于为啥全局变量不好的讨论是相当直接的：这增加了脚本和变量冲突的概率，而且源文件和命名空间本身都会充斥着数不清的命名模糊的变量。 Douglas Crockford 坚信一个Javascript应用的代码质量可以用其中使用的全局变量数来评价，越少越好。
由于并不是什么都可以定义成local的（不过要诚实，其实你现在考虑的那个是可以的，别偷懒），你需要想办法整理你的变量以避免冲突，并把命名空间的膨胀减到最小。最简单的方法就是采用单变量或者把用到这些全局变量的模块尽可能减少。 
Crockford提到YUI只用了一个全局变量，YAHOO。他在他的博文 “全局统治” 中讨论了更多的细节问题。 考虑这种情况：对于小型web应用，全局变量通常用于保存应用级的设置，可以用你的项目名或者settings作为命名去定义一个对象，这样总的来说会更好
// 被污染的全局命名空间 
ar settingA = true;  
var settingB = false; 
var settingC = "test";  
var settings = { settingA: true, settingB: false, settingC: "test" } 
我们可以通过避免使用全局变量来减少冲突概率，但是把命名空间标准化成一样的，岂不是会增加各个应用之间产生冲突的概率么？呃，这个担忧确实有道理。所以，建议你用自己特定的应用名作为全局变量的命名空间，或者用和jQuery采取的$.noConflict() 模式相同的方法重新分配你的命名空间.  
var myAppName = { settings: { settingA: true } } 
//访问全局变量  
myAppName.settings.settingA; 

// true

三.使用内置函数缩短编译时间


JavaScript内置函数库使用无需编译,而开发者编写的函数需要在运行前进行编译,所以内置函数要比自己编写的函数快得多.


四.合理使用if,switch语句 
1. 判断超过两种时,switch快于if,而且其case分句,支持任何类型的数据. 
2. if语句,应当按照各种情况按可能性大小排列 
3. 及时”break”&”continue”跳出,避免运行无用语句 
4. 循环的性能,提前缓存,避免重复计算.(其实,在其他地方提前缓存也很重要,此处一提,不再重复.如需学习,自行百度).


举个栗子:

var aTest = new Array(1024);
    for (var i = 0; i < aTest.length; i++) {
        // 长度计算1024次
    }
    for (var i = 0, len = aTest.length; i < len; i++) {
        // 计算一次
    }

个人推荐 
本文引用 
本文中引用来自于一篇很好的文章,个人比较推荐,更多细节请点击前端开发指南|菜鸟教程 观看,原文javascript部分目录如下:


1. 代码留空和格式
2. 注释
3. 总是使用 === 比较符
4. 使用 .parseInt() 的时候，总是指定第二个 'radix' 参数
5. 避免比较 true 和 false
6. 避免污染全局命名空间
7. 驼峰法变量命名
8. 循环的性能 - 缓存数组长度
9. 循环的性能 - 使用 'break;' 和 'continue;'
10. 函数调用不要传输太多的参数
11. 把 'this' 映射为 'self'
12. 我能用 Boolean 吗？
13. 尽量减少重新绘制和重新布局
14. 不要用微秒来产生唯一的ID
15. 检测特性，而不是检测浏览器类型
16. 使用可读的毫秒数
关于高级篇 
当然其实还有一篇更详细,更干货的JavaScript性能优化高级篇(“JavaScript性能优化小知识总结”,不是我写的),值得你看看JavaScript性能优化小知识点总结