• 译 文 : How I Increased Our Web Performance by 422%
  • Originally written by Perry Martijena
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Badd
  • Proofreader: hansonfang, IAMSHENSH

How can I improve website performance by 422%

I improved the performance of my website by 422%. I didn’t think I could achieve such a good result by modifying data structures and other techniques alone.

In my most recent job, I redesigned the user interface of the site. Our website is based on AngularJS, and since it’s been online for 4 years, most of the apps are developed in ES5. The site has some performance issues, including slow updates, long load times, and some clunky old code from the days when jQuery dominated responsive layouts. I took on these optimizations and wanted to share six of the most important lessons I learned along the way.

1) Learn data structures and algorithms

JavaScript is no longer a weak language. It has every data structure implementation you want, and Yin ‘y performance is important for the front end. 45% of the factors that determine the Performance of a Web application come from the front end (from Steve Souders’ High Performance Web Sites: Essential Knowledge For Front-end Engineers). Most likely the backend developers around you are using data structures and algorithms, so you should use them too. It is extremely important to use good, extensible data structures and algorithms so that your application is also extensible.

The most useful data structures are the ES6 Map and stack, which have helped me improve the performance of my site. Hash Map is amazing, it should be used for frequent access to a key. In front end development, we spend a lot of time checking display conditions (such as authentication). I’ve found it useful to cache data, allowing us to cache data in a Map that needs to be accessed multiple times per page through an array. This optimization reduces the time complexity from O(n) to O(1), which is a significant performance improvement. The stack is useful for scenarios where you often need to do an undo operation, like a Wizard. Recursion is also a necessary concept, especially when dealing with objects. Using a divide-and-conquer strategy, I replaced a lot of slow functions with good recursive functions with fixed baseline conditions.

2) cache

You should cache any list value or data that requires multiple accesses and doesn’t change often. Generally, I store this data in Session Storage. While local storage is more useful in some scenarios, for most of the data I cache, I want to refresh it when the user’s session ends. Be careful about caching data. For example, storing sensitive information (such as user names, partial messages from previous users, etc.) in local storage is a terrible practice because it is available to anyone using the computer. If some data doesn’t change from session to session and needs to be accessed frequently, cache it!

3) Reduce HTTP requests

Reducing HTTP requests is significant for users. Lightning-fast API calls for local debugging can be sloth slow over a 3G network, depending on the user’s network. It is recommended that you use Chrome’s Network panel and CPU throttling to test your site’s performance on slow networks.

4) Eliminate stuttering (smooth CSS animation)

CSS animations are very powerful. “Jank” refers to a situation where the animation is unstable. The Performance panel in Chrome debugger helps you record and observe the FPS values of CSS animations and transitions. I find that smooth animation makes users trust the system more. Jumpy elements after loading or obvious transition jitter can be a worry for users.

5) Don’t use eval… (Not just for safety)

Security considerations aside, I found Eval to be extremely slow. Eval parses the code and then traces the machine code to find the variables mentioned in the code. Replacing Eval with other solutions (usually recursion) can be much faster. Even if you’re using Eval in a safe way, if there’s another solution that might be just as good, grab the alternative.

6) Understand how JavaScript works

Understanding what happens when you create a Promise/Observable, from the perspective of event loops, call stacks, asynchronous behavior, how the framework is compiled, prototypes, scope chains, etc., will be a milestone. Understanding how JavaScript works will give you an idea of how to make the right decisions when it comes to performance and extensible application design. We also highly recommend looking at Javascript Design Patterns, which are free and helpful.

Finally, don’t worry about micro-optimization. While being performance-conscious is important, remember that the first priority is to write code that is easy to understand and maintain. Once again:

  • Use good data structures and algorithms
  • Cache appropriately
  • Reducing HTTP requests
  • Eliminate the caton
  • Don’t use eval
  • Understand how JavaScript works!

Hope this article can give you inspiration! 😃

“Uncommon row reuse what common row refuse.”

— J. R. D. Tata

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.