Web Performance Tooling 요약

2016.06.15 00:41

Web Performance Tooling의 요약입니다. 이 세션에서는 두 명이 동시에 연단에 등록하여 마치 만담을 하듯이 연기하며 성능 개선에 대한 이야기를 풀어갑니다. 종종 이런 형식을 빌려 세션을 진행하는 경우가 있는데 연기를 잘 하지는 못하지만 평범한 형식이 아니라서 개인적으로는 좋아하는 형태입니다.


- 성능은 일을 줄이는 기법이고 일을 효과적으로 진행할 수 있는 방법이다.

- 성능 개선을 진행하는 기본적인 방법

    - 사용자: 사용자가 만족하게 만드는 것이 성능 개선의 목적

    - 측정: 프로파일러를 사용. 살펴봐야 할 시간의 종류를 이해하는 것이 중요.

    - 비용의 해석: 일어나고 있는 일을 이해하는 것

    - 병목 지점의 파악: 문제가 있는 지점을 파악

    - 개선 시도

    - 재측정: 변화가 일으킨 결과를 확인


케이스 스터디


- android.com/auto

    - 3초 동안 스피너가 돈 후에 이미지가 화면에 노출되는 문제

    - 첫 추측: 이미지가 2MB가 넘을 것이며 압축을 하지 않았을 것이다.

        - 이미지는 1MB를 다운로드

        로드가 완료된 후 2초동안 네트워크로 다운로드 하는 것이 없다.

    - 코드의 해석

        - 이미지는 화면 크기에 따라 선택적으로 받고 있음.

        - cmd + shift + p 를 사용하여 devtools의 기능을 검색할 수 있는 기능을 켠 후 search를 입력하여 검색 기능을 사용

        - setInterval의 간격을 1초로 설정하여 이미지가 로드되었는지를 확인하는 코드를 발견

        - 이미지 로드 후 화면에 표시할 때까지 1초가 걸리는 코드를 발견

        - 이 두 가지 요소가 2초 동안 아무 동작을 하지 않는 이유를 설명해준다.

    - 스크롤 기능과 관련된 성능 확인

        - 어떤 인터랙션을 했는지 표시해줌

        - interactions > input events 에 표시된 붉은 줄은 사용자가 터치한 후 실제 이벤트 핸들러가 메인 스레드에서 실행될 때까지 걸린 시간을 의미


- modern-web.org

    - 로딩에 10초가 걸림

    - bottom-up

        - 메인 스레드에서 실행되는 모든 비용을 요약해서 보여줌

        - youtube 이미지와 addthis 기능이 도메인 기준으로 시간을 가장 많이 소비하는 도메인임

    - addthis의 기능을 뺐을 때를 간단히 확인해보기 위해 request blocking을 사용 (실험실 기능)

        - network 패널에서 특정한 요청을 선택한 후 오른쪽 버튼을 클릭하여 block request domain 선택

        - 개선 후 7초 이내에 로딩이 완료됨

    - 모바일은 랩탑보다 더 느릴 수 있다. 이를 위해 CPU throttling 기능이 실험실에 포함되어 있음.

    - Youtube는 iframe으로 로드된다. 유저의 관점에서 생각해보면 첫 비디오를 처음에 보고, 뒤에 나오는 비디오는 페이지 로드할 때 보지 않을 것이다. 따라서 인스턴스를 throttling해서 생성하거나  Intersection Observer 등을 사용하여 lazy loading과 같은 방법을 쓰면 될듯. 작업을 지연시키면 된다.

    - setTimeout을 이용하여 1.5초마다 youtube 플레이어를 생성한다.

    - 개선 후에는 4초 정도에서 로딩이 완료됨


- ESLint (node application의 성능 개선)

    - 파일이 수백개 정도인데 기대보다 느리다.

    - chrome devtools를 지원하는 node에서 옵션을 걸어 프로그램을 실행시키면 devtools을 사용할 수 있다.

    - Profiles에서 cpu profiles을 선택하고 실행시키면 프로그램을 실행한다.

        - 12초가 걸린다.

        - Glob.Sync 부분이 매우 크다.

        - 해당 bar를 클릭하면 source 패널로 이동하는데 소스 코드 좌측에 함수 실행 시간이 표시된다. 함수 단위 및 라인 레벨로 표시된다.

        - 원인: 26000개의 파일을 먼저 읽은 후 eslint ignore의 값으로 필터링 한 후 lint 작업을 한다. 최종적으로 lint 대상이 되는 파일은 30개.

        - 해결 방법: eslint ignore을 먼저 읽게 하고 filter object를 glob.sync에 전달하여 30개의 파일만 읽도록 함.

        - 4초 정도에 실행이 완료.

    - 이런 작업은 pull request로 프로그램에 반영하면 좋겠다.

        - https://github.com/eslint/eslint/pull/6215



이 동영상의 주요 내용은 데모를 이용하여 설명하므로 꼭 동영상을 직접 확인하시기 바랍니다. 



nundefined ETC cpu throttling, devtools, google io, google io 2016, intersection observer, lazy loading, Performance, request blocking, 성능, 성능개선, 퍼포먼스

DevTools in 2016: Accelerate your workflow 요약

2016.06.06 01:13

DevTools에 새롭게 추가된 기능에 대한 세션입니다.


- 새로운 기능은 chrome canary 버전에서 chrome://flags 에서 Enable Developer Tools experiments를 활성화해야 사용할 수 있음

- Authoring

    - Device mode

        - Mobile first를 먼저 하길 권장. 이에 맞춰 개선했음

        - responsive design을 쉽게 확인하도록 다양한 사이즈를 쉽게 선택해서 볼 수 있음

        - 디바이스 회전 아이콘을 클릭하면 키보드 노출 화면도 확인 가능

        - settings - show the device frame 을 선택하면 기기의 프레임을 보여줌. 

        - 스크린샷 촬영 가능

        - 기기를 추가할 수 있고

        - device pixel ratio 지정 가능

        - network throttling 설정 가능. 네트워크 패널에 있는 것과 동일

        - 줌 레벨을 낮추면 4K 모니터에서도 어떻게 보이는지 확인 가능

        - 랩탑의 디바이스 타입 설정 가능 (터치 유무)

        - show media queries를 선택하면 media query에 지정된 너비를 선택해서 볼 수 있음

    - color

        - css variable 사용 가능

        - 클래스를 설정해서 클래스 선택에 따라 스타일이 달라지는 모습을 확인할 수 있음

    - animation

        - 새로운 bezier curve editor

        - animation inspector

    - devtools의 기능을 쉽게 찾고 싶을 때

        - sublime text edtor에서 처럼 command + shift + p 를 누르고 키워드를 입력해서 기능을 쉽게 찾을 수 있음

- 새로운 기능

    - source diff - element에서 변경하면 소스코드에서 변경된 부분을 표시해줌

    - quick source - source와 동일. element에서 style tab에 해당하는 부분을 동시에 보여줌

    - css source map을 on 하면 scss 원본 파일과 연결해줌. 이 상태에서 수정해도 반영됨.

        - 변수에 지정된 값을 변경 가능

        - 저장하면 원본 파일도 같이 변경됨. 파일을 변경해도 스타일 반영됨.

- application

    - resources 패널이 변경됨

    - manifest를 시각적으로 표현

    - service worker 를 다양하게 테스트 가능

    - sw에서 생성하는 로그의 색을 변경하는 데모 보여줌

    - clear storage

- lighthouse

    - progressive web app을 만들기 위한 체크리스트 역할을 하는 프로젝트

- DevTools에 node.js를 디버깅할 수 있는 기능 추가 


이 세션의 후반부인 Application 패널부터는 Great libraries and tools for great Progressive Web Apps 의 후반부와 내용이 같습니다. Node.js 프로그램을 DevTools에서 디버깅하는 데모도 동일합니다. 둘 중 하나의 영상만 봐도 충분합니다. 다만 Application 패널에 대한 설명은 service worker pane에 대한 데모가 추가되어 있는 이 동영상이 더 낫습니다. 나머지는 거의 비슷하니 두 개 중 하나만 보셔도 충분할 것입니다.



잘못된 부분이 있을 수 있으니, 꼭 원본 동영상을 참고하시기 바랍니다.









nundefined ETC Animation, application, Canary, Chrome, device mode, devtools, google io, google io 2016, LIGHTHOUSE, node.js, service worker, 서비스 워커, 크롬

Great libraries and tools for great Progressive Web Apps 요약

2016.05.31 23:32

오늘 본 비디오는 Great libraries and tools for great Progressive Web Apps 입니다. 솔직히 제목에 혹~! 했습니다만 막상 비디오를 다 보고 나니 동영상에 나온 것들을 적용하려면 고민을 많이 해야 할 것 같더군요. 동영상의 내용은 대략 다음과 같습니다.



Progressive Web Apps 은 웹에서의 최신 유행어다.

    - PWA는 최신 기술을 많이 사용하고

    - PWA를 만들면 사용자에게 유용하고, 사용성이 높고, 즐거운 경험을 줄 수 있다.

 

PWA를 만드려면 만드는 방법의 변화가 필요하다.

    - 예전 웹

        - 예전에는 고수준의 기능으로 웹페이지를 만들었다.

        - 이미지를 보여주고 싶으면 이미지 태그를 사용하고, 테이블을 보여주고 싶으면 테이블 태그를 사용했다.

    - 확장할 수 있는 웹

        - 웹 표준의 새로운 아이디어는 extensible web이다.

        - 특정한 기능을 하는 간단한 API 대신 새로운 기능은 저수준이고 강력하며 더 다양한 것을 가능하게 한다.

            - 이미지를 보여주는 태그 대신 임의의 그래프를 그릴 수 있는 태그를 제공한다.

            - 테이블 태그 보다는 원하는 것을 그리를 수 있는 CSS 속성을 제공한다.

        - 페이지를 앱으로 바꿀 수 있다.

    - 그런데 실제 만들어야 할 것과 플랫폼 사이에 간극이 생기게 되고

    - 이 간격은 라이브러리로 채운다.

    - 커뮤니티는 개발자가 원하는 특정한 기능을 수행할 수 있는 간단하고 사용하기 좋은 라이브러리를 제공할 책임이 있다.


Service Worker libraries

    - PWA에서 가장 중요한 기술은 Service Worker다.

        - 오프라인, 푸시 메시지, 백그라운드 데이터 싱크 같은 기능을 제공

    - sw-toolbox (https://github.com/GoogleChrome/sw-toolbox)

        - 연결 상태와 관련된 패턴을 추출하여 쉽게 사용할 수 있도록 만듬

    - sw-precache (https://github.com/GoogleChrome/sw-precache)

        - 캐시 관리를 쉽게 하도록 도와줌

        - cli로도 사용 가능

    - sw-appcache-behavior (https://github.com/GoogleChrome/sw-helpers/tree/master/projects/sw-appcache-behavior)

        - 기존에 만들어진 appCache 사이트를 Service Worker로 바꾸도록 도와줌

    - sw-helpers (https://github.com/GoogleChrome/sw-helpers)

        - sw-appcache-behavior는 sw-helpers의 일부임

    - 현재 작업 중인 것에는 offline analytics 가 있음

        - 오프라인일 때 ga 요청을 저장하고 있다가 온라인이 되면 서버로 전송


Chrome DevTools

    - 최신 버전 (Canaray 52)에서 사용 가능

    - resources 패널이 application 패널로 변경

    - manifest panel

        - manifest 의 정보를 확인 가능

        - add to homescreen 가 있어서 homescreen에 추가되지는 않지만 onbeforeinstallprompt 이벤트를 트리거함

    - service worker panel

        - offline, update on reload, bypass for network(service worker 미동작) 등의 상태를 테스트할 수 있다.

    - clear storage panel

        - 현재 사이트의 값만 제거할 수 있다.

    - cache storage viewer

        - 추가된지는 좀 됐지만 사람들은 잘 모른다.

        - 캐시된 항목의 목록


Lighthouse (https://github.com/GoogleChrome/lighthouse)

    - 크롬 익스텐션이나 npm 모듈로 제공

    - remote debugging API 사용

    - 몇 번 페이지 로드한 후 PWA의 관점에서 리포트를 제공해줌

    - cli: $ lighthouse your.address

        - 콘솔에 찍거나, json, html로 리포트 제공

    - node module로도 사용 가능

        - ci 과정에서 활용 가능

    - 알파 버전 상태, 규칙은 아직 확정되지 않은 상태, 카나리 52+에서만 동작, 

    - 아직 초기 단계료 여러분의 도움이 필요함



잘못된 부분이 있을 수 있으니, 꼭 원본 동영상을 참고하시기 바랍니다.





nundefined ETC Canary, Chrome, devtools, extensible web, google io, google io 2016, LIGHTHOUSE, progressive web app, pwa, service worker, sw-appcache-behavior, sw-helpers, sw-precache, sw-toolbox, 서비스 워커, 크롬

V8, modern JavaScript, and beyond 요약

2016.05.31 00:31

Google I/O 2016 에서 웹을 주제로 하는 세션 중에 동영상으로 공개된 것은 27편입니다. 이게 전체인지 일부인지는 알 수 없지만 작년에 비하면 상당히 많아졌습니다. 그 중 V8, modern JavaScript, and beyond 라는 세션의 동영상을 간단히 요약해봅니다.


V8의 미션

    - Speed up real-world performance for modern JavaScript, and enable developers to build a faster future web.

    - 크롬에서 현재 사용 중인 자바스크립트를 빠르게 동작 시키는 것

    - 개발자들이 더 빠른 앱을 만들도록 지원하는 것 - 올바른 도구, 언어의 새로운 기능, 다양한 리소스 등


Real-world performance

    - 과거

        - 마이크로 벤치마크

            - 일정한 기능을 반복적으로 테스트해서 속도를 확인

        - 테스트 스위트

            - 일정한 기능(pdf.js, gameboy 에뮬레이터 등)을 실행

    - 지금부터

        - 실제 웹 페이지를 대상으로 퍼포먼스 확인

        - 구글을 포함하여 전세계의 사이트를 대상으로 자동 확인


JS engine upgrades

    - 구조 개선

    - GC의 개선

        - 메모리가 어느 선을 넘으면 GC했으나

        - 16ms마다 진행되는 렌더링에 걸려 GC로 인해 frame을 건너 뛸수도

        - frame 사이의 idle time에 일부 GC

    - 인터프리터

        - 시작을 빠르게

        - 컴파일에 걸리는 시간을 짧게

        - 메모리 사용량은 적게

        - 순수 JS의 실행 시간은 길어지나 파싱, 컴파일에 걸리는 시간이 짧아져 전체 실행 시간은 짧아짐


ES6 & ES7

    - M51까지 점진적으로 ES6의 feature를 구현

    - M52에서는 ES6과 ES7를 네이티브로 지원

    - ES.next도 곧

    - 트랜스파일러나 폴리필이 있지만 네이티브로 지원하는 것은 여러 모로 중요하다.


Debugging + Node.js

    - V8_inspector support를 Node.js core project에 pull request를 보냈음 (https://github.com/nodejs/node/pull/6792)

    - Node.js에서 실행되는 코드를 개발도구에서 디버깅할 수 있음.


WebAssembly

    - binary로 된 c/c++ 코드를 실행.

    - 주요 브라우저에서 지원.

    - 성능 좋음. 2012년 맥북 에어에서 시연.

        - 동시에 두 개의 브라우저에서 시연하지만 매끄럽게 동작

        - 발표하는 동안 계속 백그라운드에서 동작하고 있었음



잘못된 부분이 있을 수 있으니 꼭 원본 동영상을 참고하시기 바랍니다.


nundefined ETC devtools, ES2016, ES6, es7, google io, google io 2016, node.js, Performance, V8, WebAssembly, 성능, 웹어셈블리, 크롬, 퍼포먼스

What's new in Chrome DevTools? by Addy Osmani 간단 정리

2015.10.06 01:31

지난 9월 16~17일간 토론토에서 열렸던 WEB UNLEASHED 2015에서 Addy Osmani가 발표한 What's new in Chrome DevTools?를 간단하게 요약했다. 발표자료동영상이 각각 제공되고 있으니 관심있는 분은 꼭 원본 자료를 살펴보기 바란다. 발표자료보다 동영상에서 확인할 수 있는 내용이 많으므로 자료를 살펴볼 결심을 했다면 동영상을 볼 것을 추천한다.


DevTools 공통

- DevTools 상단의 메뉴탭의 위치를 drag & drop으로 변경 가능

- Console에서 다양한 syntax highlighting 지원


Network Panel

> Filmstrip 지원

 - 시간별로 스크린샷을 기록.

 - 실제 화면에 렌더링되는 내용을 알 수 있음.

> Throttling

 - 브라우저에서 네트워크 속도를 조절할 수 있음.

 - 이미 정해져 있는 속도 중에서 선택하거나 임의로 조건을 지정할 수 있음.

> Block Request

 - 특정 요청을 보내지 않도록 막을 수 있음.

 - 특정한 요청으로 인해 속도가 느려지는 것으로 의심된다면 해당 요청만 막은 후 테스트 가능.


Timeline

> long frame times

 - 붉은 삼각형은 jank가 존재하는 것을 나타냄

 - Jank: 16ms(실제로는 10ms)내에 화면이 갱신되지 못해 프레임 속도가 떨어지는 현상

> Filmstrip

 - 메뉴의 Screenshots를 선택

 - 애니메이션과 같이 화면에 그려지는 내용을 확인할 수 있음

 - 타임라인의 특정 위치를 선택하면 해당 시간에서 화면에 그려지는 내용을 알 수 있음

> Aggregated Details

 - 실행 비용이 가장 높은 코드를 쉽게 볼 수 있음

 - URL을 기준으로 모아볼 수 있음

> Paint Profiler

 - 메뉴의 Paint 선택

 - 페인트된 내용, 그리는데 걸리는 시간, 페인트에 대한 상세한 내용을 알 수 있음.


Elements Panel

> Animation Inspection

 - about:flags에서 기능을 활성화해야 사용 가능

 - Elements > Styles > Toggle Animation controls

 - playback 속도, 실행 시간등을 간단히 변경하면서 테스트 가능

> Cubic Bezier Editor

 - transition이 적용된 엘리먼트에서 직접 값을 변경해가며 테스트 가능

> DOM Animation Changes

 - Class 변경으로 애니메이션이 이루어질 때 변경이 발생하는 dom에 대한 하이라이트 지원

> Colors & Pallettes

 - Eye Dropper로 페이지상의 색을 바로 선택 가능

 - 페이지에서 사용중인 Color pallettes 지원

 - Matirial Design palette 지원

 - Custom palette 지원

> Search selectors

 - ctrl+f 후 셀렉터를 입력해서 element를 찾을 수 있음

> Event Listeners

 - 임의의 Dom에 등록된 이벤트 리스너를 확인할 수 있음

 - Framework를 사용하여 등록된 이벤트 리스너도 확인 가능

> HTML in Console

 - console에서 html element를 바로 수정할 수 있으며 화면에도 반영됨


Console

> tips

 - $0: 마지막으로 선택한 dom node

 - $$('header'): query selector의 alias

 - copy(): clipboard로 복사

 - inspect(): 코드로 특정한 코드를 선택하여 inspect할 수 있음

 - console.timeStamp: timeline에 라벨을 붙일 수 있음


Sources

> inline variables

 - 디버깅 중에 변수의 값을 인라인으로 표시

> Proactive Compilation

 - 컴파일러처럼 오류가 있을 경우 바로 표시

> Blackboxing JS libraries

 - 특정한 파일을 블랙박스 처리하여 해당 파일은 디버깅 과정에서 건너뛸 수 있음

> ES2015 Promises Inspector

 - about:flags에서 기능을 활성화해야 사용 가능

 - promise의 다양한 정보를 제공하여 디버깅을 편리하게 만듬

 - Async모드: 비동기적으로 실행되는 경우에도 call stack을 정상적으로 보여줌


이 외에도 계속 기능을 추가하고 있음



여기에서는 요약하지 않았지만 발표자료 초반에 RAIL에 대한 언급이 있다. 크롬팀에서는 Performance에 대해 지속적으로 RAIL 모델을 사용하고 있으므로 성능 개선에 대한 이해를 높이기 위해서는 RAIL 모델에 대해 이해를 하고 있는 것이 큰 도움이 될 것이다.

Devtools에 대한 세션 말고도 IE6 sucks!를 외치던 더글러스 크록포드 아저씨가 발표한 Upgrading the Web을 비롯하여 다양한 세션의 동영상이 유튜브에 업로드되어 있으니 다른 주제들도 살펴보기 바란다.


nundefined HTML5_JS_CSS Chrome, devtools, Rail, 개발자도구, 크롬

  1. Blog Icon

    비밀댓글입니다

  2. 크롬팀에서 설명하는 내용들은 대체로 개발 버전인 크롬 카나리에서 실행되는 경우가 많습니다. 카나리 버전을 한 번 사용해보시면 어떨까요? https://www.google.co.kr/chrome/browser/canary.html 이 페이지에서 다운로드 하실 수 있습니다.