Shulou(Shulou.com)06/03 Report--

This article is to share with you about the ways to improve the performance of applications in javascript, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Like any other programming language, JavaScript has its own list of good practices to make programs easier to read and maintain. JavaScript has many tricky parts, so some practices that reduce the quality of your code should be avoided. By following good practices, we can create elegant and easy-to-manage code that anyone can use easily.

Here we will explore ways to improve application performance, including caching data in variables, iterating through variables using the fastest methods, reducing DOM access and elements on the page, and delaying script loading.

Reduce access to variables and attributes

We should reduce the number of times we access variables and object properties in the application.

This is because each time you do this, CPU must access the project in memory again and again to calculate its results.

Therefore, we should do so as little as possible.

For example, for a loop, it should not look like this:

For (let I = 0; I

< arr.length; i++) { } 而应该写成： let length = arr.length; for (let i = 0; i < length; i++) { } 这样，arr.length 在我们的循环中仅被引用一次，而不是在每次迭代中都对其进行访问。 循环遍历变量的最快方法 在 JavaScript 中，有多种方法遍历可迭代对象。一种是老的 for 循环，其他方法包括 for...of 循环，数组的 forEach 方法。map 和 filter 操作也会遍历数组。还有 while 循环。 在运行循环的所有方式中，for 循环是最快的方式，无论是否像上面一样缓存 length，for 循环都是如此。但是，缓存 length 有时会使循环执行得更好。 一些浏览器引擎在不缓存 length 属性的情况下优化了 for 循环。 递减索引的 whil e循环比 for 循环慢大约 1.5 倍。 使用 forEach 循环的速度比 for 循环慢 10 倍，因此最好避免使用它，尤其是对于大型数组。 我们可以在这里看到结果。 减少 DOM 访问 访问 DOM 是一项昂贵的操作，因为浏览器必须从网页中获取元素，然后从中创建一个对象并返回它。 为了减少 DOM 访问，如果我们需要多次操作 DOM Node 对象，则应该将其赋值给变量。 例如，如果我们有以下 HTML，并且希望在几秒钟后为其设置一些文本： 我们可以编写以下代码来做到这一点： const setText = (element, textContent) =>

{return new Promise ((resolve) = > {element.textContent = textContent; resolve ();}, 3000)}} (async () = > {const foo = document.querySelector ('# foo'); await setText (foo, 'foo'); await setText (foo,' bar'); await setText (foo, 'baz');}) ()

In the above code, we have a function to get the HTML element we want to operate on and the text content to set.

The setText function returns a promise and sets the text to the given element after 3 seconds.

Then we have an async function to set the text three times. The core part is that we pass a reference to the element to it at each call. In this way, we don't have to get the elements from the web page every time, which is an expensive operation.

Reduce DOM siz

The DOM tree is slow to render. Therefore, we must reduce the size of the tree.

We have no choice but to make our web page as simple as possible.

DOM is small, and because there is less to find, you can search for elements more quickly using methods such as querySelector,getElementById or getElementsByTagName.

In addition, page rendering performance is improved because less content is loaded. This is especially true for slower devices such as mobile phones and tablets.

Do not declare unnecessary variables

Every time we declare a variable, the browser must allocate storage space for the variable. Therefore, to reduce memory usage, we should not declare too many variables.

For example, if we have the following HTML:

We want to set the text content of the p element, and we should not write like this:

Const foo = document.querySelector ('# foo'); const p = foo.querySelector ('p'); p.textContent = 'foo'

Because we have two variables here, this means that our computer must store the values of two additional JavaScript variables.

We can reduce variable declarations by writing the following code:

Document.querySelector ('# foo p'). TextContent = 'foo'

As we can see, we can use the querySelector method to select anything through the CSS selector. This means that we should use this method and the associated querySelectorAll method to select elements, because they can all use the CSS selector to select any HTML element node.

Delaying the loading of scripts loading JavaScript files is an expensive operation. The browser must download the file, parse the content, and then convert it into machine code and run it.

The browser downloads a file and blocks any other operations.

Therefore, we should delay it as much as possible. We can do this by putting the script tag at the end. Alternatively, we can use the defer attribute on the script tag to do this.

In addition, we can create the script element dynamically after the page is loaded and run the script as follows:

_ window.onload = () = > {const element = document.createElement ("script"); element.src = "https://code.jquery.com/jquery-1.12.4.min.js"; document.body.appendChild (element);}

After the page is loaded, you can use the loading method of this script to load anything you want.

We can do something to speed up the page. First, we can cache the data in variables, so we don't have to access them repeatedly. We can then use the for loop to iterate through the project more quickly.

In addition, we can reduce the DOM size to reduce the number of projects that need to be loaded. We can also cache DOM objects in their code by assigning them to variables.

We should also not declare unnecessary variables, and we should delay the loading of scripts as much as possible so as not to jam our browsers.

These are the ways to improve the performance of applications in javascript, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.