사용자 삽입 이미지
IE 베타 발표에 이어 Safari 업데이트 소식이 있네요. 

Safari 렌더링 속도도 매우 빠르고 참 좋은데 아직은 맥에서 돌아갔던 브라우저고 국내 사용자들에게는 그다지 빛을 바리지 못하고 있는 브라우저입니다.

하지만 맥북 유저들이 많아지면서 사파리 사용자들도 꾸준히 늘어나고 있는 추세인데요.

이번 릴리즈를 통해서 다양한 향상과 새로운 기능이 추가되었습니다.
이로 다시한번 국내 브라우저 시장에서 점유율을 좀더 높여갔으면 합니다.


Performance

  • 자바스크립트 성능 향상

Standards

  • CSS 3를 위한 웹 폰트
  • CSS transforms 과 transitions 기능 지원
  • HTML5의 video와 autio 엘리먼트 지원
  • 웹 어플리케이션을 위한 SQL기반 오프라인 스토리지 지원
  • img 엘리먼트와 CSS 이미지 SVG 이미지 지원
  • SVG 고급 text 지원

Microsoft Windows

  • 앞(Forward)/뒤(Back) 버튼의 향상
  • signed Java applets(서명된 자바 애플릿)
  • Password 필드에 Caps Lock 아이콘 표시
  • 모달 다이얼로그 지원
  • 16개 국어 지원
  • 사용자 삽입 이미지

  • 세계적 도메인 제공(무슨 말일까낭???)
  • 일본, 중국, 한국등의 2Byte문자체계의 향상된 지원(조금씩 깨지는 현상은 있음)
  • 사용자 삽입 이미지

  • window와 탭에서 컨텍스 방식의 메뉴 연결
  • 플러그인을 갖는 팝업 방지 향상

Compatibility

  • 향상된 사이트 호환성

Stability

  • 어플리케이션의 안정성 향상

Developer

  • 새로운 개발 메뉴에 다양한 웹 개발 기능들을 포함하고 Safari 기본설정 메뉴 추가
  • 사용자 삽입 이미지
    사용자 삽입 이미지

  • Web Inspector 기능 사용 가능
  • 사용자 삽입 이미지

  • Network 타임라인 기능 사용 가능
  • 사용자 삽입 이미지

  • Web Inspector 에서 CSS 편집 기능

  • 사용자 에이전트 문자열 가능
  • 사용자 삽입 이미지

  • Improves snippet editor
  • 사용자 삽입 이미지

Other

  • Tab 바에서 더블클릭시 새로운 탭이 열림
  • 브라우저에서 이미지를 드레그해서 놓거나 저장할때 URL 메타데이터가 포함됨
  • Opens Download and Activity window in current Space
  • 맥북, 맥북 에어 등에 대한 지원

Security

  • For information about the security content of this update, visit this website.

출처 : http://docs.info.apple.com/article.html?artnum=307467
신고
Posted by Rhio.kim
Ajax 브라우저별 HTTP Connection 에 대한 테스트 및 고찰!!
그동안 Ajax 통신은 Wininet.dll (Window 32 Internet API) 로만 통신을 하는 줄 알았습니다.

FF에서 Ajax 최대 커넥션 및 HTML document component 병렬(parallel Downloads)다운로드 테스트 하다가
알게 되었습니다.

사용자 삽입 이미지







각 Ajax 요청에 따른 서버 모듈은 PHP 입니다.

<?php
  sleep(5);
  echo "{ complete : 'ok' }";
?>

즉 단지 5초 동안 대기 한 후 결과값을 반환합니다.

테스트한 결과에 대해 살펴 보겠습니다.


Internet Explore 의 경우

사용 모듈 wininet.dll 을 사용합니다.
그리고 Max-Connection 개수는 아래의 레지스트리 값을 참고합니다.  따로 레지스트리를 건드리지 않은 상태라면 아래의 dword 의 값은 00000002 입니다.

[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings]
  "MaxConnectionsPer1_0Server"=dword:00000002
  "MaxConnectionsPerServer"=dword:00000002

기본 적으로 Ajax 통신은 2개의 커넥션만 가능하게 됩니다.

위의 테스트 할때 커넥션이 몇개 만들어지는지 TCP/IP 커넥션 개수를 보겠습니다.
사용자 삽입 이미지

좌측에서 보는것과 같이
3개의 커넥션이 맺어집니다.

제 레지스트리이에는
00000040 으로 설정되어
있습니다.

16진수로 64개의 커넥션을
허용해 놓은 상태입니다.

그래서 기본적으로 권고하는 2개의 커넥션보다 더 많은 Ajax 요청을 허용하게 됩니다.

Ajax 통신이 완료되면 자동으로 커넥션은 close 됩니다.












이때 과연 어떤 window 모듈을 사용할까요...
사용자 삽입 이미지
좌측에서 보이는 것 처럼 IE에서는 WININET.dll을 사용합니다.















FireFox 의 경우

network.http.max.-persistent-connections-per-server
사용자 삽입 이미지
좌측은 firefox의 config 정보 입니다. IE에서의 레지스트리와 동일한 일을 하는데요.

firefox 의 경우 주소 부분에 "about:config" 라고 입력해서 이동하시면 좌측과 같은 창이 보입니다.  필터 부분에 "network.http.max" 라 입력하시면 IE 의 레지스트리 부분과 유사한 기능을 하는 부분이 보입니다. 위 이미지에서는 파랗게 처리된 부분이 그 부분입니다.

저 같은 경우는 값이 2로 셋팅되어있습니다. 예제 페이지에서는 3개의 Ajax 요청을 합니다.


사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지





























































































위의 이미지 처럼 순차적으로 2개가 완료되고 나면 나머지 1개를 처리하게 됩니다.
당연한 이야기죠..

이어서 과연 Firefox도 Wininet 을 사용하지 않습니다.
사용자 삽입 이미지
mswsock.dll 을 사용해서 Ajax통신을 하게 됩니다.

사실 여기까지만 테스트를 하려고 했으나

혹 Opera 나 Safari 도 궁금할까 해서 간단하게 내부적으로 어떤 모듈을 사용하는지 찾아봤습니다.








Opera의 경우
역시 Opera 도 브라우저에 Config 를 따로 지원합니다. 당연히 브라우저기 때문에 브라우저에 설정 기능이 있어야 하는데.. IE 만 유달리 윈도우 레지스트리에 종속적으로 움직이네요...  별로 싫어집니다..

오페라의 경우도 주소줄에 opera:config 라고 입력하면 뜹니다.
사용자 삽입 이미지
















위의 값 중 Max Connections Server 값입니다. Opera의 경우 기본 값이 8입니다. FF와 같이 동일합니다.

사용자 삽입 이미지
Opera 의 경우도 mswsock.dll 을 사용하여 Ajax 요청을 처리하고 있습니다.














Safari의 경우
Safari 는 Info.plist 파일에 정보를 가지고 있다고 해서 찾아 열어봤지만 어떤 파일인지 찾지 못했습니다.
ㅠ.ㅠ 아무튼 유사한 방식으로 Max Connection 을 설정하고 있습니다.
Safari의 경우도 8정도로 설정되어 있는 것 같습니다. Ajax 요청을 한꺼번에 3개를 요청했는데 이상없이
3개를 동시에 처리 하더군요...

사용자 삽입 이미지
Safari 역시 mswsock.dll 을 사용하여 Ajax 요청을 하는 걸로 들통 났습니다.

















그런데 왜 굳이 IE는 지금 시스템을 고치려 하지 않을 까요?
Window 에서 돌아가는 브라우저들이라 해서 IE는 윈도우 깔면 자동으로 깔리는 임베디드형 어플리케이션이라서 W3C에서 권고한 DOM Standard도 따르지 않고 레지스트리에다가 설정하고 Wininet.dll 을 사용하고

기본 설정이 왜 2여야만 하는지 좀 다른 브라우저하고 표준에 대해서 Standard 에 대해서 논의 해보고 좀 맞추면 안되나?? 
신고
Posted by Rhio.kim
사용자 삽입 이미지
Safari(Webkit3) 의 10가지 변화

맥 OS X (10.5.1 과 10.4.11) 에 있는 사파리와 윈도우용 베타 버젼에서 사파리 브라우저에 내장된 Webkit의 위대함을 느낄 수 있답니다..

^-^;; 얼마나 대단한지 계속 보시죠... 텍스트 위주라 지겨울 수도 있지만 변화를 알고 싶다면 보셔요 ^^



1. Enhanced Rich Text Editing(향상된 리치 텍스트 에디팅)

쉽게 디자인 모드로 만들어진 textarea 말하는데요. 좀더 향상된 지원이 가능합니다.
사파리에서 데모 한번 보시면 아실꺼에요. 브라우저 자체 지원으로 좀더 심플하지만  가볍고 좋네요.
지금은 기본 기능에 충실했지만 차후에 계속적인 고급 기능들이 추가될 거라네요..


2. Faster JavaScript and DOM(더욱 빨라진 Javascript 와 DOM)

다양한 부분의 벤치마킹 툴을 이용하여 맥북에서 WebKit2 와 WebKit3 의 비교를 했습니다.
IE도 좀 이런데 신경 쓰면 더 좋을텐데 말이죠.. 그건 그렇고  아래 밴치마킹 결과를 보세요.

i-Bench JavaScript Processing (사용법도 간단하고 다운로드도 여기서 할 수 있습니다.)
WebKit 2 - 1.99 sec
WebKit 3 - 0.87 sec
WebKit 3 is 2.3 times as fast!

Celtic Kane Javascript Speed Test 2007
WebKit 2 - 1276 ms
WebKit 3 - 624 ms
WebKit 3 is 2 times as fast!
이 부분이 자바스크립트와 DOM 의 프로세싱 테스트 인거 같은데요. 기존 속도에 비해 2배나 빨라졌습니다. 랜더링 속도가 다른 브라우저에 비해 월등했는데 오페라와 맞먹겠는걸요!!

pentestmonkey MD5 test (테스트)
WebKit 2 - 8.352 sec
WebKit 3 - 3.794 sec
WebKit 3 is 2.2 times as fast!

이 부분은 현재 제 PC에 깔린 4개 브라우저에서 테스트한 결과입니다. webkit2 인점을 감안하고 보세요.
- IE
MD5 Benchmark took 3.844 seconds for 3000 hashes (780 hashes/second)
MD4 Benchmark took 6.828 seconds for 2700 hashes (395 hashes/second)
SHA1 Benchmark took 4.094 seconds for 1900 hashes (464 hashes/second)

-Webkit2 in Safri
MD5 Benchmark took 5.531 seconds for 3000 hashes (542 hashes/second)
MD4 Benchmark took 5.203 seconds for 2700 hashes (519 hashes/second)
SHA1 Benchmark took 6.641 seconds for 1900 hashes (286 hashes/second)

- opera
MD5 Benchmark took 2.875 seconds for 3000 hashes (1043 hashes/second)
MD4 Benchmark took 2 seconds for 2700 hashes (1350 hashes/second)
SHA1 Benchmark took 3.156 seconds for 1900 hashes (602 hashes/second)

-FireFox
MD5 Benchmark took 4.406 seconds for 3000 hashes (681 hashes/second)
MD4 Benchmark took 3.25 seconds for 2700 hashes (831 hashes/second)
SHA1 Benchmark took 6.297 seconds for 1900 hashes (302 hashes/second)

테스트 결과가 좀 웃기네요.  4개 브라우저에서 평균적으로 가장 느립니다. 거기에서 2배 정도 빨라진것입니다.
결론은 그동안 다른 브라우저에 비해 MD5등 알고리즘이 느렸는데 빨라져서 다른 브라우저와 비슷해졌다...
뭐 그런 뜻으로 봐야겠네요..

JavaScript Raytracer (테스트)
WebKit 2 - 853.594 sec
WebKit 3 - 48.48 sec
WebKit 3 is 17.6 times as fast!

전반적으로 Webkit3 가 2에 비해서 Javascript와 DOM 처리 속도가 2배 정도 빨라졌다는 점입니다. 짝짝짝!

3. Faster Page Loading (더욱 빨라진 페이지 로딩)

WebKit 2 - 2.95 sec
WebKit 3 - 2.06 sec
WebKit 3 is 1.4 times as fast!
추가적으로 IE, FF 보다 페이지 로딩속도가 빠릅니다.
이 부분은 몇몇 기사에서 소개도 되고 전문 연구 기관에서도 확인한 내용입니다.
하지만 국내에서는 잘 안쓴다는거.. ^^ 국내 지원이 된다면 아마 IE와 FF처럼 점점 느려질 수 밖에 ^^;
그래도 기대해 봅니다. 또. 빨라지면 뭐해 -_-;; 고만큼 무거운 Web 프로그램을 요구할텐데;;;


4. SVG(Scalable Vetor Graphics)
Webkit3의 메이저급 새로운 기능입니다. SVG는 XHTML 과 함께 쓰여 큰 그래픽적인 요소를 표현하기 위한 XML 랭귀지 입니다.
아래 간단한 데모 사이트 입니다.


5. XPath
또 다른 메이저급 기능 바로 XPath 는 W3C의 표준 쿼리 랭귀지 입니다. 이 XPath는 개발자들을 우히ㅏㄴ 언어입니다. HTML Document에서 특별한 엘리먼트를 효율적으로 찾을 수 있습니다.

예를 들어 document.getElementById('element id')  이것은 DOM Method 입니다. 이러한 방식처럼 XPath 랭귀지가 있습니다. Prototype.js 에서는 이 부분을 지원하고 있는데요 Selector 오브젝트에서 지원되는 브라우저에 따라 XPath를 이용하여 엘리먼트를 찾습니다.

이를 통해서 DOM 에서 지원되지 않는 메서드들이 사용자가 만들 수 있습니다. 거의 대부분 정규표현식을 통해서 찾는 방식이긴 합니다만...


6. New and Improved XML Technologies (새롭고 향산된 XML 기술들)
XPath와 XVG의 큰 기능이 추가되었습니다.
XSLT를 위한 XSLTProcessor Javascript API 와 많은 XSLT 문제점 수정과 확장지원, DOM 파서 API, XMLSerializer API, XML을 위한 추가적인 렌더링 지원, 좀더 정밀하고 완벽한 XMLHttpRequest, 이벤트 핸들러 추가지원, 지속적인 서버 커넥션을 위한 추가적 업데이트,  등등등... 아놔 하다보니 너무 많네요...


7. Styleable Form Controls
폼 컴포넌트들에게 좀더 비주얼한 느낌을 줄 수 있게 지원되네요.
점점 크로스 브라우징에 대한 대비가 절실해지는 느낌이 드네요.. 눈도 침침해지고 ㅠ.ㅠ


8. Advanced CSS Styling
그냥 봐도 알겠네요. 고급 CSS 스타일링 -_-; 무슨 헤어 스타일 왁스도 아니고 말이죠...
이런 비쥬얼한 부분은 크로스브라우징만 잘된다면야 아무런 할말없이 넙죽 받아먹고 싶습니다.
하지만 그렇지 않다면 이건 괘난일이라고 말하고 싶습니다.

기본적으로 CSS2.1, CSS3을 지원하구요. CSS Media queries 요것도 지원합니다.
많은 향상중에 하나의 이미지를 이용한 컨트롤 하여 다양한 영역에 표시할 수 있도록 지원됩니다.

Safari 에서 지원하는 CSS Reference document 입니다.


9. Reduced Memory Use
이 부분 원본출처에서의 기사에도 느낄 수 있지만 Webkit 엔진 개발자의 마음을 읽을 수 있습니다.  웹 브라우저의 내실을 아주 튼튼히 한다는 기초를 튼튼히 다진다는 마음이 참 마음에 듭니다.
이들은 10가지의 내용중에 가장 중요한 부분이라고 말하고 있습니다. 

많은 내용을 갖은 페이지는 좀더 효율적으로 저장되어야 합니다. Javascript 코드 자체는 작은 데이터 구조입니다.  뭐니뭐니 해도 메모리 캐시 핸들링이 가장 중요한데요.  이 캐쉬는 현재 아주 잘 데이터를 관리해줍니다. 페이지 로딩 속도를 빠르게 하기 위하여.. 꼭 그렇지 않은 경우도 있는데 생략 -_-;;

WebKit 2 - 26.7M RPRVT memory
WebKit 3 - 23M RPRVT memory
WebKit 3 uses 14% less memory!


10. Web Developer Tools
Firebug 같은 웹 개발을 위한 툴인데요. 요건 이미지로 설명을 대신 합니다.
사용자 삽입 이미지


언!!!

국내에서는 IE의 사용률이 매우 높지만 외국의 경우는 꼭 그렇지 않습니다. IE가 1위의 자리르 계속 차지하고 있지만 몇년 전에 비해 현재는 그 차이가 현저히 줄어들고 있습니다.

홈페이지 개발자(? 빌더), 웹 개발자, UI 개발자 모두 알아야 합니다.
단지 PHP 로 만들어진 게시판을 만들어 보는게 다가 아닙니다. Apache 웹 서버를 셋팅할 줄 알면 되는게 아닙니다. 웹서버를 구성하고 웹 사이트에서 PHP 코딩으로 홈페이지를 만드는게 진정한 개발자는 아닙니다.

구글이나 야후와 같은 세계 시장을 상대로 성공한 곳의 개발자들의 역량은 HTML 문서에 있는 image가 브라우저에 띄워지기까지 어떻게 하면 빠르게 띄워질것인지 모든것을 알고 있습니다. 또한 어떤 문제가 발생할 때 그 문제점의 원인과 해결책을 알고 있습니다.

기초부터 변화되는 기술, 정보들을 시시각간 알아야 합니다.
50세 개발자 60세 개발자 외국에는 많습니다. 한분야에 능통한다는 것은 결코 있을 수 없습니다.
늘 그 분야에 관련된 먹이 사슬처럼 하나씩 알아가야 합니다.

50세가 되어도 다 모를 것들이 태산입니다. 그래서 60세까지 개발을 해야합니다.
그런 야망을 가지고 일하고 싶습니다.
신고
Posted by Rhio.kim
원본출처 : http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage
사용자 삽입 이미지

Safari 계열에서도 클라이언트 사이드 데이터 베이스 스토리지를 지원하는군요. HTML5 표준이 나오면.. 기대 됩니다.

클라이언트 사이트 스토리지 개념을 대부분의 브라우저가 도입하고 있는데 IE에서만 소식을 못 접하고 있네요.

사파리에서도 원본출처로 가시면 관련 기사를 볼 수 있습니다.

몇일 전에 파이어 폭스에 대해서도 기재한 적이 있는데요. 파이어 폭스에서는 현재도 sqlite 라이브러리를 이용해서

globalStorage(지속성을 갖는 스토리지) 와 sessionStorage(일회성을 갖는 스토리지) 로 분류하여 지원하고 있습니다.

현재 클래스화하여 사용할 수 있도록 만들 구 있습니다.  조만간 공개 토록하겠습니다.

뭐 거창한것은 아닙니다. 아래 소스와 같이 쿼리문을 날리고 그런 정도의 지원이 아닙니다.

FF의 글로벌 오브젝트로 지원되는 것이구요. 그래도 Ajax개발에 있어서는  절실히 필요한 부분임은

확실합니다. 하루 속히 IE에서도 지원되고 Opera에서도 지원을 했으면 좋겠네요.


var database = openDatabase("Database Name", "Database Version");

database.executeSql("SELECT * FROM test", function(result1) {
  // do something with the results
  database.executeSql("DROP TABLE test", function(result2) {
    // do some more stuff
    alert("My second database query finished executing!");
  });
});


신고
Posted by Rhio.kim