Javascript 在JS中预先缓存所有内容是否有意义地提高了性能

我有许多元素，它们被不同的JS代码块引用来做各种不相关的事情。例如，像

$("#box").click(function() {
  if ($("#line").val()) {
    someFunction()
  })
})

function someFunction() {
  // some code
  $("#line").addClass("highlight")
}

function someOtherFunction() {
  type = $("#line").data("type")
  string = "type = " + type
  $("#field").empty().append(string)
}

$("#button").click(function() {
  $("#line").val("new_value")
})

$(document).ready(function(){
  line = $("#line") 
})

// same code as above using cached line
$("#box").click(function() {
  if (line.val()) {
    someFunction()
  })
})

function someFunction() {
  // some code
  line.addClass("highlight")
}

function someOtherFunction() {
  type = line.data("type")
  string = "type = " + type
  $("#field").empty().append(string)
}

$("#button").click(function() {
  line.val("new_value")
})

如您所见，

$（“#行”）

被多次引用，并以不相关的方式进行操作或使用。考虑到这一点，将

$（“#行”）

缓存到

文档中会更有效吗？所以有点像

$("#box").click(function() {
  if ($("#line").val()) {
    someFunction()
  })
})

function someFunction() {
  // some code
  $("#line").addClass("highlight")
}

function someOtherFunction() {
  type = $("#line").data("type")
  string = "type = " + type
  $("#field").empty().append(string)
}

$("#button").click(function() {
  $("#line").val("new_value")
})

$(document).ready(function(){
  line = $("#line") 
})

// same code as above using cached line
$("#box").click(function() {
  if (line.val()) {
    someFunction()
  })
})

function someFunction() {
  // some code
  line.addClass("highlight")
}

function someOtherFunction() {
  type = line.data("type")
  string = "type = " + type
  $("#field").empty().append(string)
}

$("#button").click(function() {
  line.val("new_value")
})

除了性能，还有其他关于这种方法的注意事项吗？（例如，缓存可能不会适当地更新值或任何内容，这样即使输入确实发生了更改，
line.val（）
也不会更改，我对此进行了测试，但没有发生这种情况，但任何其他注意事项都是有帮助的）
以后再担心这种事情，您有充分的理由进行优化。首先编写最可读、最容易理解的代码。如果您有需要，基准测试，因为您考虑优化的地方可能永远都不是最好的地方（会有其他较低的结果）。是的，它会提高性能，但这对您是否有意义只有您自己知道。您要么将所有代码包装在就绪回调中，要么一个也不打包。