CSS 连接后面加上quot;?quot;表示什么意思?

link rel=stylesheet href= type=text/css/

时间: 2019-12-05阅读: 86标签: 阻塞

facebook上的css连接后边都跟了个参数.. 那是表示什么意思吧?

大概我们都了然,js推行会窒碍DOM树的剖判和渲染,那么css加载会梗塞DOM树的深入深入分析和渲染吗?接下去,大家就一块儿来深入分析一下。

能够看做是css的叁个版本号,假如css退换过,挂念浏览器本地css文件并未有顿时更新而导致页面未有现身相应效果时,就足以经过改变这么些?后边的数码来达到使浏览珍视新下载最新的css文书档案。

规律深入分析

那就是说为啥见面世下面的场景呢?大家从浏览器的渲染进度来深入分析下。

分歧的浏览器接收的水源区别,所以她们的渲染进度也是不均等的。如今最首要有四个:

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都加载完结才触发。

我们先对第一种情景做测验:

!DOCTYPE htmlhtml lang="en" head titlecss阻塞/title meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1" script document.addEventListener(‘DOMContentLoaded‘, function() { console.log(‘DOMContentLoaded‘); }) /script link href="-alpha.6/css/bootstrap.css" rel="stylesheet" /head body /body/html

css尚未加载完,就曾经接触了DOMContentLoaded事件了。因为css后边未有此外js代码。

接下去我们对第三种情况做测量试验,很简短,就在css前边加一行代码就能够了

!DOCTYPE htmlhtml lang="en" head titlecss阻塞/title meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1" script document.addEventListener(‘DOMContentLoaded‘, function() { console.log(‘DOMContentLoaded‘); }) /script link href="-alpha.6/css/bootstrap.css" rel="stylesheet" script console.log(‘到我了没‘); /script /head body /body/html

唯有在css加载完结后,才会触发DOMContentLoaded事件。因而,我们得以得出结论:

假使页面中何况存在css和js,并且存在js在css前面,则DOMContentLoaded事件会在css加载完后才实行。别的景况下,DOMContentLoaded都不会等待css加载,何况DOMContentLoaded事件也不会等待图片、摄像等其他资源加载。总计

由上所述,我们能够得出以下结论:

css加载不会拥塞DOM树的深入剖析css加载会拥塞DOM树的渲染css加载会梗塞后边js语句的奉行、

所以,为了防止让客户见到长日子的白屏时间,大家应该尽量的加强css加载速度,举例能够行使以下三种办法:

接纳CDN(因为CDN会依照你的网络情形,替你选取近日的一个全数缓存内容的节点为你提供财富,因此得以减去加载时间卡塔尔国对css进行减少(能够用成千上万包裹工具,譬喻webpack,gulp等,也得以经过开启gzip压缩State of Qatar合理的行使缓存(设置cache-control,expires,以至E-tag都以无可置疑的,但是要注意四个主题材料,正是文件更新后,你要幸免缓存而带给的震慑。此中叁个解决防止是在文件名字背后加一个版本号卡塔尔收缩http央浼数,将多少个css文件归拢,或许是干脆间接写成内联样式(内联样式的三个顽固的疾病正是不能够缓存卡塔尔(قطر‎

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图