JavaScript DOM 프로그래밍의 기술(2판) 읽기 노트(JavaScript 모범 사례)_Javascript 기술

1. JavaScript 남용 방지 "JavaScript를 통해 어떤 웹 페이지의 동작을 변경하려는 경우 이를 수행하기 전에 두 번 생각해야 합니다. 먼저 이 웹에 이러한 추가 동작을 추가하는 것이 정말로 필요한지 확인하십시오. 페이지요?"

개인적으로 웹페이지의 인터랙티브 경험을 향상시키기 위해 JavaScript가 거의 모든 곳에서 사용되는 현 시대에 저자의 이 문장은 JavaScript를 적절하게 사용해야 하며 웹페이지를 방해해서는 안 된다는 의미로 이해될 수 있다고 생각합니다. 멋진 효과를 내는 스크립트의 사용으로 인해 손상될 수 있습니다. 로딩이 느리거나 호환성이 매우 좋지 않아 사용자가 웹사이트를 탐색하고 사용할 수 없습니다.

2. 부드러운 저하란 사용자가 브라우저에서 JavaScript를 비활성화하거나 브라우저가 JavaScript를 지원하지 않는 경우(더 이상 지원하지 않는 경우)에도 사용자가 웹사이트를 정상적으로 탐색할 수 있다는 것을 의미합니다.

처음 이 문제를 봤을 때 이 상황은 거의 대수롭지 않다고 느꼈기 때문에 이 문제(Zhihu)에 대한 토론과 블로그 게시물 "JavaScript를 사용할 수 없는 문제 탐색"을 읽어보고, 블로그파크 홈페이지에서도 실험을 해보았는데, 즉 JavaScript를 비활성화한 상태에서 웹서핑을 해보니, 블로그에 댓글을 달 수는 없어도 분류 효과가 정상적으로 표시되지 않는 것을 발견했습니다. 광고, 주요기능(블로그글보기, 페이지이동 등)은 정상적으로 사용하실 수 있습니다.

그러면 기본적으로 결론을 내릴 수 있습니다. 원활한 성능 저하를 고려할 때 최소한 웹사이트의 주요 기능은 정상적으로 사용할 수 있어야 한다는 것입니다. 블로그파크의 경우 블로그를 확인한다는 의미입니다.

3. "javascript:" 의사 프로토콜 및 인라인 이벤트 처리 기능을 비활성화합니다. HTML에서 이 두 가지 작성 방법을 사용하면 심각한 문제가 발생하지 않지만 원활한 저하(일관되지 않은 웹 페이지 동작)를 방지하고 스크립트가 작성되면 혼란스러워서 코드를 유지 관리하기가 어렵습니다.

4. 성능 고려 사항 성능 고려 사항에 대한 모범 사례는 여전히 이해하기 매우 쉽습니다.

"DOM 액세스 최소화 및 마크업 최소화". DOM에 대한 액세스가 적은 이유는 DOM 쿼리가 많은 성능을 소비하기 때문입니다. 여러 함수에 대한 반복적인 DOM 쿼리는 리팩터링되거나 전역 변수로 추출되거나 매개변수로 직접 전달되어야 합니다. 마크업을 줄이면 DOM 크기가 줄어들어 DOM 트리에서 특정 요소를 찾는 데 걸리는 시간이 줄어듭니다.

"병합 스크립트". 외부 스크립트 파일을 통합하면 페이지를 로드할 때 전송되는 요청 수를 줄일 수 있습니다. Chrome 개발자 도구 네트워크 탭을 관찰하면 요청 수와 웹 페이지를 로드하는 데 걸리는 시간을 명확하게 확인할 수 있습니다. 아래 그림은 제 블로그에 대한 요청을 보여줍니다. Baidu 공유 플러그인이 가장 느립니다. 물론 전체 로딩 시간은 여전히 ​​허용됩니다. 그러나 참조 파일이 너무 크거나 너무 크거나 타사 플러그인 요청이 느린 경우 전체 페이지가 항상 로드되어 웹 페이지가 느리게 로드되는 것처럼 느껴지고 경험이 더 나빠집니다.



또한 "마크업 내 스크립트 위치도 페이지의 초기 로드 시간에 큰 영향을 미칩니다." 부트스트랩 예제와 마찬가지로 참조된 JS 플러그인은 모두 페이지 끝에 배치되고 설명이 추가됩니다.


HTTP 사양에 따라 브라우저는 동일한 도메인 이름에서 동시에 최대 2개의 파일만 다운로드할 수 있기 때문에 스크립트 다운로드 기간 동안에는 브라우저가 다운로드하지 않습니다. 다른 모든 파일은 다른 도메인 이름의 파일도 다운로드되지 않습니다. 일반적으로 스크립트 파일을 블록에 넣을 때까지 다른 모든 리소스는 다운로드되지 않습니다. 브라우저에서 다른 파일(예: 이미지 또는 기타 스크립트)은 병렬로 로드할 수 없습니다.

문서 끝 부분의