futurelink

미래링크

링크를 클릭하려는 시점을 예측하기 위해 커서의 감속도를 계산합니다.

설치하다

 $ npm install --save futurelink

용법

 var futurelink = require ( 'futurelink' ) ;

futurelink ( {
  links : document . querySelectorAll ( 'a' ) ,
  future : function ( link ) {
    // `link` is probably going to be clicked soon
    // Preload some images, if you can!
  } ,
  
  // These also exist, but aren't usually needed:
  hover : function ( link ) { } ,
  click : function ( link ) { }
} )

요소의 배열 또는 NodeList를 전달하고 커서가 해당 요소 중 하나에 접근하면 해당 요소를 인수로 사용하여 future 콜백이 실행됩니다. future 요소당 한 번만 호출됩니다.

링크는 옵션 개체에서 직접 읽혀지므로 감시 중인 링크를 업데이트하려는 경우(예를 들어 DOM에 새로 추가된 일부 요소를 보고 싶기 때문에) 다음을 수행할 수 있습니다.

 var options = {
  links : document . querySelectorAll ( 'a' ) ,
  future : function ( link ) { }
} ;

futurelink ( options ) ;

router . afterEach ( function ( ) {
  options . links = document . querySelectorAll ( 'a' ) ;
} ) ;

페이지 섹션/개별 링크에 대해 비활성화

futurelink는 no-futurelink 링크나 상위 요소 중 하나를 확인하지 않습니다. 또한 내부 링크만 살펴봅니다.

 < div class =" no-futurelink " >
  < a href =" /foo-bar " > Futurelink won't tell you about this link </ a >
</ div >

< a href =" /bar-foo " class =" no-futurelink " > It won't tell you about this one either </ a >

페이지에서 futurelink 제거

futurelink를 완전히 제거하려면 다음과 같이 호출할 수 있는 teardown 함수를 반환합니다.

 var teardown = futurelink ( options ) ;

// Later…

teardown ( ) ;

이제 이벤트 리스너가 제거되고 futurelink는 링크가 더 이상 클릭되려고 하는지 알려주지 않습니다.

얼마나 효과적입니까?

samknows.com에서는 초기가 아닌 페이지 로드 속도를 평균 870ms 단축합니다.

어떻게 작동하나요?

SamKnows Medium에서 이에 대한 기사를 볼 수 있습니다.

프레임워크와 함께 사용

• vue-futurelink

특허

MIT 라이선스로 출시되었습니다.