This script helps you analyze Long Animation Frame (LoAF) entries to identify performance bottlenecks in your web application. It filters "long-animation-frame" Performance entries based on keywords that you provide, and finds the correlated "long-task" entries. The data is also categorized into groups for comparison and is available for download as a CSV file.
This project is based on Google's LoAF API, for further information please read: https://developer.chrome.com/docs/web-platform/long-animation-frames
- Filters LoAF entries based on script names, URLs, or function names.
- Groups entries into two groups (A & B) for easy comparison.
- Provides detailed summaries of relevant LoAF entries, including blocking duration, execution time, and script details.
- Generates downloadable CSV reports for further analysis.
- Main report - contains ellaborate LoAF data from all of the groups
- LoAFs-Overviews - contains general overview of LoAFs of both comparison groups.
Column Description group A or B numberOfScripts The number of the scripts in each group longestScriptId The index of the longest script in the group. you can later find this script in the min report totalDuration The total duration of the scripts in the group totalLoafBlockingTime The total blocking time of LoAFs in each group totalCompileDuration The total compile duration of the scripts in the group totalExecutionDuration The total execution of the scripts in the group - A+B-Scripts-Summaries - contains summary of the scripts in each group.
Column Description source Script URL totalDuration The total script duration totalExecutionDuration The total execution duration of the script totalCompileDuration The total compile duration of the script isInNumberOfLoafs The number of LoAFs the script is part of isInNumberOfLongTasks The number of long tasks the script is part of loafsIds A list of the loafs the script is part of - All-LoAFs-Entries-Scripts - contains all of the scripts with the data supplied by the API
Follow these steps to find relevant "long-animation-frame" Performance entries that contain scripts that match the supplied keywords.
- Set
promptDownloadsMessage
tofalse
to disable controlling the downloads using prompts. - Enter keywords to the
groupASearchList
andgroupBSearchList
arrays.- Important Note - Leaving groupA empty will include all entries into group A without filtering.
- You can still use groupBSearchList to filter entries into group B.
- Set
shouldDownloadMainReport
to true to download the main report. - Set
shouldDownloadAllOtherReports
to true to download all other reports. - Adjust the
keysToIgnoreInReports
array to exclude specific fields from reports. - Set
inTesting
to true when running project's unit tests.
- Copy the contents of 'src/loaf-finder.js'
- Open in Chrome the page that you want to check
- Execute the code
It is recommended to execute the code either by pasting it to the devTools console or as a snippet.
More information or devTools snippets can be found here: https://developer.chrome.com/docs/devtools/javascript/snippets
The script will print the results in the devTools console.
You'll be prompted to download reports containing detailed data for each group.
- You can choose to disable this prompt by setting
promptDownloadsMessage
tofalse
. - You can also control what reports to download by setting the
shouldDownloadMainReport
andshouldDownloadAllOtherReports
settings. - you can also download the reports later by running the
downloadReports
function in the console.
- Update
groupASearchList
andgroupBSearchList
arrays with keywords. - Run the script in your browser's developer tools console or as a snippet.
- Choose whether to download reports or not.
- Open devTools console to view the results.
Chrome >= 123
Any kind of positive contribution is welcome! Please help us to grow by contributing to the project.
If you wish to contribute, you can work on any features of your own. After adding your code, please send us a Pull Request.
Please read CONTRIBUTING
for details on our CODE OF CONDUCT
, and the process for submitting pull requests to us.