Understanding JS foundation and browser engine

know JavaScript

Wikipedia is right JavaScript The definition of ：
JavaScript( Commonly abbreviated as JS) It's a kind of advanced , Interpretive programming languages
JavaScript It's a prototype 、 The language of first-class functions , It is a multi-paradigm language , It supports object-oriented programming , Directive function , And functional programming
It's a client language , In the browser . Is a scripting language , What can be interpreted and executed directly is called script code . image dos Orders and SQL It's also .

JavaScript The origin of

1994 year , Netscape (Netscape) Released Navigator browser 0.9 edition

This is the first mature web browser in history , Hit

however , This version of browser can only be used to browse , No ability to interact with visitors

Netscape is in urgent need of a web scripting language , Enable the browser to interact with the web

Netscape wanted to choose a language to embed in the browser ：

Use the existing language , such as Perl、Python、Tcl、Scheme wait , Allow them to embed directly into the web ;

1995 In, Netscape recruited programmers Brendan Eich, I hope to Scheme The possibility of language as web script language

At this moment , Another big thing happened ：1995 year Sun The company will Oak The language was renamed Java, Officially launch ;

Java After its launch, it immediately caused a sensation in the market ,Java There was a slogan ：‘write once run anywhere’;
Netscape is excited , Decision and Sun The company formed an alliance , I hope to Java Embedded in the web page to run ;
Brendan Eich I am very keen on Scheme, But the management was a little inclined at that time Java, I hope it can be simplified Java To meet the needs of Web script

however Brendan Eich Not interested in this , another use 10 Days time has been designed JavaScript;

At first the name of this language was Mocha( mocha );

stay Navigator2.0 beta The version was renamed LiveScript

stay Navigator2.0 beta 3 The version was officially renamed JavaScript, At that time, it was to match the language Java This hot word ;

Of course 10 The language designed by Tian is enough to explain Brendan Eich It's genius , But the language was more like a multilingual hodgepodge ;
reference C Language Basic syntax ;
reference Java Language Data types and memory management ;
reference Scheme Language , Promoted the function to " First class citizens "(first class) The status of ;
reference Self Language , Use prototype based (prototype) The inheritance mechanism of .

Microsoft at 1995 First launched in Internet Explorer, This led to a conflict with Netscape Browser Wars .
Microsoft Netscape Navigator The interpreter is reverse engineered , Created JScript, With the market leader
This time is bad news for developers , Because you need different adaptations for different browsers

1996 year 11 month , Netscape is officially reporting to ECMA( European Association of computer manufacturers ) Submit language standards
1997 year 6 month ,ECMA With JavaScript Language is the basis for making ECMAScript Standard specification ECMA-262;
ECMA-262 It is a standard , Defined ECMAScript
JavaScript Become ECMAScript One of the most famous realizations ;
besides ,ActionScript and JScript All of them are ECMAScript Standard implementation language ;

So ECMAScript It's a norm , and Javascript Is an implementation of this specification

JavaScript The composition of

ECMAScript yes JavaScript Standards for , Describes the syntax and basic objects of the language
DOM ( Document object model ) When the web page is loaded , The browser will create the document object model of the page (DocumentObjectModel).
BOM Browser object model (Browser Object Model, BOM) Widely used in Web Under development , It is mainly used for the management of client browser .

JS engine

JS The engine is used to run JavaScript Code
Different browsers have different cores
Gecko: Early by Netscape and Mozilla Firefox Browsers use
Trident： Microsoft development , By IE4-IE11 Browsers use , however Edge Browsers have turned to Blik
Weblit： Apple is based on KHTML Development 、 Open source , be used for Safari,Google Chrome It was used before ;
Blik： yes Webkit A branch of ,Goole Development , Currently used in Goole Chrome 、Edge、Opera etc.

in fact , We often say that the browser kernel refers to the typesetting engine of the browser ：
Layout engine (layout engine) , Also known as browser engine (browser engine)、 Page rendering engine (rendering engine) Or sample engine

common JS engine ：

SpiderMonkey: The first paragraph JavaScript engine , from Brendan Eich Development ( That is to say JavaScript author )

Chakra: Microsoft development , be used for IT browser

JavaScriptCore：Webkit Medium JavaScript engine ,Apple Companies to develop ;

V8:Google The power of development JavaScript engine , It also helps Chrome Stand out from many browsers

Browser kernel and JS Engine relationship

With Webkit For example ,WebKit In fact, it consists of two parts ：

webCore： be responsible for HTML analysis 、 Layout 、 Rendering and so on ;

JavaScriptCore: analysis 、 perform JavaScript Code

JavaScript The way of writing

1. HTML Within the code line ( Not recommended )

When we click a The label will pop up

2. script In the label

3. External script file

Need to pass through script Elemental src attribute To introduce JavaScript file

< noscript> Elements

When the browser doesn't support JavaScript Code runs

JavaScript Notes for writing

Pay attention to one ：script Elements cannot be written as single labels

External chained reference js When you file ,script The label cannot be written as JavaScript Code , also script Labels cannot be written as single labels

Attention two ： Omit type attribute

In the previous code ,< script > Will be used in the label type=‘text/JavaScript’;

You can not write this now type Element , because JavaScript It's all modern browsers and HTML5 The default scripting language in

Note three ： Loading order

As HTML Part of the document content ,JavaScript By default follow HTML Loading order of documents , That is, the top-down loading sequence ;

It is recommended that JavaScript The code and writing location are body The last line of the child element ;

<!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>
  
  <!--  Put it in body The last line  -->
<script></script>
</body>
</html>

Notice four ：Javascript The code is strictly case sensitive

HTML Elements and CSS Properties are case insensitive , But in JavaScript Strictly case sensitive in