Open
Description
第25天 请说说<script>、<script async>和<script defer>的区别
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
{{ message }}
No one assigned
No type
No projects
No milestone
None yet
Activity
[-][html] 第24天 请说说<script>、<script async>和<script defer>的区别[/-][+][html] 第25天 请说说<script>、<script async>和<script defer>的区别[/+]yxkhaha commentedon May 11, 2019
Mojitooooooooo commentedon May 11, 2019
naokimidori commentedon May 11, 2019
tzjoke commentedon May 28, 2019
Konata9 commentedon Aug 9, 2019
单纯的
<script>会阻塞 DOM 的渲染，如果放在<head>标签中，对页面的显示会有延迟。如果是用过src引入外部资源时，浏览器会先停止解析下载外部资源，之后再执行其中的javaScript（即立即加载并渲染）。在添加
async或者defer之后，<script>的下载不会阻塞 DOM 的渲染。两者的区别如下：async在脚本下载完成后立即执行（此时会阻塞 DOM 的渲染），并且多个async脚本存在时，执行的顺序取决于下载完成的顺序。因此对于有前后依赖关系的脚本（比如 jQuery 以及依赖 jQuery 的组件库，就不适合async）defer在的脚本执行放在 DOM 渲染之后（对于老的浏览器如果不支持defer就不行了）。并且多个脚本时，其执行顺序时按照引入顺序执行的。比较符合实际项目众多的需求，但为了兼容老版本浏览器，最佳的实践还是把<script>放在</body>前。三者在浏览器渲染时的区别：
参考文章：
スクリプトの非同期読み込み(async, defer の違い)
defer 和 async 的区别
690797590 commentedon Nov 6, 2019
参照图解：https://camo.githubusercontent.com/3cfc9c7f3ff4185cd5c2d9d40c03e942b98c6dfd/68747470733a2f2f692e737461636b2e696d6775722e636f6d2f77664c38322e706e67
1.script在执行的时候会阻塞 DOM 的渲染。
2.页面内内联的script标签，加载时立即执行所以会阻塞下面页面的渲染。
3. async异步加载，加载成功立即执行。
4. defer异步加载，但等到文档加载完成后才执行。
5.async、defer这两个属性无法应用于内联script。
powerdong commentedon Mar 1, 2020
默认情况下加载script标签内容会阻塞后边代码的执行，加载后立即执行
defer属性表明脚本在执行时不会影响页面的构造，脚本会被延迟到整个页面解析完毕后在运行（延迟执行，异步加载）
async属性只适合与外部脚本文件，标记为async的脚本并不保证按照指定他们的先后顺序执行（加载完就执行）
blueRoach commentedon Jun 19, 2020
<script>从上到下依次执行加载，需要等待此脚本加载完成时再进行后续加载，会阻塞后续执行
<script async>加载时可以继续往下执行，异步的
<script defer>遇到此标签时，延时到页面加载完成后执行，异步的
CoderLeiShuo commentedon Aug 3, 2020
细说异步加载和延迟加载
说到
<script>标签，那么它是具有两个属性的，async异步加载和defer延迟加载<script>当
script标签放在head中，并且这个script标签只有scr属性引入外部js文件的情况下，HTML文件开始渲染，直到命中script标签，此时解析将停止，并发现一个请求获取该文件并执行。执行结束之前继承渲染HTML标签。<script async>async表示的意思是异步加载JavaScript文件。使用
async会在HTML解析期间下载文件，并在下载完成后暂停HTML的解析，执行下载的外部js文件，执行后继续解析HTML。<script defer>defer表示的意思是在HTML文档解析之后在执行加载完成的JavaScript文件。它和
async的区别是，同样在HTML解析期间下载外部的js文件，但是下载完成后不会立即执行js脚本文件，而是等到HTML解析完成后才执行它。即在DOMContentLoaded之间执行已下载的外部js文件smile-2008 commentedon Sep 25, 2020
Iambecauseyouare commentedon Mar 10, 2023
script是最常见的引入JavaScript文件的方式，当浏览器遇到script标签时，它会停止解析文档，去下载并执行脚本文件，因此JavaScript文件很大或加载速度过慢，就会影响页面的加载速度
script async 标签用于异步加载JavaScript文件，在下载JavaScript文件的同时继续解析HTML网页，但异步加载不能保证按照引入顺序执行
script defer 异步加载，但它能保证按顺序执行代码，同async一样，但如果文件非常大或者加载速度慢，也会造成页面加载较慢
never123450 commentedon Sep 4, 2023
<script>、<script async>和<script defer>是HTML中用于引入JavaScript代码的标签，它们之间有一些区别。<script>标签：这是最常见的引入JavaScript代码的方式。当浏览器遇到<script>标签时，会立即停止解析HTML，并开始下载并执行JavaScript代码。默认情况下，<script>标签会阻塞页面的解析和渲染，直到JavaScript代码执行完毕。<script async>标签：使用async属性的<script>标签告诉浏览器在下载JavaScript文件时可以继续解析HTML，而无需等待JavaScript文件下载和执行完成。这意味着页面的解析和渲染不会被阻塞。一旦JavaScript文件下载完成，浏览器会立即执行它。多个<script async>标签之间的执行顺序是不确定的，因此如果有依赖关系，需要谨慎使用。<script defer>标签：使用defer属性的<script>标签告诉浏览器在下载JavaScript文件时可以继续解析HTML，但是会推迟JavaScript代码的执行，直到HTML解析完成后再执行。多个<script defer>标签之间的执行顺序是按照它们在文档中出现的顺序执行的。这使得可以安全地在HTML中引入多个脚本文件，并确保它们按照正确的顺序执行。总结：
<script>标签会阻塞页面的解析和渲染，直到JavaScript代码执行完毕。<script async>标签允许页面的解析和渲染继续进行，不会阻塞，但是执行顺序不确定。<script defer>标签允许页面的解析和渲染继续进行，不会阻塞，并且保证按照顺序执行。根据具体的需求和场景，选择适合的标签和属性来引入JavaScript代码，以达到最佳的性能和用户体验。