[2012널리세미나] Front-End 최적화의 끝판왕, CSM + Markup Complexity

1. 이준행

10. me2day.net

12. rainygirl

22. 2012.02

24. 1-1

27. 마크업

28. 복잡도

29. 1-2

32. DOM

33. 중첩

34. 원인

35. 1-3

38. 마크업

39. 복잡도

40. 산출

41. 1-4

44. 마크업

45. 복잡도

46. 자동

47. 스캔

53. 2-1

56. CSM이란?

57. 2-2

60. CSM의

61. 특징

62. 2-3

65. 속도향상효과

66. 2-4

69. NAVER

70. me

71. 2-5

74. CSM

75. Generator

77. 1  Markup

78. Complexity

79. 2  CSM

81. CSS

82. Sprites

83. Matrix

84. 목차

87. 1-1

88. DOM

89. 중첩과

90. 브라우저

91. 로딩

92. 속도

93. HTML

94. 문서의

95. DOM

96. Element가

97. 중첩될

98. 수록

99. 복잡도가

100. 증가하고

101. 브라우저

102. 로딩

103. 속도가

104. 느려짐

105. 평균

106. 중첩수

107. PC

108. 1

109. (IE9)

110. PC

111. 2

112. (IE9)

113. PC

114. 1(Chrome14)

115. PC

116. 1(Firefox5)

117. 7.5

118. 668

119. 3354

120. 745

121. 485

122. 10

123. 690

124. 3459

125. 742

126. 488

127. 12.5

128. 712

129. 3683

130. 760

131. 495

132. PC

133. 1

134. :

135. CPU:

136. Intel

137. i7

138. 870

139. 2.93GHz,

140. RAM:

141. 4G

142. PC

143. 2

144. :

145. CPU:

146. Intel

147. Core2

148. T7200

149. 2GHz,

150. RAM:

151. 1G

153. 동일개수

154. div

155. 중첩을

156. 10,000회

157. 반복,

158. 중첩시키는

159. 방법을

160. 변경시켜

161. 평균

162. 중첩

163. 수

164. 변화시킴

166. 1-1

167. DOM

168. 중첩과

169. 브라우저

170. 로딩

171. 속도

172. HTML

173. 문서의

174. DOM

175. Element가

176. 중첩될

177. 수록

179. 복잡도가

180. 증가하고

181. 브라우저

182. 로딩

183. 속도가

184. 느려짐

186. 1-2

187. 테이블

188. 레이아웃

189. 표현

190. 1개

191. 테이블이

192. 셀에

193. 도달하는

194. 데에

195. 4회

196. 중첩,

197. 테이블

198. 2개

199. 사용시

200. 순식간에

201. 8~9회

202. 중첩

204. 정보

205. 표가

206. 아니라면

207. 테이블

208. 사용

209. 지양

210. 필요

211. tabletbodytrtd

212. table tr td class=“leftmenu” a href=“#”Menu1/abr a href=“#”Menu1/abr a href=“#”Menu1/abr /td td class=“rightcontent” ptitle/p /td /tr /table

213. 1-2

214. 디자인

215. 표현을

216. 위한

217. Element

218. 중첩

219. divdivdivdiv

220. div class=“layout1” div class=“layout2” div class=“layout3” div class=“layout4” a href=“#”…/a /div /div /div /div div class=“layout1” a href=“#”…/a div class=“layout2”/div div class=“layout3”/div div class=“layout4”/div /div

221. 1-2

222. 목록

223. Element

224. 남용

225. dlddullidldd

226. 목록

227. Element는

228. 접근성

229. 향상,

230. 시멘틱

231. 마크업

232. 등의

233. 장점이

234. 있지만

235. 남용시

236. 과도한

237. 구조화

238. à

239. 마크업

240. 복잡도

241. 증가

242. dl dtitem1/dt dd ul li a href=“#”item1-‐1/a /li li a href=“#”item1-‐2/a /li /ul /dd dtitem2/dt dd ul . . .

243. 1-2

244. 목록

245. Element

246. 남용

247. dlddullidldd

248. div id=link !-‐-‐오른쪽

249. 배너영역-‐-‐ div id=banner ul li class=banner_link a href=http://www.widget.go.kr . . . img src=/images2/ban/ban_ra026_01.jpg“ . . . / /a /li li class=banner_link a href=raeaw032.jsp onclick=call_open();return false;“ . . . img src=/images2/ban/ban_ra025_01.jpg“ . . . / /a /li /ul /div !-‐-‐//오른쪽

250. 배너영역-‐-‐ /div

251. 1-2

252. 목록

253. Element

254. 남용

255. dlddullidldd

256. div id=footer div id=footer_under ul class=foot_li li class=pl_10 span class=f_t 홈페이지운영시간: 08시~24시 /span /li li class=pl_20 a href=/home/raejw002.jsp title=개인정보보호정책 img src=/images2/but/but_ra012_01.gif alt=개인정보보호정책/ /a /li . . .

257. 1-3

258. 마크업

259. 복잡도

260. 등급

261. 산정

262. 네이버

263. 전체

264. HTML

265. 산출물의

266. DOM

267. Element

268. 평균

269. 중첩수를

270. 데이터베이스화

271. 평균

272. 중첩수

273. 등급을

274. 산정하여

275. 중첩을

276. 지양토록

277. 유도

279. 1-4

280. Markup

281. QP

282. (Quality

283. Practice)

284. 에서

285. 자동

286. 스캔

287. NHN

288. 전체

289. 마크업

290. 산출물

291. 코드를

292. 스캔하여

293. 마크업

294. 복잡도를

295. 자동

296. 측정

297. 프로젝트별

298. 리포트

299. 제공

300. 지속적인

301. 마크업

302. 복잡도

303. 관리

306. 2-1

307. CSS

308. Sprites

309. 디자인

310. 요소들을

311. 제각각

312. 여러

313. 파일이

314. 아닌.

315. 한

316. 두

317. 파일에

318. 모두

319. 모아

320. 배치하는

321. 방식

323. 2-1

324. CSS

325. Sprites

326. 의

327. 강점

328. HTTP

329. 요청

330. 최소화

331. 용량

332. 절감

333. 수십

334. 수백번의

335. HTTP

336. Request

337. à

338. 단

339. 1번의

340. HTTP

341. Request

342. 중복되는

343. 색상

344. 데이터

345. 제거로

346. 파일

347. 용량

348. 절감

349. 효과

352. 2-1

353. CSS

354. Sprites

355. •  많은

356. 사이트들이

357. 사용하고

358. 있는

359. 방법

360. 좌상단부터

361. youtube,

362. facebook,

363. google,

364. twitter

366. 2-1

367. CSS

368. Sprites

369. 의

370. 약점

371. 만들기

372. 어렵다

373. 구현

374. 난이도

375. 증가

376. à

377. 개발

378. 유지비용

379. 증가

380. 수정

381. 시

382. 다

383. 뜯어고치는

384. 불상사…⋯

385. 제한적

386. 사용은

387. 성능

388. 향상효과

389. 미미

391. 유지보수가

392. 어렵다

393. 몇

394. 개만

395. 해봤자…⋯

397. 2-1

398. CSM

399. -

400. CSS

401. Sprites

402. Matrix

403. E-HRM

404. (Extreme

405. HTTP

406. Request

407. Minimization)

408. 이미지

409. 요청

410. 수를

411. 극단적으로

412. 줄여

413. CSS

414. Sprites

415. 활용

416. 유지보수

417. 관리에도

418. 용이하도록

419. 재설계

420. 특징

421. Matrix

422. 배열

423. 이미지

424. 개수

425. 제한

426. 해상도

427. 제한

428. PNG

429. 포멧

430. +

432. 자동

433. 생성

434. 도구

436. 2-2

437. 매트릭스

438. 배열

439. 10x10

440. 매트릭스

441. 형태의

442. 이미지

443. 배치

445. à

447. 셀

448. 단위

449. 이미지

450. 배열

451. 이미지

452. 판의

453. 공간

454. 활용도를

455. 높임

456. 유지보수가

457. 쉬워짐

459. 2-2

460. 최대

461. 이미지

462. 개수

463. 제한

464. 2개

465. 이하

466. /

467. 페이지

468. 최대

469. 해상도

470. 제한

471. 3메가픽셀

472. 1024x1024x3

474. 2-2

475. 최대

476. 이미지

477. 개수

478. 및

479. 해상도

480. 제한

481. UI구성요소

482. 이미지를

483. 2개

484. 이하로

485. 제한

486. à

487. 페이지

488. 응답속도

489. 극대화

490. NAVER

491. me

492. 1000가지

493. 아이콘

494. à

495. 1개

496. png

497. 파일

499. 2-2

500. 최대

501. 이미지

502. 개수

503. 및

504. 해상도

505. 제한

506. UI구성요소

507. 이미지를

508. 2개

509. 이하로

510. 제한

511. à

512. 페이지

513. 응답속도

514. 극대화

515. NAVER

516. me

517. 1000가지

518. 아이콘

519. à

520. 1개

521. png

522. 파일

524. 2-2

525. PNG

526. Format

527. 투명(Alpha)지원,

528. 무손실,

529. 고효율

530. 압축방식인

531. PNG

532. 8bit

533. 포멧을

534. 사용

535. 8bit

536. 컬러로

537. 표현할

538. 수

539. 없는

540. 요소(날씨

541. 구름)는

542. PNG

543. 24bit

544. 포멧

545. 선택적

546. 사용

547. m.naver.com

549. 2-3

550. 얼마나

551. 좋아졌나?

553. 2-3

554. 사용자

555. 서비스

556. 응답속도

557. 향상,

558. 네트워크

559. 전송량

560. 절감

561. •  전송용량은

562. 87%,

563. 속도는

564. 36%

565. 감소

567. •  HTTP

568. Request

569. 1건

570. 당

571. 헤더

572. 파일

573. 크기가

574. 약

575. 300bytes

576. ,

577. 이미지

578. 갯수

579. 축소만으로도

580. 속도

581. 개선

582. 가능

583. •  이미지파일

584. 칼라테이블

585. 통합으로

586. 이미지

587. 전체

588. 파일

589. 용량도

590. 감소,

591. CSS

592. 용량

593. 증가

594. 영향

595. 상쇄 기존방식

596. CSM

597. 방식

598. %

599. 요청횟수

600. 16

601. 1

602. -94%

603. 전송용량

604. 6,386bytes

605. 854bytes

606. -87%

607. 로딩속도

608. 0.078s

609. 0.050s

610. -36%

611. 기준

612. :

613. 2011.1

614. 네이버

615. 메인

616. 블릿

617. 이미지

620. 2-4

621. 사용자

622. 서비스

623. 응답속도

624. 향상,

625. 네트워크

626. 전송량

627. 절감

628. •  이미지

629. 용량

630. 1024Kb

631. à

632. 603Kb

633. •  이미지

634. 호출

635. 수

636. 52개

637. à

638. 27개

640. •  평균

641. 로딩

642. 속도

643. 2.8초

644. à

645. 1.0초

646. (63%

647. 추가

648. 단축)

649. 2.8 2.6 2.6 2.8 2.7 2.7 2.9 2.8 2.8 2.8 2.0 1.1 1.0 1.1 1.1 1.1 1.0 1.0 1.0 1.0 1.0 1.1 1.1 1.0 1.0 1.0 1.0 1.0 1.0 1.1 1.1 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 CSM

650. 적용

651. (2011.

652. 5.

653. 11)

655. 2-5

656. 저걸

657. 언제

658. 다

659. 만들어요?

661. 2-5

662. N-MET

663. Sprites

664. Generator

665. •  CSM

666. 가이드라인에

667. 맞게

668. CSM

669. 이미지와

670. CSS

671. 파일을

672. 자동

673. 생성해주는

674. 자동화

675. 개발도구

677. 2-5

678. N-MET

679. Sprites

680. Generator

681. •  CSM

683. 맞게

684. CSM

685. 이미지와

686. CSS

687. 파일을

688. 자동

690. 자동화

691. 개발도구

693. 2-5

694. N-MET

695. Sprites

696. Generator

697. •  CSM

699. 맞게

700. CSM

701. 이미지와

702. CSS

703. 파일을

704. 자동

706. 자동화

707. 개발도구

709. 2-5

710. N-MET

711. Sprites

712. Generator

713. •  CSM

715. 맞게

716. CSM

717. 이미지와

718. CSS

719. 파일을

720. 자동

722. 자동화

723. 개발도구

724. html.nhncorp.com

[2012널리세미나] Front-End 최적화의 끝판왕, CSM + Markup Complexity

More Related Content

What's hot (15)

Viewers also liked (16)

Similar to [2012널리세미나] Front-End 최적화의 끝판왕, CSM + Markup Complexity (20)

More from Nts Nuli (14)

[2012널리세미나] Front-End 최적화의 끝판왕, CSM + Markup Complexity