html css加载不了_CSS加载会阻塞页面显示?
可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下。
原理解析
那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下。
不同的浏览器使用的内核不同,所以他们的渲染过程也是不一样的。目前主要有两个:
webkit渲染过程
Gecko渲染过程
从上面两个流程图我们可以看出来,浏览器渲染的流程如下:
- HTML解析文件,生成DOM Tree,解析CSS文件生成CSSOM Tree
- 将Dom Tree和CSSOM Tree结合,生成Render Tree(渲染树)
- 根据Render Tree渲染绘制,将像素渲染到屏幕上。
从流程我们可以看出来
- DOM解析和CSS解析是两个并行的进程,所以这也解释了为什么CSS加载不会阻塞DOM的解析。
- 然而,由于Render Tree是依赖于DOM Tree和CSSOM Tree的,所以他必须等待到CSSOM Tree构建完成,也就是CSS资源加载完成(或者CSS资源加载失败)后,才能开始渲染。因此,CSS加载是会阻塞Dom的渲染的。
- 由于js可能会操作之前的Dom节点和css样式,因此浏览器会维持html中css和js的顺序。因此,样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。
DOMContentLoaded
对于浏览器来说,页面加载主要有两个事件,一个是DOMContentLoaded,另一个是onLoad。而onLoad没什么好说的,就是等待页面的所有资源都加载完成才会触发,这些资源包括css、js、图片视频等。
而DOMContentLoaded,顾名思义,就是当页面的内容解析完成后,则触发该事件。那么,正如我们上面讨论过的,css会阻塞Dom渲染和js执行,而js会阻塞Dom解析。那么我们可以做出这样的假设
- 当页面只存在css,或者js都在css前面,那么DomContentLoaded不需要等到css加载完毕。
- 当页面里同时存在css和js,并且js在css后面的时候,DomContentLoaded必须等到css和js都加载完毕才触发。
我们先对第一种情况做测试:
css阻塞
实验结果如下图:
从动图我们可以看出来,css还未加载完,就已经触发了DOMContentLoaded事件了。因为css后面没有任何js代码。
接下来我们对第二种情况做测试,很简单,就在css后面加一行代码就行了
css阻塞
实验结果如下图:
我们可以看到,只有在css加载完成后,才会触发DOMContentLoaded事件。因此,我们可以得出结论:
- 如果页面中同时存在css和js,并且存在js在css后面,则DOMContentLoaded事件会在css加载完后才执行。
- 其他情况下,DOMContentLoaded都不会等待css加载,并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。
总结
由上所述,我们可以得出以下结论:
- css加载不会阻塞DOM树的解析
- css加载会阻塞DOM树的渲染
- css加载会阻塞后面js语句的执行、
因此,为了避免让用户看到长时间的白屏时间,我们应该尽可能的提高css加载速度,比如可以使用以下几种方法:
- 使用CDN(因为CDN会根据你的网络状况,替你挑选最近的一个具有缓存内容的节点为你提供资源,因此可以减少加载时间)
- 对css进行压缩(可以用很多打包工具,比如webpack,gulp等,也可以通过开启gzip压缩)
- 合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的,不过要注意一个问题,就是文件更新后,你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)
- 减少http请求数,将多个css文件合并,或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)
html css加载不了_CSS加载会阻塞页面显示?相关推荐
- mysql 预加载缓存_预加载与缓存
最近的项目中为了能够提升那么一丢丢性能,尝试了一下对 chunks 进行预加载处理.虽然做了异步加载的处理,但是项目大小决定了还是有多个异步的 chunk.js 需要进行预加载,这里我指的是 prel ...
- 博客园修改页面显示样式css
博客园修改页面显示样式css 一.总结 二. 博客园修改页面显示样式css 1.点管理 2.点设置 3.在页面定制css代码中加入你想要改变样式的css代码即可 不会写css的下面有代码示例,直接复制 ...
- [css] 请用css写一个扫码的加载动画图
[css] 请用css写一个扫码的加载动画图 @Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rot ...
- html怎么帮图片占位,html图片和css背景图片哪个先开始加载?css占位图怎么操作?...
如果你的网站是个图片站,首页显示了很多图片.那么你就会有图片多了导致加载比较慢的困扰.这个时候有几个方案解决. 1.物理解决方案:加大网站的带宽+压缩图片大小: 2.用图片懒加载js,图片没加载出来之 ...
- html图片怎么预加载,如何利用CSS和Javascript实现图片预加载
说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...
- django运行后浏览器警告:DevTools 无法加载 SourceMap: 无法加载 http://127.0.0.1:800/skins/css/bootstrap.min.css.map:
使用uwsgi启动Django项目后,出现了报错:DevTools 无法加载 SourceMap: 无法加载 http://127.0.0.1:800/skins/css/bootstrap.min. ...
- 第二十四节:动态加载JS和动态加载CSS
1.动态加载JS 一般需要用到js,需要将js放到<script></<script>中,一般script放到页面底部:或者在顶部引入外部js. <!DOCTYPE ...
- 无法加载html样式,无法加载css是什么原因?
CSS主要用来设计网页的样式,美化网页:它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式 ...
- div中加载html js,Div里面载入另一个页面的实现(Ajax取代框架)
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...
最新文章
- MFC中显示 .bmp格式的位图
- C#Winform+WindowsAPI做个剪贴板无缝自动保存器(视频截图利器)
- 深度CTR预估模型的演化之路2019最新进展
- vs2008中如何在项目属性中切换“图形形式”和“控制台形式”——即调出或消除黑窗口
- mseloss pytorch_PyTorch 卷积与BatchNorm的融合
- 02繁花嗅Django笔记
- Javascript 自定义输出
- taxtable java_C语言计算个人所得税问题代码及解析
- JSON字符串和实体类的相互转化
- 领导要提拔你的5个征兆,机会来临时不要让自己错过
- C++常见设计模式之工厂模式(简单工厂模式、工厂方法模式、抽象工厂模式)
- SUSE收购Rancher Labs,云原生时代大幕拉开
- @Cacheable失效
- Java基础语法学会了,JavaScript瞄一眼就行,瞅第二眼我看不起你!
- 透过Bigbang《花路》销量战绩看QQ音乐的压倒性优势
- 《你的孤独,虽败犹荣》读后感
- 【转载】基于rasa的对话系统搭建(下)
- 一文带你弄懂Visual Studio:运行时库及MT/MTD、MD/MDD
- 接口测试、APP和web测试流程(面试简化)
- App上架安卓应用市场
热门文章
- 如何关闭Windows10任务栏里的应用图标
- 在SAP云平台ABAP编程环境里使用CAP模型创建Fiori应用
- 使用SAP iRPA创建一个最简单的hello world项目并部署到SAP云平台上
- 只要200行JavaScript代码,就能把特斯拉汽车带到您身边
- IB component change - CL_IBCOMPONENT_IL~CHANGE_COMPONENT
- ubuntu上的wordpress安装
- 检测Product 被其他business transaction 引用的小程序
- SAP ABAP实用技巧介绍系列之反模式:一些低效的ABAP内表操作
- SAP CRM呼叫中心里的Java stack
- 容器,Docker, Kubernetes和Kyma,以及Kyma对SAP的意义