Home - Ecma International
Ecma is driven by industry members to meet their needs, providing a healthy competitive landscape based on differentiation of products and services rather than technology models, generating confidence among vendors and users of new technology.
http://ecma-international.orgMDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. It also has some developer-oriented documentation for Mozilla products, such as Firefox Developer Tools.
http://developer.mozilla.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Script src = "main.js"></Script>
</head>
<body>
</body>
</html>💡
html을 분석하기 위해서는 parsing html → Blocked (fetching js executing js) → Parsing HTML 단계로 진행된다.!! → JS파일이 큰 경우 매우 오랜 시간이 걸릴 수 있다!!! (스크립트에 헤드 넣는 것이 좋지 않다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div><div>
<Script src = "main.js"></Script>
</body>
</html>💡
parsing HTML →(페이지 준비)Fetching js → Executing js 순서로 진행이 된다!! 자바스크립트에 의존적인 문서라면 더더욱 문제가 생긴다!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Script async src = "main.js"></Script>
</head>
<body>
</body>
</html>💡
parsing HTML → Blocked → Parsing HTML fetching js → executing.js 이 순서로 진행이 되게 된다!! 시간이 매우 절약되게 된다!! → 여전히 시간이 걸림!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Script defer src = "main.js"></Script>
</head>
<body>
</body>
</html>💡
parsing HTML → executing js fetching js → fetching.js(다운로드 받음) → executing.js (실행)의 순서로 진행이 되기 떄문에, 순서에 지배적인 코드의 경우 Defer로 주로 이용하게 된다!!
// Whoel-script strict madde syntax
// JavaScript is very flexible
// flexible === dangerous
// added ECMAScrips 5
// 일반적으로 선언하고 하는 것이 좋다!!
'use strict';
console.log("Hello World!");Notion2Tistory
boltlessengineer.github.io
출처 : youtu.be/tJieVCgGzhs
반응형
'Develope_Web_Programming > 01_HTML&CSS&JS' 카테고리의 다른 글
| 7.오브젝트 넌 뭐니?? (0) | 2021.02.14 |
|---|---|
| 6. 클래스와 오브젝트의 차이 (0) | 2021.02.13 |
| 5. Arrow Function은 무엇인가? (0) | 2021.02.13 |
| 4. 코딩의 기본 operator, if, for loop (0) | 2021.02.13 |
| 3. 데이터 타입, data types, let vs var, hoisting (0) | 2021.02.13 |
Uploaded by Notion2Tistory v1.1.0