link 样式表是否会阻塞页面内容的展示?取决于浏览器,edge 和 chrome 会,但 firefox 不会。

经过实测:

在 head 中 link 一个 1M 大小的样式表。设置网络下载时间大概为 10 秒。

  • edge 和 chrome 只有在下载完样式表后,页面上才会出现内容。
  • 而 firefox 可以直接先显示内容,然后等待样式表下载完成后再应用样式。

DOMContentLoaded 事件永远在下载完样式表后才触发。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

补充1

DOM 树中,明明元素已经有了,但 edge 和 chrome 就是不显示出来:
在这里插入图片描述

补充2

DOMContentLoaded 不会等待样式表的解析完成。但 load 会等待
在这里插入图片描述
在这里插入图片描述

补充3

firefox 的解析方式,应该是直接边解析边渲染的。因为当我将 html 文档变大后,它依旧能够在下载完 html 文档之前,将已有内容展示出来。

将元素放在样式之前(样式中添加了 500k 大小的注释信息),此时可以很快的渲染出结果:
在这里插入图片描述
将元素放在样式之后,则变慢了:
在这里插入图片描述

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

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

相关文章

Vue指令之v-for

跟其他语言中的for一样,是用来渲染多个类似实例的。 语法为v-for"(item, index) in 可迭代对象",一般就用于遍历数组。这里的语法跟Python中的for循环enumerate也有点相似之处,但要注意item在前,index在后,…

探索Java学习的精华:必备资料分享

239程序员职业规划手册 238手把手带你写一个MiniTomcat 237Rust语言从入门到实战 236超级访谈:对话道哥 235LangChain实战课 234云时代的JVM原理与实战 233AI大模型系统实战 231AI绘画核心技术与实战【未完整】 Java核心技术面试精讲 从0开始学架构 推荐系统三十六式…

CommandLineRunner解释学习

目录 一、CommandLineRunner介绍 1.1 接口定义 1.2 工作原理 二、CommandLineRunner作用 三、CommandLineRunner使用方式 3.1 实现CommandLineRunner 3.2 配置Spring Boot项目 四、完整代码地址 小剧场:坚持不懈! 一、CommandLineRunner介绍 Co…

anaconda配置虚拟python环境

使用conda create命令 举例: 创建一个名为breed的新环境,并在其中安装python 3.7版本的步骤: 创建虚拟环境 conda create --name breed python3.7激活新创建的环境: conda activate breed查看存在的虚拟环境 conda env list退…

复杂度3 二分查找函数

文章预览&#xff1a; 题目算法代码 题目 算法 本题要求用二分法查找顺序表的一个值&#xff0c;比较简单注意指针格式即可 代码 Position BinarySearch( List L, ElementType X ) {int begin1,mid;int endL->Last;ElementType temp;while(begin<end){mid(beginend)/2…

【Spring Security】 快速入门

文章目录 一、 身份认证Demo1、创建工程2、代码编写2.1、Controller2.2、Html2.3、application.properties配置 3、启动项目并访问 二、Spring Security 默认做了什么二、底层原理1.概述2.FiltersDelegatingFilterProxyFilterChainProxySecurityFilterChainSecurity Filters 三…

Java学习指南:从基础到进阶,一篇文章带你全面了解!

一、Java语言概述 Java是一种面向对象的编程语言&#xff0c;它不仅吸收了C语言的各种优点&#xff0c;还摒弃了C里难以理解的多继承、指针等概念。Java语言具有功能强大和简单易用两个特征&#xff0c;即Java语言作为静态面向对象编程语言的代表&#xff0c;极好地实现了面向…

vue3-pinia使用(末尾有彩蛋)

什么是 pinia Pinia 是 Vue 的专属状态管理库&#xff0c;它允许你跨组件或页面共享状态。 之前用的是 vuex&#xff0c;后面 vue 官方团队不维护了&#xff0c;推荐使用 pinia 安装 yarn add pinia # 或者使用 npm npm install piniapnpm install piniaStore 是什么&#xf…

实验一 Python集成开发环境的搭建及可视化库的安装

一、安装集成开发环境 下载安装包 官方网址&#xff1a; Free Download | Anaconda 或者镜像网站下载&#xff08;较快&#xff09; https://repo.anaconda.com/archive/ 安装 配置环境变量 验证 输入&#xff1a; conda -V 二、下载pyecharts环境 点击 Anaconda Promp…

探索实战课程的魅力

在当今迅速变化的时代&#xff0c;学习不仅仅是获取知识&#xff0c;更是掌握实用技能的关键。随着在线学习的兴起&#xff0c;实战课程在培养学生实践能力方面发挥着越来越重要的作用。本文将探讨实战课程的魅力&#xff0c;以及它们对个人职业发展的巨大影响。 深度学习的机…

spring-boot之shiro安全框架配置使用

shiro架构&#xff08;外部&#xff09; shiro架构(内部) 具体API操作 获取当前的用户对象 Subject currentUser SecurityUtils.getSubject();通过当前用户拿到session Session session currentUser.getSession(); session.setAttribute("someKey", "aValu…

微信公众号运营必备工具合集

微信公众号运营必备工具合集 各位同学&#xff0c;想要成为一名合格的公众号运营&#xff0c;必须要搭建一个属于自己的运营工具库&#xff0c;可以在日常工作中最大限度的提高效率。 91微信编辑器 &#xff1a;http://bj.91join.com/ 壹伴助手&#xff1a;https://yiban.io…

在assembleRelease之前执行自定义任务

背景 在实际的Gradle项目开发中&#xff0c;我们总是会遇到一些需求&#xff0c;要在release编译的时候执行一些任务&#xff0c;但debug时不需要。然而&#xff0c;Gradle编译有自己的一套生命周期&#xff0c;比如Android项目的assembleRelease任务在编译启动之前是没有办法…

下载及安装PHP,composer,phpstudy,thinkPHP6.0框架

文章目录 前言 thinkPHP是一款开源的PHP框架&#xff0c;它是基于MVC&#xff08;Model-View-Controller&#xff09;设计模式构建的。thinkPHP提供了丰富的功能和组件&#xff0c;使得开发人员可以快速、高效地构建和维护Web应用程序。 以下是thinkPHP框架的一些特点和功能&…

2023年欧亚地区网络安全态势综述

文 | 中国社会科学院俄罗斯东欧中亚研究所研究员 肖斌&#xff1b;中国社会科学院大学国际政治经济学院研究助理 刘聪 网络安全问题是一个复杂的问题&#xff0c;不仅涉及技术发展&#xff0c;也包含诸多政治色彩。尽管数字空间拉近了互联用户的距离&#xff0c;但是在国际政治…

上位机图像处理和嵌入式模块部署(qmacvisual测量标定)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 在机器视觉中,测量是很重要的一个环节。如果是简单的定位,可能精度要求并不那么严格。但是如果是对产品进行QA测量,需要精确到0.1mm,甚至是0.05mm这样的精度,那就需要对camera…

蓝队面经(一)

蓝队面经(一) 文章目录 蓝队面经(一)入侵排查思路windows入侵排查思路Linux入侵排查思路 Linux 如何查看登录日志Windows 和 Linux 的日志文件放在哪里&#xff1f;WindowsLinux Linux 常用排查命令有哪些&#xff1f;Linux 的 Selinux 是什么&#xff1f;如何设置 Selinux&…

【Leetcode】2952. 需要添加的硬币的最小数量

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517; 给你一个下标从 0 0 0 开始的整数数组 c o i n s coins coins&#xff0c;表示可用的硬币的面值&#xff0c;以及一个整数 t a r g e t target target 。 如果存在某个 c o i …

剑指Offer题目笔记21(计数排序)

面试题74&#xff1a; 问题&#xff1a; ​ 输入一个区间的集合&#xff0c;将重叠的区间合并。 解决方案&#xff1a; ​ 先将所有区间按照起始位置排序&#xff0c;然后比较相邻两个区间的结束位置就能知道它们是否重叠。如果它们重叠就将它们合并&#xff0c;然后判断合并…

精选2024年最佳项目管理系统!实用推荐与详细评测

随着企业规模的扩大&#xff0c;项目量也会呈几何倍的增长&#xff0c;项目管理系统就成了企业管理必不可少的一部分。2024年优秀的项目管理系统推荐。今年为大家带来Microsoft Project、Zoho Projects、Jira以及Wrike项目管理系统评测。 什么是项目管理系统&#xff1f; 项目…