Skip to main content

Js Profiler

Chrome DevTools provides a profiler for the Chrome browser, which gives developers a way to analyse the performance of their playable ad in the browser.

You are able to check a variety of events and data from your scene at runtime or during loading in order to identify potential issues, drops in performance and benchmark your playable.

For precise measurements, open Google Chrome in Incognito Mode. Incognito Mode ensures that Chrome runs in a clean state. For example, if you have a lot of extensions installed, those extensions might create noise in your performance measurements.
Open Chrome DevTools by pressing command+option+i (Mac) or control+shift+i (Windows, Linux) and navigate to the performance tab to see what's happening under the hood.

Record Runtime Performance#

Once selected, the performance tab should show the profiler in the chrome window. There are some steps you need to do in order to start capturing profiling data.

images-msmall

  1. In DevTools, click the Record option (first left option). DevTools will then capture performance metrics as the page runs.
  2. Interact with the page, or wait a few seconds for the data to capture the sequence you want to analyse.
  3. Click Stop when the sequence is finished. DevTools will stop recording, process the data and then display the results on the Performance panel.

Once the Performance tab is selected, and a session recorded, here is what a typical view may look like.

images-large

Record Performance#

The profiling in Unity may not show performance issues with scenes but when converted and run in HTML5 it can be apparent that some gameplay is not very performant and slow.

DevTools allows you to identify which part is performing poorly much like the Unity profiler.

Begin recording and play through your ad, its important to capture the area that may be causing performance issues or causing inconsistent results.
Unity engine APIs may not be as performant once converted into HTML5, as builds need to be lightweight and have limitations of running on the web-browser.

Chrome Profiling: Example#

Recorded profiles show a timeline that can be used to narrow down the data to a specific area of information, allow for finer look into the calls like rendering, events, functions and time-taken to perform actions.

images-large

In the image below Animation Frame Fired and Function Call is causing a drop in performance, as these are taking a long time to execute, which is slowing down the pace of the ad gameplay. In these situations you want gameplay to be a fluid as possible!

Here we have an animation event and function call that is causing a slow in performance due to the time-taken to perform these calls, but identifies what the issue is in terms of where begin to reduce this time delay and improving performance.

images-medium

The Views are from a specific analysing tab which is:

  • Main

The main tab represents the main thread activity with a Flame chart. The x-axis represents the recording over time. The y-axis represents the call stack. From top to bottom, the events on top cause the events below it.

  • Flame Chart

The Flame chart as described above shows the call stack and events. These events can be clicked and viewed in the activity table for specific events information inside the call stack.

Analysis of the cause#

To understand why this happens, the effects of running your code in a different environment needs to always be in consideration.

Following the Flame chart down the execution order it helps to identify where the problem origin is. In this case somewhere during animation call and a specific function call.

The solution for this example is that the Instantiation of the Cube objects followed by a FindObjectWithTag call, causes a time-consuming and slow process of searching the scene and creating many objects at the same time, especially if you then Destroy these objects.

A general point of advice is to avoid these kinds of issues by not using methods that require such resource expensive calls or require a large amount of draw calls in an update method.

Try to object-pool in these cases which will significantly improve performance in your scene.