DOM이란 무엇인가요? 그것은 무엇을 먹나요?

DOM(Document Object Model)은 웹페이지를 개발하는 기반입니다. HTML 및 XML 문서용 프로그래밍 인터페이스로, 트리형 개체로 문서 구조를 나타냅니다. 가지와 잎으로. 문서의 각 요소, 속성 및 텍스트 조각은 이 트리의 노드가 됩니다. 이를 통해 JavaScript는 HTML 요소와 상호 작용하고 이를 수정하거나 새 요소를 추가할 수 있습니다. 이는 모든 사람이 웹에서 경험하는 것, 상호 작용, 가변성, 동적 시각적 단서 및 요소를 대략적으로 요약한 것입니다. 버튼이나 반짝이는 메뉴를 클릭하면 두뇌는 뭔가 일어나기를 기대합니다. 변경할 문장, 로드할 새 페이지 또는 온라인 주문이 성공적으로 결제되었음을 알리는 녹색 확인 표시가 있는 팝업으로.

매초마다 DOM을 너무 빠르게 조작하는 것은 사용자 유지 또는 사용자와의 기본적인 상호 작용에 큰 방해가 됩니다. 사용자 경험을 생성하고 확장할 수 있는 모든 동적 동작에도 불구하고 DOM 조작을 과도하게 사용하면 매우 실망스러울 수 있습니다. 그리고 마지막 말은 항상 사용자로부터 나옵니다. 데이터 가져오기와 같은 중요한 작업이 페이지 백그라운드에서 발생하지만 성능이 저하되고 사용자가 상호작용한 지 몇 분이 지나면서 악화되는 경우 병목 지점을 정확히 찾아내는 것이 매우 어렵고 어려울 수 있습니다.

일을 수행하고 더 빠르게 수행하는 기본 방법을 사용하는 간단한 방법의 예는 바닐라 js의 textContent를 사용하는 것입니다. 네, 알아요. 대부분의 경우 매우 동적이고 변경 가능하여 상태 관리 등을 사용하려면 필요한 구성 요소에 대한 복잡한 수명 주기가 필요합니다. 그러나 항상 그런 것은 아닙니다. 일부 텍스트만 변경하거나 세션당 한 번만 쿠키를 업데이트하는 경우 그렇게 복잡한 논리와 리소스를 많이 사용하는 옵션을 사용해야 합니까?

textContent 함수는 유사한 기능 옵션(예: 더 널리 사용되는 innerHtml 메서드)과 비교할 때 텍스트를 조작하는 js에서 가장 빠릅니다. 참고용으로 시간 제한 테스트를 참조하세요.

왜?

더 효과적인 작업을 위해 사용자의 컴퓨터 메모리를 절약할 수 있습니다. 예를 들어, 아주 오래된 Android나 Apple 기기에서 액세스 가능하고 합리적으로 빠른 속도를 유지하는 것이 필수인 경우도 있습니다. 또는 API 호출이 너무 큰 JSON을 반환하여 구문 분석 및 적절한 조작에 몇 초가 필요할 수도 있습니다. 따라서 사용자가 피드백을 받지 못하거나 화면에서 CSS 애니메이션을 보지 못하는 매 순간이 중요합니다.

최근에 저는 도전과 학습 경험으로 종속성 없이 JavaScript로 코딩함으로써 많은 것을 배웠습니다. HTML, CSS, JavaScript만으로 데이터를 가져오고 할 일 앱을 만드는 것과 같습니다. npm도 없고 라이브러리도 없습니다. 그리고 DocumentFragment 개체와 같이 이전에 들어본 적이 없는 Web API의 메서드와 개체를 많이 알게 되었습니다. DOM 구조의 빈 '조각'을 생성하고 페이지의 DOM을 실제로 변경하기 전에 이를 조작하고 채울 수 있습니다. 따라서 메뉴 목록이나 멋진 AI 기반 도구 제목이 포함된 개체를 로드하고 추가 작업과 태그 중첩을 마친 후 이를 DOM에 한 번 패치합니다. 이러한 방식으로 구문 분석은 동일한 여러 호출로 for 루프를 수행하고 모든 호출이 끝날 때 트리에 대한 새로운 구문 분석을 요구하는 대신 한 번에 한 번만 발생합니다.

제 사용 사례에서는 초당 1회 이상의 매우 빠른 렌더링이 필요하기 때문에 버튼을 매우 빠르게 클릭한다고 가정하겠습니다. 이 경우 즐겨 사용하는 상태 관리 라이브러리를 사용하면 일종의 장벽이 생성될 수 있습니다. 클릭할 때마다 새 이벤트가 발생하므로 기본적으로 스택에서 이벤트의 두 번째 인스턴스를 시작하기 전에 이벤트가 종료되어야 하기 때문입니다. 복잡성이나 비동기 작업의 필요성에 따라 1초 이상 걸릴 수 있습니다. 이 사용 사례에서는 거래 차단기가 됩니다. 따라서 올바른 도구를 선택하는 것이 더 간단하고, 더 짧고, 더 빠를 수 있습니다. 최근에는 새로운 동일한 이벤트가 발생했을 때 재렌더링 실행을 중단하는 등 인기 있는 라이브러리에서 이 문제를 해결하기 위해 제공하는 옵션이 있습니다. 하지만 여기서 내 요점은 단지 예쁘고 현대적으로 보이는 웹 애플리케이션을 추구하는 것이 아닙니다. 그러나 유지 관리를 가장 쉽게 만들어 자신의 삶을 더 쉽게 만들려면 누군가가 작성하고 이것이 최선의 선택이라고 말하는 코드 덩어리를 맹목적으로 신뢰하여 자책하지 마십시오.

프로젝트를 시작하기 위해 이미 이러한 패키지와 라이브러리를 설치하고 있다면 오류와 예외로 인해 알 수 없는 함수 호출이나 콘솔에 비밀스러운 메시지가 표시되는 이유를 조사해 보는 것은 어떨까요?

결론 및 추가 내용

클라우드나 매우 일반적인 서비스에서 서비스를 무료로 시작하고 실행하는 것은 요즘에는 정말 빠르고 쉽습니다. 시작점과 같은 보일러 플레이트를 사용하는 것은 매우 도움이 될 수 있으며 매우 기본적이고 반복되는 작업에 대해 걱정하지 않고 시간을 절약할 수 있습니다. 터미널에 명령 하나만 입력하면 기본 라우팅과 Hello World 페이지가 로컬 서버에서 실행됩니다.

인터넷 어디에도, 어느 누구도 결정된 라이브러리나 전체 프레임워크가 내부적으로 무엇을 하는지 항상 알 수는 없습니다. 하지만 작동 방식을 더 많이 알수록 더 많은 정보에 입각한 결정을 내리고 효율적으로 작업할 수 있습니다.

웹 개발에 가장 널리 사용되는 프레임워크는 실제로 재렌더링을 최적화하고 가상 DOM과 같은 리소스를 사용하여 DOM을 조작하거나 데이터를 검색하는 매우 까다로운 작업을 위해 일종의 지속성을 구현하는 데 매우 훌륭한 역할을 합니다.

선택한 웹 브라우저의 웹 개발자 도구가 여기에서 가장 좋은 친구입니다. 이러한 도구의 최신 버전은 원격 측정 기능을 제공하고 코드의 어느 부분이나 어떤 호출이 성능의 관문이 될 수 있는지 보여줄 수도 있습니다.

JavaScript 언어의 작동 방식 또는 작업 수행 방식을 구현하는 방법을 알면 즐겨 사용하는 라이브러리의 즉시 사용 가능한 기능으로 인해 문제 해결에 집중하지 않고 더 비대해진 코드 기반을 생성하게 되는 상황을 쉽게 식별할 수 있습니다. 문제. 수백 번 작성한 일부 코드를 복제하는 데 관심을 훔칠 수도 있습니다. 생산성을 높이기 위해 AI를 사용하더라도 인공 동반자가 제안한 솔루션을 사용하는 함정에 빠질 수 있으며 실제로는 향후 유지 관리가 더 어려워질 수 있습니다.

걱정하지 마세요. 때로는 더 잘 알지 못할 때도 있습니다. 내가 말했듯이, 누구도 항상 모든 것을 알 수는 없습니다.

더 관대해지는 순간에 실험하고 실수하는 것은 많은 도움이 될 것이며 더 나은 일을 하는 데 필요한 도구를 제공할 것입니다. 다음 번에 정적 파일 서버를 배포하거나 아주 틈새 사용 사례에 대한 매우 복잡한 논리를 코딩하는 것과 같은 간단한 작업을 수행하게 되면 기본 사항을 알면 경력에서 새로운 문제에 직면할 때 훨씬 더 멀리 나아가고 더 명확해질 수 있습니다.

Web API 문서를 확인해 보시기 바랍니다. 또한 온라인 블로그, 소셜 미디어 또는 웹 개발에 중점을 둔 리소스를 둘러볼 수도 있습니다.

실수를 했다면 댓글로 알려주세요. 저는 비판과 새로운 아이디어에 귀를 기울입니다. 원하시면 공유해 주세요!