HTML中的资源提示关键词

渲染阻塞问题

之前在学习浏览器的渲染原理的时候我们就知道:因为浏览器一次只能开启一个渲染主线程,所以当浏览器解析到script标签时会停止DOM树的构建,转而去执行script,如果script中引用的是外部脚本,则浏览器会先从网络上下载script,下载完毕后执行script,当script执行完毕之后继续构建DOM树

DOM树作为外部脚本访问DOM节点的接口,当我们调用诸如 document.getElementById 的方法时,返回的元素是一个 DOM 节点。每个 DOM 节点都有许多可以用来访问和更改它的函数,用户看到的内容也会相应地发生变化

因为script中的代码能动态的修改DOM树中的节点,所以在浏览器解析到script标签时必须先停止DOM树的构建,在执行完script之后继续开始构建DOM树,这也是为什么我们写html时script标签总是放在body标签最后
浏览器不仅会在解析HTML的时候构建DOM树,还会在解析CSS的时候构建CSSOM树,那么在构建CSSOM树的时候会发生渲染阻塞吗

事实上,因为CSSOM并不会更改DOM,所以构建CSSOM本身并不能阻塞渲染,但在JavaScript中我们能动态的访问与修改元素的CSS,而在运行script时如果CSSOM尚未构建完成则浏览器会转而构建CSSOM,等CSSOM构建完成后再运行script

无样式内容闪现

无样式内容闪现,简称为FOUC,在浏览器构建完整个DOM,CSSOM尚未构建完时,页面会短暂的展示一个没有CSS的页面,但当CSSOM构建完成后页面就会变成有CSS样式的样子,这种突然的视觉变化被称为无内容闪现

无内容闪现会给用户带来极其不好的体验,为了尽量避免这种情况的发生,我们通常会将CSS放在HTML顶部,这样当浏览器解析HTML文档时会首先解析CSSOM,然后再解析DOM

然而由script标签所带来的阻塞渲染问题依旧没有解决,随着浏览器的日渐成熟,浏览器也为我们提供了属性或值,这些属性或值被称为资源提示关键词,通过使用这些关键词我们就能很好的处理阻塞渲染的问题

defer与async

defer和async都是script标签的一个布尔属性,他们都能实现避免渲染阻塞问题的发生,但具体又有些细微的不同

defer

<script type="text/javascript" defer src="./index.js"></script>

在script标签中的defer属性,如果为true的话浏览器会推迟这段script的执行,浏览器会在文档被解析后,但在触发 DOMContentLoaded 事件之前执行

需要注意的是,defer的是否生效与该script元素的src属性是否设置密切相关

async

<script type="text/javascript" async src="./index.js"></script>

async属性同样是个布尔属性,如果是普通脚本,那么普通脚本会被并行请求,并尽快解析和执行。如果是模块脚本,它们也会被并行请求,并尽快解析和执行,也就是说,在下载JavaScript脚本的过程中并不会导致渲染阻塞,但执行JavaScript代码时依旧会阻塞DOM树的构建

总结:

  1. 如果该script元素的src属性为空,则defer和async属性不生效
  2. 如果该script元素的type属性为空或者为一个JavaScript MIME类型时,该script为普通脚本,普通脚本会受到defer和async的影响,但这些的前提为src属性不为空
  3. 如果该script元素的type属性为module时,该script为JavaScript模块脚本,该类型脚本不受defer的影响,但会受到async的影响,与src属性无关
  4. 如果该script元素的type属性为其他值时则defer和async属性不生效
  5. 即使已经指定了async属性,也可以同时指定defer属性,从而可以使不支持async属性的浏览器通过defer来避免渲染阻塞的发生

渲染阻塞

preload

<link rel="preload" href="./index.css" as="style">
<link rel="preload" href="./index.js" as="script">

preload是link元素的rel属性值,该属性可以通过显示声明一个资源来告诉浏览器这个资源需要首先加载,而不是用的时候再加载,从而使在之后用到这个资源的时候无需等待加载,可以直接使用,preload通过as属性来指定预加载资源的类型
使用preload有如下优点:

  1. 使用preload我们可以将重要的资源提前加载,从而提高页面的流畅性
  2. 通过as属性,浏览器可以决定哪些资源能够复用
  3. 通过as属性,浏览器可以判断请求是否符合内容安全策略(CSP,如XSS,数据注入攻击等)

prefetch与prerender

这两个关键词都是link元素rel的属性值,与preload类似,但这两个关键词会在空余时间执行

prefetch

<link rel="prefetch" href="./message.css" as="style">

prefetch会在页面的空余时间来加载指定的资源,通过prefetch获取的资源通常会被放入缓存至少5分钟,当页面跳转时已发送的prefetch也不会中断
prefetch通常用于请求除首页外的其他页面资源,通过prefetch我们可以提高首屏后其他页面的渲染速度

prerender

<link rel="prerender" href="https://www.baidu.com" as="style">

prerender和prefetch类似,但prerender会在页面空余时间直接加载整个页面,而不是某个资源

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/854389.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL Server和Server启动程序(一)

MySQL Server mysqld&#xff0c;也称为MySQL Server&#xff0c;是一个单线程多任务的程序&#xff0c;它在MySQL安装中执行大部分工作。它不会生成额外的进程。MySQL Server管理对包含数据库和表的MySQL数据目录的访问。数据目录也是其他信息&#xff08;如日志文件和状态文…

目标检测:NMS代码

非极大值抑制NMS是目标检测常用的后处理算法&#xff0c;用于剔除冗余检测框 总体概要&#xff1a; 对NMS进行分类&#xff0c;大致可分为以下六种&#xff0c;这里是依据它们在各自论文中的核心论点进行分类&#xff0c;这些算法可以同时属于多种类别。 分类优先&#xff1a;…

基于mysqlbinlog恢复数据

1、把binlog转换为SQL mysqlbinlog --base64-outputdecode-rows -vv /usr/local/mysql/log-bin/mysql-bin.000003 >result.sql find / -name result.sql 2、查看events show binlog events in mysql-bin.000003; 3、回滚到3667那一行的数据 mysqlbinlog -v /usr/local/mys…

Linux中手动配置Java jdk17环境

1、下载jdk二进制文件 点击官网地址&#xff1a;jdk-17_linux-x64_bin.tar.gz 或者使用wget下载 wget https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.tar.gz -P /usr/local/src/2、解压文件 tar zxvf jdk-17_linux-x64_bin.tar.gz3、修改配置 打开文件…

专业学习|博弈论-课程沿革

学习来源&#xff1a;北京大学刘霖《博弈论》MOOC公开课 备注&#xff1a;仅做学习分享&#xff0c;请勿转载&#xff0c;转载必究&#xff01; &#xff08;一&#xff09;博弈论的预备知识 基本的微积分的知识和概率论的知识。简单的说会求导数&#xff0c;会求简单的积分&am…

消息队列-Rabbit运行机制

Producer(生产者) 和 Consumer(消费者) Producer(生产者) :生产消息的一方&#xff08;邮件投递者&#xff09;Consumer(消费者) :消费消息的一方&#xff08;邮件收件人&#xff09; 消息一般由 2 部分组成&#xff1a;消息头&#xff08;或者说是标签 Label&#xff09;和 …

【已解决】chrome视频无法自动播放的问题

问题&#xff1a; 在用datav开发大屏的时候&#xff0c;放了一个视频组件&#xff0c;但是发现视频组件即使设置了自动播放&#xff0c;仍然无法自动播放 原因&#xff1a; 76 以上版本的谷歌浏览器只能在系统静音下自动播放 解决&#xff1a; 音频自动播放浏览器白名单设置&…

kafka在windows上的启动

启动zookeeper 解压kafka安装包到对应目录下&#xff0c;找到对应config目录下的zookeeper.properties文件 新建一个data文件夹&#xff0c;随便放哪 打开该文件&#xff0c;找到 dataDir/tmp/zookeeper 属性 将原来的属性值&#xff0c;修改为新建data文件夹地址&#xff0c;…

如何修改倍福CX7000PLC IP地址

我们可以通过登录网页修改PLC的IP地址,这个需要我们知道PLC的初始IP地址 1、浏览器直接输入PLC 的IP地址 2、点击修改按钮(就是那个旋转) 修改IP地址前DHCP要先disable关闭 。 3、DHCP关闭 4、点击保存 5、在CAT3里搜索 在SYSTEM双击,之后点击搜索,具体过程可以参考下…

【html】如何利用id选择器实现主题切换

今天给大家介绍一种方法来实现主题切换的效果 效果图&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initia…

充电学习—5、healthed 电池服务

1、healthed服务监听接收内核kernel的电池事件&#xff0c;然后上传数据给framware层的batterysevice&#xff0c;BatteryService计算电池的电量&#xff0c;显示&#xff0c;绘制动画等 android电池系统框架&#xff1a; 2、healthd服务入口&#xff1a;android/system/cor…

2024年设计、数字化技术与新闻传播国际学术会议(ICDDTJ 2024)

2024年设计、数字化技术与新闻传播国际学术会议(ICDDTJ 2024) 2024 International Conference on Design, Digital Technology and Journalism 会议地点&#xff1a;哈尔滨&#xff0c;中国 网址&#xff1a;www.icddtj.com 邮箱: icddtjsub-conf.com 投稿主题请注明:ICDD…

python之Bible快速检索器

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! python之Bible快速检索器 TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、心进取&#xff01; 助力快…

CSS入门基础2

目录 1.标签类型 2.块元素 3.行内元素 4.行内块元素 5.标签行内转换 6.背景样式 1.标签类型 标签以什么方式进行显示&#xff0c;比如div 自己占一行&#xff0c; 比如span 一行可以放很多个HTML标签一般分为块标签和行内标签两种类型&#xff1a; 块元素行内元素。 2.块…

数据结构进阶——AVL树

数据结构进阶——AVL树 0. 前言1. AVL树的概念2. AVL树节点&#xff0c;和树的定义3. AVL树的插入4. AVL树的旋转5. AVL树的验证6. AVL树的删除&#xff08;了解&#xff09;7. AVL树实现完整代码8. AVL树的性能 0. 前言 学习本章&#xff0c;需要大家先掌握搜索二叉树&#xf…

「6.18福利」精选大厂真题|笔试刷题陪伴|明天正式开屋啦 - 打卡赢价值288元丰厚奖励

&#x1f370;关于清隆学长 大家好&#xff0c;我是清隆&#xff0c;拥有ACM区域赛 银牌&#x1f948;&#xff0c;CCCC天梯赛 国一&#xff0c;PTA甲级 98 分。 致力于算法竞赛和算法教育已有 3 年&#xff0c;曾多次 AK 互联网大厂笔试&#xff0c;大厂实习经验丰富。 打卡…

ai智能语音机器人好不好用,语音识别

智能语音机器人的真正价值是帮助企业解决电销上带来的一些问题&#xff0c;可以提高效率。为电销人员节省大量的时间与精力&#xff0c;提高电销水平&#xff0c;那我们一起来看看智能语音机器人好不好用 1、真人式语音群呼 用智能语音机器人打电话给客户的时候是真人的声音&a…

常见端口大全

常见默认端口 1、HTTP: 80 2、HTTPS: 443 3、FTP: 21 4、FTPS : 990 5、SSH: 22 6、Telnet: 23 7、SMTP: 25 8、DNS : 53 9、DHCP: 67 (服务器), 68 (客户端) 10、TFTP : 69 11、HTTP Alt: 8080 12、POP3: 110 13、 NNTP: 119 14、NTP : 123 15、IMAP: 143 16、SNMP : 161 17、…

国家商用密码算法-SM4Tool.jar

SM4Tool.jar可能是指一个特定的Java工具集&#xff0c;用于实现SM4&#xff08;国家商用密码算法之一&#xff09;的加密和解密功能。SM4是一种分组密码算法&#xff0c;广泛应用于中国的各种安全通信场景中&#xff0c;如金融、电子政务、物联网等。由于我没有直接访问或运行特…

新手如何入门Web3?

一、什么是Web3&#xff1f; Web3是指下一代互联网&#xff0c;它基于区块链技术&#xff0c;致力于将各种在线活动变得更加安全、透明和去中心化。Web3是一个广义的概念&#xff0c;涵盖了包括数字货币、去中心化应用、智能合约等在内的多个方面。它的主要特点包括去中心化、区…