IE8 정리

IE8 세미나를 다녀와서 사내전파 교육겸 정리해봤습니다.

정리하다 모르거나 빠진 부분은 검색해서 나름 정리해 봤습니다.


---------------------------------------------------------------------------


 

1.  IE8 소개

 

IE8의 새로운 기능과 크게 성능, 표준화, AJAX 프로그래밍, 보안, 확장에 대하여 알아보도록 한다.

 

2.  IE8 성능

 

2.1.                  이전 버전과 IE8의 스크립트 처리 성능비교

 

IE6, IE7 의 가장 큰 단점은 스크립트 처리속도가 크롬,FF에 비해 상당히 느렸다.

IE8 내부 매커니즘은 스크립트 처리속도를 상당히 개선시켰다.

Sun Spider Javascript BenchMart 에 의해 이전 버전과 IE8의 성능 측정을 해본 결과

상당히 많은 개선이 있다는 것을 알 수 있다.

 

 

 

2.2.                   브라우저별 주요 30대 사이트 성능 측정비교

 

Microsoft에서 최대한 테스트 환경을 맞춘 후 세계 주요 30대 사이트의 처리시간을 측정하였다.

 


 

사이트 테스트는 각 사이트별 방문자 수, 네트워크 트래픽, 클라이언트 환경 등 동일한 환경에서

측정을 하는 것은 거의 불가능에 가깝지만, 위 수치를 본다면 IE8에서는 이전 버전에서 확연히

차이가 있었던 속도 개선에 많은 향상을 가져오게 되었다.

 

 

3.  IE8 표준

 

3.1.                   지구촌 IE 버전별 점유율

 

 

3.2.                  한국의 IE 버전별 점유율

 

 

3.3.                   IE의 버전별 웹 표준 지원 현황

 

Acid2 / Acid3 Test 기준

 

* Acid2는 웹 표준 프로젝트가 HTML을 렌더링하는 웹 브라우저와 다른 응용 프로그램들에서 웹 페이지 렌더링 결점을 파악하기 위해 고안한 테스트 제품군이다

 

* Acid3는 웹 브라우저가 (특히 DOM과 자바스크립트와 관련하여) 얼마나 잘 웹 표준을 준수하고 있는 지를 검사하는 웹 표준 프로젝트의 테스트 페이지이다

 

 

 

 

 

3.4.                   IE 8과 낡은 웹 사이트(IE6, IE7)의 호환성 문제

 

IE 8이 웹 표준 준수율을 극도로 개선함으로써 미래의 웹 개발자는 자연스럽게 표준을 준수하게 될 것이고 웹 브라우저의 호환성 문제는 점차 사라질 것이다.

 

그러나, 과거에 작성된 낡은 페이지들은 오래된 브라우저에 최적화 되어 있기 때문에 IE 8

브라우저에서는 오히려 깨질 것이다.

 

3.4.1.      낡은 웹 사이트를 IE 8에서 깨지 않기

 

낡은 웹 사이트라고 해서 모두 같은 것은 아니다.

낡은 웹 사이트는 크게 세 가지 유형으로 나뉜다.

첫째, DTD가 없는 웹 사이트.

둘째, DTD가 있는 웹 사이트.

셋째, DTD 없는 페이지와 DTD 있는 페이지가 웹 사이트에 혼재되어 있는 경우.

 

3.4.1.1.   DTD가 없는 웹 사이트 대응법

 

DTD가 없는 페이지는 아무 대응을 할 필요가 없다.

IE 8은 DTD가 없는 페이지를 여전히 Quirks Mode로 렌더링 하기 때문에 웹 사이트는 깨지지 않는다.

 

* Quirks mode는 오래된 웹 브라우저들을 위해 디자인된 웹 페이지의 하위 호환성을 유지하기 위해 W3C나 IETF의 표준을 엄격히 준수하는 Standards Mode를 대신하여 사용되는 웹 브라우저의 기술을 나타낸다.

같은 코드라도 웹 브라우저마다 서로 해석을 달리 하기 때문에, 전혀 다른 결과물을 보여주게 된다.

 

3.4.1.2.   DTD가 있는 웹 사이트 대응법

 

DTD가 있는 페이지라고 해서 모두 같은 것은 아니다.

첫째, IE 5에 최적화 된 페이지.

둘째, IE 6에 최적화 된 페이지.

셋째, IE 7에 최적화 된 페이지.

 

l  IE 5에 최적화 된 페이지 대응법.

 

<meta http-equiv="X-UA-Compatible" content="IE=5" />

 

l  IE 6에 최적화 된 페이지 대응법.

 

IE 6에 최적화 된 페이지는 완전히 개편해야 한다.

적어도 IE 7에 최적화 시켜야 하는데 그렇지 않으면 구제할 방법이 없다.

IE 8 브라우저에 IE 6 렌더링 엔진이 없기 때문이다.

IE 6에 최적화된 페이지를 IE 7에 최적화 하는 것은 어렵지 않다.

IE 6에 최적화 된 페이지는 IE 7에 최적화 작업 후 다음 코드로 대응한다.

 

<meta  http-equiv="X-UA-Compatible" content="IE=7" />

 

l  IE 7에 최적화 된 페이지 대응법.

 

<meta http-equiv="X-UA-Compatible" content="IE=7" />

 

3.4.1.3.   DTD가 혼재되어 있는 웹 사이트 대응법

 

DTD가 혼재 되어 있는 웹 사이트는 DTD가 없는 페이지와 DTD가 있는 페이지를 구분하여 각각 다른 방법으로 대응해야 한다.

DTD가 없는 페이지는 아무런 대응을 하지 않는다.

IE 8은 DTD가 없는 페이지를 Quirks Mode로 렌더링 하기 때문에 페이지는 깨지지 않는다.

DTD가 있는 페이지는 IE 7에 최적화 시킨 후 다음 코드 적용.

 

<meta http-equiv="X-UA-Compatible" content="IE=7" />

 

만약, X-UA-Compatable 호환 코드를 DTD가 있는 페이지에만 별도로 적용하는 것이 어렵다면

모든 페이지에 호환 코드를 추가하는 방법도 있다.

 

DTD가 있는 페이지만 IE 7에 최적화 시킨 후 모든 페이지에 다음 코드를 적용한다.

 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

 

DTD가 없는 페이지는 여전히 Quirks Mode로, DTD가 있는 페이지는 IE 7 표준 모드로 렌더링 할 것이다.

 

l  Meta 호환 코드를 서버측 응답 헤더에 적용하는 방법

 

web.config 파일에 아래의 코드를 추가한다.

 

<configuration>

<system.webServer>

<httpProtocol>

<customHeaders>

<clear />

<add name="X-UA-Compatible" value="IE=EmulateIE7" />

</customHeaders>

</httpProtocol>

</system.webServer>

</configuration>

 

IE 8이 웹 표준을 잘 지원하고 있기 때문에 웹 표준을 잘 지킨 사이트는 낡은 브라우저에서 깨질 수 있다.

낡은 브라우저는 웹 표준을 완전히 지원하지 않기 때문이다.

또한, 낡은 브라우저라고 해서 다 같은 브라우저가 아니다.

IE 7, IE 6, IE 5 세 가지 버전의 브라우저 엔진은 지원하는 표준의 범위가 다르기 때문에 렌더링도 각각 다르다.

렌더링이 제각기 다르기 때문에 각각의 브라우저에 대응하는 CSS 코드도 달라야 한다.

 

IE 8이 등장 했지만 낡은 브라우저와의 호환성을 유지하기 위하여 향상된 표준 코드를 사용하지 않는 것은 바보같은 짓이다.

 

IE 8이 지원하는 표준 CSS 코드를 얼마든지 사용할 수 있다.

향상된 브라우저에 향상된 스타일을 제공하고 더 나은 사용자 경험을 제공 해야 한다.

 

 

4.  AJAX in IE8

 

4.1.                  XMLHttpRequest

 

timeout property와 ontimeout event 추가됨.

setTimeout과 abort() 이용하던 기존 꼼수를 대체.

 

4.2.                  Cross Domain Request(XDR)

 

 

-       다른 도메인간 AJAX 통신 지원

-       XMLHttpRequest 대신 XDomainRequest 객체를 통해 XDR 지원

-       XDomainRequest 객체는 비표준 확장

-       XMLHttpRequest2 (XS-XMLHttpRequest)작업중

-       FF 3.5 –지원예정

-       FF 3.0 -privileged script에서만 지원

-       MS는 XMLHttpRequest 확장이 위험하다는 판단

-       Dynamic Script Tag, Server Proxy, Flash 등으로 대체구현 가능

 

// 1. Create XDR object

var xdr = new XDomainRequest();

 

// 2. Open connection with server using POST method

xdr.open("POST", "http://www.contoso.com/xdr.txt");

 

// 3. Send string data to server

xdr.send("data to be processed");

 

// 4. server side

Response.AppendHeader("XDomainRequestAllowed","1");

Response.AppendHeader("Access-Control-Allow-Origin","*");

 

 

4.3.                  Cross Document Messaging(XDM)

 

-       두 Frame 사이의 메시징 통신 기법

-       HTML5 표준

-       FF 3.0

-       Webkit Nightly

-       Opera 9.5

-       대체구현

n  URL Hash + setIntervalpolling

n  Server Proxy

n  Google Caja

 

 

4.4.                   HTML/JSON Sanitizing

 

-       출신이 의심스런 HTML 및 JSON을 “착하게” 새니타이징한다.

-       빠른 JSON parsing / stringify

by 허둥사마 | 2009/03/16 14:40 | WEB 일반 | 트랙백(1) | 덧글(2)
트랙백 주소 : http://tit99hds.egloos.com/tb/2321392
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Tracked from 아크비스타 :: 아크몬.. at 2009/03/20 04:34

제목 : Windows Internet Explorer 8 ..
윈도우 인터넷 익스플로러(Windows Internet Explorer; 이하 IE) 8의 정식 버전이 공개되었습니다. 다운로드 링크: Internet Explorer 8 전세계 사이트 (한국 MS) Internet Explorer 8: Worldwide sites (미국 MS) ※ 위의 두 링크 모두 전세계 언어용 IE8을 다운로드 할 수 있습니다. 어느 것을 이용하셔도 OK입니다. [참고] 윈도우 비스타 얼티밋 K 서비스 팩 1 적용 컴퓨터......more

Commented by 정찬명 at 2009/03/17 20:52
안녕하세요? 본 포스트 3번 항목 발표했던 정찬명 입니다.
제가 작성한 코드에 오표기가 있어서 검색하던 중 발견 했구요.
meta 호환코드는 다음과 같은 형식으로 작성되어야 합니다.
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"
오 표기된 코드를 다른 분들이 사용하지 않도록 수정해 주시면 좋겠습니다.
감사합니다.
Commented by 허둥사마 at 2009/03/19 10:13
아 그러고보니 content 가 2개있군요..

감사합니다.. 수정했습니다.^^

:         :

:

비공개 덧글



< 이전페이지 다음페이지 >