如何编写高性能的 Javascript ?

x33g5p2x  于2022-02-12 转载在 JavaScript  
字(1.0k)|赞(0)|评价(0)|浏览(670)

在编写javascript代码时,可以注意如下编写代码方式,保证编写高性能的javascript代码。
1、尽量不要使用for-in循环去访问数组,尽量使用for循环来进行访问。
2、可以将对象缓存起来,特别是DOM的访问特别消耗资源。

  1. //1、对数组进行遍历时,可以将数组长度先使用一个变量保存起来。
  2. //不应该使用如下方式:
  3. var array = [1, 2, 3, 4, 5, 6]
  4. for(let i = 0; i < array.length; i++) {
  5. console.log(array[i])
  6. }
  7. 应该使用如下方式:
  8. var array = [1, 2, 3, 4, 5, 6]
  9. for (let i = 0, len = array.length; i < len; i++) {
  10. console.log(array[i])
  11. }
  12. //2、对DOM对象进行缓存
  13. //如下所示代码,在每一次都必须从document中取出其DOM对象。
  14. document.getElementById("app").innerHTML = "我是哈哈哈"
  15. document.getElementById("app").innerHTML = "你是谁呀"
  16. //此时我们可以将该对象提前保存到一个变量中
  17. let app = document.getElementById("app")
  18. app.innerHTML = "我是哈哈哈"
  19. app.innerHTML = "你是谁呀"

3、不要在函数内部使用过深的嵌套判断

  1. //如下所示,判断嵌套过深
  2. function foo1() {
  3. var r = {}
  4. r.data = {}
  5. r.data.preset = 2
  6. if(r) {
  7. if(r.data) {
  8. if(r.data.preset) {
  9. //在此时执行相关代码
  10. }
  11. }
  12. }
  13. }
  14. //此时可以进行如下代码设置。
  15. function foo1() {
  16. var r = {}
  17. r.data = {}
  18. r.data.preset = {}
  19. if(!r) {
  20. //执行相关代码
  21. }
  22. if(!r.data) {
  23. // 执行相关代码
  24. }
  25. if(!r.data.preset) {
  26. //执行相关代码
  27. }
  28. }

4、不使用未定义的变量

  1. 因为如果存在没有定义的变量,则就会在将该变量定义到全局对象上。

5、使用var声明变量,建议写在多行。

  1. var c = 1, sum = 0, d = 0, e = 0
  2. 可以将其转化为这样的形式
  3. var c = 1;
  4. var sum = 0;
  5. var d = 0;
  6. var e = 0;

相关文章