I write this reading note for those who have not read this book can read it quickly, and it is also convenient for me to review it later. I can also take a little rest in the learning process every day. Please point out any inaccuracies or incomprehensions.

The first twenty pages don’t have much to focus on. Here’s what I think they do.

The first 20 pages contain two chapters

  • What is JavaScript?
  • HTML in JavaScript

Chapter 1 What is JavaScript

1.1 History of JS (not important, skipped)

1.2 JS implementation

1.2.1 ECMAScript

This section tells the history of ES.

Different versions of ECMAScript are represented as “edition” (that is, the version of ECMA-262 that describes a particular implementation). Beginners should know what ECMA-262 is.

  • The first version of ECMA-262 is essentially the same as JavaScript 1.1 for Netscape.
  • The second edition is only a few redactions, mainly to strictly conform to ISO/IEC-16262 (do not need to know what) requirements, without adding or removing or changing any features.
  • The third edition has updated string handling, error definitions, and numeric output. It also added support for regular expressions, new control statements, try/catch exception handling, and minor changes to better internationalize the standard.
  • The fourth edition includes strongly typed variables, new statements and data structures, true classes and classic inheritance, and means of manipulating data. At the same time, ES3.1 was released because version 4 was too big a jump.
  • The fifth version of ECMA-262 is ES3.1, which clarifies the ambiguities of the third version and adds new features. New features include native JSON objects for parsing and serializing JSON data, ways to facilitate inheritance and advanced property definitions, and new strict schemas that enhance the ES engine’s ability to interpret and execute code.
  • Version 6, also known as ES6 (also known as ES2015 or ES Harmony), contains perhaps the most significant set of enhancements to the specification ever. Formal support for classes, modules, iterators, generators, arrow functions, contracts, reflections, proxies, and numerous new data types.
  • Commonly known as ES7 or ES2016, this revision includes only a few syntactic enhancements, such as array.prototype.includes and index operators.
  • Version 8, also known as ES8 and ES2017, mainly adds async/await, SharedArrayBuffer and Atomics apis. And the Object. The values ()/Object. Entries ()/Object. GetOwnPropertyDescription () and string filling method, another clear support Object literal last comma.
  • Version 9, also known as ES9, ES2018, includes asynchronous iteration, residual and extended properties, a new set of regular expression features, Promise Finally (), and template literals revisions.

The tenth edition. Also called ES10, ES2019 increased Array prototype. The flat ()/flatMAP () \ String/prototype trimaStart ()/trimEnd (), Object. FromEntries () method, And Symbol. The prototype. The description attributes, clearly define the Function. The prototype. The toString () return values and fixed Array. The prototype. The sort order of (). In addition, this revision addresses compatibility issues with JSON strings and defines an optional binding for the catch clause.

1.2.2 DOM (provides methods and interfaces for interacting with web content)

The DOM Document Object Model is an application programming interface (API) for using extended XML in HTML. DOM abstracts the entire page as a set of hierarchical nodes.

DOM gives developers control over the content and structure of a web page by creating trees that represent documents. Using the DOM API, you can easily remove, add, replace, and modify nodes.

1.2.3 BOM (Provides methods and interfaces for interacting with browsers)

Browser Object Model (BOM) API, used to support access and manipulation of browser Windows. Using the BOM, developers can control what the browser displays outside of the page. What’s really unique about BOM, and certainly most problematic, is that it’s the only JavaScript implementation that doesn’t have a standard. HTML5 changes that, with this version of HTML covering as many BOM features as possible in a formal specification.

Chapter 2 JS in HTML

Only focus on

  • The code in <\script> is interpreted from top to bottom. The rest of the page is not loaded or displayed until the code in the <\script> element has been evaluated.
  • By convention, external JavaScript files have a.js extension. This is not necessary because the browser does not check the extension of the included JavaScript file. This opens up the possibility of dynamically generating JavaScript code using server-side scripting languages, or translating JavaScript extensions like TypeScript or React’s JSX into JavaScript in the browser.
  • One of the most powerful and controversial features of the <\script> element is that it can contain JavaScript from an external domain

File. Much like the <\img> element, the SRC attribute of a <\script> element can be a full URL that points to a resource outside the same domain as the HTML page containing it, as in this example:

<\script src=”www.somewhere.com/afile.js”></script>

When the browser parses the resource, it sends a GET request to the path specified by the SRC attribute to retrieve the resource, presumably a JavaScript file. This initial request is not restricted by the browser’s same-origin policy, but the JavaScript returned and executed is. Of course, this request is still limited by the parent page HTTP/HTTPS protocol.

  • Tag location, which is important here, involves optimizing the user experience (Nonsense: User experience is my most important part and one of the charms of the front end, to put it elegantly, user experience is an art, and one of the elements of the front end that can be constantly optimized)

In the past, all <\script> elements were placed inside the <\head> tag of the page. The main purpose of this practice was to keep external CSS and JavaScript files in one place. However, putting all JavaScript files in <\head> means that all JavaScript code must be downloaded, parsed, and interpreted before the page can start rendering (the page starts rendering when the browser parses to the start tag of <\body>). For pages that require a lot of JavaScript, this causes a significant delay in page rendering, during which the browser window is completely blank. To solve this problem, modern Web applications typically place all JavaScript references after the page content in the <\body> element. This way, the page renders the page completely before processing the JavaScript code. The user will feel that the page loads faster because the browser displays a blank page for less time. Reduce screen time to improve user experience

  • Deferring script execution

Setting the defer attribute on the <\script> element tells the browser to download now, but delay execution.

  • Execute scripts asynchronously

HTML5 defines async properties for <\script> elements. The Async property is similar to defer in terms of changing script processing. Of course, both only work with external scripts, and both tell the browser to start downloading immediately. Unlike defer, however, the scripts labeled async are not guaranteed to execute in the order in which they appear.

The purpose of adding async to a script is to tell the browser that it doesn’t have to wait for the script to download and execute before loading the page, nor does it have to wait for the asynchronous script to download and execute before loading other scripts. Because of this, asynchronous scripts should not modify the DOM during loading.

  • Dynamically loading scripts

There are other ways to load scripts besides the <\script> tag. Because JavaScript can use the DOM API, you can also load the specified script by dynamically adding a script element to the DOM. Just create a script element and add it to the DOM.

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
document.head.appendChild(script); 
Copy the code

Of course, the request will not be sent until the HTMLElement element is added to the DOM and this code is executed. By default, <\script> elements created in this way are loaded asynchronously, which is equivalent to adding an async property. This can be problematic, however, because all browsers support the createElement() method, but not all browsers support the async property. Therefore, if you want to unify the loading behavior of dynamic scripts, you can explicitly set it to synchronous loading:

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
script.async = false; 
document.head.appendChild(script); 
Copy the code

Resources obtained in this way are not visible to the browser preloader. This can seriously affect their priority in the resource acquisition queue. Depending on how the application works and how it is used, this can have a significant impact on performance. To let the preloader know of the existence of these dynamic request files, declare them explicitly in the document header:

<link rel="preload" href="gibberish.js">
Copy the code
2.2 Lines of code and external files

External files are recommended for the following reasons.

 maintainability. JavaScript code spread over many HTML pages can cause maintenance difficulties. It’s easier to maintain all JavaScript files in a single directory, so developers can edit their code independently of the HTML pages that use them.

 cache. The browser caches all externally linked JavaScript files based on specific Settings, which means that if both pages use the same file, it only needs to be downloaded once. This ultimately means pages load faster.

 adapt to the future. By putting JavaScript in external files, you don’t have to worry about XHTML or the aforementioned annotation hacks. The syntax for including external JavaScript files is the same in HTML and XHTML.