JavaScript优化基本篇 标签： javascript性能优化Web前端JQuery内核 2016-03-05 01:35 214人阅读

本文章适合于与做者同样想要学习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性能优化小知识点总结