Merge pull request #71 from zaaack/dev

Add multi-thread benchmark for SSR

Author: forki

Samples/SSRSample/benchmark/dotnet.fs

@@ -0,0 +1,57 @@
+
+open System
+open System.IO
+open System.Threading
+open System.Threading.Tasks
+open System.Diagnostics
+open Shared
+open Fable.Helpers.ReactServer
+open FSharp.Core
+let initState: Model = {
+  counter = Some 42
+  someString = "Some String"
+  someFloat = 11.11
+  someInt = 22
+}
+
+let coreCount = Environment.ProcessorCount
+let workerTimes = 5000
+let totalTimes = workerTimes * coreCount
+let mutable totalms = 0L
+
+let reset () =
+  totalms <- 0L
+
+let render times () =
+  reset ()
+  let tid = Thread.CurrentThread.ManagedThreadId
+  printfn "Thread %i started" tid
+  let watch = Stopwatch()
+  watch.Start()
+  for i = 1 to times do
+    renderToString(Client.View.view initState ignore) |> ignore
+  watch.Stop()
+  totalms <- totalms + watch.ElapsedMilliseconds
+  printfn "Thread %i render %d times used %dms" tid times watch.ElapsedMilliseconds
+  int watch.ElapsedMilliseconds
+
+let singleTest () =
+  let times = workerTimes * 2
+  let time = render times ()
+  printfn "[Single thread] %dms    %.3freq/s" time ((float times) / (float time) * 1000.)
+
+let tasksTest () =
+  Tasks.Parallel.For(0, coreCount, (fun _ -> render workerTimes () |> ignore)) |> ignore
+  Process.GetCurrentProcess().WorkingSet64
+
+let log label memory =
+  let totalms = totalms / (int64 coreCount)
+  printfn "[%d %s] Total: %dms    Memory footprint: %.3fMB   Requests/sec: %.3f" coreCount label totalms ((float memory) / 1024. / 1024.) ((float totalTimes) / (float totalms) * 1000.)
+
+[<EntryPoint>]
+let main _ =
+  reset ()
+  singleTest ()
+  reset ()
+  tasksTest() |> log "tasks"
+  0

Samples/SSRSample/benchmark/dotnet.fsproj

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <OutputType>Exe</OutputType>
+    <TargetFramework>netcoreapp2.0</TargetFramework>
+  </PropertyGroup>
+  <ItemGroup>
+    <Reference Include="Shared">
+      <HintPath>../src/Server/bin/Release/netcoreapp2.0/Server.dll</HintPath>
+    </Reference>
+  </ItemGroup>
+  <ItemGroup>
+    <Compile Include="./dotnet.fs" />
+  </ItemGroup>
+  <Import Project="../.paket/Paket.Restore.targets" />
+</Project>

Samples/SSRSample/benchmark/node.js

@@ -0,0 +1,79 @@
+const cluster = require('cluster');
+const http = require('http');
+const View = require('../src/Client/bin/lib/View')
+const ReactDOMServer = require('react-dom/server')
+const os = require('os')
+const coreCount = os.cpus().length;
+
+const initState = {
+  counter: 42,
+  someString: "Some String",
+  someFloat: 11.11,
+  someInt: 22,
+}
+
+const noop = () => {}
+const mb = bytes => (bytes / 1024 / 1024).toFixed(3)
+const workerTimes = 5000
+const totalTimes = workerTimes * coreCount
+
+function render(len = workerTimes) {
+  const start = Date.now()
+  while (len--) {
+    ReactDOMServer.renderToString(View.view(initState, noop))
+  }
+  return Date.now() - start
+}
+
+function singleTest() {
+  const times = workerTimes * 2
+  const time = render(times)
+  console.log(`[Single process] ${time}ms    ${(times / time * 1000).toFixed(3)}req/s`)
+}
+
+if (cluster.isMaster) {
+  console.log(`Master ${process.pid} is running`);
+
+  singleTest()
+
+  // Fork workers.
+  for (let i = 0; i < coreCount; i++) {
+    const worker = cluster.fork();
+  }
+
+  let totalms = 0
+  let count = 0
+  let memoryUsed = 0
+  function messageHandler(msg) {
+    if (msg.cmd === 'finished') {
+      count++
+      totalms = totalms + msg.time
+      memoryUsed += msg.memory
+      if (count >= coreCount) {
+        totalms = totalms / coreCount
+        console.log(`[${coreCount} workers] Total: ${totalms}ms    Memory footprint: ${mb(memoryUsed)}MB    Requests/sec: ${(totalTimes / totalms * 1000).toFixed(3)}`)
+        for (const id in cluster.workers) {
+          cluster.workers[id].destroy()
+        }
+        process.exit(0)
+      }
+    }
+  }
+
+  for (const id in cluster.workers) {
+    cluster.workers[id].on('message', messageHandler);
+  }
+  cluster.on('exit', (worker, code, signal) => {
+    console.log(`worker ${worker.process.pid} died`);
+  });
+} else {
+  console.log(`Worker ${process.pid}: started`);
+  const time = render()
+  console.log(`Worker ${process.pid}: render ${workerTimes} times used ${time}ms`)
+  const mem = process.memoryUsage()
+  process.send({
+    cmd: 'finished',
+    time,
+    memory: mem.heapTotal + mem.external
+  })
+}

Samples/SSRSample/benchmark/paket.references

@@ -0,0 +1,6 @@
+group Server
+  FSharp.Core
+
+group Client
+  Fable.Core
+  Fable.Import.Browser

Samples/SSRSample/build.fsx

@@ -5,6 +5,7 @@ open System
 open Fake
 
 let serverPath = "./src/Server" |> FullName
+let benchmarkPath = "./benchmark" |> FullName
 let clientPath = "./src/Client" |> FullName
 let deployDir = "./deploy" |> FullName
 
@@ -20,13 +21,18 @@ let yarnTool = platformTool "yarn" "yarn.cmd"
 let dotnetcliVersion = DotNetCli.GetDotNetSDKVersionFromGlobalJson()
 let mutable dotnetCli = "dotnet"
 
-let run cmd args workingDir =
+let runWithEnv cmd args workingDir (env: (string * string) list) =
   let result =
     ExecProcess (fun info ->
       info.FileName <- cmd
+      for (key, value) in env do
+        info.Environment.Add(key, value)
       info.WorkingDirectory <- workingDir
       info.Arguments <- args) TimeSpan.MaxValue
-  if result <> 0 then failwithf "'%s %s' failed" cmd args
+  if result <> 0 then failwithf "'%s %s' failedwith" cmd args
+
+let run cmd args workingDir =
+  runWithEnv cmd args workingDir []
 
 Target "Clean" (fun _ ->
   CleanDirs [deployDir]
@@ -54,6 +60,17 @@ Target "Build" (fun () ->
   run dotnetCli "fable webpack -- -p" clientPath
 )
 
+Target "BuildBench" (fun () ->
+  run dotnetCli "build --configuration Release" serverPath
+  run dotnetCli "build --configuration Release" benchmarkPath
+  run dotnetCli "fable npm-run buildClientLib" clientPath
+)
+
+Target "Bench" (fun () ->
+  run dotnetCli "./bin/Release/netcoreapp2.0/dotnet.dll" benchmarkPath
+  runWithEnv nodeTool "./node.js" benchmarkPath ["NODE_ENV", "production"]
+)
+
 Target "Run" (fun () ->
   let server = async {
     run dotnetCli "watch run" serverPath
@@ -82,4 +99,8 @@ Target "Run" (fun () ->
   ==> "RestoreServer"
   ==> "Run"
 
+
+"BuildBench"
+  ==> "Bench"
+
 RunTargetOrDefault "Build"

Samples/SSRSample/src/Client/Client.fs

@@ -12,9 +12,6 @@ open Fable.Import.React
 open Fable.Import.Browser
 open Shared
 
-Client.Bench.jsRenderBench()
-
-
 // let div = document.getElementById("elmish-app")
 // div.innerHTML <- ""
 // console.log("root", div)

Samples/SSRSample/src/Client/Client.fsproj

@@ -14,7 +14,6 @@
     <Compile Include="../../paket-files/fable-elmish/react/src/common.fs" />
     <Compile Include="../../paket-files/fable-elmish/react/src/react.fs" />
 
-    <Compile Include="Bench.fs" />
     <Compile Include="withReactHydrate.fs" />
     <Compile Include="Client.fs" />
   </ItemGroup>

Samples/SSRSample/src/Server/Server.fs

@@ -27,19 +27,6 @@ let initState: Model = {
   someFloat = 11.11
   someInt = 22
 }
-
-let bench () =
-  let watch = Stopwatch()
-  watch.Start()
-  let times = 10000
-  for i = 1 to times do
-    Fable.Helpers.ReactServer.renderToString(Client.View.view initState ignore)
-    |> ignore
-  watch.Stop()
-  printfn "render %d times in dotnet core: %dms" times watch.ElapsedMilliseconds
-
-bench ()
-
 let getInitCounter () : Task<Model> = task { return initState }
 
 let htmlTemplate =

docs/server-side-rendering.md

@@ -32,7 +32,7 @@ There are lots of articles about comparing dotnet core and nodejs, I will only m
 * F# is a compiled language, which means it's generally considered faster then a dynamic language, like js.
 * Nodejs's single thread, event-driven, non-blocking I/O model works well in most web sites, but it is not good at CPU intensive tasks, including html rendering. Usually we need to run multi nodejs instances to take the advantage of multi-core systems. DotNet support non-blocking I/O (and `async/await` sugar), too. But the awesome part is that it also has pretty good support for multi-thread programming.
 
-In a simple test in my local macbook, rendering on dotnet core is about ~2x faster then nodejs (with ReactDOMServer.renderToString + NODE_ENV=production). You can find more detail in the bottom of this page.
+In a simple test in my local macbook, rendering on dotnet core is about ~3x faster then nodejs (with ReactDOMServer.renderToString + NODE_ENV=production). You can find more detail in the bottom of this page.
 
 In a word, with this approach, you can not only get a better performance then nodejs, but also don't need the complexity of running and maintaining nodejs instances on your server!
 
@@ -257,31 +257,44 @@ cd ./fable-react/Samples/SSRSample/
 
 ## Run simple benchmark test in sample app
 
-The result of dotnet core is already printed in console when your server started, here are some commands to run benchmark of ReactDOMServer on nodejs.
+The SSRSample project also contains a simple benchmark test, you can try it in you computer by:
 
 ```sh
-cd ./Samples/SSRSample/src/Client
-dotnet fable npm-run buildClientLib
-NODE_ENV=production node ./bin/lib/Bench.js
-```
 
-### Benchmark result in my laptop (MacBook Pro with 2.7 GHz Intel Core i5, 16 GB 1867 MHz DDR3):
+cd ./Samples/SSRSample
+./build.sh bench # or ./build.cmd bench on windows
 
-```sh
+```
 
-# SSR on dotnet core with Debug mode
-# dir: fable-react/Samples/SSRSample/src/Server
-$ dotnet run
-render 10000 times in dotnet core: 3731ms
+Here is the benchmark result in my laptop (MacBook Pro with 2.7 GHz Intel Core i5, 16 GB 1867 MHz DD~R3), rendering on dotnet core is about ~4x faster then on nodejs in a single thread. To take the advantage of multi-core systems, we also tested with multi-thread on dotnet core and cluster mode in nodejs, the dotnet core version is still about ~3x faster then nodejs version, with less memory footprint!
 
-# SSR on dotnet core with Release mode
-# dir: fable-react/Samples/SSRSample/src/Server
-$ dotnet run --configuration Release
-render 10000 times in dotnet core: 2698ms
+```sh
 
-# SSR on nodejs with NODE_ENV=production
-# dir: fable-react/Samples/SSRSample/src/Client
-$ NODE_ENV=production node ./bin/lib/Bench.js
-render 10000 times in nodejs: 5782.382ms
+dotnet ./bin/Release/netcoreapp2.0/dotnet.dll
+Thread 1 started
+Thread 1 render 10000 times used 2414ms
+[Single thread] 2414ms    4142.502req/s
+Thread 1 started
+Thread 4 started
+Thread 3 started
+Thread 5 started
+Thread 3 render 5000 times used 3399ms
+Thread 5 render 5000 times used 3401ms
+Thread 1 render 5000 times used 3402ms
+Thread 4 render 5000 times used 3405ms
+[4 tasks] Total: 3401ms    Memory footprint: 32.184MB   Requests/sec: 5880.623
+
+/usr/local/bin/node ./node.js
+Master 78856 is running
+[Single process] 9511ms    1051.414req/s
+Worker 78863: started
+Worker 78861: started
+Worker 78860: started
+Worker 78862: started
+Worker 78863: render 5000 times used 10390ms
+Worker 78861: render 5000 times used 10459ms
+Worker 78862: render 5000 times used 10528ms
+Worker 78860: render 5000 times used 10567ms
+[4 workers] Total: 10486ms    Memory footprint: 104.033MB    Requests/sec: 1907.305
 
 ```