Performance tuning JavaScript

In this article we'll look at what is performance, 
why it is important, different ways of tracking performance issues 
and ways to solve them.

What and why performance is important?


Performance tuning is very important when an application gets larger. But it can be very crucial to retain the value of the software. When developing JavaScript applications there are variety of tools which you can use to tune the performance of a web application.

Memory can be held by an object in 2 different ways. directly by the object itself or implicitly by holding references to other objects. 

Different types of performance issues exists!

Memory leaks 
Memory leak is a gradual loss of available computer memory. 

Identifying performance issues

Before do any kind of performance tuning you need to identify what are the performance issues I have. You can use different tools and mechanisms to identify existing performance issues like memory leaks. 

Using Chrome Developer Tools for profiling

Use timeline in Developer tools to do profiling. Start with reading this introduction. 

Things to take

Memory leaks in JavaScript is based on reference counting
See JavaScript memory profling with Google Chrome


Using timers

Measure time to execute a function (SO) 

Using Google Chrome

finding JavaScript memory leaks with Chrome (SO)

You can also use V8 benchmark suite to profile JavaScript performance and identity bottlenecks. Checkout this link for more information. 

Not only in Google Chrome, but there are tools available in other major browsers as well. 

Writing memory efficient code is another important thing. You can also optimize existing JavaScript code in different ways.

Memory management in JS
http://stackoverflow.com/questions/23506064/how-do-you-detect-memory-limits-in-javascript
http://stackoverflow.com/questions/2936782/javascript-memory-limit

Performance of popular JavaScript MVC frameworks
http://www.filamentgroup.com/lab/mv-initial-load-times.html

Tips from W3Schools
Best way to profile JavaScript execution DOM interaction is expensive
http://andyshora.com/how-bad-is-dom-interaction-javascript.html 
http://stackoverflow.com/questions/8750101/multiple-small-dom-operation-vs-one-large-dom-operation 
http://stackoverflow.com/questions/6022396/too-many-dom-elements?rq=1
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
 

Memory leaks in JavaScript - Stackoverflow

Resources
http://www.hongkiat.com/blog/ultimate-guide-to-web-optimization-tips-best-practices/

Perceived Performance

image credit : devbridge

Read More

SignalR Performance and Scalability

ASP.NET Core SignalR is a library by Microsoft (now opensource) which allows server to communicate with client side web apps asynchronously. Performance and scalabality is a major consideration developers needs to consider when developing applications.

Performance tips

Reduce SignalR message size

You can reduce this by reducing size of your serialized objects. In Server, if you're sending an object that contains properties that don't need to be transmitted to client, use JsonIgnore attribute to make them not pass through. 

You can also reduce property name sizes using JsonProperty attribute. To make things readable in client side you can remap them to a meaningful name. 

Since messages are stored in the message bus in server memory, reducing the size of messages can also address server memory issues.

SignalR 

DefaultMessageBufferSize : By default SignalR keeps 1000 messages in memory per hub per connection. If large messages are transferred, this can create memory issues. This setting can be set in Application_Start event. Reducing this make server utilize memory in a better way (If using large messages)

IIS Settings

Max concurrent requests per application: Increasing the number of concurrent IIS requests will increase server resources available for serving requests.

ApplicationPool QueueLength: This is the maximum number of requests that Http.sys queues for the application pool. When the queue is full, new requests receive a 503 “Service Unavailable” response. The default value is 1000.

Shortening the queue length for the worker process in the application pool hosting your application will conserve memory resources.

https://technet.microsoft.com/en-us/library/cc745955.aspx

Troubleshooting tips

You can use SignalR performance counter to measure no. of events since last application pool or server restart.

To measure performance, SignalR team uses Crank.

Scalability
You can scale up (larger server) or scale out (multiple servers). When scaling out since we have multiple servers one server might not be up to date with messages recieved by the other server. Therefore you need to use a backplane.

http://www.asp.net/signalr/overview/getting-started/real-time-web-applications-with-signalr This article also includes how to create BackPlane using SQL Server

Resources

http://www.asp.net/signalr/overview/performance/signalr-performance

http://www.asp.net/signalr/overview/performance/scaleout-with-redis

http://stackoverflow.com/questions/13369624/is-redis-a-better-option-for-signalr-scale-out-over-sql-server-and-do-each-supp

http://stackoverflow.com/questions/7535184/when-to-use-a-key-value-store-such-as-redis-instead-along-side-of-a-sql-database

Read More

NoSQL databases

NoSQL provides an alternative way for storage and retrieval of data for relational databases. 

NoSQL has,

• a massive write performance compared to relational DBs
• faster Key-value access
• Due to its lack of structure, flexible schema and data types
• Can use right data model for right problem with different data models and many.

 Usually NoSQL databases can be categorized into, 

• Document databases
• Graph stores
• Key-value stores
• Wide-column stores

The intention to use NoSQL databases is things like horizontal scalability, simplicity of design and fine control over availability. 

Practical use cases for NoSQL databases

• Syncing online-offline data
• Fast response time under loads
• Avoids heavy joins
• Dynamic table creation
• Hierarchical data like threaded discussions and parts explosion
• Voting systems
• Archiving and many

See more at when to use NoSQL databases? Practical use cases for No SQL databases and Use cases for No SQL databases.

Guide to selecting the No SQL database

See a visual guide for selecting a NoSQL database

Concepts you need to know in NoSQL

MapReduce (link)

Programming model and an associated implementation for processing and generating large data sets. 

NoSQL databases and technologies

Apache CouchDB (link)

Uses JSON for documents, JavaScript for MapReduce indexes and regular HTTP for its API. 

Couchbase (link)

See http://www.couchbase.com/couchbase-vs-couchdb and http://stackoverflow.com/questions/5578608/difference-between-couchdb-and-couchbase

MongoDB (link)

How to use MongoDB Atlas in Azure.

Amazon DynamoDB - NoSQL in AWS (link)

DynamoDB is a key-value and document database in AWS. 

Cosmos DB - Implementing No SQL in Azure (link)

Built with global distribution and horizontal scale in focus. Key capabilities include,

• Global distribution: Distribute data into any number of Azure regions ensuring lowest possible latency
• Supports multiple data models with APIs for,
• SQL
• MongoDB
• Cassandra 
• Table etc.
• Elastically and indepedently scale throughput and storage on demand and worldwide
• High responsive and mission-critical support
• Guarantees end-to-end low latency at 99th percentile to its customers

NoSQL resources

http://en.wikipedia.org/wiki/NoSQL

http://www.couchbase.com/nosql-resources/what-is-no-sql

http://www.thoughtworks.com/insights/blog/nosql-databases-overview

http://nosql-database.org/

Updated : June-2019

Read More

Data Compression

Data compression is the process of reducing size of a data file. Compression can be either lossy or lossless. In lossless the bits are reduced by identifying and eliminating statistical redundancy. Lossy compression removes unnecessary information. 

HTTP compression (wiki)
HTTP data is compressed before it is sent from the server: compliant browsers will announce what methods are supported to the server before downloading the correct format. The most common compression schemes include gzip and Deflate

GZip vs Deflate
GZip is simply deflate with checksum and header/footer. Deflate is faster. SO - Why use deflate instead of gzip for text files served by Apache?. 

Resources
Data compression - wikipedia
http://www.fastly.com/blog/best-practices-for-using-the-vary-header/

Read More

ASP.NET Performance

Profiling

You can profile server side using Glimpse. Check the tutorial on ASP.NET website. Other than Glimpse  there are profilers like MiniProfiler. See Hanselman article about Glimpse.

Using Asynchronous Methods

.NET framework maintains a pool of threads that are used to service ASP.NET requests. When a request arrives, a thread from the pool is dispatched to serve the request. If the request is processed synchronously the thread cannot server another request.

Thread pool has a limited number of threads. The default maximum for .NET 4.5 is 5000. (See SO and SO) If a large application runs at high concurrency, all available threads might be busy. This is known as thread starvation. When this condition reaches, web server queues the requests and if the queue is full, server rejects requests with HTTP 503 status (Server Too Busy).

If you make asynchronous calls it'll increase the responsiveness. An asynchronous call takes same amount of  time as synchronous request however thread is not blocked from serving other requests. This prevents request queuing 

There are many benefits of using asynchronous methods to serve data.

resource

Bundling and Minfication

Read More

Measuring Performance in SQL Server

http://dba.stackexchange.com/questions/53693/comparing-two-queries-in-sql-server-2012

https://technet.microsoft.com/en-us/magazine/2007.11.sqlquery.aspx

Read More

Performance Tuning Best Practices

https://developer.chrome.com/devtools/docs/network


https://confluence.atlassian.com/display/JIRAKB/JIRA+Performance+Tuning

Read More

Performance considerations in KnockoutJS

For web applications performance is an important factor to consider. In KnockoutJS when you do things in the wrong way this matters. We'll see some key areas you need to consider about performance in KnockoutJS. 

First lets look at fundemental building blocks of KnockoutJS application

observables
most basic fundamental building block. You need to have these

observableArrays

subscribers
get notifications when observable gets changed. You can dispose these. Also you delay them in case of expensive updates.

computed observables
Observables which depends on other observables

Bindings in KnockoutJS

visible binding
set display none based on the value. So shouldn't cost much.

for 10,000 elements inside a foreach, ko if takes around 10 seconds while visible binding only takes 1 second.

foreach
duplicates section of a markup for each array entry. Could be a normal array . 

if
bit expensive because, not like visible binding, if will hide the content which is inside the tag

    <div data-bind="if: check">
        <h1>Inject this to DOM if check is true</h1>
        <h2>Otherwise this won't exist in the DOM</h2>
    </div>

the visible binding just uses CSS to toggle the container element’s visiblity. The if binding, however, physically adds or removes the contained markup in your DOM, and only applies bindings to descendants if the expression is true.

with
creates a new binding context. it'll add descendent elements dynamically.

If the expression you supply involves any observable values, the expression will be re-evaluated whenever any of those observables change. Then, descendant elements will be cleared out, and a new copy of the markup will be added to your document and bound in the context of the new evaluation result.


click


value


checked


template


custom bindings

Read More

What you need to know about performance in Entity Framework

http://msdn.microsoft.com/en-us/data/hh949853.aspx 

Mapping Views
Mapping views are set of SQL statements that represents the database in an abstract way, which are also part of the metadata.
link1, link2

Query execution
Deferred vs. Immediate execution
Client side execution of LINQ queries
Query and mapping complexity
Mapping complexity
Query complexity
Relationships
Query paths
Saving changes
Distributed Transactions

Strategies for Performance improvement

Pre-generate views
Consider using NoTracking merge option for queries
Return the correct amount of data
Limit the scope of ObjectContext
Consider opening db connection manually.

Extra

• In EF its best to understand how query execution happens 
• Data Source is the one which provides connection pooling facility. Not the Entity Framework. The .NET provider for SQL Server provides support for Connection Pooling
• In previous versions of EF (before 6) there was a performance problem when using Contains. This has been fixed now.
• 
  

https://msdn.microsoft.com/en-us/data/hh949853.aspx
http://www.asp.net/web-forms/overview/older-versions-getting-started/continuing-with-ef/maximizing-performance-with-the-entity-framework-in-an-asp-net-web-application

http://msdn.microsoft.com/en-us/library/8xx3tyca(v=vs.110).aspx

http://stackoverflow.com/questions/3653009/entity-framework-and-connection-pooling?rq=1

http://www.asp.net/whitepapers/aspnet-data-access-content-map#gettingstarted

http://msdn.microsoft.com/en-us/library/cc853327.aspx

Read More