How to enable javascript in the browser, browser settings to enable javascript

Hello everyone, the editor is here to answer the following questions for you, how to turn on the browser javascript function, and where to set the browser javascript. Let us take a look today!

Introduction:

In the previous chapter, we mentioned that in the early days of JavaScript, was mainly used to replace server-side languages such as Perl to handle input validation, but now JavaScript, has been widely used in the field of WEB development, so this chapter will talk to you about how JavaScript is used in HTML web pages, and how it plays a specific role.

To introduce JavaScript into web pages, we must first solve the problem of its relationship with HTML, the dominant language of web pages Deepl weight reduction. In the early days of JavaScript, Netscape staff wanted to introduce JavaScript into HTML pages without causing page rendering problems in other browsers. Through trial and error and discussion, they finally made some decisions and reached a consensus on introducing common scripting capabilities to the web. Much of their original work was retained, and eventually formed the HTML specification.

`<>`Element tag

The primary way to insert JavaScript into HTML is to use the <> element. This element was created by Netscape and was first implemented in Netscape Navigator 2. Later, this element was officially added to the HTML specification developed by W3c. There are the following 8 attribute configurations on the <> element:

src: Optional. Represents the path pointed to by an external file containing the code to be executed.
async: Optional. Indicates that downloading the script should start immediately, but cannot prevent other page actions, such as downloading resources or waiting for other scripts to load. Only valid for external script files.
crossorigin: Optional. Configure CORS (Cross-Origin Resource Sharing) settings for related requests. CORS is not used by default. crossorigin=”anonymous” profile requests do not have to set the credentials flag. crossorigin=”use-credentials”Requires the credentials flag to be set, meaning that outbound requests will include credentials.
defer: Optional. indicates that the script can be delayed until the document is fully parsed and displayed. Only valid for external script files. In IE7 and earlier, this attribute can also be specified for inline scripts.
integrity: Optional. Allows comparison of received resources with specified cryptographic signatures to verify subresource integrity (SRI). If the signature of the received resource does not match the signature specified by this attribute, the page will report an error and the script will not be executed. This attribute can be used to ensure that the content delivery network (CDN, Content Delivery Network) does not provide malicious content. can be understood as a security lock for JavaScript scripts, used to detect the resource security of script programs.
type: Optional. Instead of language, represents the content type (also called MIME type) of the scripting language in the code block. By convention, this value is always “text/java”, although “text/java” and “text/ecma” are both deprecated. The MIME type of JavaScript files is usually “application/x-java”, but giving this value to the type attribute may cause the script to be ignored. Other values valid in non-IE browsers are “application/java” and “application/ecma”. If this value is module, the code will be treated as an ES6 module, and only then can the import and export keywords appear in the code.
charset: Optional. Use the code character set specified by the src attribute. This attribute is rarely used because most browsers don’t care about its value.
language: Deprecated. Originally used to represent a scripting language (such as “JavaScript”, “JavaScript 1.2”, or “VBScript”) within a block of code. Most browsers ignore this attribute and should no longer be used.

There are two ways to use the <> tag:

Type 1: Use it to embed JavaScript code directly in the web page.
Just put the JavaScript code to be executed directly in the <> tag element:

<>
  function sayHi() {
    console.log("Hi, let's learn JavaScript together");
  }
  sayHi()
</>

Code contained within <> will be interpreted from top to bottom. In the above example, a function definition is interpreted and the function is saved in the interpreter environment. The rest of the page will not be loaded or displayed until the code in the <> element has been evaluated.

Note:

When using inline JavaScript code, be aware that the string cannot appear in the code. For example, the following code will cause the browser to report an error:

<>
  function sayScript() {
    console.log("</>"); //Cannot appear </>
  }
  sayScript()
</>

This is because the way the browser parses inline scripts determines that when it sees the string , it will treat it as the closing tag, resulting in code The run terminated abnormally.

Second:

If you want to use JavaScript scripts contained in external files, the must use the src attribute. The value of this attribute is a URL that points to a file containing JavaScript code, such as:

 < src="./Separation/index.js"></>

Just like interpreting inline JavaScript scripts, the page will also block while interpreting external JavaScript files. (The blocking time also includes the time it takes to download the file.)

Extended supplement:

By convention, external JavaScript files have a .js extension. This is not necessary as browsers do not check the extension of included JavaScript files. This opens up the possibility of dynamically generating JavaScript code using a server-side scripting language, or translating JavaScript extension languages (such as TypeScript, or React’s JSX) into JavaScript in the browser. Be aware, however, that servers often determine the correct MIME type of a response based on the file extension. If you don’t plan to use the .js extension, be sure the server returns the correct MIME type.

Note:

Once the <> element uses the src attribute, it should not contain other JavaScript code in the <> and tags. If both are provided, the browser will simply download and execute the script file, ignoring inline code.

One of the most powerful and controversial features of the <> element is that it can contain JavaScript files from external domains. Much like the element, the src attribute of the <> element can be a complete URL, and the resource pointed to by this URL can be different from the HTML page containing it. In a domain, such as this example:

 < src="//i2.wp.com/cdn.usefathom.com/.js"></>

When the browser parses this resource path, it will send a GET request to the path specified by the src attribute to obtain the corresponding resource, assuming it is 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 subject to the HTTP/HTTPS protocol of the parent page.

When executing code from an external domain is loaded and interpreted as part of the page that loads it. This capability allows us to distribute JavaScript across different domains. However, be careful when referencing JavaScript files placed on someone else's server, as a malicious programmer may replace the file at any time. When including JavaScript files from external domains, make sure you own the domain or that it is a trusted source. Although the integrity attribute of the <> tag is a weapon used to prevent this problem, this attribute is not supported by all browsers.

Regardless of what code is included, the browser will interpret <> in the order in which they appear on the page, provided they do not use the defer and async attributes. The code of the second <> element must be interpreted before the code of the first <> element is interpreted, and the third one must wait until the second one is interpreted. And so on.

Delay script execution

From the above description, we know that when a JavaScript script is executed, it will cause blocking to subsequent code.

So if all external references to JavaScript files are placed in , it means that all JavaScript codes must be downloaded, parsed and interpreted before the page can start rendering (the page is being browsed Rendering starts when the start tag is parsed by the browser). For pages that require a lot of JavaScript, this can cause a noticeable delay in page rendering, during which the browser window is completely blank. This is a basic performance optimization problem. To solve this problem, modern web applications usually place all JavaScript references at the end of the page content in the tag element.

This way the page is fully rendered before the JavaScript code is processed. Users will feel that pages load faster because the browser spends less time displaying a blank page.

Extended reading about deferring script execution:

HTML 4.01 defines an attribute called defer for the <> element. This attribute indicates that the script will not change the structure of the page when executed. That is, the script will be delayed until the entire page has been parsed before running. Therefore, setting the defer attribute in the <> element is equivalent to telling the browser to download immediately but delay execution.

 < defer src="//i2.wp.com/cdn.usefathom.com/.js"></>
  < defer src="example2.js"></>

Although the <> elements in this example are included in the page’s , they will be parsed by the browser to the closing tag will be executed. The HTML5 specification requires that scripts should be executed in the order they appear, so the first deferred script will be executed before the second deferred script, and both will be executed before the DOMContentLoaded event, but in practice, deferred scripts are not It must always be executed sequentially or before the DOMContentLoaded event, so it is best to only include one such script.

As mentioned before, the defer attribute is only effective for external script files. This is explicitly specified in HTML5, so browsers that support HTML5 will ignore the defer attribute of inline scripts. IE4~7 all show the old behavior, while IE8 and higher support the behavior defined by HTML5.

Support for the defer attribute begins in IE4, Firefox 3.5, Safari 5, and Chrome 7. All other browsers ignore this attribute and handle the script normally. With this in mind, it is better to place the scripts that are to be deferred at the bottom of the page.

Execute script asynchronously

HTML5 defines the async attribute for the <> element. In terms of changing the way scripts are processed, the async attribute is similar to defer. Of course, both of them only work with external scripts, and both tell the browser to start downloading immediately. However, unlike defer, scripts marked async are not guaranteed to be executed in the order in which they appear, such as:

< async src="//i2.wp.com/cdn.usefathom.com/.js"></>
< async src="example2.js"></>

In this example, it is also possible that the second script executes before the first script. So the point is that there are no dependencies between them. The purpose of adding the async attribute to a script is to tell the browser that it does not have to wait for the script to be downloaded and executed before loading the page. It also does not have to wait for the asynchronous script to be downloaded and executed before loading other scripts. Because of this, async scripts should not modify the DOM during loading.

Asynchronous scripts are guaranteed to be executed before the load event of the page, but may be before or after DOMContentLoaded. Firefox 3.6, Safari 5, and Chrome 7 support asynchronous scripts. Using async will also tell the page that you will not use document.write, but good web development practice does not recommend this method at all.

Dynamic loading script

In addition to using the <> tag directly, there are other ways to load scripts. Because JavaScript can use the DOM API, the specified script can also be loaded by dynamically adding <> elements to the DOM. Just create an element and add it to the DOM.

let = document.createElement(''); //Create a label
.src = 'https://cdn.usefathom.com/.js'; //Dynamic assignment of src
document.head.appendChild(); //Insert the created complete element into the DOM instantiation.

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

let = document.createElement(''); //Create a label
.src = 'https://cdn.usefathom.com/.js'; //Dynamic assignment of src
.async = false;
document.head.appendChild(); //Insert the created complete element into the DOM instantiation.

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

<link rel="preload" href="https://cdn.usefathom.com/.js">

Advantages and Disadvantages of Inline Code vs. External Files

Although it is possible to embed JavaScript code directly in an HTML file, it is generally considered best practice to place JavaScript code in an external file whenever possible. However, this best practice is not an explicitly mandatory rule. It is recommended to use external files for the following reasons:

Maintainability. If JavaScript code is spread across many HTML pages, maintenance will be difficult. Using one directory to save all JavaScript files is easier to maintain and more consistent with the modular idea, so developers can edit the code independently of the HTML pages that use them.
Resource caching. Browsers cache all externally linked JavaScript files according to specific settings, which means that if the same file is used on two pages, it only needs to be downloaded once. This ultimately means that pages load faster, which is also a performance optimization.

Element tag
To solve the problem of early browsers not supporting JavaScript, a solution for graceful page degradation is needed. Eventually, the element emerged and was used to provide alternative content to browsers that did not support JavaScript. Although today’s browsers already support 100% JavaScript, this element still has its uses for browsers that disable JavaScript.

The element can contain any HTML element that can appear in , except <>. The browser will display content contained in the following two situations:

The browser does not support scripts;
Browser support for scripting is turned off.

If any condition is met, the content contained in it will be rendered. Otherwise, the browser will not render the content.

 <no>
    <p>The current device does not support the execution of java scripts</p>
  </no>

This example tells the browser to display a paragraph when the script is not available. If the browser supports scripting, the user will never see it.

Summary:

This chapter describes how JavaScript scripts are introduced into HTML web pages, and what the execution mode is in web pages.
The key contents can be summarized as follows:

To include an external JavaScript file, the src attribute must be set to the URL of the file to be included. The file can be on the same server as the web page, or it can be on a completely different domain.
All <> elements will be interpreted in the order in which they appear in the web page. Without using the defer and async attributes, code contained within a <> element must be interpreted in strict order.
For scripts that do not defer execution, the browser must finish interpreting the code located in the <> element before it can continue rendering the rest of the page. For this reason, you should usually place the <> element at the end of the page, after the main content and before the tag.
You can use the defer attribute to defer script execution until the document is rendered. Deferred scripts are in principle executed in the order in which they are listed.
You can use the async attribute to indicate that the script does not need to wait for other scripts and does not block document rendering, that is, asynchronous loading. Asynchronous scripts are not guaranteed to execute in the order they appear on the page.
By using the element, you can specify content to be displayed when the browser does not support scripts. If the browser supports and enables scripting, nothing within the element will be rendered.

?♂? Blogger’s motto: Born toward the sun, I’m still on the road!
—————————-
The blogger wants to say: We will continue to export our own resources to the community, and at the same time witness our own progress!
—————————-
?♂? If you have seen this, the blogger hopes to leave your footprints! 【collect! like! Comment! 】
—————————-

<>Element tag

`<>`Element tag