Tests that try to answer the question -
What type of Icon performs the best ?
Font Icons, SVGs inlined in a Web Page, or SVGs as Background Images in CSS
Read more about the experiment on the blog post.
Running the tests
Requires Node 0.11 or greater and npm and Chrome 41+
- Download ChromeDriver and start it using
- Clone this repository and ensure that you checkout the this branch
- Install all npm dependencies using
- Install sub modules using
git submodule initand
git submodule update
- Start the test using
Tests are run on Chrome on an Android device by default. Ensure that you have an android device connected, and have run
adb server start.
Change the browser-perf options to
chrome to run on desktop Chrome.
What happens in the test
- First, three web pages are created for each of the 700+ icons in the ioniocs/src/ folder, one each for inline SVG, background SVG and Font Icon
- A local Node Server is started
- Each webpage is loaded on the browser (Android on Chrome by default)
- Pages are scrolled, and tracing/timeline data is collected
- Browser-perf calculates metrics like frame rates, paints, etc and stores results in
The repo also contains a
createMetadata.js to create a
_meta.json file that has a list of all icons, and metrics that need to show up when the
data.json is converted to a csv file.
_results.csv to view and analyze the results.