1. The built-in scripting language is JavaScript. In other words, the browser has a built-in JavaScript engine and provides various interfaces so that JavaScript scripts can control various functions of the browser. Once the JavaScript script is embedded in the web page, the browser will execute the script when loading the web page, so as to achieve the purpose of operating the browser and realize various dynamic effects of the web page.
<script id="mydata" type="x-custom-data">
console.log('Hello World');
</script>
/*
type It can be omitted. When omitted, it defaults to text/javascript
If the value of the type attribute is set to be unknown to the browser, it will not execute the code in it. Using this, you can embed any text content in the < script > tag, as long as you add a type attribute that the browser does not recognize.
*/
2. In order to prevent an attacker from tampering with an external script, the script tag allows to set an integrity attribute and write the Hash signature of the external script to verify the consistency of the script.
<script src="/assets/application.js" integrity="sha256-TvVUHzSfftWg1rcfL6TIJ0XKEGrgLyEq6lEpcmrG9qs="> </script> /* * `integrity`At least one string starting with the value. Each string includes prefixes' sha256 ',' sha384 'and' sha512 'indicating a specific hash algorithm (currently allowed prefixes), and then ends with a dash and an actual base64 encoded hash. * Can be generated by tools */
In the above code, the script tag has an integrity attribute that specifies the external script / assets / application SHA256 signature of JS. Once someone changes the script, resulting in a SHA256 signature mismatch, the browser will refuse to load.
3. URL payment javascript: protocol, which means that the JavaScript code will be executed when the URL is used
<a href="javascript:console.log('Hello')">click</a>
The address bar of the browser can also execute javascript: protocol. Javascript: console Log ('Hello ') into the address bar and pressing enter will also execute this code.
script element
When the external script is loaded, the browser will pause the page rendering and wait for the script to download and execute before continuing rendering. The reason is that JavaScript code can modify DOM, so you must give control to it, otherwise it will lead to complex thread race.
If the external script takes a long time to load (the download cannot be completed all the time), the browser will wait for the script to download, causing the web page to lose response for a long time, and the browser will show a "fake death" state, which is called "blocking effect".
To avoid this, it's better to put < script > tags at the bottom of the page instead of the head.
If some script code is very important and must be placed at the head of the page, it is better to write the code directly to the page rather than connect to the external script file, which can shorten the loading time.
- solve script Put it on your head, DOM Call before structure generation DOM node
<!-- Method 1: setting DOMContentLoaded Callback function for event -->
<head>
<script>
document.addEventListener(
'DOMContentLoaded', //The DOMContentLoaded event will be triggered only after the DOM structure is generated, so this script will not report an error if it is placed at the head of the web page
function (event) {
console.log(document.body.innerHTML);
}
);
</script>
</head>
<body>
</body>
<!-- Method 2: use<script>Tagged onload attribute -->
<script src="jquery.min.js" onload="console.log(document.body.innerHTML)">
</script>
<!-- When<script>When the external script file specified by the tag is downloaded and parsed, a load Event, you can put the code to be executed in the callback function of this event. -->
For resources from the same domain name, such as script files, style sheet files, picture files, etc., browsers are generally limited. At most 6 ~ 20 resources can be downloaded at the same time, that is, there are restrictions on the TCP connections that can be opened at most at the same time, in order to prevent too much pressure on the server. If it is resources from different domain names, there is no such restriction. Therefore, static files are usually placed under different domain names to speed up the download speed.
defer attribute
In order to solve the problem that script file download blocks web page rendering, one method is to add the defer attribute to the < script > element. Its function is to delay the execution of the script until the DOM is loaded and generated.
<script src="a.js" defer></script> <script src="b.js" defer></script> //For script tags that are built-in rather than loaded with external scripts, and dynamically generated script tags, the defer attribute does not work. In addition, external scripts loaded with defer should not use document Write method.
- The browser starts parsing HTML pages.
- During parsing, < script > element with defer attribute was found.
- The browser continues to parse the HTML web page and download the external script loaded by the < script > element in parallel.
- When the browser finishes parsing the HTML web page, go back and execute the downloaded script.
async attribute
Another way to solve the "blocking effect" is to add the async attribute to the < script > element.
<script src="a.js" async></script> <script src="b.js" async></script> //The async attribute is used to download the script using another process without blocking the rendering //Async attribute can ensure that the browser continues to render while the script is downloaded. It should be noted that once this attribute is adopted, the execution order of the script cannot be guaranteed. Whichever script is downloaded first, execute that script first. In addition, the code in the script file using async attribute should not use document Write method.
- The browser starts parsing HTML pages.
- During parsing, a script tag with async attribute was found.
- The browser continues to parse the HTML web page and download the external script in the < script > tag in parallel.
- After the script download is completed, the browser pauses parsing the HTML web page and starts to execute the downloaded script.
- After the script is executed, the browser resumes parsing HTML web pages.
Generally speaking, if there is no dependency between scripts, use the async attribute. If there is a dependency between scripts, use the defer attribute. The behavior is determined by the browser's async attribute, and if the latter is not used at the same time, the async attribute will work.
Dynamic loading script
['a.js', 'b.js'].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false; //Set the async attribute to false to let the script execute according to the order, rather than whoever downloads first
document.head.appendChild(script);
});
- Specifies a callback function for dynamically loaded scripts
function loadScript(src, done) {
var js = document.createElement('script');
js.src = src;
js.onload = function() {
done();
};
js.onerror = function() {
done(new Error('Failed to load script ' + src));
};
document.head.appendChild(js);
}
Load usage protocol
// Download using HTTP protocol by default <script src="example.js"></script> // Download using HTTPS <script src="https://example.js"></script> // The loading protocol is determined according to the protocol of the page itself <script src="//example.js"></script>
browser
The core of the browser is two parts: rendering engine and JavaScript interpreter (also known as JavaScript engine)
rendering engine
The main function of rendering engine is to render the web page code into a flat document that users can perceive visually.
Different browsers have different rendering engines.
- Firefox: Gecko engine
- Safari: WebKit engine
- Chrome: Blink engine
- IE: Trident engine
- Edge: EdgeHTML engine
The rendering engine usually processes Web pages in four stages. These four stages are not executed in strict order, so there will be html code of the page that has not been downloaded, but the browser has content.
- Parsing code: HTML code is parsed into DOM, and CSS code is parsed into CSSOM (CSS Object Model).
- Object synthesis: synthesize DOM and CSSOM into a render tree.
- Layout: calculate the layout of the rendering tree.
- Draw: draws the render tree to the screen.
JavaScript engine
The main function of JavaScript engine is to read the JavaScript code in the web page, process it and run it.
JavaScript is an interpretive language, that is, it does not need to be compiled and is run in real time by the interpreter. The advantage of this is that it is convenient to run and modify, and you can reinterpret it by refreshing the page; The disadvantage is that the interpreter must be called every time it runs, which has large system overhead and runs slower than compiled language.