`

JS代码优化

 
阅读更多

1、字符串的拼接

  用数组join的方法代替+=的方法，可以提高执行效率；

 

  实例：

    

  1. <div class="one" id="one"></div>   
    2. 

  2. 
<input type="button" value="效率低" onclick="func1()" />   

    3. 

  3. 
<input type="button" value="效率高" onclick="func2()" /> 

    4. 

    

  1. //效率低的   
    2. 

  2. 
function func1(){   

    3. 

  3. 
    var start = new Date().getTime();   

    4. 

  4. 
    var template = "";   

    5. 

  5. 
    for(var i = 0; i < 10000; i++){   

    6. 

  6. 
        template += "<input type='button' value='a'>";   

    7. 

  7.     }   
    8. 

  8. 
    var end = new Date().getTime();   

    9. 

  9. 
    document.getElementById("one").innerHTML = template;   

    10. 

  10. 
    alert("用时:" + (end - start) + "毫秒");   

    11. 

  11. }   
    12. 

  12. 
//效率高的   

    13. 

  13. 
function func2(){   

    14. 

  14. 
    var start = new Date().getTime();   

    15. 

  15. 
    var array = [];   

    16. 

  16. 
    for(var i = 0; i < 10000; i++){   

    17. 

  17. 
        array[i] = "<input type='button' value='a'>";   

    18. 

  18.     }   
    19. 

  19. 
    var end = new Date().getTime();   

    20. 

  20. 
    document.getElementById("one").innerHTML = array.join("");   

    21. 

  21. 
    alert("用时:" + (end - start) + "毫秒");   

    22. 

  22. }
    23. 





    

  1. 2、for循环
在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点
    
    2. 

  2. 

      

    1. var arr = [];   
      2. 

    2. 
for(var i = 0; i < 10000; i++){   

      3. 

    3. 
    arr[i] = "<div>" + i + "</div>";   

      4. 

    4. }   
      5. 

    5. 
document.body.innerHTML += arr.join("");   

      6. 

    6.     
      7. 

    7. 
//效率低的   

      8. 

    8. 
function func1(){   

      9. 

    9. 
    var divs = document.getElementsByTagName("div");   

      10. 

    10. 
    var start = new Date().getTime();   

      11. 

    11. 
    for(var i = 0; i < divs.length; i++){   

      12. 

    12. 
        //"效率低"   

      13. 

    13.     }   
      14. 

    14. 
    var end = new Date().getTime();   

      15. 

    15. 
    alert("用时：" + (end - start) + "毫秒");   

      16. 

    16. }   
      17. 

    17. 
//效率高的   

      18. 

    18. 
function func2(){   

      19. 

    19. 
    var divs = document.getElementsByTagName("div");   

      20. 

    20. 
    var start = new Date().getTime();   

      21. 

    21. 
    for(var i = 0, len = divs.length; i < len; i++){   

      22. 

    22. 
        //"效率高"   

      23. 

    23.     }   
      24. 

    24. 
    var end = new Date().getTime();   

      25. 

    25. 
    alert("用时：" + (end - start) + "毫秒");   

      26. 

    26. } 
      27. 

    3. 





    

  1. 2、for循环
在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点
    
    2. 

  2. 

      

    1. var arr = [];   
      2. 

    2. 
for(var i = 0; i < 10000; i++){   

      3. 

    3. 
    arr[i] = "<div>" + i + "</div>";   

      4. 

    4. }   
      5. 

    5. 
document.body.innerHTML += arr.join("");   

      6. 

    6.     
      7. 

    7. 
//效率低的   

      8. 

    8. 
function func1(){   

      9. 

    9. 
    var divs = document.getElementsByTagName("div");   

      10. 

    10. 
    var start = new Date().getTime();   

      11. 

    11. 
    for(var i = 0; i < divs.length; i++){   

      12. 

    12. 
        //"效率低"   

      13. 

    13.     }   
      14. 

    14. 
    var end = new Date().getTime();   

      15. 

    15. 
    alert("用时：" + (end - start) + "毫秒");   

      16. 

    16. }   
      17. 

    17. 
//效率高的   

      18. 

    18. 
function func2(){   

      19. 

    19. 
    var divs = document.getElementsByTagName("div");   

      20. 

    20. 
    var start = new Date().getTime();   

      21. 

    21. 
    for(var i = 0, len = divs.length; i < len; i++){   

      22. 

    22. 
        //"效率高"   

      23. 

    23.     }   
      24. 

    24. 
    var end = new Date().getTime();   

      25. 

    25. 
    alert("用时：" + (end - start) + "毫秒");   

      26. 

    26. } 
      27. 

    3. 







    

  1. 
3、减少页面的重绘

    2. 

  2. var str = "<div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div>";   
    3. 

  3. 
//效率低的   

    4. 

  4. 
function func1(){   

    5. 

  5. 
    var obj = document.getElementById("one");   

    6. 

  6. 
    var start = new Date().getTime();   

    7. 

  7. 
    for(var i = 0; i < 100; i++){   

    8. 

  8.         obj.innerHTML += str + i;   
    9. 

  9.     }   
    10. 

  10. 
    var end = new Date().getTime();   

    11. 

  11. 
    alert("用时 " + (end - start) + " 毫秒");   

    12. 

  12. }   
    13. 

  13. 
//效率高的   

    14. 

  14. 
function func2(){   

    15. 

  15. 
    var obj = document.getElementById("one");   

    16. 

  16. 
    var start = new Date().getTime();   

    17. 

  17. 
    var arr = [];   

    18. 

  18. 
    for(var i = 0; i < 100; i++){   

    19. 

  19.         arr[i] = str + i;   
    20. 

  20.     }   
    21. 

  21. 
    obj.innerHTML = arr.join("");   

    22. 

  22. 
    var end = new Date().getTime();   

    23. 

  23. 
    alert("用时 " + (end - start) + " 毫秒");   

    24. 

  24. 
} 	

    25. 


	一般影响页面重绘的不仅仅是innerHTML，如果改变元素的样式，位置等情况都会触发页面重绘.
分享到：
| 通过jsonp跨域获取JSON数据
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html5.js代码优化

    html5.js 代码优化

    JavaScript代码优化一例.pdf

    "JavaScript代码优化一例" 本文主要讨论JavaScript代码的优化，着重于介绍JavaScript代码在企业开发中的重要性及其优化方法。 一、JavaScript代码的重要性 随着Web 2.0和Ajax概念的提出，JavaScript代码得到了...

    js代码优化演进（含个人分析）

    JavaScript代码优化是一个持续演进的过程，它涉及到许多层面，包括语法优化、运行时优化、内存管理、性能调优等。本文将围绕这个主题展开，结合个人理解和分析，深入探讨JavaScript代码优化的关键点。 首先，我们要...

    js代码优化的小示例

    本文将通过一个关于获取当前日期星期并转换为特定字符表示的例子来展示如何对JavaScript代码进行优化。 #### 原始代码 原始代码实现了一个功能：根据当前日期的星期几（0-6，分别代表周日到周六），将其转换为特定...

    【JS代码优化二】ES6 数组篇

    【JS代码优化二】ES6 数组篇

    javascript代码优化的8点总结

    JavaScript代码优化是一项持续且重要的工作，它有助于提高代码的执行效率、可读性和可维护性。以下是根据给定文件内容总结的关于JavaScript代码优化的8点要点。 1. 松耦合原则 松耦合是一种设计原则，指的是在修改...

    JS代码优化的8点建议

    总结以上观点，有效的JavaScript代码优化需要我们关注代码的松耦合、全局变量的管理以及事件处理的逻辑分离。通过遵循这些原则和实践，可以构建更加健壮、易于维护和扩展的Web应用程序。在实际开发过程中，我们应该...

    JS优化_淘宝网.pdf

    标题“JS优化_淘宝网.pdf”和描述“JS优化_淘宝网.pdf”表明了本文档是关于如何通过JavaScript（JS）优化来提升淘宝网的性能。淘宝网是中国最大的网络零售、购物网站，其规模巨大，网页加载和响应速度对用户体验至关...

    grunt代码优化管理工具源码

    《grunt代码优化管理工具源码解析》 在现代Web开发中，代码优化和管理是提升应用性能的关键步骤。本文将深入探讨"grunt代码优化管理工具"的源码，揭示其在代码优化和性能提升方面的机制，帮助开发者更好地理解和...

    js 代码优化点滴记录

    JavaScript 代码优化是提高应用程序性能的关键步骤之一。在日常编程工作中，我们经常遇到各种各样的优化技巧，这里我们将深入探讨两个常见的用例：`switch` 语句和数组索引，以及它们各自的优缺点。 首先，让我们来...

    js2c#-js转换c#代码

    "js2c#"工具正是一个旨在帮助开发者将JavaScript代码转换为C#代码的实用工具。这个工具的亮点在于它能够将JS代码编译成DLL或EXE文件，使得C#项目可以直接引用这些编译后的库，从而实现跨语言的代码复用。 首先，...

    你所未知的3种Node.js代码优化方式

    Node.js 代码优化是提升应用程序性能的关键步骤，尤其是在面临CPU密集型任务或输入输出操作时。本文主要讨论了三种不常见的Node.js代码优化方法，帮助开发者有效地改进代码库，提高程序运行效率。 首先，识别和优化...

    JavaScript代码生成器

    3. 代码优化：通过分析代码逻辑，代码生成器可以生成优化过的JavaScript，提高代码执行效率。 4. 代码格式化：自动格式化代码，保持代码整洁，遵循一定的编码规范。 5. 插件扩展：许多代码生成器支持插件系统，...

    java 混淆、加密js代码

    在压缩包中，文件名为"js"，这可能是混淆和加密后的JavaScript代码文件。要使用这个文件，你需要在Java项目中引入这个文件，并在main方法中指定其路径。Java可以调用本地的JavaScript引擎，如Rhino或Nashorn来执行...

    代码优化总结

    "代码优化总结"这个主题涵盖了前端优化、后端优化以及整体程序的优化策略，涉及到网页内容服务器管理、Cookie处理、CSS与JS的优化等多个方面。下面将详细阐述这些关键知识点。 一、前端优化 前端优化主要关注用户与...

    用 JS 编写的粒子群优化库_JavaScript_代码_下载

    用 JS 编写的粒子群优化库。适用于RequireJS，来自WebWorker，在node.js或普通浏览器环境中。 示例应用程序 simple优化一维函数的简单应用程序 simple-require和simple一样，除了使用 RequireJS simple-node一个...

    js代码过度代码

    "js代码过度代码"可能是指在网页中使用了过多或过于复杂的JavaScript代码，导致性能下降或者用户体验受到影响。这通常发生在开发者为了实现某些高级功能或特效时，没有有效地优化代码，使得代码量过大，执行效率降低...

    web代码混淆方案.混淆js代码,压缩css代码

    **混淆JavaScript代码** JavaScript混淆是一种通过改变原始代码的可读性来增加其保密性的技术。这通常涉及到变量名和函数名的重命名，以及代码结构的打乱。例如，Proguard是一款常用的Java混淆工具，虽然它主要用在...

Magicbox
Global site tag (gtag.js) - Google Analytics