Skip to content

web-perf/svg-perf-test

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

svg-perf-test

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+

  1. Download ChromeDriver and start it using ./chromedriver
  2. Clone this repository and ensure that you checkout the this branch
  3. Install all npm dependencies using npm install
  4. Install sub modules using git submodule init and git submodule update
  5. Start the test using node lib/index.js

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

  1. 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
  2. A local Node Server is started
  3. Each webpage is loaded on the browser (Android on Chrome by default)
  4. Pages are scrolled, and tracing/timeline data is collected
  5. Browser-perf calculates metrics like frame rates, paints, etc and stores results in data.json.

Helper Scripts

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. dataToCSV.js converts data.json to _results.csv to view and analyze the results.

About

What type of Icons is faster ? Font Icons, Inline SVGs or Background SVGs ?

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 72.5%
  • HTML 27.5%