Created
June 12, 2018 20:27
-
-
Save soleo/23f7c84fe2ddb9212a65971f57ae3902 to your computer and use it in GitHub Desktop.
FluentConf 2018: Web performance API deep dive
This file contains hidden or 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
| // #1 High Res Time, Performance.Now | |
| (function(){ | |
| var start = performance.now(); | |
| for(var i=0; i<=1000000; i++) { | |
| } | |
| var end = performance.now() | |
| console.log('Measure:', end-start); | |
| })(); | |
| (function(){ | |
| var start = performance.now(); | |
| for(var i=0; i<=1000000000; i++) { | |
| } | |
| var end = performance.now() | |
| console.log('Measure:', end-start); | |
| })(); | |
| // #2 performance timeline | |
| // console.log(performance.getEntriesByType("navigation")); | |
| performance.getEntriesByType("navigation")[0].toJSON() | |
| // DNS Lookup time | |
| performance.getEntriesByType("navigation")[0].domainLookupEnd - performance.getEntriesByType("navigation")[0].domainLookupStart | |
| // TTFB | |
| performance.getEntriesByType("navigation")[0].responseStart - performance.getEntriesByType("navigation")[0].requestStart | |
| // #3: Navigation timing for older browsers | |
| // #4: Resource Timing | |
| performance.getEntriesByType('resource') | |
| // 6 connections for http1.1 resources, 1-2 connection for http2 resources | |
| //https://shiral99.wixsite.com/mysite-20?experiments=se_wPhotoSvgFiltersV2 | |
| performance.getEntriesByType('resource').filter(item => item.initiatorType.includes("img")) | |
| performance.getEntriesByType('resource') | |
| .filter(item => item.initiatorType.includes("img")) | |
| .map(item => item.transferSize + ':' +item.encodedBodySize) | |
| // Avg downloading time | |
| performance.getEntriesByType('resource') | |
| .filter(item => item.initiatorType.includes("img")) | |
| .reduce((sum, {duration}) => sum + duration, 0) | |
| // Buffer Size Limitation (150 entries) | |
| // set new buffer size , use event hanldler | |
| // https://conferences.oreilly.com/fluent/fl-ca/public/schedule/speakers?locale=en | |
| performance.getEntriesByType('resource').filter(item => item.initiatorType === "img" && item.name.includes('user_')) | |
| let currentBufferSize = 150; | |
| performance.onresourcetimingbuffferfull = function() { | |
| currentBufferSize = currentBufferSize * 1.1; | |
| performance.setResourceTimingBufferSize(currentBufferSize); | |
| }; | |
| performance.getEntriesByType('resource').filter(item => item.initiatorType === "img" && item.name.includes('user_')) | |
| // #5 Server Timing | |
| // PerformanceObserver | |
| const allImages = []; | |
| const perfObserver = new PerformanceObserver(list => { | |
| let imageEntries = list.getEntriesByType('resource').filter(item => item.initiatorType === "img" && item.name.includes('user_')) | |
| allImages.push(...imageEntries); | |
| }); | |
| perfObserver.observe({entryTypes: ["resource"]}); | |
| // #6 Paint Timing | |
| const observer = new PerformanceObserver(list => { | |
| let entries = list.getEntriesByType('paint').map(item => item.toJSON()); | |
| console.table(entries, ['name', 'startTime']); | |
| }); | |
| observer.observe({entryTypes: ["paint"]}); | |
| // #7 User Timing with WebPageTests | |
| // #8 Long task Timing | |
| const observer = new PerformanceObserver(list => { | |
| let entries = list.getEntries() | |
| console.log(entries); | |
| }); | |
| observer.observe({entryTypes: ["longtask"]}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment