Back to Questions
760
views6
comments
Optimization of client side operations
websharperjavascript optimization

I have noticed that the JavaScript proxy for Array.sortBy function is significantly slower than server side implementations by a factor of over 100.

I am trying to provide intellegent field sorting for a custom table implementation, but the performance of client JavaScript is horrible once the number of records goes past 30,000 records. For instance, I would like fields that are names to sort with a standard string sort, but if they are numbers they need to be converted back to their default representation to be sorted correctly. This mandates the use of either a custom sort routine or using the proxy Array.sortBy function.

question 1: In practice, the function that converts the string back to a number for Array.sortBy is slow. Is there is any optimization advice for sorting and filtering for the JavaScript compiler within WebSharper?

question 2: In practice, I find that I sometimes need to append multiple sequences of values. If I use mutable lists and append the head of the structure, this seems to be very slow on the client side. I suspect that lists head appends are not efficent in JavaScript. What is the optimal data structure to append additional items to on the client side?

question 3: (meta question) What is the best way to figure out the performance costs of using various data structure constructs on the client side? I would really like to push most of the client side interaction to client side code, but it is really slow. I will admit that I am new to web interfaces, but I understand winform and XAML based development. Are JavaScript interpreters really so slow that they cannot process over 30,000 JSON map objects in under a second? Or does this require specialized knowledge of how F# is translated into JavaScript to make the best use of the client's compute resources?

.

I put together a small snippet to help out with making performance metrics. You can find it here. Feel free to fork it and change it to your needs - and post live code snippets on further topics or comments.

What I see on basic arrays is that they are indeed pretty slow, I get 1M entries sorted in just over a second on my machine - here is the direct link.

You can check the proxy implementation here, suggest improvements or submit a PR - help is always appreciated.

By on 5/7/2016 6:00 AM ()

Thank you for the sample code.

I modified it to be representive of the sortBy issue that I am having.

This link should work now.

I look forward to the performance improvement in the future version.

Any suggestions to speed it up would be appreciated. Note that this code is several orders of magnitude slower that a simple Array.sortBy lambda implementation. I can hear my computer's fan kick in when I run this example.

By on 5/11/2016 4:23 PM ()

Hello,

thanks for your testing. Current Array.sortBy proxy quite bad, sorry. It recalculates the mapping on every comparison, and also, does not take indexes into account, so it can mess up ordering between elements with identical key (.NET Array.sortBy preserves it).

My suggestion would be to use a Direct function for now if you need better performance:

1
2
3
4
5
6
7
8
9
10
11
12
13

[<Direct "
    $arr.map(function (a, i) {
        return [a, $f(a), i];       
    }).sort(function(a, b) {
        var av = a[1], bv = b[1];
        if (av !== bv) {
            if (av > bv) return 1;
            return -1;
        }
        return a[2] - b[2];
    }).map(function (a) { return a[0]; })
    ">]
let sortBy (f: 'a -> 'b) (arr: 'a[]) = X<'a[]>

We will review all collection functions for a next release of WebSharper.

For question 2.: Sorry, what do you mean by mutable list? In general, you can aceess underlying JavaScript functionality with the .JS extension property, so if you have an array: arr.JS.Shift("new item") will append an element to the beginning of it, just beware that it breaks .NET semantics, changes a length of a value that is typed 'a[].

For question 3.: We don't have a built-in way of measuring translated code performance yet. We are currently preparing a new major release of WebSharper where we will focus on performance more.

Now, you can use an inline to get a high resolution timestamp:

1
2

[<Inline "performance.now()">]
let performanceNow() : X<float>
By on 5/7/2016 2:51 AM ()

question 2:

I would like to write FSharp code whenever possible. So I want code some code that might look like this

let mutable = result for i in collection do result <- (f i) :: result
result <- List.rev result

I would like to know if there is a better way without directly referencing JS constructs.

By on 5/11/2016 4:27 PM ()

Why not write Seq.map f collection?

By on 5/11/2016 6:57 PM ()

The primary reason was that I was doing several other operation and then appending. So something like this

1
2
3
4
5
6
7
8
9
10

let foo (tasks : seq<_>) = 
   async
   {
     let globalItems = ref []
     for t in tasks do
       let! localItems = Server.MyRPC t
       for i in localItems do
         .. update DOM ..
         globalItems := i.point :: !globalItems
   }

The primary question was "is there is a better F# data structure for this?" I would have normally used System.Collections.Generic.List<_>, but I assume that the proxy wouldn't map well to javascript, which is an incorrect assumption. System.Collections.Generic.List<_> is an order of magnitude faster than list appends.

This isn't a question; it is an answer for others who are curious.

By on 5/14/2016 6:39 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper