1. In daily development scenarios, we often use development user clicks to trigger the appearance of elements.

Here’s a quick code example:

<button id=" BTN "> </button> js: Function createElement(){var div = document.createElement("div") div.innerhtml = "display" div.style.display = "none" document.body.appendChild(div) return div } document.getElementById("btn").onclick = function(){ var div = createElement() div.style.display = "block" }Copy the code

If each click shows the elements in this way, the user clicks n times, it is equivalent to n in the user’s local browser, not only to the user’s space resources caused a certain waste. Also, each click to re-render the DOM tree produces a DOM element that affects the overall performance and speed of the program.

So we were wondering if we could generate a cache of DOM elements in the user’s browser when the user clicks on the render for the first time, and then reuse the CACHE of DOM elements when the user clicks on the render for the next time.

The code is as follows:

Var createLogin = function(){var div = document.createElement("div") div.innerhtml = "display" div.style.display = "None" is the document. The body. The appendChild (div) return div} var getSingle = function (fn) {/ / using closures, variable exposed out, let the Element has been reserved memory space. Var Element return function(){if Element has an initial value. // If there is an initial value, use what is in memory; if there is no initial value, execute createLogin. Return Element | | (Element = fn. Apply (this, the arguments)) / / Element originally = fn can, in case if the fn is a function of parameters to carry. }} var getLogin = getSingle(createLogin) document.getelementById (" BTN ").onclick = function(){var Div = getLogin()// Call fn function div.style.display = "block"}Copy the code