'IE'에 해당되는 글 2건

  1. 2010.10.02 Browser's RIA Data Loading Benchmarks
  2. 2009.12.30 파이어폭스 와 ie간의 여백차이 1

Browser's RIA Data Loading Benchmarks

Application Programming/Flex & Flash 2010. 10. 2. 17:33


RIA에서 Data Loading은 중요한 요소입니다. 대부분이 서버와 데이터연동을 통하기 때문입니다.
어떤 Data Format이 좋을까 고민할 수도 있습니다. HTTP, SOAP, XML, Dojo, JSON, AMF3등 중에서도 자주 쓰이는 방식은  HTTP, XML,  JSON, AMF3등이 있습니다. 지금 알아볼려고 하는 벤치마크도 이 4개의 데이터포멧을 가지고 진행될 예정입니다.
브라우저별로 렌더링엔진, 스크립트엔진이 틀리기때문에 벤치마크에 대한 결과도 틀립니다.
그래서 제가 자주 사용하는 브라우저 3개만 벤치마크해보았습니다.

벤치마크에 사용될 브라우저와 대상 데이터포멧
 Benchmarks Browser  Internet Explorer8,Firefox 3.6.8, Chrome
 Benchmarks Data Format  HTTP, XML, JSON, AMF3

벤치마크방법:
  1. 모든 브라우저, 실행프로그램들을 꺼둔 상태(메모리, CPU할당량 최소화)
  2. 벤츠마크 사이트: http://www.jamesward.com/census/
  3. IE8->Firefox->Chrome으로 진행


벤치마크 결과:

-Internet Explorer8
Data 500Rows 보냈을때

Data 5,000Rows 보냈을때


-Firefox 3.6.8
 Data 500Rows 보냈을때

Data 5,000Rows 보냈을때


-Chrome
Data 500Rows 보냈을때

Data 5,000Rows 보냈을때


-벤치마크를 마치며
 벤치마크프로그램 시간내서 만들 생각을 하고 있었는데 마침 Server Exec Time, Transfer Time, ParseTime, RenderTime까지 나오는 친절한 벤치마크를 발견했습니다. 위 그림을 보시면 한눈에 브라우저 별로 데이터처리속도가 틀린것을 알 수 있습니다. 특히 IE8은 타브라우저보다 훨씬 느립니다.ㅎㄷㄷ.

 데이터 처리건수  500건  5,000건
 데이터 처리속도  XML>AMF3>JSON>HTML  AMF3>>XML>JSON>HTML
 데이터 크기(작은순)  AMF3>JSON>XML>HTML  AMF3>>>JSON>XML>HTML

IE8에서는 데이터크기가 커지니 XML ParseTime이 매우 늘어나 느려지는 것을 확인할 수 있습니다. 데이터 처리건수가 커질 수록 AMF3는 XML보다 월등한 처리속도를 보여줍니다(XML의 ParseTime은 처리건수에 비례). 또한 AMF3 데이터크기는 JSON의 1/10정도밖에 되질 않는 것도 확인이 되었습니다. 이러한 벤치마크결과들이 제 고민을 해결해주었습니다.

저작자표시 비영리 변경금지

'Application Programming > Flex & Flash' 카테고리의 다른 글

Actionscript Vector 초기화(initialization)  (6) 2011.02.16
Flash AMF 의 개요  (0) 2010.03.08
Flex Builder 3에 JSON적용하기  (2) 2010.01.13
Posted by Finebe
,

파이어폭스 와 ie간의 여백차이

Web Programming/HTML & Javascript 2009. 12. 30. 21:15



질문1) 위에처럼 html 을 구성할 경우 li 에 있는 이미지와 하단 선사이에(ul에 지정) 약 4px 정도 공백이 생깁니다.

li 에 직접 height 를 주면 해결되긴 한데 height 를 주지 않고 border-bottom 이 딱 붙게 할 수 있는 방법이 있을까요?

 

답변1) 이미지 4px정도 여백은 영어에 아랫첨자가 있기 때문입니다. (EX: 영소문자 g 또는 j 등등)

이와 같은 문제는 FF(파이어폭스)에서도 마찬가지이며 해결 방안으로는

<img>태그에 style img {vertical-align: top;}을 주어서 해결이 가능합니다.

 

질문2) 위의 li 태그에서 style 을 삭제하고 스타일에 img {vertical-align: middle;}

을 추가하면 li에 들어있는 이미지가 border-bottom위로 1px 내려 옵니다.

ul에 height 를 지정하면 정상적으로 보이나 파폭에서 1px 띄어져서 보이네요.

어떤 방법으로 해결할 수 있을까요?

 

답변2) 질문 2번 문제는 vertical-align 문제가 아닌거 같습니다.

일단 li 태그에 float: left;가 됨으로써 ul의 높이값이 사라지기 때문에 검은색 선이 위로 올라가게 됩니다.

하지만 IE에서는 정상으로 나오죠. IE 버그입니다.

 

그럼 해결 방안을 드리자면

아래와 같은 소스가 될듯 싶네요.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title> new document </title>
</head>
<style type="text/css">
* {margin: 0px; padding: 0px;}
ul, li, dl, dt, dd {list-style: none;}
ul {width: 500px; border-bottom: 2px #000000 solid; overflow: auto; height: 100%;}
ul li { float: left;border: 1px solid #f18;}
ul li img {vertical-align: top;border: 0;}
</style>
<body>
<ul>
 <li><img src="test.gif"  /></li>
 <li><img src="test.gif" /></li>
</ul>
</body>
</html>

 

 

질문 1은 영문의 아래첨자의 의한 문제이고

질문 2번은 CSS의 float 속성의 의한 것입니다.

자세한 설명을 하자면 단순히 이 소스를 가지고 이해 시켜드리기가 어렵네요.

답변 주시면 자세한 설명 해 드리겠습니다.

HTML 및 CSS속성은 http://trio.co.kr/ 찾아보심 될듯 싶습니다

[출처] 파이어폭스 와 ie간의 여백차이|작성자 jidusdl

저작자표시 비영리 변경금지

'Web Programming > HTML & Javascript' 카테고리의 다른 글

CSS 템플릿 모음 사이트  (1) 2009.11.12
네이버, 야후, 구글지도 좌표구하는 사이트  (0) 2009.06.19
escape,encodeURI,encodeURIComponent의 차이점  (2) 2009.04.08
Jquery 플러그인 모음  (2) 2009.04.08
Posted by Finebe
,

티스토리툴바