ember-perf-timeline - GitLite

KO | EN

gitlite — search

#react #ai #typescript #rust #deep-learning #docker #nodejs #macos #windows #cli #vue #ios #mcp #open-source

ember-perf-timeline

(★ 97)

Add performance information to Chrome's Timeline for Ember applications

파일 탐색기

최종 버전 다운로드 (.zip)

- - ember-perf-timeline.js
- .gitkeep
- - ember-perf-timeline.js
- .gitkeep
- before-render-component-can-be-hard-to-find.png
- containment.png
- timeilne-search.png
- travis.png
- update-and-create-render.png
- ember-try.js
- environment.js
- - destroy-app.js
  - module-for-acceptance.js
  - resolver.js
  - start-app.js
- - .gitkeep
- - .gitkeep
- .eslintrc.js
- .jshintrc
- index.html
- test-helper.js
- .gitkeep
.bowerrc
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.jshintrc
.npmignore
.template-lintrc.js
.travis.yml
.watchmanconfig
CONTRIBUTING.md
ember-cli-build.js
index.js
LICENSE.md
package.json
README.md
testem.js
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/ember-best-practices/ember-perf-timeline

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ember-perf-timeline

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ember-perf-timeline [![Build Status](https://travis-ci.org/ember-best-practices/ember-perf-timeline.svg?branch=master)](https://travis-ci.org/ember-best-practices/ember-perf-timeline)

Add performance information to Chrome's Timeline for Ember applications.

Currently this addon provides information for `Component` and `{{outlet}}` render, although more support can (and should) be added in the future.

![timeline example](https://raw.githubusercontent.com/ember-best-practices/ember-perf-timeline/master/assets/travis.png)

**Warning: Running with the profiler and instrumentation enabled will itself impede performance itself. Also, be sure to test in production mode or all the development mode assertions will affect performance as well.**

## Installation

* `ember install ember-perf-timeline`

## Usage

1. Add `_ember-perf-timeline=true` to the queryString of your URL.
2. Record a timeline (using either timeline tab or performance tab in Chrome).

*Note: If the query param is not set, the addon will not impact your app's performance, and can be left installed for production. Additionally, if the query param is set, the instrumentation overhead may be non-trivial.*

### Configuration

The `_ember-perf-timeline` query param can be either `true` or a `,` separated list.
For example, `?_ember-perf-timeline=render.component,render.outlet` will enable instrumentation for `render.component` and `render.outlet` but ignoring other available instrumentations. `?_ember-perf-timeline=true` will enable all available instrumentations.

You can also configure your app's environment to always enable instrumentations in development mode.
This can prevent route transitions clearing the queryParam.

```js
module.exports = function(environment) {
  let ENV = {
    // ...
  };

if (environment === 'development') {
    ENV.emberPerfTimeline = {
      renderComponent: true,
      renderOutlet: true,
      renderGetComponentDefinition: true
    }
  }

if (environment === 'production') {
  }

return ENV;
};
```

### Containment

Times for a given component include its own time and those of its children. For the following example, the parent component took a total of 6 ms, which includes the 1.5ms of the child:

![containment example](https://raw.githubusercontent.com/ember-best-practices/ember-perf-timeline/master/assets/containment.png)

## Example

1. Run `ember s` in this repo.
2. Visit [http://localhost:4200/?_ember-perf-timeline=true](http://localhost:4200/?_ember-perf-timeline=true).
3. Open "Timeline" or "Performace" tab in the Chrome Developer Tools.
4. Record a timeline.
5. You will see something like:

![update and create of components on render](https://raw.githubusercontent.com/ember-best-practices/ember-perf-timeline/master/assets/update-and-create-render.png)

### What else can you do?

1. You can search by the name of your component:

![timeline search](https://raw.githubusercontent.com/ember-best-practices/ember-perf-timeline/master/assets/timeilne-search.png)

2. You can search for both `$beforeRenderComponent` and `$afterRenderComponent`, to find the bounds of component renderings within the flame graph:

![searched keywords may be hard to find](https://raw.githubusercontent.com/stefanpenner/ember-perf-timeline/master/assets/before-render-component-can-be-hard-to-find.png)

*Note: Searching is limited to the visibile portion of the timeline.*

# Developement

## Running

* `ember serve`
* Visit your app at [http://localhost:4200](http://localhost:4200).

## Running Tests

* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`

## Building

* `ember build`

For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).