JavaScript Memory Profiling

1. 웹페이지

2. 메모리

3. 분석과

4. 관리 ABC

5. Talk

7. Steve

8. Ahn

9. 오늘은, -

10. 메모리

11. 분석

12. 도구의

13. 상세한

14. 사용법을

15. 파악해서, -

16. 웹페이지의

17. 메모리를

18. 정확히

19. 분석하고, -

20. 안정적인

21. 페이지를

22. 만들

23. 수

24. 있도록

25. 준비해두자!

26. 목차 -

27. 페이지의

28. 메모리

29. 현황

30. 파악 -

31. 인터랙션에

32. 따른

33. 메모리

34. 변화

35. 분석 -

36. 자바스크립트

37. 힙

38. 프로파일링 -

39. 메모리

40. 릭

41. 패턴

42. 파악 -

43. 실제

44. 서비스에서

45. 알아보기 -

46. 정리

47. 메모리가

48. 뭐가

49. 문제인가? -

50. 메모리가

51. 부족하여

52. 이

53. 프로프램을

54. 실행할

55. 수

56. 없습니다 -

57. 인터랙션이

58. 느려질

59. 수

60. 있음

61. (잦은

62. GC) -

63. 다른

64. 탭이나

65. 앱에

66. 영향을

67. 끼칠

68. 수

69. 있음

70. 현재

71. 탭의

72. 메모리

73. 확인하기 -

74. 크롬은

75. 멀티

76. 프로세스

77. 아키텍처를

78. 채택 -

79. 각

80. 탭은

81. 하나의

82. 프로세스 -

83. Activity

84. Monitor로는

85. 어떤

86. 탭이

87. 어떤

88. 프로세스를

90. 참조하는지

91. 알기

92. 어려움 데모)

93. Activity

94. Monitor

95. 살펴보기

96. 크롬의

97. 태스크

98. 매니저 -

99. Tools

101. Task

102. Manager -

103. 각

104. 탭의

105. 프로세스

106. 정보를

107. 확인할

108. 수

109. 있음 -

110. 다양한

111. 컬럼

112. 확인

113. 가능 -

114. 주로

115. Private

116. Memory

117. 와

118. Javascript

119. Memory를

120. 참고 데모)

121. Task

122. Manager

123. 살펴보기

124. chrome://memory -

125. Resident:

126. 물리적으로

127. 할당된

128. 메모리.

134. 페이지의

135. 메모리를

136. 판단하는데

137. 가장

138. 좋은

139. 지표. -

140. Shared:

141. 물리적,

142. 다른

143. 프로세스와

144. 공유할

145. 수

146. 있는

147. 메모리 -

148. Private:

149. 물리적,

150. 다른

151. 프로세스와

152. 공유할

153. 수

154. 없는

155. 메모리 -

156. Virtual:

157. 할당된

158. 가상

159. 메모리 데모)

160. chrome://memory

161. 페이지

162. 살펴보기

164. 메모리 -

165. DOM,

166. Script

167. Cache,

168. CSS

169. Cache,

170. 문자열은

171. 렌더러의

172. 메모리에, -

174. 객체는

175. 힙

176. 영역에

177. 저장 데모)

178. 개발자도구에서

179. 캐시를

180. 끄고

181. Task

182. Manager

183. 확인하기

184. 메모리

185. 타임라인 -

186. Developer

187. Tools

189. Timeline

191. Memory -

192. 어떤

193. 이벤트에서

194. 메모리

195. 릭이

196. 발생하지

197. 파악하기

198. 쉬움 -

199. 정확히

200. 어떤

201. 객체에서

202. 발생하는지는

203. 파악하기

204. 어려움 데모)

205. 타임라인

206. 패널에서

207. 액션에

208. 따른

209. 메모리

210. 변화

211. 확인하기

212. 메모리

213. 타임라인

214. 특징 -

215. Document,

216. DOM

217. Node,

218. Event

219. Listener

220. 의

221. 개수

222. 파악 -

223. 강제

224. GC

225. 수행

226. 가능

227. (휴지통

228. 아이콘) -

229. 페이지

230. 이동

231. 시에도

232. 트래킹

233. 가능 데모)

234. 타임라인

235. 패널

236. 자세히

237. 살펴보기

239. 가비지

240. 컬렉터 -

241. 자바스크립트는

242. 가비지

243. 컬렉팅을

244. 지원하는

245. 언어 -

246. GC가

247. 수행될

248. 땐

249. 스크립트

250. 실행과

251. 렌더링이

252. 중지됨 -

253. 강제로

254. GC를

255. 수행할

256. 수

257. 없음 데모)

258. GC

259. 수행

260. 시점,

261. GC에

262. 의한

263. 블럭,

264. DOM

265. and

266. GC

267. 힙

268. 스냅샷 -

269. Developer

270. Tools

272. Profiles -

273. 각

274. 객체에

275. 할당된

276. 메모리를

277. 정확히

278. 파악할

279. 수

280. 있음 -

281. 스냅샷을

282. 찍기

283. 전엔

284. 항상

285. GC가

286. 수행됨 -

287. 즉,

288. GC

289. 대상이

290. 아닌

291. 객체들만

292. 확인

293. 가능 -

294. 인스턴스

295. 이름

296. 뒤

297. @ID

298. 는

299. 스냅샷

300. 별로

301. 고유한

302. 아이디 데모)

303. 타임라인을

304. 켜고

305. 힙

306. 스냅샷

307. 실행하기

308. 메모리

309. 관련

310. 용어 Shallow

311. size:

312. 객체에

313. 직접

314. 할당된

315. 크기 Retained

316. size

320. -

321. 현재

322. 객체와,

323. 현재

324. 객체에만

325. 참조를

326. 갖고

327. 있는

328. 객체의

329. 크기

333. -

334. 즉,

335. 현재

336. 객체를

337. 삭제했을

338. 때

339. GC되는

340. 크기 Retaining

341. Paths

346. -

347. GC

348. 루트에서

349. 접근

350. 가능한

351. 패스

356. -

357. 연결되어

358. 있지

359. 않는

360. 객체는

361. GC

362. 될

363. 것임 Dominator

367. -

368. GC

369. 루트에서

370. 최단

371. 거리에

372. 있는

373. 객체 데모)

374. Shallow

375. size,

376. Retained

377. size

378. 힙

379. 스냅샷의

380. 각

381. 뷰 Summary

382. View

386. -

387. 생성자

388. 이름과

389. 인스턴스

390. 그룹을

391. 보여줌

395. -

396. 생성자를

397. 기준으로

398. 그

399. 인스턴스가

400. 얼마나

401. 많이

402. 생성되었는지

403. 확인할

404. 때

405. 유용 Comparison

406. View

410. -

411. 두

412. 개

413. 이상의

414. 스냅샷을

415. 비교할

416. 때

417. 유용 Containment

418. View

422. -

423. 전체적인

424. 구조를

425. 보기

426. 위한

427. 뷰

431. -

432. 로우

433. 레벨에서

434. 앱에

435. 얼마나

436. 많은

437. 메모리를

438. 사용하고

439. 있는지

440. 확인할

441. 때

442. 유용 Dominators

443. View

447. -

448. 힙

449. 그래프에서의

450. Dominator를

451. 보여줌

455. -

456. 메모리

457. 누적

458. 포인트를

459. 빠르기

460. 찾기에

461. 적합함 데모)

462. 프로파일

463. 패널

464. 자세히

465. 살펴보기

466. 힙

467. 스냅샷

468. 팁 -

469. 노란색

470. 하이라이트:

474. 자바스크립트에서

475. 직접

476. 접근이

477. 가능한

478. 걸

479. 의미 -

480. 빨간색

481. 하이라이트:

485. 직접

486. 접근할

487. 수

488. 없는

489. Detached

490. DOM

491. (클로저나

492. 변수에

493. 할당) -

494. 힙

495. 스냅샷에서

496. 선택한

497. 요소는

498. 콘솔에서

499. $0으로

500. 접근

501. 가능 -

502. 익명함수에

503. 이름을

504. 달아두면

505. 디버깅이

506. 용이함

507. 3

508. 스냅샷

509. 테크닉 메모리

510. 릭이

511. 발생하는

512. 시나리오를

513. 가정하고,

514. 힙

515. 스냅샷으로

516. 원인을

517. 찾아내는

518. 방법 1.

519. 먼저

520. 힙

521. 스냅샷을

522. 찍는다.

523. (Snapshot

524. 1) 2.

525. 메모리

526. 릭이

527. 발생할

528. 것

529. 같은

530. 액션을

531. 수행한다. 3.

532. 다시

533. 힙

534. 스냅샷을

535. 찍는다.

536. (Snapshot

537. 2) 4.

538. 메모리

539. 릭이

540. 발생할

541. 것

542. 같은

543. 액션을

544. 다시

545. 수행한다. 5.

546. 다시

547. 힙

548. 스냅샷을

549. 찍는다.

550. (Snapshot

551. 3) 6.

552. Snapshot

553. 3를

554. 선택한

555. 후,

556. Snapshot

557. 1과

558. Snapshot

559. 2

560. 사이에서

561. 발생한

562. 값을

563. 조회한다. (2와

564. 4가

565. 꼭

566. 동일한

567. 액션이

568. 아니어도

569. 괜찮다) 데모)

570. 3

571. 스냅샷

572. 테크닉

573. 힙

574. 할당

575. 타임라인 -

576. Profiles

578. Record

579. Heap

580. Allocations -

581. 50ms

582. 단위로

583. 힙

584. 스냅샷을

585. 찍음 -

586. 힙

587. 할당

588. 여부를

589. 실시간으로

590. 판단할

591. 수

592. 있음 -

593. 파란색

594. 막대:

595. 계속

596. 할당되어

597. 있음 -

598. 회색

599. 막대:

600. GC됨 데모)

601. 배열과

602. 메모리

603. 할당

604. 개발할

605. 때

606. 신경써야

607. 하나? -

608. 개발할

609. 때

610. 메모리

611. 문제를

612. 고려해야

613. 하나? -

614. 대부분은

615. 걱정하지

616. 않아도

617. 됨 -

618. 메모리

619. 릭이

620. 실제로

621. 사용자에게

622. 영향을

623. 끼치는

624. 환경은

628. 꽤나

629. 특별하기

630. 때문 -

631. 브라우저나

632. 프레임워크가

633. 어느

634. 정도

635. 해결해주기도

636. 함

637. 메모리

638. 릭을

639. 고려해야

640. 하는

641. 상황 -

642. 대용량의

643. 자바스크립트를

644. 사용하는

645. 리치

646. 애플리케이션인가? -

647. IE6/IE7

648. 등을

649. 지원하고,

650. 대용량의

651. 자바스크립트를

652. 사용하는가? -

653. 메모리에

654. 제한이

655. 있는

656. 모바일

657. 환경을

658. 지원해야

659. 하는가?

660. 어느

661. 정도의

662. 리치? -

663. 오랜

664. 시간동안

665. 타이머를

666. 반복하는

667. 경우

671. (예:

672. 게임) -

673. 사용자가

674. 페이지에

675. 오래

676. 머무르면서

677. 인터랙션을

678. 하는

679. 경우

683. (예:

684. 웹메일) -

685. 많은

686. 양의

687. DOM을

688. 쓰고

689. 지우는

690. 것을

691. 반복하는

692. 경우

693. 메모리

694. 릭이

695. 발생하는

696. 주요

697. 원인 -

698. 클로저에서

699. 사용하지

700. 않는

701. 변수

702. 참조 -

703. DOM과

704. 이벤트

705. 리스너의

706. 순환

707. 참조 -

708. DOM

709. 개수만큼

710. 늘어나는

711. 이벤트

712. 핸들러 -

713. DOM을

714. 삭제해도

715. 남아있는

716. 이벤트

717. 핸들러 -

718. 무한정

719. 늘어나는

720. 캐시

722. 사용하지

723. 않는

724. 변수

725. 참조 -

727. 컨텍스트로

728. 부모

729. 함수의

730. 변수를

731. 참조 -

732. 최근의

733. V8에서는

734. 간단한

735. 경우

736. 정상적으로

737. GC함 -

738. 부모

739. 함수가

740. 여러

741. 개인

742. 경우

743. 메모리

744. 릭

745. 발생 -

746. 사용하지

747. 않는

748. 변수는

749. null

750. 처리하는

751. 것으로

752. 해결

753. 가능 데모)

754. 클로저와

755. 메모리,

756. 클로저에

757. 의한

758. 메모리

759. 릭

760. DOM과

761. 이벤트

762. 핸들러의

763. 순환

764. 참조 -

765. 이벤트

766. 핸들러에서

767. DOM을

768. 순환

769. 참조해서

770. 발생하는

771. 문제 -

772. IE6/7

773. 등

774. 구형

775. 브라우저에서

776. 발생 -

777. 모던

778. 브라우저에서도

779. 발생하던

780. 문제였으나,

784. 현재

785. V8에서는

786. 정상적으로

787. GC함 데모)

788. DOM과

789. 이벤트

790. 핸들러의

791. 순환

792. 참조

793. DOM

794. 개수만큼

795. 늘어나는

796. 이벤트

797. 핸들러 -

798. 추가하는

799. 각

800. DOM에

801. 모두

802. 이벤트

803. 핸들러를

804. 붙여서

805. 발생하는

806. 문제 -

807. 이벤트

808. 버블링을

809. 활용해

810. 해결

811. 가능

812. (Event

813. Delegation) 데모)

814. DOM

815. 개수만큼

816. 늘어나는

817. 이벤트

818. 핸들러

819. DOM을

820. 삭제해도

821. 남아있는

822. 이벤트

823. 핸들러 -

824. DOM과

825. 이벤트

826. 핸들러를

827. 별도로

828. 관리하는

829. 경우 -

830. DOM을

831. 삭제할

832. 때

833. 이벤트

834. 핸들러를

835. 삭제하지

836. 않는

837. 것이

838. 문제 -

839. DOM을

840. 삭제할

841. 때

842. 등록된

843. 이벤트

844. 핸들러도

845. 삭제해

846. 해결 -

847. 대부분의

848. 라이브러리에서

849. 처리해줌 데모)

850. 삭제되지

851. 않는

852. 이벤트

853. 핸들러

854. 무한정

855. 늘어나는

856. 캐시 -

857. 메모리

858. 증가를

859. 컨트롤하지

860. 않아

861. 발생하는

862. 문제 -

863. 가능하다면

864. 풀

865. 형태로

866. 사용하도록

867. 구현 데모)

868. 무한정

869. 늘어나는

870. 캐시

871. 서비스

872. 현황

873. 파악하기 1.

874. 얼마나

875. 많은

876. 메모리를

877. 사용하고

878. 있나? 2.

879. 메모리

880. 누수가

881. 발생하고

882. 있진

883. 않나? 3.

884. 얼마나

885. 자주

886. GC가

887. 일어나고

888. 있나?

889. 문제

890. 해결하기 -

891. 메모리

892. 릭이

893. 발생하는

894. 시나리오를

895. 가정 -

896. 어떤

897. 액션인가?

901. -

902. 메모리

903. 타임라인,

904. 힙

905. 할당

906. 타임라인에서

907. 확인 -

908. 어떤

909. 객체인가?

913. -

914. 힙

915. 스냅샷

916. (3

917. 스냅샷

918. 테크닉

919. 활용)

923. -

924. 힙

925. 할당

926. 타임라인에서

927. 확인

928. 실제

929. 서비스에서

930. 확인하기 데모

931. 타임~

932. 정리 -

933. 대부분은

934. 크게

935. 고민하지

936. 않아도

937. 된다. -

938. V8의

939. 가비지

940. 컬렉터는

941. 충분히

942. 최적화되어

943. 있다. -

944. 하지만,

945. 현황을

946. 파악하고,

950. 문제가

951. 발생했을

952. 때

953. 대응할

954. 준비는

955. 되어

956. 있어야

957. 한다.

958. 감사합니다.

959. Demo http://ohgyun.github.io/javascript-memory-profiling/index.html

960. References

961. (1/3) 크롬의

962. 멀티

963. 프로세스

964. 아키텍처 http://blog.chromium.org/2008/09/multi-process-architecture.html 개발자

965. 도구

967. 타임라인

968. 패널 https://developers.google.com/chrome-developer-tools/docs/timeline 개발자

969. 도구

971. 프로파일

972. 패널 https://developers.google.com/chrome-developer-tools/docs/heap-profiling 메모리

973. 관련

974. 용어

975. 기본 https://developers.google.com/chrome-developer-tools/docs/memory-analysis-101 3

976. 스냅샷

977. 테크닉 https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#three-snapshot-technique

978. References

979. (2/3) 지메일의

980. 메모리

981. 관리 http://www.html5rocks.com/en/tutorials/memory/effectivemanagement/ 지메일

982. 메모리

983. 개선

984. 슬라이드 https://docs.google.com/presentation/d/1wUVmf78gG-ra5aOxvTfYdiLkdGaR9OhXRnOlIcEmu2s/pub 메모리

985. 관리,

986. 가비지

987. 컬렉터

988. 친화적인

989. 코드

990. 만들기 http://buildnewgames.com/garbage-collector-friendly-code/ 크롬

991. 개발자

992. 도구의

993. 메모리

994. 타임라인과

995. 힙

996. 프로파일링에

997. 대한

998. 포스트 http://zetafleet.com/blog/google-chromes-heap-profiler-and-memory-timeline 자바스크립트

999. 메모리

1000. 릭

1001. 패턴 http://www.ibm.com/developerworks/web/library/wa-memleak/

1005. (이

1006. 포스트의

1007. 이슈

1008. 중

1009. 대부분은

1010. V8

1011. 가비지

1012. 컬렉터에서

1013. 해결한

1014. 상태이다)

1015. References

1016. (3/3) V8

1017. 엔진의

1018. 가비지

1019. 컬렉터 https://developers.google.com/v8/embed#handles 모던

1020. 브라우저에서도

1021. 메모리

1022. 릭

1023. 걱정을

1024. 해야하나? http://stackoverflow.com/questions/7381201/javascript-should-i-worry-about-memory-leaks-in-2011 자바의

1025. 가비지

1026. 컬렉팅

1027. 과정 http://helloworld.naver.com/helloworld/1329

JavaScript Memory Profiling

More Related Content

What's hot (20)

Similar to JavaScript Memory Profiling (20)

More from Ohgyun Ahn (18)

JavaScript Memory Profiling