This Document contains usecase of Improving Wep App Performance through using Chromium DevTool

1. DevTool

2. and

3. Use

4. Case

5.
(

6. Analyzing

7. Web

8. App

9. Performance

10. using

11. DevTool

12. )

13.
조진철

14. 과장

15. (Jincheol.Jo@navercorp.com)

16.
웹브라우저기술lab

17. /

18. NAVER

19. LABS

22.
2014-02

25. 오늘

26. 주제는

27. …⋯

28.
• DevTool

29. (Chromium

30. Android)

31.
• 적용

32. 사례

33.
2

36. 주요

37. 기능

38.
•
•
•
•
•
•
Web

39. Inspector

40. (

41. DOM

42. ,

43. CSS,

44. Network

45. )

46.
Javascript

47. Debugging

48.
Timeline

50.
show

51. paint

52. rectangle

53. and

54. compositing

55. Layer

56.
show

57. GPU

58. FPS

59.
New

60. Features

61. -

62. ScreenCast

63. ,

64. Mobile

65. emulation

66.
3

69. Timeline

70.
4

73. Browser main flows.
Loading
Parsing
Layouting
Request

75. Respo
nse

76.
Layout
DOM

77.
Tree

78.
HTML
Parser
HTML
Display
Painting
Render

79.
Tree

80.
attach()
Request
Painting
Composite

81. Layers

82.
Image

83. Decoding

84.
CSS Style S
heet
CSS
Parser
JavaScript
JS
Parser
Style
Rule
DOM Tree
Render Tree
DOM

85.
Node

86.
Scripting
DOM

87.
Node

88.
Syntax

89. Tree

90.
Render

91. Object

92.
DOM

93.
Node

94.
Dom Change
Render

95. Layer

96.
Render

97. Object

98.
Render

99. Layer

100.
Render

101. Object

102.
Bytecode

104.
DOM

105.
Node

106.
Excution

107.
GC

108. Event

109.
Function

110. Call

113. Timer

114.
Render

115. Object

116.
Render

117. Object

118.
DOM

119.
Node

120.
DOM

121.
Node

122.
Render

123. Layer

124.
Render

125. Object

126.
Render

127. Layer

128.
5

131. Timeline

132. ­–

133. Frames

134.
6

137. Etc

138.
7

141. 적용

142. 사례

143.
8

146. Usecase

147.
•
•
•
•

148.
보이지

149. 않는

150. 영역

151. 또는

152. 불필요한

153. 영역에서

154. Draw

155.
GPU

156. Acceleration을

157. 타지

158. 않는

159. 경우

160.
Layer들이

161. 너무

162. 많은

163. 경우

164.
Thread

165. 제어권

166. 이슈

167.
à

168. 대부분은

169. Web

170. App

171. 컨덴츠를

172. 수정해야

173. 함.

174.
9

177. 불필요한

178. 영역에

179. 대한

180. Draw

181.
10

184. GPU

185. Acceleratoin을

186. 하지

187. 않으면..

188.
• 이거

189. 왜

190. 할까?

191.
• 어느정도

192. 빨라

193. 질까?

194.
11

197. GPU Acceleration
각

198. Layer별로

199. Painting을

200. 독립적으로

201. 가져갈

202. 수

203. 있음.

204.
12

207. Full

208. Draw

209.
13

212. 3D

213. Transform

214.
14

217. Layer가

218. 너무

219. 많을때

220.
• Compositing

221. 처리시

222. Layer

223. 작업량

224. 증가

225.
15

228. 3D

229. Transform

230.
16

233. Layer를

234. 줄이면

235. 또는

236. No

237. Acceleration

238.
17

241. Google

242. Developer’s

243. Tip

244.
• Paul

245. Irish

246.
• Google

247. Front-End

248. Deveolper

249.
• http://www.paulirish.com

250.
18

253. 4things

254. a

255. browser

256. can

257. anmiate

258. cheaply

259.
19

262. CSS

263. Property

264.
20

267. Top,

268. left

269. VS

270. Translate

271.
21

274. Paul`s

275. Guideline

276. for

277. Animation

278.
1.

279. Use

280. “opacity,

281. translate,

282. rotate

283. and

284. scale”

285.
2.

286. Use

287. reqeustAnimateFrame.

288. Avoid

290. setTimeout,

291. setInte
rval

292.
3.

293. Use

294. Browser

295. Optimized

296. CSS

297. animation.

298. Avoid

299. Jquery

300. a
nimate()

302.
22

305. 그러나

306. 실제

307. Web

308. app에서는..

309.
23

312. 요약

313.
• Layer수를

314. 적절하게

315. 줄일

316. 것

317. (5개

318. ~

319. 10개

320. 사이.)

321.
• WebKit

322. Animation

323. 측

324. 요소들을

325. 적극

326. 활용

327. 할

328. 수

329. 있으면..

330.
• 2D

331. 보다

332. 3D함수를

333. 사용할

334. 것

336.
–
–
–
–
opacity

337.
translate3d

338.
rotate3d

339.
Scale3d

340.
24

343. Thread

344. 제어권

345. 이슈

346.
25

349. 새로운

350. 기능

351.
26

354. Tracing

355.
27

358. Threaded

359. Rasterization

360.
28

363. Threaded Rasterization
29

366. indexing

367.
30

370. Port

371. Forward

372.
31

375. Appendix #3: References
1.
https://developers.google.com/chrome-developer-tools/
2.
http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posab
s-topleft/
3.
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
32

378. 33