단일 페이지 응용 프로그램의 성능을 향상시키는 방법은 무엇입니까?

Question

소개
저는 BackboneJS와 레일스 백엔드를 사용하여 (대부분) 단일 페이지 application을 가지고 있습니다.

대부분의 상호 작용은 웹 응용 프로그램의 한 페이지에서 발생하기 때문에 사용자가 처음 페이지를 방문 할 때 기본적으로 하나의 큰 깊숙이 참여한 쿼리에서 많은 정보를 데이터베이스에서 가져와야합니다.

이로 인해이 한 페이지에서 다소로드 시간이 길어졌습니다.

는 NewRelic 내 대부분의 문제 때문에 457 개별 빠른 메소드 호출이라는 것을 말해 것으로 보인다.

지금 나는 (내가 Bullet gem로 확인) 내가 할 수있는 모든 열망 로딩을 한 적이 그리고 난 여전히 문제가 있습니다.

이러한 메서드 호출은 내 Rabl 시리얼 라이저에서 발생합니다. JSON을 일련 번호로 serialize하여 백본을 초기화하는 데 사용합니다. 이 모든 것을 이해할 필요는 없지만 최대 457 건의 메소드 호출을 추가 할 수 있다고 말하는 것은 충분합니다.

object @search 
attributes :id, :name, :subscription_limit 

# NOTE: Include a list of the members of this search. 
child :searchers => :searchers do 
    attributes :id, :name, :gravatar_icon 
end 

# Each search has many concepts (there could be over 100 of them). 
child :concepts do |search| 
    attributes :id, :title, :search_id, :created_at 

    # The person who suggested each concept. 
    child :suggester => :suggester do 
    attributes :id, :name, :gravatar_icon 
    end 

    # Each concept has many suggestions (approx. 4 each). 
    node :suggestions do |concept| 
    # Here I'm scoping suggestions to only ones which meet certain conditions. 
    partial "suggestions/show", object: concept.active_suggestions 
    end 

    # Add a boolean flag to tell if the concept is a favourite or not. 
    node :favourite_id do |concept| 
    # Another method call which occurs for each concept. 
    concept.favourite_id_for(current_user) 
    end 
end 

# Each search has subscriptions to certain services (approx. 4). 
child :service_subscriptions do 
    # This contains a few attributes and 2 fairly innocuous method calls. 
    extends "service_subscriptions/show" 
end 

그래서 내가 이것에 대해 뭔가를해야 할 것 같다하지만 난 취할 방법 확실하지 않다. 여기에 내가 가진 잠재적 인 아이디어의 목록입니다

성능 개선 아이디어는

덤 다운
가 아마 실제 필요하지 않은 사용자에게 정보를 제공 할 수있는 방법을 마련 할 수있는 인터페이스 존재할 데이터. 내가 왜 이런 일을 절대적으로해야하는지 모르겠다. Trello과 같은 다른 단일 페이지 어플리케이션은 엄청나게 복잡한 인터페이스를 가지고있다.

개념 페이지 번호
개념을 페이지 매기기하면 매번 데이터베이스에서 추출되는 데이터의 양이 줄어 듭니다. 제품이 열등한 사용자 인터페이스일까요?

캐싱
현재 페이지 새로 고침은 DB에서 전체 검색을 다시 추출합니다. 아마도 DB 히트를 줄이기 위해 앱의 일부를 캐시 할 수 있습니다. 이것은 내가 다루는 데이터의 상당 부분이 정적이기 때문에 지저분 해 보인다.

여러 요청
JSON을 페이지에 포함하지 않고 페이지를 제공하는 것이 기술적으로 나쁘지만 페이지를로드하지 않은 채로 데이터를 가져 오는 경우 사용자가 빠르게 진행되는 것처럼 느낄 수 있습니다.

인덱스
필자는 모든 외래 키에 인덱스가 있는지 확인해야합니다. 또한 색인이있는 곳 (예 : 즐겨 찾기?)을 추가하고 추가하는 데 도움이되는 곳을 생각해 봐야합니다.

이동 방법 데이터베이스로 호출
아마도 내가 내 뷰 계층에서 반복 작업을 수행 한 결과 중 일부를 데이터베이스에 캐시하고 대신 계산할 수 있습니다.또는 내가 읽은 것보다 쓰기에 관한 것들을 동기화 할 수 있습니다.

질문
는 아무도 내가 내 시간을 소비해야 무엇인지에 어떤 제안이 있습니까?

Answer 1

실제 사용자 인터페이스를 보지 못한 채 대답하는 것은 어려운 질문이지만 초기 인터페이스를 표시하는 데 필요한만큼의 데이터 만로드하는 데 중점을 둡니다. 예를 들어 사용자가 제시하는 데이터 중 일부를 보려면 드릴 다운해야하는 경우 초기 페이로드의 일부로로드하는 대신 필요에 따라 해당 데이터를로드 할 수 있습니다. 검색에는 100 개의 "개념"이있을 수 있습니다. 처음에는 모든 개념을 가져올 필요가 없을 수도 있습니다.

결론적으로 클라이언트 측에 문제가있는 것 같지 않습니다. 서버 쪽 코드가 느려지는 것처럼 들리므로 적은 데이터를 가져 오기 위해 수행 할 수있는 작업을 탐색합니다. 복잡한 쿼리를 확실히 요구할 때까지 지연시킬 수 있습니다.

Answer 2

RequireJS과 같은 자산 로더를 사용하여 동적으로로드되는 모듈로 JS 코드 기반을 분리하는 것이 좋습니다. 이렇게하면 적재시에 너무 많은 XHR이 발사되지 않습니다.

특정 모듈이 필요할 때 모든 페이지로드 대신 적절한 시간에로드하고 초기화 할 수 있습니다.

코드가 약간 복잡하면 각 모듈을 시작하고 중지 할 수 있어야합니다. 따라서 polling이 발생하거나 복잡한 코드가 실행되는 경우 모듈을 중지하여 성능을 높이고 네트워크 부하를 줄일 수 있습니다.