{"id":15384237,"url":"https://github.com/pmdartus/aura-performance","last_synced_at":"2026-03-24T07:30:17.597Z","repository":{"id":150222960,"uuid":"114987889","full_name":"pmdartus/aura-performance","owner":"pmdartus","description":"Example for Aura Performance presentation","archived":false,"fork":false,"pushed_at":"2017-12-21T11:36:30.000Z","size":825,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-18T19:01:18.443Z","etag":null,"topics":["aura","chrome-devtools","performance"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pmdartus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-21T09:28:47.000Z","updated_at":"2018-06-03T16:55:54.000Z","dependencies_parsed_at":"2023-04-17T05:49:08.969Z","dependency_job_id":null,"html_url":"https://github.com/pmdartus/aura-performance","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmdartus%2Faura-performance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmdartus%2Faura-performance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmdartus%2Faura-performance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmdartus%2Faura-performance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmdartus","download_url":"https://codeload.github.com/pmdartus/aura-performance/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239942758,"owners_count":19722330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aura","chrome-devtools","performance"],"created_at":"2024-10-01T14:41:12.344Z","updated_at":"2026-03-24T07:30:17.534Z","avatar_url":"https://github.com/pmdartus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SFDX  App\n\n```sh\nsfdx force:org:open -p c/AuraPerformance.app\n```\n\n## Mark timeline with Aura lifecycle\n\nInject the following snippet directly in the console before the first component you want to track get created. The snippet can't be injected from inside an Aura component or application because it of Locker prevent access to those private APIs.\n\n```js\n(function() {\n    const originalConstructor = Aura.$Component$.$ComponentClassRegistry$.prototype.$buildConstructor$;\n    \n    // Hook when the component is evaluated the first time\n    Aura.$Component$.$ComponentClassRegistry$.prototype.$buildConstructor$ = function() {\n        const klass = originalConstructor.apply(this, arguments);\n    \n        // Override component constructor\n        const overidden = function (...args) {\n            const [config] = arguments\n            const { descriptor } = config.componentDef;\n\n            console.time(`create ${descriptor}`);\n            const cmp = klass.apply(this, arguments);\n            console.timeEnd(`create ${descriptor}`);\n\n            return cmp;\n        }\n\n        // Reassign the component prototype\n        overidden.prototype = klass.prototype;\n\n        return overidden;\n    }\n\n    // Add markers to the component render\n    const originalRender = Aura.$Component$.$Component$.prototype.render;\n    Aura.$Component$.$Component$.prototype.render = function () {\n        console.time(`render ${this.type} - ${this.getGlobalId()}`);\n        let ret = originalRender.apply(this, arguments);\n        console.timeEnd(`render ${this.type} - ${this.getGlobalId()}`);   \n\n        return ret;\n    }\n\n    // Add markers to the component after render\n    const originalAterRender = Aura.$Component$.$Component$.prototype.afterRender;\n    Aura.$Component$.$Component$.prototype.afterRender = function () {\n        console.time(`after-render ${this.type} - ${this.getGlobalId()}`);\n        let ret = originalAterRender.apply(this, arguments);\n        console.timeEnd(`after-render ${this.type} - ${this.getGlobalId()}`);   \n\n        return ret;\n    }\n})()\n```\n\nWhen recording a timeline from the Chrome devtool you should have markers getting added on top of the stack trace\n\n![marker-snippet screenshot](/assets/marker-snippet.png?raw=true)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmdartus%2Faura-performance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmdartus%2Faura-performance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmdartus%2Faura-performance/lists"}