Interactive Catalog Navigation Proposal #247
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ], | ||
| ]); | ||
|
|
||
| function generateTableBody(name) { |
There was a problem hiding this comment.
Firefox and Chrome spends roughly 1/4 of the time in this method, not sure that's the intended purpose.
There was a problem hiding this comment.
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
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