Hight Performace Javascript 스터디 1, 2장

1. High

2. Performance

3.
Javascript
Chapter

4. 1,

5. 2

6. -

7. YOUNGMIN

8. JUN

9. 로딩과

10. 실행(스크립트

11. 위치)
Old ...
head
script type=”text/javascript” src=”...”/script
script type=”text/javascript” src=”...”/script
link rel=”stylesheet” type=”text/css” href=”...”/script
/head
Why?
HTML

12. 4

13. 명세에

14. 따르면

15. script

16. 태그는

17. HTML

18. 문서의

19. head

20. 태그나

21. body

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. 위치)
BUT !!! SLOW...

52. 로딩과

53. 실행(스크립트

54. 위치)
Script

55. 코드를

56. 내려받고

57. 실행하는

58. 동안

59. 페이지

60. 표시가

61. 멈춤
때문에...

62. 체감

63. 속도는

64. 떨어짐

65. 로딩과

66. 실행(스크립트

67. 위치)
Current ...
head
link rel=”stylesheet” type=”text/css” href=”...”/script
/head
.
.
.
body
.
.
.
script type=”text/javascript” src=”...”/script
/body

68. 로딩과

69. 실행(스크립트

70. 묶기)
script

71. 태그를

72. 만날

73. 때마다

74. 페이지

75. 렌더링이

76. 차단
다운로드

77. 속도
25kb

78. *

79. 4

82. 100kb
야후!

83. 콤보

84. 핸들러와

85. 같은

86. 스크립트를

87. 합쳐주는

88. 툴을

89. 사용

90. 로딩과

91. 실행(비차단

92. 스크립트)
1.지연

93. 스크립트
1.스크립트

94. 속성

95. 중

96. defer

97. 속성을

98. 사용해서

99. 구현
2.동적

100. script

101. 태그
1.uninitialized
2.loading
3.loaded
4.interactive
5.complete
3.XMLHttpRequest

102. 스크립트

103. 삽입

104. 로딩과

105. 실행(추천하는

106. 비차단

107. 스크립트)
•동적

108. 스크립트

109. 구현
•YUI

110. 3에서

111. 쓰는

112. 방법
•LazyLoad

113. 라이브러리
• LazyLoad(http://github.com/rgrove/lazyload/)
•LABjs

114. 라이브러리
• LABjs(http://www.labjs.com)

115. 데이터

116. 접근
자바스크립트에서

117. 데이터를

118. 저장할

119. 수

120. 있는

121. 장소
• 리터럴

122. 값
• 변수
• 배열

123. 항목
• 객체멤버
접근

124. 속도
리터럴

125. 값

126. =

127. 지역

128. 변수

129. =

130. 배열

131. 항목

132. *

133. 2

134. =

135. 객체멤버

136. *

137. 2

138. 데이터

139. 접근(스코프

140. 관리)
스코프

141. 체인
• 내부

142. 속서

143. [[Scope]]는

144. 함수가

145. 만들어진

146. 스코프를

147. 나타내는

148.
객체의

149. 컬렉션을

150. 포함
• 이

151. 컬렉션을

152. 스코프

153. 체인이라고

154. 부름
• 함수의

155. 스코프

156. 체인에

157. 있는

158. 각

159. 객체를

160. 변수

161. 객체라고

162. 부름
함수의

163. 스코프

164. 체인
실행할

165. 때의

166. 스코프

167. 체인

168. 데이터

169. 접근(스코프

170. 관리)
식별자

171. 해석

172. 성능
읽기

173. 작업을

174. 할

175. 때

176. 식별자

177. 해석
쓰기

178. 작업을

179. 할

180. 때

181. 식별자

182. 해석

183. 데이터

184. 접근(스코프

185. 관리)
스코프

186. 체인

187. 확장
• with
• try,

188. catch
스코프

189. 체인

190. 확장에

191. 따른

192. 속도

193. SLOW...
• 두

194. 코드

195. 모두

196. 스코프

197. 체인을

198. 인위적으로

199. 확장이

200. 됨.
• 확장된

201. 새로운

202. 변수

203. 객체는

204. 스코프

205. 체인

206. 앞에

207. 삽입

208. 됨.
• 삽입된

209. 새로운

210. 변수

211. 객체로

212. 인해서

213. 두번째

214. 스코프

215. 체인의

216. 이동시간

217. 증가

218. 데이터

219. 접근(스코프

220. 관리)
동적

221. 스코프
• with
• try,

222. catch

223. 문의

224. catch절
• eval()이

225. 포함된

226. 함수
동적

227. 스코프에

228. 따른

229. 속도

230. SLOW...
• 정적

231. 분석으로는

232. 알

233. 수

234. 없음.
• 자바스크립트

235. 최적화

236. 엔진은

237. 코드를

238. 분석할

239. 수

240. 없음.

241. 데이터

242. 접근(스코프

243. 관리)
클로저,

244. 스코프,

245. 메모리
• 클로저
• 함수가

246. 자신의

247. 스코프

248. 밖에

249. 있는

250. 데이터에

251. 접근할

252. 수

253. 있도록

254. 하는

255. 기능
클로저

256. 사용에

257. 따른

258. 속도

259. SLOW...
• 함수의

260. 활성화

261. 객체는

262. 보통

263. 실행

264. 문맥이

265. 파괴될

266. 때

267. 함께

268. 파괴됨
• 클로저의

269. 활성화

270. 객체는

271. X
• 메모리의

272. 사용증가
• 메모리

273. 누수

274. 현상이

275. 발생

276. 데이터

277. 접근(객체

278. 멤버)
프로토타입
• 정의
• 다른

279. 객체의

280. 기반이

281. 되는

282. 객체이고,

283. 새

284. 객체가

285. 가져야

286. 할

287. 멤버를

288. 정의하고

289. 구현
객체
• 객체는

290. 내부

291. 속성을

292. 통해

293. 자신의

294. 프로토타입에

295. 묶임
• 객체의

296. 멤버
• 인스턴스

297. 멤버(자신의

298. 멤버)
• 객체

299. 인스턴스

300. 자체이

301. 있음
• 프로토타입

302. 멤버
• 객체의

303. 프로토타입에서

304. 상속

305. 데이터

306. 접근(객체

307. 멤버)
인스턴스

308. 멤버와

309. 프로토타입
var

310. book

311. =

312. {
title:

313. “High

314. Performance

315. JavaScript”,
publisher:

316. “Yahoo!

317. Press”
};
alert(book.toString());

321. //

322. “[object

323. Object]”

324. 데이터

325. 접근(객체

326. 멤버)
프로토타입

327. 체인

328. 데이터

329. 접근(객체

330. 멤버)
중첩

331. 멤버
• window.location.href

332. 같은

333. 코드
• 중첩된

334. 멤버에서

335. 마침표(.)

336. 연산자를

337. 만날때

338. 마다

339. 객체

340. 멤버

341. 해석
속성의

342. 깊이에

343. 따른

344. 접근

345. 시간

346. 데이터

347. 접근(객체

348. 멤버)
객체

349. 멤버의

350. 값

351. 캐시하기
function hasEitherClass(element, className1, className2){
return element.className == className1
|| element.className == className2;
}
멤버

352. 검색을

353. 한번만

354. 하도록

355. 개선
function hasEitherClass(element, className1, className2){
var currentClassName = element.className;
return currentClassName == className1
|| currentClassName == className2;
}