JS 코드 가이드라인

일.원활한 디그레이드란 무엇인가？

JS 코드가 포함된 웹 페이지가 사용자의 브라우저에서 JS 를 지원하지 않거나 (또는 JS 가 비활성화된 경우) 사용자가 계속 정상적으로 탐색할 수 있다면 (웹사이트 기능은 정상이며 시각 효과만 약간 떨어질 수 있음), 이 웹 페이지는 원활하게 디그레이드한다고 할 수 있습니다

웹 페이지가 원활하게 디그레이드하는 것은 매우 필요합니다. JS 는 예전부터 평판이 좋지 않기 때문입니다 (다양한 광고, 다양한 팝업, 심지어 XSS 등의 음습한 것들까지). 따라서 브라우저의 JS 지원을 습관적으로 비활성화하는 사용자 층이 있습니다. 이 사용자 층은 크지 않을 수 있지만, 코딩 담당자로서는 가능한 한 코드를 완벽하게 만들어야 합니다 (마치 자신의 아이를 키우는 것처럼). 우리는 이러한 상황을 고려하여 모든 사용자에게 완벽한 경험을 제공해야 합니다

위의 이유가 아직 충분하지 않다면, 더 중요시해야 할 점이 하나 있습니다. 바로 SEO, 즉 검색 엔진 최적화입니다. 자신의 웹사이트가 검색 결과에서 상위에 오르게 하려면 SEO 를 잘 해야 합니다. 검색 엔진의 검색 로봇은 JS 코드의 의미를 이해할 수 없으므로, 검색 로봇은 JS 를 지원하지 않는 구식 브라우저를 고집하는 사용자와 같습니다. 분명히, 이 사용자는 매우 중요합니다

이.어떻게 원활하게 디그레이드할 수 있는가？

원활하게 디그레이드하려면 하나의 원칙만 따르면 됩니다. 점진적 향상입니다

소위 '점진적 향상'이란 가장 기본적이고 중요한 기능을 구현하기 위해 일부 원시적이고 신뢰할 수 있는 방법을 사용하여 먼저 기능의 완전성을 보장한 다음, 추가 정보 계층으로 원본 페이지를 감싸는 것입니다 (표시 효과 구현, 더 나은 시각 효과와 사용자 경험 구현). 옷이 차단되어도 기능은 여전히 완전하며, 단지 보기 좋지 않을 뿐입니다

JS 코드와 HTML 코드를 완전히 분리하면 '점진적 향상'을 구현할 수 있습니다. HTML 은 기능이 완전한 원본 계층이며, 외부 JS 코드는 화려한 외투입니다 (CSS 처럼 들리지만 실제로 그렇습니다. JS 기능은 매우 강력하지만 JS 코드에 지나치게 의존하면 주종이 전도됩니다)

삼.하위 호환성이란 무엇인가？

하위 호환성이란 JS 코드가 저 버전의 DOM 과 호환될 수 있음을 의미합니다 (일부 브라우저는 최신 버전의 DOM 을 지원하지 않을 수 있으며, 이는 특정 DOM API 를 사용할 수 없음을 의미합니다). 예를 들어：

가장 일반적으로 사용되는 DOM API 는 이들일 수 있습니다：

document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();//HTML5 DOM 中的新特性

하지만 이러한 메서드를 전혀 지원하지 않거나 일부만 지원하는 브라우저가 있을 수 있습니다. 그러면 JS 코드 오류로 인해 페이지에 액세스할 수 없거나 페이지 기능이 더 이상 완전하지 않게 됩니다

이전에 하위 호환성을 보장하기 위해 사용되던 방법은 '브라우저 감지'기술이었습니다. 즉, BOM 을 사용하여 브라우저에"이 DOM API 를 지원합니까？"라고 묻는 것입니다. 브라우저가实在太 많기 때문에 매우 간단한 JS 코드도 많은 레이어의 브라우저 감지 코드로 감싸야 하여 코드가 매우 비대해집니다

브라우저 감지 기술은 실제로 CSS 에도 여전히 존재합니다. 물론 CSS 는 BOM 을 통해 브라우저 기능을 얻을 수 없으므로 상대적으로 수동적인 방식을 채택했습니다：

/*设置透明度为 0.75*/
filter: alpha(opacity =   25); /\*支持 IE 浏览器\*/
-moz-opacity: 0.25; /\*支持 FireFox 浏览器\*/
opacity: 0.25; /\*支持 Chrome, Opera, Safari 等浏览器\*/

DOM 이 현재까지 발전하여 더 이상 브라우저 감지 기술을 사용하여 하위 호환성을 보장할 필요가 없습니다. 다음과 같이 할 수 있습니다：

if(document.getElementById){
    document.getElementById();
}
if(document.getElementsByTagName){
    document.getElementsByTagName();
}
if(document.getElementsByClassName){
    document.getElementsByClassName();//HTML5 DOM 中的新特性
}

이 더 나은 방식을 '객체 감지'기술이라고 합니다. 아직 완벽하지는 않지만 (완벽하려면 브라우저 시장이 통일되어야 하지만..), 브라우저 감지보다는 훨씬 낫습니다 (적어도 시장에 새로운 브라우저가 나타났다고 해서 JS 코드를 수정할 필요는 없습니다). 객체 감지는 BOM 에 의존하지 않고 DOM 자체가 브라우저가 지정된 DOM API 를 지원하는지 감지합니다

사.JS 성능 최적화 기법

DOM 에 대한 JS 액세스 최소화
HTML 마크업 최소화
JS 스크립트 병합
script 태그 위치
JS 코드 압축

1.최적화 전：

for(var i = 0;i < document.getElementsByTagName("a");i++){
    if(document.getElementsByTagName("a")[i].getAttribute("title") == "main"){
        //do something
    }
}

최적화 후：

var elems = document.getElementsByTagName("a");
for(var i = 0;i < elems.length;i++){
    if(elems[i].getAttribute("title") == "main"){
        //do something
    }
}

DOM 메서드를 호출하여 태그 객체를 가져올 때마다 내부에서 DOM 트리를 완전히 검색합니다. 이는 매우 비싼 작업입니다. DOM 액세스를 최소화하면 성능을 향상할 수 있습니다

2.최적화 전：

<div>
    <div>
        <div>
            <div>
                <div>
                    <p>
                    正文
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

최적화 후：

<p>
正文
</p>

이 예는 다소 극단적일 수 있지만 문제를 설명하기에는 충분합니다. HTML 코드는 가능한 한 간결해야 합니다 (예상되는 표현 효과를 달성할 수 있으면 됩니다)

3.최적화 전：

<scrpit src="./scripts/A.js" type="text/javascript"></script>
<scrpit src="./scripts/B.js" type="text/javascript"></script>
<scrpit src="./scripts/C.js" type="text/javascript"></script>

최적화 후：

<scrpit src="./scripts/All.js" type="text/javascript"></script>

브라우저는 페이지를 로드할 때 script 태그를 만날 때마다 태그가 외부 스크립트 파일을 가리키는 경우 외부 파일을 로드하기 위해 요청을 보내야 합니다. script 태그가 너무 많으면 이 오버헤드는 무시할 수 없습니다. 따라서 JS 코드를 모두 하나의 외부 파일에 넣고 하나의 script 태그로 로드해야 합니다

4.최적화 전：

<head>
    <script></script>
</head>

최적화 후：

<body>
    html code
    <script></script>
</body>

즉, script 태그를 body 끝에 배치하여 로드하는 것이 가장 빠르며, 여기에 배치해도 window.onload 등의 이벤트 트리거에는 영향을 미치지 않습니다. 왜 이 위치에 배치하는 것이 가장 빠른지는 브라우저가 HTML 코드를 해석하는 순서와 관련이 있을 수 있습니다 (head 부분을 먼저 로드하며, head 가 너무 크면 사용자가 body 콘텐츠를 오랫동안 보지 못한 채 기다리게 됩니다)

5.최적화 전：

var elems = document.getElementsByTagName("p");
for(var i = 0;i < elems.length;i++){
    //do something
}

최적화 후：

var elems=document.getElementsByTagName("p");for(var i=0;i<elems.length;i++){}

네, 맞습니다. 최적화된 코드는 사람이 읽기 위한 것이 아니지만, 읽기 어렵지만 이러한 코드는 부피가 작아 외부 파일 부피가 줄어들어 당연히 성능을 향상할 수 있습니다

P.S.이 작업을 도와주는 전용 도구가 있습니다. 예를 들어 JSMin 등입니다

일.원활한 디그레이드란 무엇인가？

이.어떻게 원활하게 디그레이드할 수 있는가？

삼.하위 호환성이란 무엇인가？

사.JS 성능 최적화 기법

참고 자료:《JavaScript DOM 프로그래밍 예술》

댓글

댓글 작성