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

This article mainly introduces "how to improve the performance of AngularJS". In daily operation, I believe many people have doubts about how to improve the performance of AngularJS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to improve the performance of AngularJS"! Next, please follow the editor to study!

AngularJS is the most widely used Web application framework today, and its popularity has been growing since the arrival of its long-awaited AngularJS 4.0. But we can see that almost all Angular experts are still trying to solve various problems related to AngularJS performance, even though it has made a lot of optimizations of its own.

Today, online business is greatly affected by the performance of network technology. Therefore, it is necessary to study all the factors that affect business development.

Incorrect use of AngularJS can limit the performance of applications in the market, so AngularJS performance optimization is an important responsibility of every AngularJS development expert. That's why we've listed nine ways to improve AngularJS performance in this blog.

Recently, Brazilian computer scientists conducted a survey and they found some interesting facts that led to performance problems. The survey doesn't say much about how AngularJS works in the real world, but research based on the survey provides some evidence.

The findings are as follows:

45% said it was a problem with the source code that affected performance.

Only 8% admitted to making changes to the actual situation.

Some respondents accused AngularJS of having problems with its architecture.

Some of them blame unnecessary two-way binding for affecting performance.

After a lot of discussion about the performance of AngularJS, it's time to take a look at these nine ways to improve AngularJS performance.

The performance of AngularJS can be measured by digest cycle. Digest cycle can be thought of as a loop. In this loop, Angular will check whether every variable monitored by all $scopes has changed. If $scope.myVar is defined in the controller and marked for monitoring, Angular monitors the myVar for changes in each loop.

Use the Batarang tool to evaluate the monitor

Batarang is a great development tool launched by the Angular team, which can reduce your debugging workload. It contains many new features, some of which can help you describe and track the performance of AngularJS. In addition, when the memory footprint increases, the monitor tree can determine which scope has not been destroyed.

Use of native JavaScript or Lodash

Lodash improves application performance by rewriting some basic logic, rather than relying on AngularJS built-in methods. If your application does not include Lodash, you may need to use native JavaScript to rewrite everything.

Use Chrome's developer tool Profiler to identify performance bottlenecks

This is a convenient tool that allows you to select the type of profile you want to create. It analyzes memory by recording memory allocation timeline, memory allocation summary and heap snapshots. After this round of performance optimization, your application can be fully presented in two seconds, and then users can interact with it at will.

Reduce number of monitors

AngularJS runs entirely around digest cycle. Whenever digest cycle triggers, it loops through each binding to detect whether the model has changed. By reducing the number of monitors, you can reduce the time spent per digest cycle. It can also reduce the memory footprint of the application.

Ng-if is superior to ng-show

The ng-show directive toggles the CSS display properties on a specific element, while the ng-if directive actually removes the element from the DOM first and recreates it if necessary. In addition, the ng-switch instruction is an alternative to ng-if and has the same performance advantages.

Do not use ng-repeat

It is recommended that you avoid using ng-repeat to build HTML in JavaScript. For some applications, using ng-repeat increases the number of unnecessary monitors. Using the ng-bind-html instruction is a better way to solve this problem.

Use $watchCollection (including the third parameter)

Usually only two parameters are used when using $watch, but if you add a third parameter, such as `$watch ('value',function () {}, true)`, you can have Angular perform a depth check (check each property of the object). But this may incur more performance overhead. Therefore, to solve this performance problem, Angular provides `$watchCollection ('value', function () {})`, whose third parameter has almost the same function as $watch, except that it only checks the first layer of object properties to reduce performance overhead.

Use console.time to debug problems

If you are trying to debug your application to solve performance problems, use console.time, which is a great API.

Go shake, ng-model.

You can use ng-model to remove input. For example, to undo search input like GOOGLE, you must use ng-model-options= "{debounce:250}". Due to a change in the input model, the digest cycle is triggered no more than once per 250ms.

The time spent on development is precious now, so you need a comprehensive framework like AngularJS to start your business quickly.

After studying a lot of things, we have collected some other important tools that can be used to enhance the performance of AngularJS.

Let's take a look at these four AngularJS performance enhancement tools.

Protractor

Protractor is the most powerful end-to-end Angular automated testing tool developed by the Angular team. Protractor combines many great technologies, such as NodeJS, Selenium, webDriver, Mocha, Cucumber, and Jasmine.

GulpJS

GulpJS can be used to automate repetitive tasks, build systems for streaming media, and check JavaScript scripts using JSHint or ESLint.

TestingWhiz

TestingWhiz is a user-friendly automated testing tool because it has no code scripting function. TestingWhiz provides an end-to-end testing solution to test AngularJS applications. It has a variety of test commands that make it easy to create AngularJS-related tests.

WebdriverIO

WebdriverIO allows you to control browsers or mobile applications with just a few lines of code. Its test code is simple and easy to read. The integration test runner allows you to write asynchronous commands synchronously so that you don't have to care about how to avoid contention. In addition, it eliminates all tedious setup work and manages Selenium sessions for you.

Summary

As we have seen, Web development is growing very fast due to the introduction of many new JavaScript frameworks in Web development. To get the most out of these frameworks, you must optimize your performance on a regular basis.

AngularJS is one of the most powerful frameworks for building Web applications. By improving the performance of AngularJS, developers can do more with less code. Even the risk of writing "spaghetti code" is greatly reduced.

At this point, the study on "how to improve the performance of AngularJS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.