이 기사는 vue의 소스 코드 분석(코드 예제)을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
오늘은 소스코드를 읽으면서 메모를 하다가 천천히 읽었습니다. 갑자기 발견한 기능. 그래서 따로 글을 쓰겠습니다.
과시하는 기능처럼 느껴지네요. 어느 날 면접관이 최적화된 페이지를 찾았는지 묻는다면
브라우저에서 이 기능을 사용할 수 있는지 확인해 보라고 제안합니다. 스크롤의 부드러움을 개선합니다.
var supportsPassive = false;
if (inBrowser) {
try {
var opts = {};
Object.defineProperty(opts, 'passive', ({
get: function get () {
/* istanbul ignore next */
supportsPassive = true;
}
})); // https://github.com/facebook/flow/issues/285
window.addEventListener('test-passive', null, opts);
} catch (e) {}
}
여기서 핵심은 Passive가 지원되는지 확인하는 것입니다.
tips
- 1 Passive가 무엇인가요? Chrome에서 제안하는 새로운 브라우저 기능: 웹 개발자는 새로운 패시브 속성을 사용하여 현재 페이지에 등록된 이벤트 리스너가 이벤트의 기본 동작을 방지하기 위해 내부적으로 PreventDefault 함수를 호출할지 여부를 브라우저에 알려 브라우저가 그에 따라 작동할 수 있도록 합니다. 페이지 성능을 최적화하기 위해 더 나은 결정을 내리기 위해 이 정보를 참조하세요. Passive 속성의 값이 true이면 Chrome 브라우저는 이러한 유형의 리스너를 패시브 리스너라고 부르기 위해 리스너에서 내부적으로 PreventDefault 함수가 호출되지 않음을 의미합니다. 현재 Chrome에서는 페이지의 슬라이딩 성능을 최적화하기 위해 이 기능을 주로 사용하므로 현재 패시브 이벤트 리스너 기능은 마우스휠/터치 관련 이벤트만 지원합니다
- 2 패시브 이벤트 리스너 기능은 페이지의 슬라이딩 부드러움을 향상시키도록 설계되었습니다. , 페이지 슬라이드 유창성 향상은 사용자의 이 페이지에 대한 가장 직관적인 경험에 직접적인 영향을 미칩니다. 이는 이해하기 어렵지 않습니다. 콘텐츠를 탐색하기 위해 특정 페이지를 슬라이드하려고 한다고 상상해 보십시오. 마우스 휠을 사용하거나 손가락으로 화면을 터치하여 위아래로 슬라이드하면 페이지가 예상대로 스크롤되지 않습니다. 이번에는 내가 약간 기분이 좋지 않아 페이지를 떠나고 싶을 수도 있습니다. 페이스북은 이전에 페이지 슬라이딩의 응답 새로 고침 빈도를 60FPS에서 30FPS로 낮췄을 때 사용자 참여가 급격히 떨어지는 것을 발견했습니다.
- 3, Passive의 간단한 구현
function handler(event) {
console.log(event.type); // log event type
}
document.addEventListener("mousewheel", handler, {passive:true});
이 기사는 여기서 끝났습니다. 더 많은 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 JavaScript Tutorial Video 칼럼을 주목하세요!
위 내용은 Vue 소스 코드 분석(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!