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.

Sign up for GitHub

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

Add mark_use_counter recommended use name. #107

Merged
merged 3 commits into from
Nov 14, 2023
Merged

Add mark_use_counter recommended use name. #107

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fb33cbe
Add mark_use_counter recommended use name as discussed in web perform…
anniesullie Nov 9, 2023
1fb547f
Define feature and framework
anniesullie Nov 10, 2023
cb96843
Correct spelling error
anniesullie Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 47 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,31 +409,60 @@ <h2>Recommended mark names</h2>
<dl>
<dt>"<dfn class="export">mark_fully_loaded</dfn>"</dt>
<dd>The time when the page is considered fully loaded as marked by the
developer in their application.</dd>
developer in their application.
<div class="note">
<p>In this example, the page asynchonously initializes a chat widget, a
searchbox, and a newsfeed upon loading. When finished, the
"<a>mark_fully_loaded</a>" mark name enables lab tools and analytics
providers to automatically show the timing.
</p>
<pre class="example">
window.addEventListener("load", (event) => {
Promise.all([
loadChatWidget(),
initializeSearchAutocomplete(),
initializeNewsfeed()]).then(() => {
performance.mark('mark_fully_loaded');
});
});
</pre>
</div>
</dd>
<dt>"<dfn class="export">mark_fully_visible</dfn>"</dt>
<dd>The time when the page is considered fully visible to an end-user
as marked by the developer in their application.</dd>
<dt>"<dfn class="export">mark_interactive</dfn>"</dt>
<dd>The time when the page is considered interactive to an end-user as
marked by the developer in their application.</dd>
<dt>"<dfn class="export">mark_use_counter</dfn>"</dt>
Copy link

Choose a reason for hiding this comment

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

The terminology of use counter is confusing and implies that the browser will be incrementing a counter somewhere, when I don't believe that is the case for this proposal? A term that is meaningful outside of internal chromium terminology might be better - perhaps something like mark_feature_usage?

Copy link
Contributor

Choose a reason for hiding this comment

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

That's great feedback, thanks!!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Sorry I missed this, will update in a follow-up

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Follow-up: #108

<dd>Mark the usage of a feature which may impact performance so that
tooling and analytics can take it into account. The <a data-link-for="PerformanceMark">detail</a>
metadata can contain any useful information about the feature, including:
<dl>
<dt><dfn class="export">feature</dfn></dt>
<dd>The name of the feature used.</dd>
<dt><dfn class="export">framework</dfn></dt>
<dd>If applicable, the underlying framework the feature is intended
for, such as a JavaScript framework, content management system, or
e-commerce platform.</dd>
</dl>
<div class="note">
<p>In this example, the ImageOptimizationComponent for FancyJavaScriptFramework
is used to size images for optimal performance. The code notes
this feature's usage so that lab tools and analytics can measure
whether it helped improve performance.
</p>
<pre class="example">
performance.mark('mark_use_counter', {
'detail': {
'feature': 'ImageOptimizationComponent',
anniesullie marked this conversation as resolved.
Show resolved Hide resolved
'framework': 'FancyJavaScriptFramework'
}
})
</pre>
</div>
</dd>
</dl>
<div class="note">
<p>In this example, the page asynchonously initializes a chat widget, a
searchbox, and a newsfeed upon loading. When finished, the
"<a>mark_fully_loaded</a>" mark name enables lab tools and analytics
providers to automatically show the timing.
</p>
<pre class="example">
window.addEventListener("load", (event) => {
Promise.all([
loadChatWidget(),
initializeSearchAutocomplete(),
initializeNewsfeed()]).then(() => {
performance.mark('mark_fully_loaded');
});
});
</pre>
</div>
</section>
<section id="privacy-security" class="informative">
<h2>Privacy and Security</h2>
Expand Down
Loading