'크로스브라우징'에 해당되는 글 2건

  1. 2008.01.28 Ajax Performance Issue - 에이잭스 퍼포먼스 문제
  2. 2008.01.01 cross-browser Word Break per Byte in javascript (10)
사용자 삽입 이미지
Ajax 와 DOM 스크립팅에 현재 가장 이슈가 되는 것은 아무래도 고성능을 낼 수 있는 웹 어플리케이션을 만들 수 있느냐라고 생각합니다.

웹 자체는 가벼우면서 사용자들에게 손쉽게 다가갈 수 있고 사용자들에게 가장 쉽게 어필 할 수 있는 것 역시 웹(web) 입니다.

최근 RIA 개발에 Ajax가 가미되면서 Client-side 와 Server-side 가 완전히 분리되고 Client 에서는 UI에 전념할 수 있게 되었습니다.

하지만 이에 "대화형 웹 어플리케이션"을 위한 Ajax와 DOM 스크립팅이 그 만큼 중요하게 되었는데요.

크로스브라우징, 사용자 리소스 최적화 등의 이슈가 되고 있습니다. 그렇게 좀더 가볍고 저사양에서도
또한 글로벌 스탠다드가 되기 위하여 최고의 퍼포먼스를 낼 수 있는 RIA 설계가 중요하게 되었습니다.

우리는 IE, FF, Opera, Safari 의 크게 4가지의 브라우저를 기본으로 크로스 브라우저에 대응합니다.
이에 몇가지 브라우저별 퍼포먼스를 비교해봅니다.


DOM 스크립팅 퍼포먼스 (HTML DOM Operation Performance)
                                        IE7             FireFox            Safari       
HTML DOM Operation Time(ns) % Time(ns) % Time(ns) %
Change text using innerHTML 469.0 9979% 234.0 6000% 109.0 7032%
Create a text node on HTML Dom 1093.0 23255% 156.0 4000% 110.0 7097%
Change the class name of an element 422.0 8979% 47.0 1205% 109.0 7032%
getElementById 86.8 1846% 15.7 401% 3.9 252%
getElementsByTagName("div") 153.1 3257% 18.0 462% 5.5 352%
getElementsByName 93.8 1995% 44.6 1142% 4.7 303%
placeDiv.getAttribute("id") 29.7 632% 46.8 1200% 5.5 352%
placeDiv.attributes["id"] 31.3 665% 225.0 5769% 6.3 403%

IE7의 결과는 UI 개발자의 손목에 수갑을 채우고 있습니다. 꼭 이런 문제뿐만 아닙니다.
IE8에는 많은 문제가 해결되고 표준에 의거하여 개발에 임했으면 합니다.



eval function의 수행 퍼포먼스(2번)
IE7 172ns and 94ns
FireFox 546ns and 749ns
Safari 9.4ns and 22.7ns

과연 eval은 크로스 브라우징 대응에 있어서 사용을 줄여야합니다.


Object 생성 수행 퍼포먼스
“var myObject = new MyObject (17, 250);
“var slowCar = {m_tireSize:17, m_maxSpeed:250};”

IE7 11.7ns and 8.6ns
FireFox 23.4ns and 23.4ns
Safari 3.2ns and 2.4ns

Ajax 개발 시 Server-side 에서 JSON 을 받아올 경우 Firefox의 경우 Object화 하여 사용할 경우
경우에 따라 퍼포먼스에 많은 영향을 미칩니다.


in 수행 퍼포먼스
IE7 10.3ns
FireFox 62.8ns
Safari 7.6ns


Firefox 도 Ajax 개발 시 경우에 따라 상당히 느려지는 부분을 보이고 있습니다.
하지만 IE6의 경우보다는 매우 양호합니다. IE6의 경우는 대부분의 Ajax 개발 관련 Performance 테스트에서
몇 백 퍼센트의 차이를 보이고 있습니다.
특히 IE의 경우 String 퍼포먼스에서 매우 낮은 결과를 보입니다.

DOM 스크립팅시에 우리는 DOM 구조를 일일이 생성하는 것 보다 String innerHTML을 자주하게 활용하는데요.
IE의 경우 퍼포먼스에 지대한 영향을 미칩니다.
그래서 우리는 Array 를 이용 string buffer 기능을 사용하여 효율적으로 처리하고 있지만 전체적으로 IE의
경우 String에 낮은 퍼포먼스를 보입니다.

마지막으로 Safari 의 경우 다른 브라우저들에 비해 상당히 안정되고 최고의 퍼포먼스를 자랑하고 있습니다.
역시 아직까지 다른 브라우저에 비해 기능 차이가 있기 때문입니다.

체감하는 렌더링 속도도 상당히 차이가 있음을 느낍니다.


Internet Explorer 7

      FireFox

     Safari

Description

Time (ns)

% of base

Time (ns)

% of base

Time (ns)

% of base

Normal Empty function call (Base Operation)

4.7

100%

3.9

100%

1.6

100%

Basic Function Calls







Function call using function.call(this)

5.5

116%

2.4

60%

1.6

100%

Normal Empty function using apply

5.5

117%

7.0

179%

2.4

152%

Normal Empty function using apply with 3 parameters

7.0

149%

7.1

181%

2.4

152%

Eval a function

172.0

3660%

546.0

14000%

9.4

603%

Eval an object

94.0

2000%

749.0

19205%

22.7

1461%

Basic Operations







Access Properties through a getter

13.3

282%

6.3

160%

5.5

352%

Access Properties directly

4.7

100%

3.2

81%

2.4

152%




 

 



Simple string concatenation

4.7

100%

2.3

59%

1.6

100%

Simple string compare

3.9

83%

2.4

60%

0.8

48%

Change string to upper case

11.7

249%

3.9

100%

4.7

303%

Replace string reg expression

12.5

266%

7.1

181%

9.4

603%

String concat with integer

7.1

150%

4.7

119%

2.4

152%

String concat with float

6.3

133%

4.7

121%

2.4

152%

Index of Bob in string, not found, length = 71

6.3

133%

6.3

160%

2.4

152%

Match of Bob in string, not found, length = 71

14.9

316%

25.0

640%

3.9

252%

charAt(10) in string

11.7

249%

6.3

160%

3.1

200%




 

 



Create object constructor initialized

11.7

249%

23.4

600%

3.2

203%

create simple object

8.6

182%

23.4

600%

2.4

152%



0%

 

 



Variable declaration

4.0

84%

2.3

59%

0.8

48%

Multiple variable declaration, multiple var

3.9

83%

2.4

60%

2.4

152%

Multiple variable declaration single var

3.9

83%

2.4

60%

1.6

100%

Variable declaration set to null

3.9

83%

2.4

60%

1.6

100%



0%

 

 



Variable assignment++

4.7

100%

5.5

140%

1.6

103%

Variable assignment + 1

5.5

116%

7.1

181%

1.6

100%




 

 



Four levels of property access

5.5

116%

5.5

140%

1.6

100%

Three levels of property access

4.7

100%

4.7

121%

2.4

152%

Two levels of property access

4.7

100%

4.7

119%

1.6

100%

One level of property access

3.9

83%

4.7

121%

1.6

103%



0%

 

 



Using the typeof function

3.9

83%

4.7

119%

1.6

100%

Array Operations







Array access

7.1

150%

7.0

179%

1.6

100%

Array index value change

3.9

83%

4.7

121%

1.6

103%

Empty Array index value change

8.6

183%

8.6

221%

6.3

403%

Empty Array add three values

10.2

216%

11.7

300%

3.1

200%

Empty Array with set size

11.0

233%

11.0

281%

3.2

203%

Empty Array using constructor

9.4

199%

25.8

662%

2.3

148%




 

 



Push element onto an Array

25.0

532%

6.3

160%

1.5

98%

Pop element of an Array

165.6

3523%

6.3

160%

249.7

16112%

Push element onto an Array

6.2

132%

7.1

181%

1.4

92%

Shift elements off the front of an Array

2030.0

43191%

5620.0

144103%

1250.0

80645%

Join the array into a string

125000

2659574%

47000

1205128%

16000

1032258%

Push element onto an Array

7.1

150%

7.0

179%

3.9

252%

Sorting of an Array

93.0

1979%

45.3

1162%

32.9

2119%




 

 



Math.max(7.25,7.30)

5.5

116%

4.7

121%

3.9

252%

Math.min(7.25,7.30)

5.5

117%

4.7

121%

3.2

203%

HTML DOM Operations







Change text using innerHTML

469.0

9979%

234.0

6000%

109.0

7032%

Create a text node on HTML Dom

1093.0

23255%

156.0

4000%

110.0

7097%

Change the class name of an element

422.0

8979%

47.0

1205%

109.0

7032%




 

 



getElementById

86.8

1846%

15.7

401%

3.9

252%

getElementsByTagName("div")

153.1

3257%

18.0

462%

5.5

352%

getElementsByTagName("spa")

142.2

3024%

18.8

481%

5.5

355%

getElementsByName

93.8

1995%

44.6

1142%

4.7

303%




 

 



placeDiv.getAttribute("id")

29.7

632%

46.8

1200%

5.5

352%

placeDiv.attributes["id"]

31.3

665%

225.0

5769%

6.3

403%

var atts = placeDiv.attributes; atts["id"].name

11.7

249%

18.8

482%

4.7

303%

var atts = placeDiv.attributes; atts.id.name

12.5

266%

18.8

482%

3.9

252%

Try/Catch







Function call using function.call(this)

7.1

150%

4.0

101%

2.4

152%

Try catch

7.1

150%

6.3

160%

5.5

352%

Try catch with throw

17.2

365%

7.8

200%

5.5

355%

Try catch finally

9.4

199%

7.8

200%

4.7

303%

Try catch finally with throw

16.5

350%

11.0

281%

6.3

403%

If statement and Date object







Create a date object

12.5

266%

10.2

260%

3.1

200%

Create a date object and call getDate()

28.1

598%

50.8

1303%

10.2

658%




 

 



The switch statement

4.7

99%

2.4

60%

2.4

152%

An if statement

4.0

84%

2.4

60%

2.4

152%




 

 



Simple if else

4.1

86%

2.2

56%

1.9

121%

turinary operator

3.9

83%

2.3

60%

2.0

131%




 

 



Compare of matching string ==

4.7

100%

7.1

181%

2.4

152%

Compare of matching string ===

4.7

100%

7.0

179%

2.4

152%

Compare of non-matching string

4.7

100%

3.9

100%

2.4

152%




 

 



Compare  TEST_INT == 5

4.1

86%

4.2

108%

1.7

111%

Compare  5 == 5

4.1

87%

2.0

52%

1.6

101%

Looping Performance Statistics







Loop through an array using in

10.3

219%

62.8

1610%

7.8

503%

Loop through an array using for (i++)

6.3

133%

10.6

273%

3.4

222%

Loop through an array using for (i < myArray.length)

6.2

133%

10.9

281%

3.1

201%

Loop through an array using for (i = 0; i < len; i++)

5.0

106%

4.7

120%

4.1

262%

Loop through an array using for (i = 0; i < len; i++)

5.3

113%

5.0

128%

4.1

262%

Loop through an array using while {i++}

5.3

113%

5.3

136%

4.7

302%

Loop through an array using while (i++ < len)

5.0

106%

5.0

128%

4.4

283%



원본 : http://www.coachwei.com/blog/_archives/2008/1/22/3480119.html
퍼포먼스 테스트 : http://www.rockstarapps.com/samples/performance/
신고
Posted by Rhio.kim
Dynamic Word Break!!  크로스브라우징 word-break, word break

사용자 삽입 이미지






우리는 간혼 이렇게 div 나 기타 html document 에서 문자열이 layout 구조를 뚫고 나오는 경우를
종종 봅니다.

IE의 경우에는 css로 이 부분을 유연하게 처리할 수 있습니다. 하지만 기타 다른 브라우저에서는 특별한 해결책이 아직은 없는거 같습니다.



제가 제시하는 해결 방법은 각 문자마다 일정의 띄어쓰기를 넣는 방식입니다.
white space를 일정 간격 혹은 자간 사이에 입력하므로써 브라우저에서 자동으로 Word-Break를 하게 됩니다.

즉 위의 이미지를 보면 div는 width:200px 입니다.
길게 늘여진 aaa.......aaa 문자열 각 사이에 white space인 space 값을 강제적으로 입력해 넣습니다.

aaaaaaa aaaaaaa aaaaaaa aaaaaaa  ....

이런식으로 넣게 되면 브라우저에서는 자동으로 Word-Break 하게 됩니다. 역시 크로스 브라우징도 가능하게 됩니다.   다만 여기에도 문제가 있습니다.

"i'mastudent' 이라는 문장을 입력하였다면 몇자 간격으로 띄어쓰기를 하느냐에 따라서 의미 전달이 달라질 수 있기 때문입니다.  또한 쓸모없이 중간 중간 띄어쓰기가 있다면 유연한 문장이 되지 않거나 보기 싫게 됩니다.

4byte 단위로 쪼갠다면 i'ma stud ent 가 되겠죠.  사실 저렇게 쓰는 사용자들은 거의 없겠죠.
하지만 경우에 따라 제목에 원치 않는 긴 제목을 'ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ' 이렇게 넣는
경우가 있죠. 

여기서 고안해낸것인데요.  중간중간 space값을 넣을때 바로 0px의 문자열을 넣는 것이죠.
aaaaaaa<i style="font-size:0px;"> </i>aaaaaaa<i style="font-size:0px;> </font> .....



이렇게 좀더 쉽게 만들었습니다.

요약
목표 : 크로스브라우징 word-break 이 가능하도록 javascript 동적 컨트롤
문제 : IE에서는 css를 통하여 word-break 가 가능하지만 그외 브라우저에서는 word-break가 되지 않는다.
고안 : div를 뚫거나 기본 layout 을 변형 시키는 긴 문자열에 일정 간경 혹은 word-break할 단위마다
         띄어쓰기를 강제적으로 넣어줄 경우 모든 브라우저에서 어떤 컨트롤 없이 word-break가 이루어진다.
         하지만 강제적인 띄어쓰기(white space)를 넣을 경우 부자연스러운 띄어쓰기로 원 문자열의 의미가
         없어지고 문자열의 규칙적인 띄어쓰기가 보는 사람들에게는 불편할 수 있다.

결론 : word-break를 해야하는 긴 문자열에 강제적으로 띄어쓰기를 입력하되 띄어쓰기할 문자(white space)는         0px 사이즈의 문자열로 한다.


이것은 직접 사용해본 예제입니다. 

document가 onload가 되면 document 에서 name으로 word-break 엘리먼트를 찾아서
한번에 위의 예제처럼 사용하시면 가장 좋을 것 같구요.

그외에 일부분만 word-break해야한다 하면 wordBreak 메서드를 활용해

    '문자열'.wordBreak();

처럼 사용하시는게 좋겠네요.
신고
Posted by Rhio.kim