JavaScript 성능 최적화 지식 요약

JavaScript의 성능 문제는 과소평가할 수 없습니다. 따라서 개발자는 JavaScript 프로그램을 작성할 때 몇 가지 세부 사항에 더 많은 주의를 기울여야 합니다. 이 기사에서는 JavaScript 성능 최적화에 대한 지식 포인트를 매우 자세하게 소개하며 이는 확실히 유용한 정보입니다.

서문

저는 javascript를 배웠고 "Sharp Development of Jquery Kernel 세부 설명 및 실습"도 읽었습니다. 아마도 자바스크립트 때문에 제대로 이해하지 못하거나 너무 멍청해서일지도 모르겠습니다. 더 중요한 것은 제가 생각을 잘 못하고 게으르기 때문에 본질에 대한 깊은 이해가 없다는 것입니다. 그것의.

나 자신을 발전시키고 싶지만 더 넓은 세상에 들어갈 수 없기 때문에 잘 살 수 있는 나만의 공간을 찾아야 하기 때문에 주로 jQuery를 의도적으로 또는 무의식적으로 사용하는 것에 대한 상식을 축적합니다. 성능 요구 사항이 발생하면 이를 달성할 수 있는 더 좋은 방법이 있는지 항상 궁금합니다.

다음은 참고용으로만 요약한 몇 가지 팁입니다. (먼저 일반적인 제목을 붙인 다음 짧은 문단을 사용하여 의미를 설명하고 마지막으로 데모를 사용하여 간략하게 설명하겠습니다.)

글로벌 검색은 피하세요

글로벌은 함수에서 사용됩니다. 전역 조회를 줄이기 위해 객체는 지역 변수로 저장됩니다. 왜냐하면 지역 변수에 액세스하는 것이 전역 변수에 액세스하는 것보다 빠르기 때문입니다

        function search() {
            //当我要使用当前页面地址和主机域名
            alert(window.location.href + window.location.host);
        }
        //最好的方式是如下这样  先用一个简单变量保存起来
        function search() {
            var location = window.location;
            alert(location.href + location.host);
        }

타이머

지속적으로 실행되는 타겟팅 코드에서는 setTimeout을 사용하지 말고 setInterval을 사용해야 합니다. 왜냐하면 setTimeout은 매번 타이머를 초기화하고 setInterval은 처음에만 타이머를 초기화하기 때문입니다

        var timeoutTimes = 0;
        function timeout() {
            timeoutTimes++;
            if (timeoutTimes < 10) {
                setTimeout(timeout, 10);
            }
        }
        timeout();
        //可以替换为：
        var intervalTimes = 0;
        function interval() {
            intervalTimes++;
            if (intervalTimes >= 10) {
                clearInterval(interv);
            }
        }
        var interv = setInterval(interval, 10);

문자열 연결

여러 문자열을 연결하려면

s+=a;s+=b;

s+=c;

는 s+=a + b + c

로 작성해야 하며, 컬렉션 문자열인 경우, 예를 들어, 동일한 문자열에 대해 += 연산을 여러 번 수행하는 경우 캐시를 사용하고 JavaScript 배열을 사용하여 수집한 다음 마지막으로

조인 메서드를 사용하여 연결

        var buf = [];
        for (var i = 0; i < 100; i++) {
            buf.push(i.toString());
        }
        var all = buf.join("");

with 문 피하기

함수와 유사하게 with 문은 자체 범위를 생성하므로 그 안에서 실행되는 코드의 범위 체인 길이를 늘립니다. 추가 효과로 인해 도메인 체인 검색의 경우 with 문에서 실행되는 코드는 외부에서 실행되는 코드보다 확실히 느립니다.

을 사용할 수 없는 경우에는 with 문

을 사용하지 마세요.

 with (a.b.c.d) {
            property1 = 1;
            property2 = 2;
        }
        //可以替换为：
        var obj = a.b.c.d;
        obj.property1 = 1;
        obj.property2 = 2;

숫자를 문자열로 변환

숫자를 문자열로 변환하려면 일반적으로 "" + 1을 사용하는 것이 가장 좋지만 상대적으로 A처럼 보입니다. 약간 보기 흉하지만 실제로는 이것이 성능 측면에서 가장 효율적입니다.

(“” +) > String() > .toString() > >

부동 소수점 숫자를 정수로 변환

많은 사람들이 parsInt()를 사용하는 것을 좋아합니다. 실제로,parseInt()는 부동 소수점 숫자와 정수 사이가 아닌 문자열을 숫자로 변환하는 데 사용됩니다. 변환을 위해서는 Math.floor() 또는 Math.round()

다양한 유형 변환

var myVar = "3.14159",
        str = "" + myVar, //  to string  
        i_int = ~ ~myVar,  //  to integer  
        f_float = 1 * myVar,  //  to float  
        b_bool = !!myVar,  /*  to boolean - any string with length 
                                and any number except 0 are true */
        array = [myVar];  //  to array

If toString( ) 메소드를 사용해야 합니다. 유형 변환을 수행하려면 toString()

을 명시적으로 호출하는 것이 좋습니다. 모든 가능성을 시도한 후 내부 작업에서 객체의 toString() 메서드를 시도하여 문자열로 변환할 수 있는지 확인하기 때문입니다. 따라서 이 메소드를 직접 호출하는 것이 더 효율적입니다

다중 유형 선언

JavaScript에서는 단일 var 문을 사용하여 모든 변수를 선언할 수 있으므로 해당 문을 결합하여 전체 스크립트를 줄일 수 있습니다. 실행 시간은 위의 코드와 같고, 위의 코드 형식도 상당히 표준화되어 있어 한눈에 이해하기 쉽습니다.

반복자 삽입

예를 들어, 처음 두 문은 var name=values[i++]

직접 사용 수량

var aTest = new Array(); //替换为
        var aTest = [];
        var aTest = new Object; //替换为
        var aTest = {};
        var reg = new RegExp(); //替换为
        var reg = /../;
        //如果要创建具有一些特性的一般对象，也可以使用字面量，如下：
        var oFruit = new O;
        oFruit.color = "red";
        oFruit.name = "apple";
        //前面的代码可用对象字面量来改写成这样：
        var oFruit = { color: "red", name: "apple" };

DocumentFragment를 사용하여 여러 추가 최적화

DOM을 업데이트해야 하면 문서 조각을 사용하여 DOM 구조를 구축하는 것을 고려하세요. 기존 문서에 추가합니다.

for (var i = 0; i < 1000; i++) {
            var el = document.createElement(&#39;p&#39;);
            el.innerHTML = i;
            document.body.appendChild(el);
        }
        //可以替换为：
        var frag = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) {
            var el = document.createElement(&#39;p&#39;);
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);

dom 요소를 구축하는 대신 innerHTML 할당을 한 번 사용하세요.

대규모 DOM 변경의 경우 innerHTML을 사용하는 것은 표준 DOM 메서드를 사용하는 것과 같습니다. DOM 구조를 만드는 것이 훨씬 빠릅니다.

        var frag = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) {
            var el = document.createElement(&#39;p&#39;);
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);
        //可以替换为：
        var html = [];
        for (var i = 0; i < 1000; i++) {
            html.push(&#39;<p>&#39; + i + &#39;</p>&#39;);
        }
        document.body.innerHTML = html.join(&#39;&#39;);

createElement 대신 템플릿 요소 복제

많은 사람들이 페이지 콘텐츠를 생성하기 위해 JavaScript에서 document.write를 사용하는 것을 좋아합니다. 실제로 이는 덜 효율적입니다. HTML을 직접 삽입해야 하는 경우 p 또는 범위 지정과 같은 컨테이너 요소를 찾아 innerHTML을 설정하여 페이지에 자신만의 HTML 코드를 삽입할 수 있습니다. 일반적으로 문자열을 사용하여 HTML을 직접 작성하여 노드를 생성할 수 있습니다. 실제로 이렇게 하면 1. 코드의 유효성을 보장할 수 없으며 2. 문자열 작업 효율성이 낮으므로 document.createElement() 메서드를 사용해야 합니다. 템플릿 노드의 경우 createElement() 메서드를 사용한 후 해당 요소의 속성을 여러 번 설정해야 하므로 cloneNode() 메서드를 사용해야 합니다. cloneNode()는 속성 설정 수를 줄일 수 있습니다. 마찬가지로 많은 요소를 생성해야 하는 경우 먼저 샘플 노드를 준비해야 합니다.

        var frag = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) {
            var el = document.createElement(&#39;p&#39;);
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);
        //替换为：
        var frag = document.createDocumentFragment();
        var pEl = document.getElementsByTagName(&#39;p&#39;)[0];
        for (var i = 0; i < 1000; i++) {
            var el = pEl.cloneNode(false);
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);

firstChild 및 DOM 요소를 순회하기 위한 childNodes 대신 nextSibling

        var nodes = element.childNodes;
        for (var i = 0, l = nodes.length; i < l; i++) {
            var node = nodes[i];
            //……
        }
        //可以替换为：
        var node = element.firstChild;
        while (node) {
            //……
            node = node.nextSibling;

删除DOM节点

删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存。另外，在removeChild和innerHTML=’’二者之间,尽量选择后者. 因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放dom节点

使用事件代理

任何可以冒泡的事件都不仅仅可以在事件目标上进行处理，目标的任何祖先节点上也能处理，使用这个知识就可以将事件处理程序附加到更高的地方负责多个目标的事件处理，同样，对于内容动态增加并且子节点都需要相同的事件处理函数的情况，可以把事件注册提到父节点上，这样就不需要为每个子节点注册事件监听了。另外，现有的js库都采用observe方式来创建事件监听,其实现上隔离了dom对象和事件处理函数之间的循环引用,所以应该尽量采用这种方式来创建事件监听

重复使用的调用结果，事先保存到局部变量

        //避免多次取值的调用开销
        var h1 = element1.clientHeight + num1;
        var h2 = element1.clientHeight + num2;
        //可以替换为：
        var eleHeight = element1.clientHeight;
        var h1 = eleHeight + num1;
        var h2 = eleHeight + num2;

注意NodeList

最小化访问NodeList的次数可以极大的改进脚本的性能

        var images = document.getElementsByTagName('img');
        for (var i = 0, len = images.length; i < len; i++) {

        }

编写JavaScript的时候一定要知道何时返回NodeList对象，这样可以最小化对它们的访问

• 进行了对getElementsByTagName()的调用

• 获取了元素的childNodes属性

• 获取了元素的attributes属性

• 访问了特殊的集合，如document.forms、document.images等等

要了解了当使用NodeList对象时，合理使用会极大的提升代码执行速度

优化循环

可以使用下面几种方式来优化循环

• 减值迭代

大多数循环使用一个从0开始、增加到某个特定值的迭代器，在很多情况下，从最大值开始，在循环中不断减值的迭代器更加高效

• 简化终止条件

由于每次循环过程都会计算终止条件，所以必须保证它尽可能快，也就是说避免属性查找或者其它的操作，最好是将循环控制量保存到局部变量中，也就是说对数组或列表对象的遍历时，提前将length保存到局部变量中，避免在循环的每一步重复取值。

        var list = document.getElementsByTagName('p');
        for (var i = 0; i < list.length; i++) {
            //……
        }

        //替换为：
        var list = document.getElementsByTagName(&#39;p&#39;);
        for (var i = 0, l = list.length; i < l; i++) {
            //……
        }

• 简化循环体

循环体是执行最多的，所以要确保其被最大限度的优化

• 使用后测试循环

在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以，就应该尽量少用。for(;;)和while循环，while循环的效率要优于for(;;)，可能是因为for(;;)结构的问题，需要经常跳转回去。

        var arr = [1, 2, 3, 4, 5, 6, 7];
        var sum = 0;
        for (var i = 0, l = arr.length; i < l; i++) {
            sum += arr[i];
        }

        //可以考虑替换为：

        var arr = [1, 2, 3, 4, 5, 6, 7];
        var sum = 0, l = arr.length;
        while (l--) {
            sum += arr[l];
        }

最常用的for循环和while循环都是前测试循环，而如do-while这种后测试循环，可以避免最初终止条件的计算，因此运行更快。

展开循环

当循环次数是确定的，消除循环并使用多次函数调用往往会更快。

避免双重解释

如果要提高代码性能，尽可能避免出现需要按照JavaScript解释的字符串，也就是

• 尽量少使用eval函数

使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间，而且使用Eval带来的安全性问题也是不容忽视的。

• 不要使用Function构造器

不要给setTimeout或者setInterval传递字符串参数

        var num = 0;
        setTimeout('num++', 10);
        //可以替换为：
        var num = 0;
        function addNum() {
            num++;
        }
        setTimeout(addNum, 10);

缩短否定检测

       if (oTest != '#ff0000') {
            //do something
        }
        if (oTest != null) {
            //do something
        }
        if (oTest != false) {
            //do something
        }
        //虽然这些都正确，但用逻辑非操作符来操作也有同样的效果：
        if (!oTest) {
            //do something
        }

条件分支

• 将条件分支，按可能性顺序从高到低排列：可以减少解释器对条件的探测次数

• 在同一条件子的多（>2）条件分支时，使用switch优于if：switch分支选择的效率高于if，在IE下尤为明显。4分支的测试，IE下switch的执行时间约为if的一半。

• 使用三目运算符替代条件分支

        if (a > b) {
            num = a;
        } else {
            num = b;
        }
        //可以替换为：
        num = a > b ? a : b;

使用常量

• 重复值:任何在多处用到的值都应该抽取为一个常量

• 用户界面字符串:任何用于显示给用户的字符串，都应该抽取出来以方便国际化

• URLs:在Web应用中，资源位置很容易变更，所以推荐用一个公共地方存放所有的URL

• 任意可能会更改的值:每当你用到字面量值的时候，你都要问一下自己这个值在未来是不是会变化，如果答案是“是”，那么这个值就应该被提取出来作为一个常量。

避免与null进行比较

由于JavaScript是弱类型的，所以它不会做任何的自动类型检查，所以如果看到与null进行比较的代码，尝试使用以下技术替换

• 如果值应为一个引用类型，使用instanceof操作符检查其构造函数

• 如果值应为一个基本类型，作用typeof检查其类型

• 如果是希望对象包含某个特定的方法名，则使用typeof操作符确保指定名字的方法存在于对象上

避免全局量

全局变量应该全部字母大写，各单词之间用_下划线来连接。尽可能避免全局变量和函数, 尽量减少全局变量的使用，因为在一个页面中包含的所有JavaScript都在同一个域中运行。所以如果你的代码中声明了全局变量或者全局函数的话，后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉（overwrite）你的。

//糟糕的全局变量和全局函数
var current = null;
function init(){
//...
}
function change() {
    //...
}
function verify() {
    //...
}
//解决办法有很多，Christian Heilmann建议的方法是：
//如果变量和函数不需要在“外面”引用，那么就可以使用一个没有名字的方法将他们全都包起来。
(function(){
var current = null;
function init() {
    //...
}
function change() {
    //...
}
function verify() {
    //...
}
})();
//如果变量和函数需要在“外面”引用，需要把你的变量和函数放在一个“命名空间”中
//我们这里用一个function做命名空间而不是一个var，因为在前者中声明function更简单，而且能保护隐私数据
myNameSpace = function() {
    var current = null;

    function init() {
        //...
    }

    function change() {
        //...
    }

    function verify() {
        //...
    }

//所有需要在命名空间外调用的函数和属性都要写在return里面
    return {
        init: init,
        //甚至你可以为函数和属性命名一个别名
        set: change
    };
};

尊重对象的所有权

因为JavaScript可以在任何时候修改任意对象，这样就可以以不可预计的方式覆写默认的行为，所以如果你不负责维护某个对象，它的对象或者它的方法，那么你就不要对它进行修改，具体一点就是说：

• 不要为实例或原型添加属性

• 不要为实例或者原型添加方法

• 不要重定义已经存在的方法

• 不要重复定义其它团队成员已经实现的方法，永远不要修改不是由你所有的对象，你可以通过以下方式为对象创建新的功能:

• 创建包含所需功能的新对象，并用它与相关对象进行交互

• 创建自定义类型，继承需要进行修改的类型，然后可以为自定义类型添加额外功能

循环引用

如果循环引用中包含DOM对象或者ActiveX对象，那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前，即使是刷新页面，这部分内存不会被浏览器释放。

简单的循环引用：

        var el = document.getElementById('MyElement');
        var func = function () {
            //…
        }
        el.func = func;
        func.element = el;

但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。

        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
        }
        init();

init在执行的时候，当前上下文我们叫做context。这个时候，context引用了el，el引用了function，function引用了context。这时候形成了一个循环引用。

下面2种方法可以解决循环引用：

1)  置空dom对象

       function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
        }
        init();
        //可以替换为：
        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
            el = null;
        }
        init();

将el置空，context中不包含对dom对象的引用，从而打断循环应用。

如果我们需要将dom对象返回，可以用如下方法：

        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
            return el;
        }
        init();
        //可以替换为：
        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
            try {
                return el;
            } finally {
                el = null;
            }
        }
        init();

2)  构造新的context

        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
        }
        init();
        //可以替换为：
        function elClickHandler() {
            //……
        }
        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = elClickHandler;
        }
        init();

把function抽到新的context中，这样，function的context就不包含对el的引用，从而打断循环引用。

通过javascript创建的dom对象，必须append到页面中

IE下，脚本创建的dom对象，如果没有append到页面中，刷新页面，这部分内存是不会回收的！

        function create() {
            var gc = document.getElementById('GC');
            for (var i = 0; i < 5000; i++) {
                var el = document.createElement(&#39;p&#39;);
                el.innerHTML = "test";
                //下面这句可以注释掉，看看浏览器在任务管理器中，点击按钮然后刷新后的内存变化
                gc.appendChild(el);
            }
        }

释放dom元素占用的内存

将dom元素的innerHTML设置为空字符串，可以释放其子元素占用的内存。

在rich应用中，用户也许会在一个页面上停留很长时间，可以使用该方法释放积累得越来越多的dom元素使用的内存。

释放javascript对象

在rich应用中，随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让GC能够回收这些内存控件。

对象：obj = null

对象属性：delete obj.myproperty

数组item：使用数组的splice方法释放数组中不用的item

避免string的隐式装箱

对string的方法调用，比如’xxx’.length，浏览器会进行一个隐式的装箱操作，将字符串先转换成一个String对象。推荐对声明有可能使用String实例方法的字符串时，采用如下写法：

var myString = new String(‘Hello World’);

松散耦合

1、解耦HTML/JavaScript

JavaScript和HTML的紧密耦合：直接写在HTML中的JavaScript、使用包含内联代码的3f1c4e4b6b16bbbd69b2ee476dc4f83a元素、使用HTML属性来分配事件处理程序等

HTML和JavaScript的紧密耦合：JavaScript中包含HTML，然后使用innerHTML来插入一段html文本到页面

其实应该是保持层次的分离，这样可以很容易的确定错误的来源，所以我们应确保HTML呈现应该尽可能与JavaScript保持分离

2、解耦CSS/JavaScript

显示问题的唯一来源应该是CSS，行为问题的唯一来源应该是JavaScript，层次之间保持松散耦合才可以让你的应用程序更加易于维护，所以像以下的代码element.style.color=”red”尽量改为element.className=”edit”，而且不要在css中通过表达式嵌入JavaScript

3、解耦应用程序/事件处理程序

将应用逻辑和事件处理程序相分离：一个事件处理程序应该从事件对象中提取，并将这些信息传送给处理应用逻辑的某个方法中。这样做的好处首先可以让你更容易更改触发特定过程的事件，其次可以在不附加事件的情况下测试代码，使其更易创建单元测试

性能方面的注意事项

1、尽量使用原生方法

2、switch语句相对if较快

通过将case语句按照最可能到最不可能的顺序进行组织

3、位运算较快

当进行数字运算时，位运算操作要比任何布尔运算或者算数运算快

4、巧用||和&&布尔运算符

        function eventHandler(e) {
            if (!e) e = window.event;
        }
        //可以替换为：
        function eventHandler(e) {
            e = e || window.event;
        }

        if (myobj) {
            doSomething(myobj);
        }
        //可以替换为：
        myobj && doSomething(myobj);

避免错误应注意的地方

1、每条语句末尾须加分号

在if语句中，即使条件表达式只有一条语句也要用{}把它括起来，以免后续如果添加了语句之后造成逻辑错误

2、使用+号时需谨慎

JavaScript 和其他编程语言不同的是，在 JavaScript 中，’+'除了表示数字值相加，字符串相连接以外，还可以作一元运算符用，把字符串转换为数字。因而如果使用不当，则可能与自增符’++’混淆而引起计算错误

        var valueA = 20;
        var valueB = "10";
        alert(valueA + valueB);     //ouput: 2010 
        alert(valueA + (+valueB));  //output: 30 
        alert(valueA + +valueB);    //output:30 
        alert(valueA ++ valueB);     //Compile error

3、使用return语句需要注意

一条有返回值的return语句不要用()括号来括住返回值，如果返回表达式，则表达式应与return关键字在同一行，以避免压缩时，压缩工具自动加分号而造成返回与开发人员不一致的结果

        function F1() {
            var valueA = 1;
            var valueB = 2;
            return valueA + valueB;
        }
        function F2() {
            var valueA = 1;
            var valueB = 2;
            return
            valueA + valueB;
        }
        alert(F1());  //output: 3 
        alert(F2());  //ouput: undefined

==和===的区别

避免在if和while语句的条件部分进行赋值，如if (a = b)，应该写成if (a == b)，但是在比较是否相等的情况下，最好使用全等运行符，也就是使用===和!==操作符会相对于==和!=会好点。==和!=操作符会进行类型强制转换

        var valueA = "1";
        var valueB = 1;
        if (valueA == valueB) {
            alert("Equal");
        }
        else {
            alert("Not equal");
        }
        //output: "Equal"
        if (valueA === valueB) {
            alert("Equal");
        }
        else {
            alert("Not equal");
        }
        //output: "Not equal"

不要使用生偏语法

不要使用生偏语法，写让人迷惑的代码，虽然计算机能够正确识别并运行，但是晦涩难懂的代码不方便以后维护

函数返回统一类型

虽然JavaScript是弱类型的，对于函数来说，前面返回整数型数据，后面返回布尔值在编译和运行都可以正常通过，但为了规范和以后维护时容易理解，应保证函数应返回统一的数据类型

总是检查数据类型

要检查你的方法输入的所有数据，一方面是为了安全性，另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢，而是因为他们很忙，并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法

何时用单引号，何时用双引号

虽然在JavaScript当中，双引号和单引号都可以表示字符串, 为了避免混乱，我们建议在HTML中使用双引号，在JavaScript中使用单引号，但为了兼容各个浏览器，也为了解析时不会出错，定义JSON对象时，最好使用双引号

部署

• 用JSLint运行JavaScript验证器来确保没有语法错误或者是代码没有潜在的问

• 部署之前推荐使用压缩工具将JS文件压缩

• 文件编码统一用UTF-8

• JavaScript 程序应该尽量放在 .js 的文件中，需要调用的时候在 HTML 中以 bde538ab2a62641029fcfa451c3845c8 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的，则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小，无益于代码的压缩和缓存的使用。另外，bde538ab2a62641029fcfa451c3845c8 标签应尽量放在文件的后面,最好是放在36cc49f0c466276486e50c850b7e4956标签前。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。

코드 최적화 작업을 절대 무시하지 마세요. 리팩토링은 프로젝트의 처음부터 끝까지 지속적인 작업입니다. 코드를 지속적으로 최적화해야만 코드 실행 효율성이 점점 더 좋아질 수 있습니다.

위 내용은 자바스크립트 성능 최적화 지식을 요약한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!