Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive Catalog Navigation Proposal #247

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

HongZheng
Copy link

Objective

The objective of this proposal is to introduce a test case that models user interaction with a CSS heavy web page that features an image carousel and a dashboard or a catalog. Some popular examples are: Netflix Top 10 TV, IMDB index and Facebook Photo

Motivation

CSS is an essential component of modern web development that helps developers build a large number of appealing and engaging websites. When CSS enables fancy webpages, the performance of CSS becomes an important factor affecting user experience on the web. Therefore, we propose adding a CSS heavy test case into Speedometer3 to help browsers measure and improve CSS performance. This proposal exercises CSS and DOM operations in the popular format of an image carousel and a linked dashboard.

Description

The test case reflects real-world patterns by testing interactions listed in the column “ Typical User Interactions” in the following table

Real World Scenario URL Typical UI Elements Typical User Interactions Typical Web tech exercised
Netflix Top 10 TV https://top10.netflix.com/tv Carousel & Table of Popular contents Change selection in Dropdown triggers the update of carousel images and contents in table CSS transform, opacity/size settings
IMDB Index https://www.imdb.com/ Carousel & List of contents in DIV blocks Click the arrow button in carousel to update the list of the contents CSS transform, opacity/color settings
Facebook photo https://www.facebook.com/photo/?fbid=742932955788401&set=a.636245978533785 Slideshow & List of contents in DIV blocks Click the arrow button in carousel to update the list of the contents CSS opacity/color/padding settings

It simulates a food menu with 5 kinds of food. Each food category contains 100 choices in a table. And it switches the food pictures and refreshes the table through click events. The proposal exercises many CSS property operations (referencing the statistics from https://chromestatus.com/), such as transform animation, opacity/color setting, position/size adjustment etc. The web page of this proposal looks like the image below.

Measurement methodology

The proposal mainly measures two scenarios: image carousel and table refresh. The measurement starts with a click event on food pictures and ends with the layout after the click event. The image below shows the duration measured in Chrome trace.


NOTE: Please see issue #175 for more information on this proposal


],
]);

function generateTableBody(name) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Firefox and Chrome spends roughly 1/4 of the time in this method, not sure that's the intended purpose.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The generated table contains some heavy CSS effects and animations, which reflects the purpose of the workload. However generateTableBody function sets many innerHTML which may consume much time in HTML parsing. We can try to use a big innerHTML instead of a lot of small ones

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants