Computer >> 컴퓨터 >  >> 프로그램 작성 >> Ruby

Turbolinks로 앱 탐색 속도 향상

Turbolinks는 인지된 앱에서 페이지를 전환하고 자산을 다시 로드하는 것을 현명하게 함으로써 성능을 향상시킬 수 있습니다. 조건부 GET 요청과 달리 Rails 앱 자체에서 Ruby 코드를 변경할 필요가 없습니다. Turbolinks 5는 정적 페이지와 같이 Rails 없이도 모든 곳에서 작동하며 지원되지 않는 브라우저에서는 정상적으로 성능이 저하되는 JavaScript 라이브러리입니다.

터보링크 5

Turbolinks는 Rails와 함께 번들로 제공되며 Rails 4 이후 기본적으로 새 애플리케이션에 포함되어 있습니다. Rails 5에는 Turbolinks 5가 함께 제공되며, 이는 현재 Turbolinks Classic이라고 불리는 것을 재작성한 것입니다.

Rails와 함께 제공되지만 Turbolinks의 새 버전은 <script>에 넣는 모든 HTML 페이지에서 사용할 수 있는 순수한 JavaScript 라이브러리입니다. 페이지에 태그를 추가하거나 앱의 JavaScript 번들에 포함합니다.

포함되면 Turbolinks는 동일한 도메인을 가리키는 모든 링크를 자동으로 찾고 클릭 이벤트 리스너를 연결합니다. 해당 링크를 클릭하면 차단됩니다. 평소처럼 링크를 따라가는 대신 XMLHttpRequest를 사용하여 JavaScript를 통해 백그라운드에서 연결된 페이지를 요청합니다. . 그러면 4가지 일이 발생합니다.

  1. 현재 페이지의 복사본은 나중에 사용할 수 있도록 Turbolinks의 캐시에 저장됩니다.
  2. 대체 현재 페이지의 <body> <body> 사용 XHR 결과에서
  3. 병합 현재 페이지의 <head> <head> 사용 XHR 결과에서
  4. History API를 사용하여 브라우저의 URL을 변경합니다.

<head>를 병합하여 태그를 사용하면 브라우저가 두 페이지에 있는 CSS 및 JavaScript 파일과 같은 자산을 다시 로드하고 다시 렌더링할 필요가 없습니다. 이렇게 하면 특히 대부분의 페이지에서 재사용되는 자산이 많은 경우 앱 속도를 크게 높일 수 있습니다.

일부 보기가 있는 새로운 Rails 5 앱에서 링크를 클릭하고 뒤로 버튼을 눌러 탐색하여 Turbolinks가 작동하는 것을 볼 수 있습니다. 브라우저의 네트워크 탭에서 "xhr"로 표시된 Turbolink를 통해 로드된 페이지에 대한 요청을 볼 수 있습니다. 또한 모든 요청에 ​​대해 자산이 다시 로드되지는 않습니다.

캐싱 및 페이지 미리보기

동일한 페이지에 대한 후속 요청의 속도를 높이기 위해 Turbolinks는 최근에 방문한 페이지의 캐시를 유지 관리합니다. 예를 들어 뒤로 버튼을 누를 때 이전 페이지를 즉시 렌더링할 수 있습니다.

느린 페이지의 인지된 성능 속도를 높이기 위해 Turbolinks는 페이지가 캐시에 있는 경우 해당 페이지의 미리보기를 표시합니다. 링크를 클릭하면 새 버전이 로드되는 동안 캐시된 버전이 표시됩니다.

주의 사항

Turbolinks는 브라우저의 기본 기능 중 일부를 다시 구현하므로 일부 기능은 Turbolink를 활성화했을 때와 활성화하지 않았을 때 다르게 작동합니다.

turbolinks:load 및 <script> 태그

링크를 클릭할 때마다 페이지가 새로 고쳐지지 않으므로 window.onload를 사용하여 페이지 로드 시 JavaScript 로드 또는 DOMContentLoaded 더 이상 작동하지 않습니다. 이 문제를 해결하기 위해 Turbolinks는 turbolinks:load를 제공합니다. 대신 사용할 수 있는 이벤트:

document.addEventListener("turbolinks:load", function() {
  // ...
})

브라우저 로딩 상태

페이지 간에 전환할 때 브라우저는 요청이 백그라운드에서 실행되기 때문에 브라우저에 로딩 표시기를 표시하지 않습니다.

이를 수정하기 위해 Turbolinks는 페이지가 로드 중임을 나타내기 위해 500밀리초 후에 페이지 상단에 파란색 막대(CSS로 스타일 지정 가능)를 표시합니다.

$ rails new --skip-turbolinks ?

Turbolinks 5는 Turbolinks Classic 이후로 먼 길을 왔습니다. Turbolinks는 새로운 Rails 앱을 생성할 때 건너뛰는 것 같았습니다. 이제 Rails에 의존하지 않는 순조롭게 성능을 저하시키는 순수 JavaScript 플러그인이므로 주의 사항을 염두에 둔다면 대부분의 앱에서 즉시 사용할 수 있습니다.

그 대가로 Turbolinks는 속도 향상을 제공하고 모든 페이지 보기에서 정적 자산이 다시 로드되는 것을 방지하여 일부 네트워크 요청을 절약합니다. 새로운 Rails 앱을 생성할 때 Turbolinks를 유지하여 그것이 무엇을 하는지 확인하십시오. 기존 앱에서 Turbolinks를 사용해 보세요!

이것으로 Turbolinks에 대한 개요를 마칩니다. 귀하의 앱에서 Turbolinks를 사용하고 있습니까? 여러분의 의견을 듣고 싶습니다! 또한 AppSignal Academy의 이 기사와 이전 기사가 어떻게 마음에 들었는지, 또는 @AppSignal에서 다음에 읽고 싶은 내용이 무엇인지 궁금합니다.