흰색 (빈) 막대는 유휴 시간을 나타냅니다. 나는> 내가 응용 프로그램 (기껏) 실행됩니다 너무 집중해야 60 프레임을 알고 적어도> 초당 30 프레임DevTools에서 크롬 프레임 속도 결과 읽기
이 내 줄 수 있습니다 : 
당신이 볼 수 있듯이, 내가 스크롤에 다시 칠거야 (이미지의 배경 위치 변경). 중간 선은이 경우 60fps로 표시되며주의를 기울이면 최상위 선 (30fps)이 있습니다.
필자의 결과를 다른 사람들과 비교 한 결과 유휴 시간이 길어진 것으로 보인다. 괜찮습니까? 나는 paint, javascript 및 그 밖의 것들이 나쁘다는 것을 알고 있지만 유휴 시간을 표시하는 목적은 무엇입니까? 나는 그것을 없애려고 시도해야합니까, 그렇다면 무엇을주의해야합니까?
또한 "이미지 디코드"로 인해 지금은 스파이크가 있습니다. 제가 할 수있는 일이 있습니까?
당신은 디코드 짧은 것 이미지의 크기를 줄일 수 있습니다
이미지 디코딩. 활동이 없을 때 브라우저가 속임수를 사용하여 이러한 디코딩을 일찍 수행 할 수 있으므로 FPS가 손상되지 않습니다.
30fps에서 60fps로 이동했는지 확인하기 위해 큰 이미지를 일시적으로 종료합니다.
당신은 당신이 당신의 스크롤 처리기에서하고있는 작업의 양을 최소화해야
스크롤 핸들러입니다. 대부분 DOM과 타임 스탬프에서 하나의 스크롤 메트릭을 가져와야합니다. 그런 다음 requestAnimationFrame 루프 스타일에 조정을 수행
background-position 특히 유스 케이스의 종류에 대해 잘 웹킷이나 깜짝 할 사이에 최적화되어 있지 않습니다 http://www.hesslerdesign.com/blog/javascript/optimizing-javascript-performance-handling-coordinate-updates/
중공업 페인트. div에 이미지를 넣고 transform: translate(x,y)을 사용하여 위치를 슬라이드합니다 (가능하면 자체 레이어로 이동합니다). 성공하면 모든 스크롤에서 전체 화면을 다시 칠하지 않습니다.
30 FPS 아닌가요 나쁜
고체 30FPS 실제로 60 및 45의 모든 시간 사이에 점프 뭔가보다 더 보인다. 호기심 .. 카나리아 또는 망막 스크린에 있습니까?
스크린 샷은 안정적인 Chrome 27 Macbook Pro OSX Lion에서 촬영되었습니다. 실제로 응용 프로그램이 그렇게 나쁘지는 않지만 프레임 검사 도구를 이해하려고합니다. 유휴 시간을 나타내는 빈 사각형에 대해서는 여전히 의아해했습니다. 유휴 상태가 좋지 않습니까, 좋고 중립적입니까? – Norris
유휴 시간 부분을 해결하기 위해이 대답을 편집하는 것이 좋습니다. –