Hight performance java script chapter1, 2

439 views

Published on

Hight Performace Javascript 스터디 1, 2장

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
439
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Hight performance java script chapter1, 2

    1. 1. High
    2. 2.  Performance
    3. 3.   Javascript Chapter
    4. 4.  1,
    5. 5.  2
    6. 6.  -
    7. 7.  YOUNGMIN
    8. 8.  JUN
    9. 9.  로딩과
    10. 10.  실행(스크립트
    11. 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. 12.  4
    13. 13.  명세에
    14. 14.  따르면
    15. 15.  script
    16. 16.  태그는
    17. 17.  HTML
    18. 18.  문서의
    19. 19.  head
    20. 20.  태그나
    21. 21.  body
    22. 22.  태그안에
    23. 23.  쓸
    24. 24.  수
    25. 25.  있고
    26. 26.   횟수에는
    27. 27.  제한이
    28. 28.  없음 페이지에
    29. 29.  영향을
    30. 30.  주는
    31. 31.  스타일과
    32. 32.  스크립트를
    33. 33.  가장
    34. 34.  먼저,
    35. 35.  가능한
    36. 36.  한
    37. 37.  많이
    38. 38.  로드하고
    39. 39.  있어야
    40. 40.  그
    41. 41.  뒤에
    42. 42.  불러 올
    43. 43.  페이지
    44. 44.  내용이
    45. 45.  정확하게
    46. 46.  표시되고
    47. 47.  동작한다는
    48. 48.  이론
    49. 49.  로딩과
    50. 50.  실행(스크립트
    51. 51.  위치) BUT !!! SLOW...
    52. 52.  로딩과
    53. 53.  실행(스크립트
    54. 54.  위치) Script
    55. 55.  코드를
    56. 56.  내려받고
    57. 57.  실행하는
    58. 58.  동안
    59. 59.  페이지
    60. 60.  표시가
    61. 61.  멈춤 때문에...
    62. 62.  체감
    63. 63.  속도는
    64. 64.  떨어짐
    65. 65.  로딩과
    66. 66.  실행(스크립트
    67. 67.  위치) Current ... head link rel=”stylesheet” type=”text/css” href=”...”/script /head . . . body . . . script type=”text/javascript” src=”...”/script /body
    68. 68.  로딩과
    69. 69.  실행(스크립트
    70. 70.  묶기) script
    71. 71.  태그를
    72. 72.  만날
    73. 73.  때마다
    74. 74.  페이지
    75. 75.  렌더링이
    76. 76.  차단 다운로드
    77. 77.  속도 25kb
    78. 78.  *
    79. 79.  4
    80. 80.  
    81. 81.  
    82. 82.  100kb야후!
    83. 83.  콤보
    84. 84.  핸들러와
    85. 85.  같은
    86. 86.  스크립트를
    87. 87.  합쳐주는
    88. 88.  툴을
    89. 89.  사용
    90. 90.  로딩과
    91. 91.  실행(비차단
    92. 92.  스크립트) 1.지연
    93. 93.  스크립트 1.스크립트
    94. 94.  속성
    95. 95.  중
    96. 96.  defer
    97. 97.  속성을
    98. 98.  사용해서
    99. 99.  구현 2.동적
    100. 100.  script
    101. 101.  태그 1.uninitialized 2.loading 3.loaded 4.interactive 5.complete 3.XMLHttpRequest
    102. 102.  스크립트
    103. 103.  삽입
    104. 104.  로딩과
    105. 105.  실행(추천하는
    106. 106.  비차단
    107. 107.  스크립트) •동적
    108. 108.  스크립트
    109. 109.  구현 •YUI
    110. 110.  3에서
    111. 111.  쓰는
    112. 112.  방법 •LazyLoad
    113. 113.  라이브러리 • LazyLoad(http://github.com/rgrove/lazyload/) •LABjs
    114. 114.  라이브러리 • LABjs(http://www.labjs.com)
    115. 115. 데이터
    116. 116.  접근 자바스크립트에서
    117. 117.  데이터를
    118. 118.  저장할
    119. 119.  수
    120. 120.  있는
    121. 121.  장소 • 리터럴
    122. 122.  값 • 변수 • 배열
    123. 123.  항목 • 객체멤버 접근
    124. 124.  속도리터럴
    125. 125.  값
    126. 126.  =
    127. 127.  지역
    128. 128.  변수
    129. 129.  =
    130. 130.  배열
    131. 131.  항목
    132. 132.  *
    133. 133.  2
    134. 134.  =
    135. 135.  객체멤버
    136. 136.  *
    137. 137.  2
    138. 138. 데이터
    139. 139.  접근(스코프
    140. 140.  관리) 스코프
    141. 141.  체인 • 내부
    142. 142.  속서
    143. 143.  [[Scope]]는
    144. 144.  함수가
    145. 145.  만들어진
    146. 146.  스코프를
    147. 147.  나타내는
    148. 148.   객체의
    149. 149.  컬렉션을
    150. 150.  포함 • 이
    151. 151.  컬렉션을
    152. 152.  스코프
    153. 153.  체인이라고
    154. 154.  부름 • 함수의
    155. 155.  스코프
    156. 156.  체인에
    157. 157.  있는
    158. 158.  각
    159. 159.  객체를
    160. 160.  변수
    161. 161.  객체라고
    162. 162.  부름 함수의
    163. 163.  스코프
    164. 164.  체인 실행할
    165. 165.  때의
    166. 166.  스코프
    167. 167.  체인
    168. 168. 데이터
    169. 169.  접근(스코프
    170. 170.  관리) 식별자
    171. 171.  해석
    172. 172.  성능 읽기
    173. 173.  작업을
    174. 174.  할
    175. 175.  때
    176. 176.  식별자
    177. 177.  해석쓰기
    178. 178.  작업을
    179. 179.  할
    180. 180.  때
    181. 181.  식별자
    182. 182.  해석
    183. 183. 데이터
    184. 184.  접근(스코프
    185. 185.  관리) 스코프
    186. 186.  체인
    187. 187.  확장 • with • try,
    188. 188.  catch 스코프
    189. 189.  체인
    190. 190.  확장에
    191. 191.  따른
    192. 192.  속도
    193. 193.  SLOW... • 두
    194. 194.  코드
    195. 195.  모두
    196. 196.  스코프
    197. 197.  체인을
    198. 198.  인위적으로
    199. 199.  확장이
    200. 200.  됨. • 확장된
    201. 201.  새로운
    202. 202.  변수
    203. 203.  객체는
    204. 204.  스코프
    205. 205.  체인
    206. 206.  앞에
    207. 207.  삽입
    208. 208.  됨. • 삽입된
    209. 209.  새로운
    210. 210.  변수
    211. 211.  객체로
    212. 212.  인해서
    213. 213.  두번째
    214. 214.  스코프
    215. 215.  체인의
    216. 216.  이동시간
    217. 217.  증가
    218. 218. 데이터
    219. 219.  접근(스코프
    220. 220.  관리) 동적
    221. 221.  스코프 • with • try,
    222. 222.  catch
    223. 223.  문의
    224. 224.  catch절 • eval()이
    225. 225.  포함된
    226. 226.  함수 동적
    227. 227.  스코프에
    228. 228.  따른
    229. 229.  속도
    230. 230.  SLOW... • 정적
    231. 231.  분석으로는
    232. 232.  알
    233. 233.  수
    234. 234.  없음. • 자바스크립트
    235. 235.  최적화
    236. 236.  엔진은
    237. 237.  코드를
    238. 238.  분석할
    239. 239.  수
    240. 240.  없음.
    241. 241. 데이터
    242. 242.  접근(스코프
    243. 243.  관리) 클로저,
    244. 244.  스코프,
    245. 245.  메모리 • 클로저 • 함수가
    246. 246.  자신의
    247. 247.  스코프
    248. 248.  밖에
    249. 249.  있는
    250. 250.  데이터에
    251. 251.  접근할
    252. 252.  수
    253. 253.  있도록
    254. 254.  하는
    255. 255.  기능 클로저
    256. 256.  사용에
    257. 257.  따른
    258. 258.  속도
    259. 259.  SLOW... • 함수의
    260. 260.  활성화
    261. 261.  객체는
    262. 262.  보통
    263. 263.  실행
    264. 264.  문맥이
    265. 265.  파괴될
    266. 266.  때
    267. 267.  함께
    268. 268.  파괴됨 • 클로저의
    269. 269.  활성화
    270. 270.  객체는
    271. 271.  X • 메모리의
    272. 272.  사용증가 • 메모리
    273. 273.  누수
    274. 274.  현상이
    275. 275.  발생
    276. 276. 데이터
    277. 277.  접근(객체
    278. 278.  멤버) 프로토타입 • 정의 • 다른
    279. 279.  객체의
    280. 280.  기반이
    281. 281.  되는
    282. 282.  객체이고,
    283. 283.  새
    284. 284.  객체가
    285. 285.  가져야
    286. 286.  할
    287. 287.  멤버를
    288. 288.  정의하고
    289. 289.  구현 객체 • 객체는
    290. 290.  내부
    291. 291.  속성을
    292. 292.  통해
    293. 293.  자신의
    294. 294.  프로토타입에
    295. 295.  묶임 • 객체의
    296. 296.  멤버 • 인스턴스
    297. 297.  멤버(자신의
    298. 298.  멤버) • 객체
    299. 299.  인스턴스
    300. 300.  자체이
    301. 301.  있음 • 프로토타입
    302. 302.  멤버 • 객체의
    303. 303.  프로토타입에서
    304. 304.  상속
    305. 305. 데이터
    306. 306.  접근(객체
    307. 307.  멤버) 인스턴스
    308. 308.  멤버와
    309. 309.  프로토타입 var
    310. 310.  book
    311. 311.  =
    312. 312.  { title:
    313. 313.  “High
    314. 314.  Performance
    315. 315.  JavaScript”, publisher:
    316. 316.  “Yahoo!
    317. 317.  Press” }; alert(book.toString());
    318. 318.  
    319. 319.  
    320. 320.  
    321. 321.  //
    322. 322.  “[object
    323. 323.  Object]”
    324. 324. 데이터
    325. 325.  접근(객체
    326. 326.  멤버) 프로토타입
    327. 327.  체인
    328. 328. 데이터
    329. 329.  접근(객체
    330. 330.  멤버) 중첩
    331. 331.  멤버 • window.location.href
    332. 332.  같은
    333. 333.  코드 • 중첩된
    334. 334.  멤버에서
    335. 335.  마침표(.)
    336. 336.  연산자를
    337. 337.  만날때
    338. 338.  마다
    339. 339.  객체
    340. 340.  멤버
    341. 341.  해석 속성의
    342. 342.  깊이에
    343. 343.  따른
    344. 344.  접근
    345. 345.  시간
    346. 346. 데이터
    347. 347.  접근(객체
    348. 348.  멤버) 객체
    349. 349.  멤버의
    350. 350.  값
    351. 351.  캐시하기 function hasEitherClass(element, className1, className2){ return element.className == className1 || element.className == className2; } 멤버
    352. 352.  검색을
    353. 353.  한번만
    354. 354.  하도록
    355. 355.  개선 function hasEitherClass(element, className1, className2){ var currentClassName = element.className; return currentClassName == className1 || currentClassName == className2; }

    ×