모드 없음#perfmatters

표지 이미지 신용: Marc-Olivier Jodoin
인터넷을 통해 사용자에게 내용을 전달할 때 성능은 확인해야 할 관건적인 체크 상자 중 하나이다.비록 우리의 내용은 매우 좋지만, 만약 우리의 사이트/응용 프로그램이 좋지 않다면, 우리는 제품의 유실에 직면하게 될 것이다.빨리 시작해야 돼!빨리!!우리 사용자층을 잡고 붙잡아라.
초기 부하 감소, 적당한 자산 캐시, 관건적인 자원 추출, 무거운 계산량을 직원에게 이전하는 등 우리 사이트의 성능을 향상시킬 수 있는 훌륭하고 똑똑한 기술이 많다.
본고에서 우리는 또 다른 이런 기술을 보게 될 것이다. 나는 Pinterest engineering 블로그에서 영감을 얻었다. 이 블로그는 그들의 unsplash.com을 소개했다.전체 게시물은 그들의 여정을 간결하게 서술했다.더 많은 재미있는 로드 모드를 시도해 보세요.
이 글의 관점은 다음과 같다.
만약 당신이 Pin 요약을 훑어본다면, 우리는 모든 Pin에 대한 정보를 가지고 있습니다.하나를 클릭하면 상세한 견해를 얻을 수 있습니다.Pin 데이터는 규범화되어 있기 때문에 서버에서 완전한 디테일을 얻을 때까지 요약 보기에서 유한한 디테일을 쉽게 표시할 수 있습니다
응용 프로그램에서 이러한 상황을 만날 수 있습니다. 목록에서 선택한 사물 목록이 있습니다. 항목을 클릭하면 이 항목의 모든 상세한 정보를 불러와야 합니다.이것이 바로 NIL 모드(공개될 확장)의 위치입니다.😜) 역할을 발휘할 것이다.사용자가 특정 항목을 클릭하면 목록 보기에서 사용할 수 있는 모든 데이터를 가져와 세부 정보 보기에 놓고, 사용자가 표시된 데이터를 소화할 때 세부 정보 보기에 표시할 나머지 세부 정보만 가져옵니다.
위의 모드를 Near-Monster Load(NIL) 모드로 이름 지정😉!
이를 통해 사용자는 항목을 클릭할 때마다 튀는 마운트 마이크로스피커를 완전히 제거할 수 있다.이 점을 감지한 성능 개선이 있으면 사용자는 페이지가 실시간으로 나타난다고 느낄 수 있다💪
다음은 Ember에서 NIL 모드를 구현하는 것입니다.js 응용 프로그램, 모든 프레임워크를 계승할 수 있습니다.
우리의 예시 응용 프로그램은 블로그 사이트인데, 그 중에는 블로그 게시물 목록이 하나 있다.일반적인 실현을 통해 이 사이트는 마치👇
one year PWA success story
매번 어떤 게시물을 클릭할 때마다 우리는 플러그인을 불러오는 것을 볼 수 있고 서버에서 데이터를 불러오기를 기다려야 한다.적재 시간은 각종 요소에 달려 있다.NIL 모드를 실현하기 위해서, 우선, 우리는 중간 로드 하위 상태 (post를 클릭한 후 로드 화면) 를 제거한 다음, 데이터를 목록 페이지에서 상세한 정보 페이지로 전달해야 한다.마운트 서브 상태는 네트워크 요청으로 모델 연결에서 온 전체 게시물의 세부 사항을 가져옵니다.만약 우리가 모델 연결을 억제한다면, 불러오는 화면은 끌어들이지 않을 것이다.너무 좋아요.그런데 어떻게 하지?
디테일 보기로 전환할 때, 만약에 우리가 모델 데이터를 전달한다면, 디테일 페이지의 모델 연결을 호출하지 않고, 반대로 목록 페이지에서 보내는 데이터는 모델로 사용됩니다.

// routes/posts.js - Before

this.transitionTo('post.details', post.id);

// routes/posts.js - After

this.transitionTo('post.details', post);

여기에서 post 목록 페이지의 유한한 데이터가 됩니다.여기서 주의해야 할 것은 데이터는 우리가 상세한 정보 페이지에서 유지하는 모델과 같이 규범화되어 중단을 피해야 한다는 것이다.
예를 들어 상세한 정보 페이지의post 데이터를 키details가 있는 대상에 구성하려면 이를 정확하게 규범화해야 한다.

// routes/posts.js

let postDetails = {
    details: post // from the list page
}
this.transitionTo('post.details', postDetails);

만약 네가 이미 이 점을 해냈다면, 너는 정말 대단할 것이다.현재, 상세한 정보 페이지는 현재 불러와야 합니다. 불러오는 하위 상태가 없습니다.하이파이🙌
그러나 너도 알다시피 우리의 페이지는 반제품이 될 것이다.걱정 마!해결할게요.앞에서 말한 바와 같이, 우리는 사용자가 사용 가능한 데이터를 소화하는 동시에 나머지 데이터를 추출해야 한다.이를 위해 우리는 setupController 갈고리 안에서 데이터 추출을 촉발하여 나머지 데이터를 추출할 수 있다.

// routes/posts/list.js

setupController(controller, model) {
    this._super(...arguments);
    let postId = model.details.id; // model is the passed data from the list
    controller.get('fetchPostMeta').perform({ postId });
    controller.get('fetchComment').perform({ postId });
}

위의 코드 세션에서 나는 ember-concurrency 개의 임무를 사용하여 이 게시물의 나머지 게시물 디테일과 평론을 얻었다.작업을 완료하고 UI에 데이터를 로드하기 전에 적절한 위치에서 로드 기호를 사용할 수 있습니다.마찬가지로, 우리는 불러오는 데이터를 정확하게 규범화해야 한다.다시 한 번 감지 성능을 향상시키는 또 다른 기교는 가능한 한 적당한 위치에서 골격 캐리어를 사용하는 것이다.에 관한 위대한 문장도 있다.세부 구현 세부 사항 검토😃
NIL 모드를 구현한 후 예제 응용 프로그램은 다음과 같습니다.
skeleton loading in Ember.js
너는 블로그의 작가와 평론이 모두 게으르게 실려 있는 것을 볼 수 있다.이것은 이전 버전보다 훨씬 좋을 수 있습니다. 이전 버전에서는 사용자가 화면에서 일부 내용을 얻기 위해 일정 시간을 기다려야 합니다.
사용자의 시간을 절약할 수 있기를 바랍니다🙂이것은 큰 승리야, 그렇지!😉 전체 회전