퍼포먼스 향상을 위한 Ajax Anti Pattern
기존에 ibm에서 발표한 자료와는 조금 틀립니다.

당연히 알고 있는 부분일 수도 있지만 다시 한번 되새기고 모르시는 분들과 알지만 간과했던 부분일 수 있음을
분명히 인지하시면 좋겠습니다.

Ajax 패턴이라 하기 보다는 웹에서 javascript 로 동적 처리를 할 경우에 꼭 체크해야할 사항입니다.

사용자 삽입 이미지






위의 이미지는 jsProc.htm 파일에서 jsProc1.js 와 jsProc2.js 를 로딩하는 과정에서 발생하는 Cost에 대해서 분석했습니다. 

기본적으로 브라우저에서 js파일을 HTTP Request 할때 parallel download 가 이뤄집니다.
즉 1개의 js가 다운로드 되고 나면 그 다음에 오게될 js를 다운로드 하게 됩니다. 다른말로 block download 라고도 하는데요.

위의 이미지는 js 파일에 아무런 내용이 없을때 다운로드 되는 속도입니다.
0 byte의 js 파일을 HTTP Request 하는데에도 약 32ms 가 발생하네요. 작은 거지만
10만 모이더라도 3ms 가 발생합니다.  웹 페이지에서는 치명적입니다.


사용자 삽입 이미지






위의 내용은 jsProc1.js 에 아래의 코드를 수행하도록 처리해 놓은 것입니다. 
이는 각 모듈별로 js가 로드되면서 js가 수행하는 일이 있을때 과연 어떻게 브라우저에서는 작용을 하는지 체크하였습니다.

jsProc1.js 안의 명령들이 수행이 완료되고 나면 비로소 나머지 js파일을 로딩합니다.
jsProc1.js 의 download 시간은 313ms 가 소요되었습니다.
아무것도 없을 때에 비해 282ms 더 걸렸습니다.

이는 js 내에서 처리되는 명령들이 수행이 되고나서 다음 js 가 비로소 다운로드 됨을 의미합니다.

좀더 복합적으로 image 라들지 css, flash 등의 component 들 역시 javascript에 의해서 딜레이 되게 됩니다.

그렇기 때문에 javascript 라이브러리들은 HTML document 의 하단 부분에 넣기를 권장합니다.
그리고 js에서 페이지 로딩단계에서 처리해야 될 부분을 최소화 시켜야합니다.


TPerformance v0.0.001 - Rhio Ajax Application 2007
------------------------------------------------------------------------------
 시작 : 1197982303953/ms
 종료 : 1197982304718/ms
------------------------------------------------------------------------------
수행시간 : 765/ms
신고
Posted by Rhio.kim
원본출처 : http://developer.yahoo.com/performance/

웹 개발 / 웹 UI 개발자들이 꼭 알아야 할 부분입니다. 이런 부분까지 자세히 모른다면 점점 코더로
전락하는 길입니다.

최적화된 퍼포먼스를 통해서 유저에게 최적의 UI를 보여주는 역활을 할 수 있구요.
Yahoo 개발자 네트워크게 가보면 다양하고 유용한 정보들이 참 많네요...

High Performance Videos

Yahoo! performance chief Steve Souders joined with Plaxo's Chief Platform Architect Joseph Smarr to reprise a couple of talks they gave at OSCON this year. These presentations are now available on YUI Theater.

Rules for High Performance Web Sites

The Exceptional Performance team has identified 13 rules for making web pages fast. Each rule is discussed in the Developer Network Blog articles listed below.

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put CSS at the Top
  6. Move Scripts to the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
신고
Posted by Rhio.kim
원본 출처 : http://www.rockstarapps.com/samples/performance/

javascript 다양한 로우레벨 퍼포먼스 테스트를 한 사이트가 있네요.
자주 사용하는 부분이 Array와 HTML! 부분인데 사용에 따라 1초 이상 걸리는 경우들도 있네요.
클라이언트 사양에 따라 많이 다르겠지만 저는 이런 테스트 결과가 나왔네요.

ARRAY
Description Total Time (ms) Per/Call (ms)
Array access
Array index value change
Empty Array index value change
Empty Array add three values
Empty Array with set size
Empty Array using constructor

Push element onto an Array x5000
Pop element of an Array x5000
Push element onto an Array x5000
Shift elements off the front of an Array x100
Join the array into a string (4900)
Push element onto an Array x100
Sorting of an Array x1000

Math.max(7.25,7.30)
Math.min(7.25,7.30)
47
63
125
140
157
140

31
954
31
172
15
94
78

63
78
0.00235
0.00315
0.00625
0.007
0.00785
0.007

0.0062
0.1908
0.0062
1.72
15
0.0047
0.078

0.00315
0.0039

HTML!
Description Total Time (ms) Per/Call (ms)
Change text using innerHTML (1000x)
Create a text node on HTML Dom (1000x)
Change the class name of an element (1000x)

getElementById
getElementsByTagName("div")
getElementsByTagName("spa")
getElementsByName

placeDiv.getAttribute("id") x20000
placeDiv.attributes["id"] x20000
var atts = placeDiv.attributes; atts["id"].name x20000
var atts = placeDiv.attributes; atts.id.name x20000
188
141
265

1406
2531
2407
1453

453
485
187
172
0.188
0.141
0.265

0.0703
0.12655
0.12035
0.07265

0.02265
0.02425
0.00935
0.0086


This application tests the performance of many different low level calls. Knowing how each browser will perform on basic functionality will allow developers to create best practices for code in their JavaScript library.

You will be amazed at how fast you can make your application go by understanding the basic performance characteristics of the JavaScript language. Also it is important not to just run these test on Firefox, but on all browsers to see the difference between them. Feel free to modify the code to test other things that you may have found to be problematic.

The absolute times are not important and will vary from run to run. What is important is the difference in times between browsers and between two different ways to do the same thing. Performance tuning you application will take time, you can use the jsLex project to help out when you need to quickly find a bottleneck in your code..
신고
Posted by Rhio.kim

Firefox가 IE에 비해 너무 느려 터져서 무슨 방법이 있나 인터넷을 검색해 보았습니다.

Firefox의 초기설정치는 전화모뎀에 맞게 설정되어 있읍니다.
초고속 인터넷을 쓰시는 분은 주소창에 about:config를 치고 설정을 바꾸면 Firefox가 대단히 빨라집니다. 

nglayout.initialpaint.delay -> 0
(nglayout.initialpaint.delay 항목이 없으면 마우스 오른쪽 클릭으로 새 항목을 만듭니다.)
network.http.pipelining -> true
network.http.proxy.pipelining -> true
network.http.pipelining.maxrequests -> 64 이상


browser.cache.memory.enable -> true
browser.cache.memory.capacity -> 65536
(메모리가 많으면 더 늘려 준다.)
plugin.expose_full_path -> true

이렇게 하니 제법 상당히 빨라 집니다.
더 좋은 팁이 있으시면 공개바랍니다.

'network.http.pipelining.maxrequests'의 값을 너무 높이면 서버에서 밴(ban)당할 경우가 있습니다.

신고
Posted by Rhio.kim