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, 성능, 성능개선, 퍼포먼스

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, 성능, 웹어셈블리, 크롬, 퍼포먼스

Performance and RAIL

2015.08.02 00:24

지난 7월 12일 열렸던 Google I/O Extended 2015 서울에서 발표한 자료를 여기에 공유한다. 이 행사는 Google I/O 2015를 기념하여 I/O 행사에서 발표된 내용을 다시 공유하는 행사로써 국내의 다양한 Google Developer Group이 연합하여 진행하는 행사이다. 휴일이었지만 하루 종일 비가 와서 다소 부담스러운 날이었는데도 불구하고 천여명에 가까운 분들이 참석한 행사였다.



정보를 전달하는 이런 발표는 매번 지루해지곤 했는데 이번에도 다를 바가 없었다. 게다가 3~40분 내에 끝내시는 다른 분들에 비해 50분에 가깝게 발표하는 민페까지... 이런 여러 불편함에도 불구하고 발표를 들어주신 분들에게 감사할 따름이다.






nundefined Presentations Google, google io extended 2015 seoul, Performance, Rail, 구글, 성능, 퍼포먼스

Performance Guide RAIL 요약

2015.07.15 00:48

지난 5월 초 라스베가스에서 열렸던 LoopConf의 세션 중 Performance Guide RAIL를 요약했다. 동영상은 여기서 볼 수 있다.



Performance

- Performance는 성공적으로 실행되는 방법의 관점에서 살펴보는 행동, 작업, 활동이다.

- 성공의 의미: 성공이란 인간 두뇌의 지각 반응이 기대하는 바를 충족시키는 것이며, 사용자에게 초점을 맞추면 다른 것들은 따라온다는 것


RAIL 성능 모델 - Response, Animation, Idle, Load


Response

- 목적: 즉각적이라고 느끼도록 100ms 내에 반응

- 반응 속도에 따른 느낌을 알 수 있는 비디오: https://www.youtube.com/watch?v=vOvQCPLkPt4 (Applied Sciences Group: High Performance Touch on YouTube)


Animation

- 목적: 16ms 마다 프레임을 갱신

- 일정한 속도를 내는 쪽이 좋은 성능을 낸다고 받아들이게 된다.

- 따라서 0.5초 동안 아무것도 안하고 나머지 0.5초 동안 16ms마다 그리는 것보다 32ms마다 지속적으로 그리는 것이 사용자에게는 더 좋다.


Idle

- 목적: 가능한 긴 유휴시간을 확보

- 100ms 이내에 즉각적으로 반응하려면 100ms보다 짧은 시간마다 메인 쓰레드가 실행될 수 있도록 해야 한다. 따라서 유휴시간은 길 수록 좋다.


Load

- 목적: 사용자가 계속 집중할 수 있도록 1000ms 이내에 인터랙티브한 내용을 노출

- 1000ms (=1s) 내에 모든 내용을 보여줘야 한다는 의미는 아님. 일부라도 노출되어야 한다.


기타

서버와 통신하는 작업동안 긴 시간을 기다려야 하므로 이 시간에 트랜지션을 이용하여 사용자에게 즉각 반응하는 모습을 보여주는 것은 좋다. 그러나 트랜지션에는 수백 ms의 긴 시간이 걸리므로 주의해야 한다.


참고자료

- 슬라이드: bit.ly/perf-rails

- https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/

- speed, performance and human perception

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

- Platform Success Model Explainer : chrome, blink가 performance에 대해 생각하는 내용을 알 수 있음




nundefined HTML5_JS_CSS Animation, Chrome, Google, IDLE, load, Performance, Rail, response, 구글, 성능, 크롬

Mobile Web & HTML5 performance optimization

2011.06.16 11:25
6월 14일부터 16일까지 Velocity라고 하는 웹 최적화와 운영에 대한 컨퍼런스가 Santa Clara에서 열리고 있습니다. 아직 현지에서는 마지막 날 행사가 남아 있겠네요. 이 행사의 워크샵 중에 모바일 웹과 HTML5의 퍼포먼스 최적화에 대한 자료가 있어 공유해봅니다.

워크샵의 진행자는 Maximiliano Firtman 이며 이 사람은 Programming the Mobile Web(2010년 7월 출간)과 jQuery Mobile Up and Running(2011년 10월 출간 예정)의 저자이기도 합니다. 또한 http://www.mobilexweb.com/의 운영자이기도 합니다.

모바일 웹 개발에 있어서 당장이라도 적용해볼 수 있는 여러 내용들을 담고 있으니 모바일 웹에서의 성능 향상 방법을 궁금해하시는 분이라면 바로 확인해보기 바랍니다.


 
 

nundefined HTML5_JS_CSS html5, jquery mobile up and running, maximiliano firtman, Mobile Web, mobilexweb.com, optimization, performacne, programming the mobile web, Velocity, 모바일웹, 성능, 최적화