본문으로 건너뛰기
黯羽轻扬매일 조금씩

Web 프론트엔드 개발의 세부 상식

무료2015-06-04#Front-End#前端细小知识点

백엔드는 깊고, 프론트엔드는 넓다. 소위 "한 행을 정통하려 하면, 먼저 십 행을 통달해야 한다"는 말처럼, 프론트엔드 세부사항은 매우 많으며, 본문에서는 프론트엔드 개발 중의 세부 지식을 기록합니다

一.IE6/7 의 hasLayout 을 트리거하는 방법

자주 몇 가지 유행하는 hack 에서 height: 1%;나 zoom: 1;같은 것을 봅니다. 추가하지 않으면 안 되며, 사실 이는 IE6/7 의 hasLayout 속성을 트리거하는 데 사용됩니다:

height: 1%;는 IE6 에서 min-height 로 해석되지만, IE7 에는 적용되지 않습니다. zoom: 1;는 IE7 의 hasLayout 을 트리거할 수 있습니다

브라우저 호환 hack 에서 많이 사용되며, 예를 들어 박스 붕괴 문제를 해결하는.clearfix 도 height: 1%;를 사용합니다

P.S.박스 붕괴 문제에 대한 더 많은 정보는 [黯羽輕揚：CSS 박스 붕괴 문제의 4 가지 해결책](http://ayqy.net/blog/CSS 박스 붕괴 문제의 4 가지 해결책/) 참조

二.IE 대상 CSS Hack

  1. IE 조건 주석

단점: 여러 파일에서 같은 스타일을 동시에 유지해야 하며, 유지보수성이 나쁨

  1. 선택자 접두사법

*html 접두사는 IE6 에만 유효, *+html 접두사는 IE7 에만 유효. 예를 들어:

    .test {
        /* IE6/7/8... */
    }

    *html .test{
        /* IE6 */
    }

    *+html .test{
        /* IE7 */
    }

단점: 하위 호환에 위험이 있으며, IE8/9/10 도*html 과*+html 접두사를 인식할 수 있으며, 인라인 스타일에는 사용할 수 없음

  1. 스타일 속성 접두사법

_는 IE6 에만 유효, *는 IE6/7 모두 유효. 예를 들어:

    .test {
        color: red;   /* IE6/7/8... */
        *color: red;  /* IE6/7 */
        _color: red;  /* IE6 */
    }

단점: 하위 호환에도 위험이 있지만, 인라인 스타일에 사용 가능

권장되는做法는 IE 가 지원하는 조건 주석을 사용하는 것이지만, 실제 적용에서는 프로젝트 규모 등의 요인에 따라 적절한 방식을 채택해야 합니다

三.margin 의 특례

인접한 margin-top 과 margin-bottom 은겹치지만, margin-left 와 margin-right 는 겹치지 않습니다. 따라서혼합 사용하지 마십시오. 프로젝트 초기에 어느 것만 사용할지 약속해야 합니다

四.스타일 커버 규칙의 예외

스타일에는 특수성, 또는 가중치가 있습니다. 특수성이 같은 스타일 규칙은나중에 선언된 것이 먼저 선언된 것을 덮어씁니다

선언 순서에 주의하십시오. 요소 class 속성 값 문자열 중의 선후 순서가 아닙니다. 예를 들어:

.myStyle1 {
    color: red;
}
.myStyle2 {
    color: green;
}

<p class="myStyle1 myStyle2">초록색</p>
<p class="myStyle2 myStyle1">이것도 초록색</p>

class 속성 값 문자열 중 스타일명의 선후 순서는 스타일 커버 규칙에 영향을 미치지 않습니다

P.S.특수성이란 무엇인지, 구체적인 계산 규칙은 무엇인지에 대해서는 [黯羽輕揚：](http://ayqy.net/blog/CSS 선택자 분류 정리/) 참조

五.DOM 조작의 최적화 기법

기본적인 기법은 DOM 노드 객체를 캐시하고, 빈번한 DOM 검색의 오버헤드를 피하는 것입니다. 또한 DOM 검색을 최적화하는 작은 기법이 있습니다:

먼저 byId 로 검색 범위를 좁히고, 그 다음 byTagName 으로 요소를 가져옵니다. 예를 들어:

var p = document.getElementById("p");
// alert(p.getElementById("innerP").innerHTML); // Uncaught TypeError: Object #<HTMLDivElement> has no method 'getElementById' 
alert(p.getElementsByTagName("p")[0].innerHTML);

위 코드의 주석 부분에 주의하십시오. 임의의 요소에는 getElementsByTagName 메서드가 있지만, document 요소만 getElementById 메서드를 가집니다

P.S.DOM 최적화의 더 많은 기법에 대해서는 [黯羽輕揚：JS 학습노트 12_최적화](http://ayqy.net/blog/JS 학습노트 12_최적화/) 참조

六.IE6 의 PNG 투명

IE6 에서 PNG 이미지의 투명 부분이 분홍색 (연한 파란색?) 으로 표시됩니다. IE 필터로 수정할 수 있습니다:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="이미지 경로", sizingMethod="crop");

예를 들어:

.img{
    background: url(icon.png);
    width: 32px;
    height: 32px;
}
/* IE6 hack */
*html .img {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icon.png", sizingMethod="crop");
}

이 필터를 사용하면 IE6 에서 투명 픽셀이 정상적으로 표시됩니다. IE6 과 PNG 투명 의 더 많은 해결책에 대해서는 [張鑫旭：IE6 에서 png 배경 불투명 문제의 종합 확장](http://www.zhangxinxu.com/wordpress/2009/08/ie6 에서 png 배경 불투명 문제의 종합 확장/) 참조

七.JS 객체 리터럴 중의 여분 쉼표

js 객체 리터럴 중 마지막 속성末尾의 쉼표는 IE6/7 에서 오류를 일으키며, IE8 도 오류를 보고할 수 있습니다. 다른 고급 브라우저는 오류를 보고하지 않으므로, 더 나은 호환성을 위해객체 리터럴 중에 여분 쉼표를 두지 마십시오

八.페이지 점프 (리디렉션) 와 리프레시 (재로딩)

점프와 리프레시의 본질은 같습니다 (리프레시는 현재 페이지로의 점프로 간주할 수 있습니다). 일단 통칭하여 점프라고 부릅니다. 일반적인 구현 방식은location.href = strUrl;입니다. 다른 구현 방식도 있지만, 여기서는 깊이 추구하지 않습니다. 우리가 주목하는 것은 리디렉션 후 무슨 일이 발생하는가입니다?

리디렉션 문 실행 후 페이지가 즉시 점프합니까? 아닙니다. 페이지는 모든 js 스크립트가 실행完毕한 후에 점프합니다. 믿기지 않으면 테스트할 수 있습니다. 교묘한 테스트 방법을 제공합니다:

location.href = 'http://ayqy.net/';
while(true);

F12 를 눌러 콘솔을 열고, 위 코드를 실행하면, 페이지가 멈추거나 브라우저가 충돌하는 것으로 충분히 문제가 설명됩니다

주의, 다른 어떠한 형태의 점프도 스크립트 실행完毕를 기다린 후에 점프합니다. location.reload(false/true);를 포함하여, a 태그 점프 이벤트의 모의 트리거를 포함하여

九.NaN 과 비트 연산

NaN(Not a Number) 은결코임의의 수와 임의의 연산을 한 결과가 NaN 이 되는 것은 아닙니다. 수치 연산에서는 그렇지만, 비트 연산에서는 NaN 을 2 진수 0 으로 처리합니다. 따라서NaN | 1 === 1 && NaN | 0 === 0입니다

十.계속 2015-6-11

참고 자료

  • 『고품질 코드 작성 Web 프론트엔드 개발 수련의 길』

댓글

아직 댓글이 없습니다

댓글 작성