web前端全系列 教程
1839个小节阅读:2243.3k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
浏览器加载 JavaScript 脚本,主要通过<script>
元素完成。正常的网页加载流程是这样的
<script>
元素,就暂停解析,把网页渲染的控制权转交给 JavaScript 引擎<script>
元素引用了外部脚本,就下载该脚本再执行,否则就直接执行代码加载外部脚本时,浏览器会暂停页面渲染,等待脚本下载并执行完成后,再继续渲染。原因是 JavaScript 代码可以修改 DOM,所以必须把控制权让给它,否则会导致复杂的线程竞赛的问题。
如果外部脚本加载时间很长(一直无法完成下载),那么浏览器就会一直等待脚本下载完成,造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。
为了避免这种情况,较好的做法是将<script>
标签都放在页面底部,而不是头部。这样即使遇到脚本失去响应,网页主体的渲染也已经完成了,用户至少可以看到内容,而不是面对一张空白的页面。
为了解决脚本文件下载阻塞网页渲染的问题,一个方法是对<script>
元素加入defer
属性。它的作用是延迟脚本的执行,等到 DOM 加载生成后,再执行脚本
xxxxxxxxxx
<script src="./js/index.js" defer></script>
defer
属性的运行流程如下
defer
属性的<script>
元素<script>
元素加载的外部脚本有了defer
属性,浏览器下载脚本文件的时候,不会阻塞页面渲染
解决“阻塞效应”的另一个方法是对<script>
元素加入async
属性
xxxxxxxxxx
<script src="./js/index1.js" async></script>
<script src="./js/index.js" async></script>
async
属性的作用是,使用另一个进程下载脚本,下载时不会阻塞渲染
async
属性的script
标签<script>
标签中的外部脚本async
属性可以保证脚本下载的同时,浏览器继续渲染。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本
一般来说,如果脚本之间没有依赖关系,就使用async
属性,如果脚本之间有依赖关系,就使用defer
属性。如果同时使用async
和defer
属性,后者不起作用,浏览器行为由async
属性决定
实时效果反馈
1. 加载JS外部文件,script
中async
和defer
的描述错误的是:
A defer
属性,浏览器下载脚本文件的时候,不会阻塞页面渲染
B async
属性的作用是,使用另一个进程下载脚本,下载时不会阻塞渲染
C 脚本之间没有依赖关系,就使用async
属性,如果有依赖关系,就使用defer
属性
D async
和defer
都会阻塞页面渲染
答案
1=>D