The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning. Learn more →
Top 23 JavaScript Performance Projects
-
sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
lazysizes
High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
why-did-you-render
why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
-
artillery
Load testing at cloud-scale. Serverless & distributed out-of-the-box. Load test with Playwright. Load test HTTP APIs, GraphQL, WebSocket, and more. Use any Node.js module. Never fail to scale with Artillery!
-
lozad.js
🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more
-
aws-lambda-power-tuning
AWS Lambda Power Tuning is an open-source tool that can help you visualize and fine-tune the memory/power configuration of Lambda functions. It runs in your own AWS account - powered by AWS Step Functions - and it supports three optimization strategies: cost, speed, and balanced.
-
aimeos
Integrated online shop based on Laravel 10 and the Aimeos e-commerce framework for ultra-fast online shops, scalable marketplaces, complex B2B applications and #gigacommerce
-
loadtest
Runs a load test on the selected URL. Fast and easy to use. Can be integrated in your own workflow using the API.
-
three-mesh-bvh
A BVH implementation to speed up raycasting and enable spatial queries against three.js meshes.
-
hyper-express
High performance Node.js webserver with a simple-to-use API powered by uWebsockets.js under the hood.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
For example, Fastify removed the instanceof operatorfrom its codebase because it was causing problems for those developers that rely on jest as a testing framework.
Project mention: Next.js and Bunny CDN: Complete Guide to Image Uploading with Server Actions | dev.to | 2024-04-21Last thing left is to use our new upload function in our server action. Since I like to upload images in single format and have some more control over them, I will additionally use sharp library. For file name, I'll generate some random string using nanoid:
Project mention: The Secret Weapon of Top Developers: 7 React JS Libraries You Can't Afford to Ignore | dev.to | 2024-02-21You may increase the rendering efficiency of tabular and huge list data by using the React Virtualized module. React apps perform better overall when the quantity of requests and DOM elements is limited. React Virtualized is comparable to many other tools; however, what sets it apart from the competition is the sheer volume of features and excellent upkeep.
We use Jest Framework for testing. Jest is not a dogma, and, of course, in its place can be any other test runner, such as Mocha or Ava. Let's focus on tests. I'll provide a short example because I don’t want to waste your time. You can find the full version here. It's crucial to read the comments in the code below. Let's go!
Use a JavaScript library to implement lazy loading. There are a number of JavaScript libraries available that can help you implement lazy loading, such as Lazysizes and Lozad.
FormEvent event.target has been explicitly defined for this event type c337fdd
Project mention: Lessons from open-source: Use window.trustedTypes to prevent DOM XSS. | dev.to | 2024-04-08// https://github.com/GoogleChromeLabs/quicklink/blob/453a661fa1fa940e2d2e044452398e38c67a98fb/src/index.mjs#L115-L118 // License: Apache 2.0 let cn if ((cn = (navigator as any).connection)) { // Don't prefetch if using 2G or if Save-Data is enabled. if (cn.saveData || /2g/.test(cn.effectiveType)) return Promise.resolve() }
Usually, I would let organic users be my load test. However, I am working on a project that has an anticipated load on a new-to-my-team stack, so I'm looking into ways to load test.
I've seen tools like k6 (https://k6.io/), Artillery (https://www.artillery.io), and JMeter (https://jmeter.apache.org/).
I've been using Artillery, but it's hard to visualize the results.
What do you use?
Use a JavaScript library to implement lazy loading. There are a number of JavaScript libraries available that can help you implement lazy loading, such as Lazysizes and Lozad.
Sometimes, changing services, like opting for HTTP over REST API Gateway, leveraging tools like Lambda Powertuning to optimize functions, or reducing a CloudWatch log retention and changing log level, can lead to significant savings.
Project mention: Mozilla Firefox or Chrome which is best for MOBILE PHONE.? | /r/browsers | 2023-12-11You can apply Betterfox using USB debugging, but it takes time to set it up: https://github.com/yokoffing/Betterfox/issues/240
cluster - npm link loadtest - npm link "os" is a nodejs core module
Project mention: HyperExpress: High Performance Node.js Webserver | news.ycombinator.com | 2023-06-25
Project mention: Tips For Building Faster Websites with Efficient CSS Optimisation | dev.to | 2023-08-14Developers also employ alternative methods for lazy loadings, such as the scroll event listener, besides the Intersection Observer API and the loading property. Unlike the Intersection Observer API, which only monitors the elements targeted for lazy loading, developers attach a scroll event listener to every element on the page. Once the element marked for lazy loading is within the visibility range of the user, a function is invoked to switch the image or video URL with the attribute previously holding it, just like with the Intersection Observer API. This approach is costly for a web project. As the developer seeks to optimise page load by integrating lazy loading to some elements on the webpage, the developer slows down the page's performance due to multiple firing of an event as the function meets each element. Moreover, packages for JavaScript that deal with lazy loading exist. For instance, the LazyLoad library uses the Intersection Observer API, a lightweight JavaScript library. It supports many lazy loading features, such as preloading, responsive image loading, and custom loading animations. Additional lazyloading libraries include Yall.js, Lozad.js, LazyLoad XT for jQuery, and many more.
JavaScript Performance related posts
- Lessons from open-source: Use window.trustedTypes to prevent DOM XSS.
- Optimizing Images for Developer Blogs
- Implementation of Cluster -Node.js
- Inferno 8.2.3 Released!
- Long running tab (kiosk), 100% CPU
- Poolifier release v2.7.2
- Poolifier release v2.7.2
-
A note from our sponsor - WorkOS
workos.com | 26 Apr 2024
Index
What are some of the best open-source Performance projects in JavaScript? This list will help you:
Project | Stars | |
---|---|---|
1 | fastify | 30,574 |
2 | sharp | 27,943 |
3 | react-virtualized | 25,951 |
4 | ava | 20,621 |
5 | lazysizes | 17,297 |
6 | inferno | 16,006 |
7 | quicklink | 10,940 |
8 | why-did-you-render | 10,783 |
9 | uPlot | 8,452 |
10 | artillery | 7,477 |
11 | lozad.js | 7,402 |
12 | Clusterize.js | 7,179 |
13 | aws-lambda-power-tuning | 5,145 |
14 | aimeos | 3,712 |
15 | Betterfox | 3,495 |
16 | loadtest | 2,535 |
17 | taskr | 2,527 |
18 | three-mesh-bvh | 2,255 |
19 | js-search | 2,183 |
20 | react-lite | 1,726 |
21 | hyper-express | 1,407 |
22 | yall.js | 1,357 |
23 | React Lifecycle Visualizer | 1,340 |
Sponsored