Detailed explanation of usage examples of classic and non-blocking tags
The <script> tag in modern browsers is divided into two new types: classic and non-blocking. Let’s discuss how to use these two tags to load pages as quickly as possible. </script>
1. Where will blocking scripts go?
The standard version of the <script> tag is often called a blocking tag. This term must be understood in context: when modern browsers see a blocking <script> tag, they skip the blocking point and continue reading the document and downloading other resources (scripts and stylesheets). But the browser won't evaluate those resources beyond the choke point until the script is downloaded and run. Therefore, if a web document has five blocking <script> tags within its <head> tag, the user will see nothing but the page title until all five scripts have been downloaded and run. Not only that, but even if these scripts run, they can only see the portion of the document before the blocking point. If you want to see all the goodies waiting to be loaded in the <body> tag, you have to bind an event handler to an event like document.onreadystatechange. </script>
Based on the above reasons, it is becoming more and more popular to place scripts at the end of the
tag on the page. In this way, on the one hand, users can see the page faster, and on the other hand, scripts can also actively access the DOM without waiting for events to trigger themselves. For most scripts, this "move" is a huge improvement.But not all scripts are the same. Before moving down the script, ask yourself 2 questions.
Is it possible that this script is called directly by inline JavaScript in the
tag? The answer may be obvious, but it’s worth checking.Will this script affect the appearance of the rendered page? Typekit host fonts are one example. If you place the Typekit script at the end of the document, the page text will be rendered twice, immediately when the document is read, and again when the script is run.
As long as one of the answers to the above questions is yes, then the script should be placed in the
tag, otherwise it can be placed in the tag. The document shape is:<html> <head> <!--metadata and stylesheets go here --> <script src="headScripts.js"></scripts> </head> <body> <!-- content goes here --> <script src="bodyScripts.js"></script> </body> </html>
This does significantly improve load times, but be aware that this may give the user a chance to interact with the page before bodyScripts.js is loaded.
2. Early loading and delayed running of scripts
It is recommended to place most scripts in
, because this will not only allow users to see the web page faster, but also Avoid the overhead of binding the "ready" event before manipulating the DOM. But this approach also has the disadvantage that the browser cannot load these scripts until the entire document has been loaded, which can be a bottleneck for large documents sent over slow connections.Ideally, the loading of the script should be done simultaneously with the loading of the document and not affect the rendering of the DOM. This way, you can run the script once the document is ready because the scripts have already been loaded in the order of the <script> tags. </script>
If you have read this far, you must be eager to write a custom Ajax script loader to meet such needs! However, most browsers support a simpler solution.
<script defer src = "deferredScript.js">
Adding the defer (delay) attribute is equivalent to saying to the browser: "Please start loading this script now, but please wait until the document is ready and all previous scripts with the defer attribute have finished running before running it. "Putting a delayed script in the document's
tag not only brings all the benefits of placing the script in the tag, but also greatly improves the loading speed of large documents!The disadvantage is that not all browsers support the defer attribute. This means that if you want to ensure that your deferred script can run after the document is loaded, you must encapsulate all the deferred script code in a structure such as jQuery's $(document).ready.
The page example in the previous section is improved as follows:
<html> <head> <!-- metadata and stylesheets go here --> <script src="headScripts.js"></scripts> <script defer src="deferredScripts.js"></script> </head> <body> <!-- content goes here --> </body> </html>
Please remember that the encapsulation of deferredScripts is important, so that even if the browser does not support defer, deferredScripts will not run until after the document ready event. If the main content of the page is much larger than a few kilobytes, it's totally worth the price.
3. Parallel loading of scripts
If you are a perfectionist who cares about page loading time in milliseconds, then defer may be like tasteless soy sauce. You don't want to wait until all previous defer scripts have finished running, and you certainly don't want to wait until the document is ready before running these scripts. You just want to load and run these scripts as quickly as possible. This is why modern browsers provide the async attribute.
<script async src = "speedyGonzales.js"> <script async src = "roadRunner.js">
如果说defer 让我们想到一种静静等待文档加载的有序排队场景，那么async 就会让我们想到混乱的无政府状态。前面给出的那两个脚本会以任意次序运行，而且只要JavaScript 引擎可用就会立即运行，而不论文档就绪与否。
对大多数脚本来说，async 是一块难以下咽的鸡肋。async 不像defer那样得到广泛的支持。同时，由于异步脚本会在任意时刻运行，它实在太容易引起海森堡蚁虫之灾了（脚本刚好结束加载时就会蚁虫四起）。
当我们加载一些第三方脚本，而且也不在乎它们谁先运行谁后运行。因此，对这些第三方脚本使用async 属性，相当于一分钱没花就提升了它们的运行速度。
上一个页面示例再添加两个独立的第三方小部件，得到的结果如下：
<html> <head> <!-- metadata and stylesheets go here --> <script src="headScripts.js"></scripts> <script src="deferredScripts.js" defer></script> </head> <body> <!-- content goes here --> <script async defer src="feedbackWidget.js"></script> <script async defer src="chatWidget.js"></script> </body> </html>
这个页面结构清晰展示了脚本的优先次序。对于绝大多数浏览器，DOM的渲染只会延迟至headScripts.js 结束运行时。进行DOM渲染的同时会在后台加载deferredScripts.js。接着，在DOM 渲染结束时将运行deferredScripts.js 和那两个小部件脚本。这两个小部件脚本在那些支持async 的浏览器中会做无序运行。如果不确定这是否妥当，请勿使用async！
The above is the detailed content of Detailed explanation of usage examples of classic and non-blocking tags. For more information, please follow other related articles on the PHP Chinese website!
From Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AMJavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.
Python vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AMPython is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.
The Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AMC and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.
JavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AMJavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.
JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AMThe main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.
Understanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AMUnderstanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.
Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AMPython is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AMPython and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Dreamweaver CS6
Visual web development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
