1. High Performance
Networking in Chrome
The

2. Performance

3. for

4. Open

5. Source

6. Applications
아꿈사:박주희

7. Part1.
BackGround Knowledge
of Chrome

8. History of Google Chrome
•2008년

9. 출시된

10. 세계에서

11. 가장

12. 많이

13. 쓰이는

14. 오픈소스

15. 브라우저

16. Guiding principles of Google
Chrome
•Speed:

17. the

18. objective

19. is

20. to

21. make

22. the

23. fastest

24. browser

25.
•Security:

26. provide

27. the

28. most

29. secure

30. environment

31. to

32.
the

33. user

34.
•Stability:

35. provide

36. a

37. resilient

38. and

39. stable

40. web

41.
application

42. platform

43.
•Simplicity:

44. sophisticated

45. technology,

46. wrapped

47. in

48. a

49.
simple

50. user

51. experience

52. A modern browser’s
architecture
•크롬

53. 이전의

54. 주요

55. 브라우저의

56. 형태
-

57. 획일적인

58. 싱글

59. 프로세스

60. 애플리케이션.
-

61. 모든

62. 페이지가

63. 같은

64. 주소

65. 공간을

66. 공유,

67. 동일한

68. 자원을

69. 두고

70. 경합

71.
-

72. 한

73. 페이지나

74. 브라우저에

75. 오류가

76. 생기면

77. 전체

78. 사용자경험이

79. 망가짐.

80.
•크롬

81. 이후의

82. 주요

83. 브라우저의

84. 형태
-

85. 다중

86. 프로세스

87. 모형
-

88. 탭

89. 별

90. 격리된

91. 프로세스와

92. 메모리
-

93. 견고한

94. SandBox

95. 제공

96. The many facets of
performance
•the

97. execution

98. of

99. a

100. web

101. program

102. primarily

103. involves

104.
three

105. tasks:

106.
-

107. fetching

108. resources
-

109. page

110. layout

111. and

112. rendering
-

113. JavaScript

114. execution

115.
!
•개별

116. 요소

117. 및

118. 요소간

119. 관계에

120. 대한

121. 개선이

122. 성능

123. 최적화의

124. 포인트.

125. What is a modern web
application?
•2013년

126. 1월

127. 이후

128. 웹의

129. 상위

130. 목적지

131. 30만개에서

132. 추출한

133. 페이지

134. 하나의

135. 평균수치
-

136. 크기

137. 1700kb

138. 이상
-

139. 구성

140. 자원

141. 수

142. 95개

143. 이상
-

144. 연결하는

145. 서로

146. 다른

147. 호스트

148. 수

149. 15개

150. 이상
-

151. 평균

152. 자원

153. 크기

154. 17KB

155. 이상

156. :

157. Most

158. network

159. transfers

160. in

161. the

162. browser

163. are

164. short

165. and

166. bursty.

237. 참조

238. :

239. HTTP

240. Archive

241. Project

242. :

243. http://httparchive.org

244. The life of a resource request
on the wire

245. Have you been counting all
the delays?
•전형적인

246. 광대역

247. 연결에

248. 대한

249. 최악의

250. 시나리오를

251. 가정해보자.
1.

252. 50ms

253. for

254. DNS
2.

255. 80ms

256. for

257. TCP

258. handshake

259. (one

260. RTT)
3.

261. 160ms

262. for

263. SSL

264. handshake

265. (two

266. RTT's)
4.

267. 40ms

268. for

269. request

270. to

271. server
5.

272. 100ms

273. for

274. server

275. processing
6.

276. 40ms

277. for

278. response

279. from

280. the

281. server

282.
•총

283. 470ms

284. (전체

285. 지연시간

286. 중

287. 네트워크

288. 잠복지연

289. 80%)

290. What is fast enough?
•잠복

291. 지연에

292. 대한

293. 일반적인

294. 사용자의

295. 인식

296. :

299. 최소

300. 250ms

301. 이내에

302. 웹

303. 페이지를

304. 렌더링하거나

305. 최소한의

306. 피드백을

307. 주어야

308. 사용자가

309. 떠나지

310. 않음.

366. 참조:

367. http://www.nngroup.com/articles/response-times-3-important-limits/

369.
•사이트가

370. 빠를수

371. 록

372. 페이지뷰,

373. 사용자

374. 참여도,

375. 전환율이

376. 높아짐

377. Part2.
Architecture of Chrome
(chrome’s

378. network

379. stack

380. from

381. 10000

382. feet.)

383. Multi-process architecture
•supports

384. four

385. different

386. execution

387. models.
1.

388. Process-per-site-instance

389. :

390. 기본
2.

391. Process-per-site

392. :
3.

393. Process-per-tab

394. :
4.

395. Single

396. process

397. :

398. Inter-process communication (IPC)
and Multi-process resource loading
•렌더러와

399. 커널

400. 프로세스간

401. 통신은

402. IPC를

403. 통해

404. 이루어짐.

405. consistent resource sharing
•ResourceDispatcherHost

406. 프로세스를

407. 통한

408. 몇가지

409. 이점
1.

410. Socket

411. pool

412. and

413. connection

414. limits

415. :

416. 소켓(256),

417. 프록시(32),

418. 그룹(6)
2.

419. Socket

420. reuse

421. :

422. 요청

423. 처리후

424. 일정시간

425. 소켓풀

426. 안에

427. tcp연결

428. 저장.
3.

429. Socket

430. late-binding

431. :

432. 요청들에

433. 대한

434. 우선순위

435. 조절

436. 가능,

437. 처리량

438. 증가,

439. 최적화가능.
4.

440. Consistent

441. session

442. state

443. :

444. 인증,

445. 쿠키,

446. 캐싱된

447. 자료를

448. 모든

449. 렌더

450. 프로세스가

451. 공유가능
5.

452. Global

453. resource

454. and

455. network

456. optimizations:

457. 전역적인

458. 자원

459. 사용을

460. 제어.
6.

461. Predictive

462. optimizations:

463. 모든

464. 네트워크

465. 트래픽을

466. 모니터링하여

467. 예측모델을

468. 생성.

469. Cross-platform resource
fetching
•크롬

470. 네트워크

471. 스택은

472. 단일

473. 스레드방식의

474. 크로스

475. 플랫폼

476. 라이브러리로

477. 구성됨.
-

478. 모든

479. 플랫폼에서

480. 동일한

481. 기반구조를

482. 재사용

483. 가능.
-

484. 동일한

485. 성능

486. 최적화

487. 적용

488. 가능.
-

489. 특정

490. 플랫폼에

491. 고유한

492. 최적화

493. 기회의

494. 증대.

496. 자원상황에

497. 따라

498. 몇몇

499. 파라미터를

500. 통해

501. 최적화함.

504. ex)

506. Cash

507. size,

508. Socket

509. Timeout,

510. 예측

511. 최적화의

512. 우선순위

513. 값.

514. Architecture and performance
on mobile platforms
•Android

515.
Multi

516. Process

517. Model

518. 사용.
가용

519. 메모리와

520. 기기의

521. 제약조건에

522. 따라

523. 적절한

524. 렌더러수

525. 결정.
iOS
플랫폼의

526. sandBox

527. 정책으로

528. 인하여

529. Single

530. Process

531. Multi

532. Thread

533. 모델

534. 사용

535. Speculative optimization with
Chrome's Predictor
• Predictor

536. :

537. 네트워크

538. 패턴을

539. 관찰하고

540. 사용자가

541. 취할

542. 가능성이

543. 큰

544. 동작을

545. 배우고

546. 예측
하는

547. 역할을

548. 수행.

549.
• ex)
1.

550. 사용자가

551. 링크에

552. 마우스를

553. 올리면

554. 미리

555. DNS

556. lookup

557. 및

558. TCP

559. 연결을

560. 수행.
2.

561. 주소창에

562. 타이핑을

563. 하면

564. 가능성있는

565. 목적지를

566. 제시하고,

567. 이러한

568. URL들에

569. 대해

574. DNS

575. lookup,

576. TCP연결,

577. 숨겨진

578. 탭에서

579. Prerendering까지

580. 수행.
3.

581. 자주

582. 방문하는

583. 선호

584. 사이트들에

585. 대해

586. 해당

587. 사이트에서

588. 사용하는

589. 리소스들을

590. 미리

594. 가져온다.

595. Chrome leverages four core
optimization techniques
• DNS

596. pre-resolve

597. :

598. DNS

599. 잠복

600. 지연을

601. 피하기

602. 위해

603. 호스트명에

604. 대한

605. IP를

606. 미리

607.
조회.

608.
• TCP

609. pre-connect

610. :

611. TcP

612. connection을

613. 미리

614. 수행하여

615. TCP

616. Handshake

617. 레
이턴시

618. 제거.

619.
• Resource

620. Prefetching

621. :

622. 페이지

623. 렌더링

624. 속도를

625. 높이기

626. 위해

627. 페이지

628. 내

629. 핵심

630.
자원들을

631. 미리

632. 가져옴.

633.
• Page

634. Prerendering

635. :

636. 페이지와

637. 그

638. 자원들을

639. 미리

640. 가져와

641. 렌더링

642. 하여

643. 사용자

644.
요청시

645. 즉시

646. 페이지를

647. 보여줌.

648. Risk of Predictor
• 이러한

649. 최적화

650. 기법은

651. 모두

652. 모험적이므로

653. 예측이

654. 틀린

655. 경우

656. 필요없는

657. 자원을

658.
낭비하고

659. 실제

660. 내비게이션

661. 성능에

662. 악영향을

663. 줄수

664. 있음.

665.
• 해결방안

666. :

667. 가능한

668. 한

669. 많은

670. 정보를

671. 토대로

672. 예측을

673. 수행함.

674.
(사용자가

675. 유발한

676. 동작,

677. 사용자

678. 방문

679. 히스토리,

680. 렌더러와

681. 네트워크

682. 스택에
서

683. 발생된

684. 정보등)

686. ResolutionMotivation
• 렌더

687. 프로세스가

688. 브라우저

689. 프로세스에게

690. 보내는

691. 메시지

692. 안에

693. 포함시킬수

694. 있는

695. 다양한

696. 힌트들의

697. 일부.

698. Role of Predictor
•Predictor의

699. 목표는

700. 예측이

701. 성공할

702. 가능성을

703. 평가하는

704. 것.

705.
•모든

706. 힌트에는

707. 성공률과

708. 우선순위,

709. 만료기간이

710. 부여될수

711. 있으며

712. 이를

713. 통해

714.
내부

715. 우선순위

716. 대기열을

717. 최적화

718. 할

719. 때

720. 이를

721. 사용함.

722.
•내부

723. 우선순위

724. 대기열으로부터

725. 비롯된

726. 요청들의

727. 성공률을

728. 추적함.
이러한

729. 수치를

730. 토대로

731. 향후

732. 결정에

733. 대한

734. 최적화함.

735. Chrome network architecture
in a nutshell
•Chrome

736. uses

737. a

738. multi-process

739. architecture,

740. which

741. isolates

742. render

743. processes

744. from

745. the

746. browser

747. process

748.
•Chrome

749. maintains

750. a

751. single

752. instance

753. of

754. the

755. resource

756. dispatcher,

757. which

758. is

759. shared

760. across

761. all

762. render

763.
processes,

764. and

765. runs

766. within

767. the

768. browser

769. kernel

770. process

771.
•The

772. network

773. stack

774. is

775. a

776. cross-platform,

777. (mostly)

778. single-threaded

779. library

780.
•The

781. network

782. stack

783. uses

784. non-blocking

785. operations

786. to

787. manage

788. all

789. network

790. operations

791.
•Shared

792. network

793. stack

794. allows

795. efficient

796. resource

797. prioritization,

798. reuse,

799. and

800. provides

801. the

802. browser

803. with

804.
ability

805. to

806. perform

807. global

808. optimization

809. across

810. all

811. running

812. processes

813.
•Each

814. render

815. process

816. communicates

817. with

818. the

819. resource

820. dispatcher

821. via

822. IPC

823.
•Resource

824. dispatcher

825. intercepts

826. resource

827. requests

828. via

829. a

830. custom

831. IPC

832. filter

833.
•Predictor

834. intercepts

835. resources

836. request

837. and

838. response

839. traffic

840. to

841. learn

842. and

843. optimize

844. future

845. network

846.
requests

847.
•Predictor

848. may

849. speculatively

850. schedule

851. DNS,

852. TCP,

853. and

854. even

855. resource

856. requests

857. based

858. on

859. learned

860. traffic

861.
patterns,

862. saving

863. hundreds

864. of

865. milliseconds

866. when

867. the

868. navigation

869. is

870. triggered

871. by

872. the

873. user

874. Part3.
Lifetime of Your
Browser Session…

875. Cold-boot Experience
• 일반적으로

876. 사용자들은

877. 브라우저를

878. cold-boot한

879. 후

880. 매번

881. 동일한

882. 루틴들을

883. 따름.
ex)

884. email

885. 확인

886. 후

887. 즐겨

888. 찾는

889. 뉴스

890. 사이트

891. 보기,

892. 포털

893. 사이트

894. 바로

895. 들어가기

896. 등

897.
• 사용자가

898. 브라우저

899. 시작후

900. 방문하는

901. 패턴을

902. 미리

903. 분석해

904. 놓으면

905. 이에

906. 따라

907. 사
용자

908. 체험을

909. 최적화할

910. 여지가

911. 있음.

912.
• cold-boot후

913. 가장

914. 많이

915. 접근하는

916. 최상위

917. 10개

918. 호스트를

919. 기억한

920. 후
브라우저가

921. 시작하면

922. 이

923. 목록의

924. 호스트들을

925. 미리

926. DNS

927. 조회함.

928. chrome://dns

929. Optimizing interactions with
the Omnibox
•

930. 옴니박스

931. :

933.
!
•

934. 주소창에

935. 타이핑을

936. 수행하면

937. 방문한

938. url들과

939. 검색어들을

940. 자동

941. 노출

942.
• 사용자가

943. 무엇인가를

944. 입력하면

945. 적절한

946. 동작을

947. 과거의

948. 이력을

949. 토대로

950. 제안함.

951.
• 내부적으로

952. 이러한

953. 제안한

954. 동작들에

955. 대해

956. 스코어링을

957. 함.

958.
• 이러한

959. 점수들을

960. 토대로

961. 네트워크

962. 프리패칭을

963. 수행하여

964. 사용자

965. 체험을

966. 최적화
함.

967. chrome://predictors
•ResourceDisfetcher가

968. 동작시

969. 사용하는

970. 중요

971. 정보
유망

972. 후보

973. (노란색):

974. Dns

975. prefectch

976. 수행.
유력

977. 후보

978. (녹색):

979. DNS

980. Prefectch,

981. TCP-Preconnect

982. 수행.

1000. 만약

1001. 사용자

1002. 입력이

1003. 끝나기

1004. 전에

1005. 모두

1006. 수행이

1007. 완료되면

1008. 렌더링

1009. 수행.

1010. Optimizing cache
performance
•크롬에서

1011. 사용하는

1012. Cache

1013. 방식.
1.

1014. In

1015. Memory

1016. Type

1017. :

1018. ‘browse

1019. in

1020. private’

1021. 모드에서

1022. 사용.

1049. 창을

1050. 닫으면

1051. 캐시가

1052. 삭제처리

1053. 됨.
2.

1054. Disk

1055. File

1056. Type

1057. :

1058. LRU

1059. (Least

1060. Recently

1061. Used)

1062. 방식으로

1063. 관리됨.
•캐시

1064. 사용을

1065. 위해서는

1066. 웹페이지

1067. 구성

1068. 시

1069. Expires,

1070. ETag,

1071. Last-Modified,

1072.
Cache-Control

1073. 응답

1074. 헤더를

1075. 사용해야

1076. 함.

1077.
•chrome://cache,

1078. chrome://net-internals/#httpCache

1080. Optimizing DNS with
prefetching
•DNS

1081. Prefetching이

1082. 일어나는

1083. 상황
1.

1085. Blink의

1086. Document

1087. Parser가

1088. 현재

1089. 페이지에

1090. 존재하는

1091. 모든

1092. 링크의

1093. 호스트

1094. 목록을

1097. 제공하고

1098. 이를

1099. 크롬이

1100. 미리

1101. 조회하기로

1102. 결정했을

1103. 때.

1104.
2.

1105. 링크에

1106. 마우스를

1107. 오버하거나,

1108. 클릭하면

1109. 렌더

1110. 프로세스가

1111. 사용자가

1112. 곧

1113. 내비게이션

1117. 동작을

1118. 취할

1119. 가능성이

1120. 있다고

1121. 판단

1122. 했을

1123. 때.
3.

1124. 옴니박스가

1125. 유망도

1126. 높은

1127. 제안에

1128. 기초해서

1129. 호스트명을

1130. 조회하길

1131. 요청할때.
4.

1132. 과거

1133. 방문

1134. 기록과

1135. Resource

1136. Request에

1137. 기반해

1138. Predictor가

1139. 호스트

1140. 명을

1144. 조회하길

1145. 요청할

1146. 때.
5.

1147. 페이지

1148. 소유자가

1149. 명시적으로

1150. Prefetching할

1151. 호스트

1152. 이름을

1153. 미리

1154. 조회하라고

1158. 지시할

1159. 경우.

1163. ex:

1164. link

1165. rel=dns-prefetch

1166. href=“//host_name_to_prefetch.com

1167. DNS 최적화 구현 방안
•크롬

1168. 버전에

1169. 따라

1170. 다르나

1171. 크게

1172. 두

1173. 가지

1174. 형태(운영체제

1175. dns

1176. 기반

1177. 조
회와

1178. chrome

1179. 자체

1180. dns

1181. 기반

1182. 조회)로

1183. 구성됨.

1185.
•운영

1186. 체제

1187. 기반

1188. 조회의

1189. 특징.

1190.
장점

1191. :

1192. 코드가

1193. 단순해짐,

1194. OS의

1195. DNS캐시를

1196. 이용할

1197. 수

1198. 있음

1199.
단점

1200. :

1201. 직접

1202. 관리하지

1203. 않으므로

1204. 필요

1205. 정보가

1206. 부족함

1213. ex)

1214. Time-to-live(TTL),

1215. DNS

1216. 캐시

1217. 자체

1218. 상태

1220.
•chrome

1221. 자체

1222. dns

1223. 기반

1224. 조회의

1225. 특징.
장점

1226. :

1227. 유용정보를

1228. 토대로

1229. 새로운

1230. 최적화들이

1231. 가능해짐
단점

1232. :

1233. 코드가

1234. 많고,

1235. 복잡해

1236. 짐.

1237. DNS 최적화 측정
•chrome://histograms/DNS

1238.
•대략

1239. 50%의

1240. 프리패치가

1241. 20ms이내에

1242. 수행

1243. 되었음

1245. Optimizing TCP connection
management with pre-connect
•사용자가

1246. 실제로

1247. 페이지를

1248. 요청하기

1249. 전에

1250. 목적지

1251. 호스트에

1252. 대해

1253. TCP

1254.
Handshake를

1255. 먼저

1256. 수행하는

1257. 것을

1258. 의미.

1260.
•브라우저

1261. 내

1262. 확인방법:

1263. chrome://dns

1264.
!
•수행

1265. 동작
1.

1267. 소켓Pool에서

1268. 해당

1269. Hostname으로

1270. 가용한

1271. 소켓이

1272. 있는지

1273. 확인
2.

1274. 존재할

1275. 경우

1276. 추가

1277. 커넥션

1278. 작업

1279. 없이

1280. Pre-connect

1281. 수행

1282.
3.

1283. 없을

1284. 경우

1285. TCP

1286. handshake

1287. 수행

1288. Optimizing DNS with
prefetching
•chrome://net-internals#sockets

1289. Optimizing resource loading
with prefetch hints
• 페이지

1290. 작성자가

1291. 브라우저의

1292. 사용자

1293. 체험

1294. 최적화를

1295. 위해

1296. 미리

1297. 힌트를

1298. 작성
하여

1299. 제공함.

1300.
• subresource

1301. :

1302. 현재

1303. 사용하고

1304. 있는

1305. 리소스.

1322. 해당

1323. 리소스를

1324. 미리

1325. 가져오는

1326. 것이

1327. 바람직함을

1328. 표시