야후 사용자 인터페이스 블로그 (YUIBlog)

Screencast : Textmate에 대한 로스 Harmes의 YUI 번들

Screencast 읽는 계속 : Textmate를 위해 로스 Harmes의 YUI 번들 ...

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

성능 연구, 제 1 부 : 무엇 20분의 80 규칙은 HTTP 요청을 줄이기에 대해 우리에게 말해줍니다

그것은 사용자가 빠르고 웹 사이트를 선호한다는 비밀이 아니 란다. 전 세계적으로 야후! 제품의 성능을 quantifying 및 개선에 초점을 전담 팀을 작동합니다. 우리 연구의 일환으로, 우리는 웹 페이지의 성능에 관한 실험을 실시합니다. 다른 프런트 엔드 엔지니어는 웹 사용자의 경험을 가속에 참여할 수 있도록 저희는 연구 결과를 공유하고 있습니다.

20분의 80 성능 규칙

파레토 Vilfredo, 1900 년대 초반 경제는 국가의 부 (富)의 80 %가 인구의 20 %에 속한 유명한 관찰했다. 이것은 일반적으로 어떤 현상기로는 파레토의 원칙 (또한 80-20 법칙이라고도 함)로 지칭하는지로 나중에 일반 있었는데, 결과의 80 %는 원인의 20 %에서 왔어요. 시간의 80 %가 코드의 20 %에 소비되는 곳이 우리는 소프트웨어 엔지니어링에서이 현상을 참조하십시오. 우리가 애플 리케이션을 최적화할 때, 우리는 코드의 20 %에 초점을 알아요. 웹 페이지를 최적화 때 같은 기술도 적용되어야합니다. 대부분의 성능 최적화 오늘은 HTML 문서를 (아파치, C + +, 데이터베이스 등)를 생성하는 부분을 만들지만, 그 부분은 사용자의 응답 시간의 약 20 %에 기여하고 있습니다. 그것은 다른 80 % 기여하는 부분 최적화에 주력하는 것이 좋습니다.

패킷 스니퍼를 사용하여, 우리는 다른 80%에서 일어나는 것을 발견. 그림 1은 시간이 빈 캐시로 http://www.yahoo.com로드하는 것을 보면서 어디의 그래픽보기입니다. 각 막대는 특정 구성 요소를 나타내며 브라우저에 의해 시작 순서에 표시됩니다. 첫 번째 막대는 단지 HTML 문서를 검색 브라우저에 보낸 시간입니다. 시간의 단 10 %가 HTML 페이지를 요청하는 브라우저를 보시려면 여기를 보면서주의, 그리고 아파치를위한 HTML을 함께 꿰매하고 브라우저로 응답을 반환합니다. 시간의 다른 90 % 이미지, 스크립트와 스타일 시트를 포함하여 페이지에 다른 구성 요소를 가져오는 지출하고 있습니다.

표 1은 HTML 문서를 다운로드하는 시간의 5 %와 38% 사이 지출 인기있는 웹 사이트를 보여줍니다. 다른 62% 시간의 95 %는 HTTP 요청은 해당 HTML 문서 (예 : 이미지, 스크립트 및 스타일 시트)에있는 모든 구성 요소를 가져오는하게 지출하고 있습니다. 페이지에서 여러 구성 요소를 갖는 영향은 브라우저의 HTTP 응답의 버전과 사용자의 브라우저에 따라 호스트마다 병렬로 두 개 또는 4 개의 구성 요소를 다운로드한다는 사실에 의해 더욱 악화된다. 우리의 경험은 HTTP 요청의 수를 줄이는 것은 응답 시간을 감소에 가장 큰 영향을 가지고 있으며, 자주 확인하는 가장 쉬운 성능 향상을 알게됩니다.

모든 아무튼 브라우저의 캐시에 저장되지까요?

결론은 동일합니다 : HTTP 요청의 개수를 줄이면 응답 시간을 감소에 가장 큰 영향을 가지고 있으며, 자주 확인하는 가장 쉬운 성능 향상입니다. 다음 기사에서는 캐시의 영향으로, 일부 놀라운 실제 결과 보겠습니다.

면책 조항 : 시각적 풍요로움을 지시된 디자인 imperatives이 요청-감축 목표에 대해 무게해야합니다. , JS 파일을 통합 CSS의 스프 라이트 등을 사용 - - 당신이 시각적인 풍요로움이 필요하면 추가 단계를 취할 수 있지만 시각적 풍요로움은 가느다란 HTTP 요청 파이프라인에 대한 카운터를 실행하는 경향 않습니다.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

비디오 : 더글러스 Crockford, "자바 스크립트를 고급"

지난 달, 나는 중 하나에서 찍은 비디오가 게시 더글러스 Crockford의 (프론트 엔드 엔지니어링에 프레 젠 테이션 : 더글러스 Crockford, "불편한 API : DOM의 이론"비디오 ). DOM에 더글러스의 깊은 다이빙을 즐길 사람은 야후 비디오에서 현재 공개된 그의 '고급 자바 스크립트 "프레 젠 테이션에도 관심이있을 수 있습니다. 그는 야후에서 가르쳐왔다 세 부분으로 시리즈의 세 번째 - -이 프리젠 테이션에서 더글라스는 자바 스크립트 프로그래머가 제작 응용 프로그램을에 선택할 수있는 코드 패턴에 가깝게 보인다. 그는 (그가 주장)은 자바 스크립트의 "곡식과 함께 '더 실행하는 기생충 패턴과 같은 더 독특한 패턴과 Pseudoclassical 패턴과 같은 익숙한 구조를 비교합니다. 브렌든 Eich 이번 여름에 야후에서 말했을 때 그는 "람다 프로그래밍과 자바 스크립트의 요다 '로 더글러스 설명, 감상 후'고급 JavaScript를,"그 정서의 유래에 대한 명확한 이해가있을 수 있습니다.

그것은 더글라스의 아이디어와 관점이 자기 ​​것을하고 videographic 장인 정신에 많은 결함이 내 것을 반복 맺는다.

• YouTube에서보기
• 제 1 부 : 31분
• 2 부 : 25분
• 제 3 부 : 11분
• 다운로드 슬라이드를 (zip 파일 파워 포인트 파일)

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

등급 브라우저 지원 : 4 분기 업데이트

약 3 개월마다 우리는 업데이 트 브라우저 프라이 즈급 지원을 받게되는 적는 도표 에 따라 등급 브라우저 지원 . 어제의와 함께 YUI 업데이트 릴리즈 , 여기를 Q4 2006의 브라우저 지원 업데이 트입니다.

요약 : 프라이 즈급 지원은 파이어 폭스 2.0 시작, 그리고 IE7에 대해 거듭 강조하고 있습니다. 수준의 지원은 IE 5.5과 Firefox 1.0에 대한 중단됩니다. 도마뱀 붙이 파생 상품 (예, 넷스케이프와 모질라 애플 리케이션 스위트) 지금 대신 프라이 즈급 지원의 X-등급을받을 거의 - 사용되지 않습니다. 오페라 9는 이제 추가적인 플랫폼에서 프라이 즈급 지원을받습니다.

총알 형태로, 여기서는이 업데이 트의 모든 변경 사항입니다 :

1. 수준의 지원을 반복, IE 7, 승리 (XP)
2. 수준의 지원 종료, IE5.5, 승리
3. 수준의 지원, Firefox 2.x에서, 윈 / 맥의 개시.
4. 수준의 지원 종료, 파이어 폭스 1.0.x, 윈 / 맥.
5. 수준의 지원, 오페라 9.x, 윈 / 맥의 확장
6. 수준의 지원 종료, 모질라 애플 리케이션 스위트, 윈 / 맥
7. 수준의 지원 종료, 넷스케이프, 윈 / 맥

항상 참조해야했지만 야후 개발자 네트워크에서 호스팅 공식 GBS 차트를 , 나는 후세를 위해서라도 이번 분기의 차트의 스냅샷을 포함시켰습니다 :

다음 분기 (2007Q1)에 앞서 찾고, 우리는 지원되는 브라우저 증분 릴리스를 반영하지만 주요 변경 사항은 예상되지 않습니다.

감사합니다
네이트

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

YUI 버전 0.12.0 : TabView 제어, 향상된 API 문서, 및 기타

오늘은 YUI 라이브러리의 버전 0.12을 발표했다. 여기 하이라이트는 다음과 같습니다

• TabView 제어 : YUI 글 애니메이션 과 돔 저자 매트 스위니 ,이 동적 탭 솔루션은 최신 YUI 추가이고 진취적인 향상과 고광택 풍요로움 모두를위한 강력한 지원을 제공합니다. 의 매트의 명단 확인 TabView 예제 새 컨트롤 할 수있는 어떤 아이디어를, 그들이 구현하는 방법을 보려면 예제에서 소스를 볼 수 있습니다.
• 향상된 문서 : YUI 개발자 아담 무어 ( 이벤트 , 드래그 & 드롭 , 슬라이더 , TreeView ) 창출을위한 새로운 도구 만든 API 문서를 우리가 일체로 통일, 가교 API 문서를 생성할 수 있도록 자동 완성 구동 검색 제어 . 새로운 API 문서를 클래스 구조를 명확하게 그림과 함께 개발자를 제공하고 속성 및 구성 옵션에 대해 별도의 분류를 제공합니다. 당신은 다시 가지 않을 수 시트를 속여 다시 ...
• 그러나 ... 혹시 아직도 치트 시트와 마찬가지로 : 치트 시트는 버전 0.12에 대한 업데이트 및 TabView 및 불량 Koechley의 CSS를 새로운 시트를 포함하고 재설정 , 글꼴 및 격자의 기초를. 당신이 수있는 모든 YUI 치트 시트를 다운로드 YUI 라이브러리 웹사이트에서.
• CSS의 격자가 나왔으니 말인데 : 네이트가있다 750px, 950px위한 구운 기능 지원, 전체 뷰포트 ( "액체") 레이아웃과 격자 패키지를 rev'd. 격자 0.12 세배 gzipping 전에 3킬로바이트 이하에서 지원되는 레이아웃과 여전히 가중치의 수를. 우리가 만든 YUI 웹사이트를 지금 재설정 / 글꼴 / 격자 기초에 우리는 새로운 전체 뷰포트의 지원의 사용을 사용을하고 있어요.
• 도서관 전반에 걸쳐 개선 :부터 도서관에 걸쳐 발견되는 향상된 기능이 있습니다 이벤트 의 새로운 onContentReady 크게 개선에 대한 방법 Calendar 컨트롤 여러분의 이전 버전에서 업그레이 드하는 경우 멀티 개월 달력 디스플레이 (만들기위한 단순화된 인터페이스와 함께 일정, 단계별 업그레 이드 가이드를 체크 아웃 ). 변경 사항의 전체 목록을 보려면 분포를 함께 릴리스 노트 설명서를 참조하십시오.

우리는 나중 주에 이러한 주제 중 일부에 대한 자세한 내용을 알려 드리겠습니다. 당분간로 오시기 바랍니다 소스 포지 최신 YUI 분포를 다운로드하려면, 라이브러리에 걸쳐 변화의 전체 매니 페스트에 대한 배포 릴리스 노트를 참조하십시오. 항상 그렇듯이 야후 개발자 네트워크에서 YUI 사이트는 모든 최신 설명서를 가지고 있습니다.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!

자바 스크립트, 우리는 전혀 new 예

JavaScript는 prototypal 언어이지만,이 new 그것이 고전적인 언어처럼 말하자면 보이게하려고하는 연산자. 이것은 좀 문제 프로그래밍 패턴으로 이어지는, 프로그래머를 혼란스럽게하는 경향이있다.

당신이 사용할 필요가 없습니다 new Object() 자바 스크립트에서. 리터럴 개체를 사용하여 {} 대신. 마찬가지로, 사용하지 않는 new Array() , 문자 배열을 사용하여 [] 대신. 자바와 비슷한 문법의 자바 스크립트 작업 Java에서 배열처럼 아무것도, 그리고 사용의 배열은 당신을 혼란스럽게합니다.

사용하지 마십시오 new Number , new String , 또는 new Boolean . 이러한 양식은 불필요한 객체 래퍼 (wrapper)를 생산하고 있습니다. 그냥 대신 간단한 리터럴을 사용하십시오.

사용하지 않는 new Function 함수 값을 만듭니다. 대신에 함수 표현식을 사용합니다. 예를 들어,

  프레임 [0]. = 새로운 기능을 onfocus ( "document.bgColor = 'antiquewhite'") 

더 나은으로 작성된 것입니다

  프레임 [0] onfocus = 함수 () {document.bgColor = 'antiquewhite';}.; 

두 번째 양식은 컴파일러가 함수 신체가 빨리 볼 수 있고, 거기에 어떤 오류가 더 빨리 감지합니다 그래서. 때로는 new Function 내부 함수 작업 방법을 이해하지 않는 사람들에 의해 사용됩니다.

  selObj.onchange = 새로운 기능 ( "dynamicOptionListObjects ["+
         dol.index + "] 변경 (이)."); 

우리가 문자열에서 함수의 시체를 보관하는 경우 컴파일러는 그들을 볼 수 없습니다. 우리가 문자열 표현으로 함수의 시체를 유지한다면, 우리도 그들을 볼 수 없습니다. 그것은 무지 프로그램에없는 것이 좋습니다. 함수를 반환하는 기능을함으로써, 우리는 명시적으로 우리가 바인딩할 값을 전달할 수 있습니다. 이것은 우리가 일련의 초기화하실 수 있습니다 selObj 루프에.

  selObj.onchange = 기능은 (i) {
     리턴 함수 () {
         . dynamicOptionListObjects [전] 변경 (이);

     };
 } (dol.index); 

그것은 넣어 두는 것이 좋습니다 결코 new 앞에서 직접 function . 예를 들어, new function 새로운 객체를 구축에 어떠한 이점을 제공하지 않습니다.

  myObj = 새로운 기능 () {
     this.type = '핵심';
 }; 

그것은 객체 리터럴을 사용하는 것이 좋습니다. 그것은 작고 빠릅니다.

  myObj = {
     형식 : '핵심'
 }; 

우리가 개인 변수와 함수에 바인딩되는 메서드가 들어있는 개체를 만들고있다면, 그것은 떨어져 나가 아직도 더 new 접두어를.

  VAR foo는가 = 새로운 기능 () {
     함수 processMessages (메시지) {
         경고 ( "메시지 :"+ message.content);
     }
     this.init은 = 함수 () {
         ( "/ mytopic"이, processMessages) 가입;
     }
 } 

사용하여 new 함수를 호출하는 개체는 가치에 보유하고 prototype 개체. 그것없이 offsetting 장점으로 메모리를 낭비. 우리가 사용하지 않으면 new , 우리는 낭비 보관하지 않아 prototype 체인에 객체를. 그래서 그 대신 우리가 사용하는 공장 함수에게 올바른 방법을 호출합니다 () .

  VAR foo는가 = 함수 () {
     함수 processMessages (메시지) {
         경고 ( "메시지 :"+ message.content);
     }
     반환 {
         INIT : 함수 () {
             ( "/ mytopic"이, processMessages) 가입;
         }
     };
 } ();

그래서 규칙은 간단하다 : 우리가 사용해야하는 유일한 경우 new 연산자 pseudoclassical 생성자 함수를 호출하는 것입니다. 생성자 함수를 호출하는 경우의 사용은 new 필수이다.

거기에 시간 new , 그리고까지 시간.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!