精华内容
下载资源
问答
  • 下面小编就大家带来一篇完美解决JS文件页面加载时的阻塞问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 原理解析那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下。 不同的浏览器使用的内核不同,所以他们的渲染过程也是不一样的。目前主要有两个webkit渲染过程Gecko渲染过程从上面两个流程图我们可以看...

    可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下。

    原理解析

    那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下。 不同的浏览器使用的内核不同,所以他们的渲染过程也是不一样的。目前主要有两个

    webkit渲染过程

    e2e4ebb42d9333ae0cce27326ef5af60.png

    Gecko渲染过程

    deb48142de5675a06d4940aacede3133.png

    从上面两个流程图我们可以看出来,浏览器渲染的流程如下:

    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阻塞

    document.addEventListener('DOMContentLoaded', function() {

    console.log('DOMContentLoaded');

    })![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d30219afd9e84bc99875991b7d284435~tplv-k3u1fbpfcp-zoom-1.image)

    ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87519598e6484ec38db8daed23f586c9~tplv-k3u1fbpfcp-zoom-1.image)

    实验结果如下图: 从动图我们可以看出来,css还未加载完,就已经触发了DOMContentLoaded事件了。因为css后面没有任何js代码。

    接下来我们对第二种情况做测试,很简单,就在css后面加一行代码就行了

    css阻塞

    document.addEventListener('DOMContentLoaded', function() {

    console.log('DOMContentLoaded');

    })

    console.log('到我了没');

    我们可以看到,只有在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文件合并,或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

    到此这篇关于浅谈CSS到底会不会阻塞页面渲染的文章就介绍到这了,更多相关CSS 阻塞页面渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    展开全文
  • 关于 js 阻塞

    2020-09-12 17:26:56
    1. 阻塞后续DOM的解析 如果后续DOM节点加载完了,结果这个js执行一大堆把这...3. 阻塞页面渲染 js 也可以更改DOM的样式、值等等,所以避免做无用功,阻塞DOM渲染 这个场合经常遇见,如果js报错了,页面白屏了 ...

    1. 阻塞后续DOM的解析

    如果后续DOM节点加载完了,结果这个js执行一大堆把这个DOM节点删除了,js 就白解析了,做了无用功,所以 js 会阻塞后续DOM的解析

    2. 阻塞后续js的执行

    依赖关系,一个依赖一个

    3. 阻塞页面渲染

    js 也可以更改DOM的样式、值等等,所以避免做无用功,阻塞DOM渲染

    这个场合经常遇见,如果js报错了,页面白屏了

    4. 总结:

    (1)js阻塞还是非常强大的

    (2)CSS 的解析和JS的执行是不能同时执行的,但无论什么阻塞都不会影响外部资源的加载,加载照样加载,执行可就不一定了。

    (3)阻塞的意思 比如 2s 后返回内容,或者 内容非常非常大以后再返回

    5.defer 的作用

    <script defer src='./index.js'></script>

    defer相当于 window.onLoad,等页面DOM解析完了,执行这个 js 文件的内容

    6. 解析通俗的讲就是 HTML 解析器向下读取代码的能力

    style: link 样式外部引入,会阻塞页面渲染,但是不会阻塞 DOM 解析

    JS:script 外部引入标签,既会阻塞页面渲染,也会阻塞DOM解析

     

     

     

     

    展开全文
  • 如果你说的阻塞阻塞解析html和阻塞渲染,那script...个人感觉出现这种情况是因为代码直接写在script时,解析到script后parse HTML和渲染都被阻塞(图里前面很长一段黄色的长条),script的内容被解析完后,先把scr...

    如果你说的阻塞是阻塞解析html和阻塞渲染,那script无论是不是外链都会阻塞。如果说的是第一种情况,performance里会出现这个:

    bVbwCQu?w=1754&h=838

    第一种情况的加载过程中,先绘制了第一段文字,再绘制第二段文字,第二种情况不会。

    个人感觉出现这种情况是因为代码直接写在script时,解析到script后parse HTML和渲染都被阻塞(图里前面很长一段黄色的长条),script的内容被解析完后,会先把script前面的内容渲染出来,再去解析script后面的内容,css树解析完了,DOM树也经历了重绘重排,所以浏览器直接判定差不多可以开始首次绘制了,图里First Paint的时候,script后面的内容还没经历重绘重排,所以FP时没被绘制上去,也是因为没绘制完,所以FP后面还有个FMP(first meaningful paint),script后面的内容经历重绘重排后才会被渲染到页面上:

    bVbwCTb?w=965&h=430

    第二种情况:

    阻塞解析渲染的script文件处理完后,直接开始解析script后面的内容,而不是先将前面的部分重绘重排,因此触发FP时,绘制的是页面所有内容

    bVbwCW1?w=1390&h=550

    第二种情况首次绘制直接把所有内容绘制出来了,所以performance里找不到第一种情况里,前一段文字显示了,后面还没显示的帧。

    但是实际上无论是不是外链,都阻塞了DOM解析和渲染(前面都有很长一段黄色长条)。

    具体为什么第一种情况会先把script前面的部分重绘重排,第二种不会,个人感觉应该是因为第二种ui线程其实只需要解析很短的一段代码,因为script内容在外链里,下载交给网络请求线程,下载完直接让js线程解析,下载和解析时ui线程处于挂起状态,解析完之后ui线程被唤醒,继续完成之前的工作(解析html)。

    但是第一种情况,script里耗时的内容在html里,解析的时候还是需要ui线程参与,ui线程判定是个很耗时的过程,所以js内容执行完直接就先把前面解析的重绘重排,再去解析后面的。

    第一种情况,script黄条在parse HTML蓝条下面:

    bVbwC0T?w=573&h=175

    第二种情况,parse HTML蓝条和script黄条并列:

    bVbwC09?w=341&h=132

    这个是个人观点,查了半天资料都没找到相关内容。。。

    ————————————————————————————————————————————————————————————————————————————

    对比了一下第二种情况中,有时先出现hello,再出现world,有时hello和world一起出现,感觉有点眉目了。

    hello和world一起出现的情况时,在ui线程对script前面的代码进行重绘重排之前,就接收到了外链的script代码:

    bVbwD0i?w=1206&h=363

    先出现hello再出现world时,接收外链代码晚于重绘重排:

    bVbwD0C?w=1130&h=375

    应该是和浏览器接收到内容的时间有关,超过一段时间没接收到外链的内容,就先进行重绘重排了,如果在这个时间内先接收到外链内容,就先开始解析外链JS代码

    展开全文
  • 终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了...
  • 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术。 Dynamic Script Elements 动态脚本元素 DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,...
  • 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载、解析、执行完,才进行后面的 操作。在现代的浏览器中CSS资源和图片image资源是并行下载的,...
  • 页面渲染时js阻塞的解决方法

    千次阅读 2019-09-29 05:54:41
    为什么会阻塞?  因为浏览器不知道a.js中执行了哪些脚本,会对页面造成什么影响,所以浏览器会等js文件下载并执行完成后才继续渲染,如果这个时间过长,会白屏。 解决方法 1、推迟加载(延迟加载)  如果...
  • 注意: 按照惯例,所有script元素都应该放在页面的head元素中。...对于那些需要很多JavaScript代码的页面来说,这无疑导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了
  • 延时加载JS和CSS文件来实现按需加载,以保证在页面刚刚开始呈现的时候提高速度,提高用户体验
  • css加载是否会阻塞dom树加载? 改变脚本加载次序(defer与asysn) 从Event Loop谈JS的运行机制 事件循环机制 事件循环机制补充说明:(涉及JS引擎线程和事件触发线程) 聊一聊定时器 事件循环进阶:macrotask与...
  • 优化原因:在前端页面加载过程中,JavaScript代码的下载、解释和执行会阻塞页面的其他执行(此时页面一片空白),浏览器在遇到&lt;body&gt;标签才开始呈现内容。优化建议:1、把JavaScript引用放在&lt...
  • link>和<script>标签时,碰巧想到一个困扰很久的问题,即一般把<...  可能此方式已经成为了约定俗成,但是究竟其好处在哪里,或者说其它的方式为什么不可取,想必你也和我有同样的疑问,那.
  • 今天小编跟大家讲解下有关前端性能...css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染 会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能 所以浏览器只在加载的时候去解析dom...
  • 如果js脚本不加defer和async属性的话,确实是阻塞的,但是如果加上defer或者async属性的话,最起码下载时,js是并行下载的,而解析代码的时候,具体情况具体分析。 引用js文件格式如下: <script type="text/...
  • 1、输入Url地址按下回车发生了什么? 1:根据网址进行DNS解析,将相应的域名解析IP地址。 2:客户端根据IP地址去寻找对应的服务器并进行TCP三次握手,建立TCP连接。 3:客户端发起HTTP请求,请求对应资源。 4:...
  • 目录DOMContentLoaded和loadjs 阻塞什么css 阻塞什么优化总结DOMContentLoaded和load我们先了解两个事件,有助于后面的分析。load事件:load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成...
  • 首先说结论:不论是内联还是外链js都会阻塞后续dom的解析和渲染如果把JavaScript放在页面顶部,下载和解析JavaScript的时间里面,dom迟迟得不到解析和渲染,浏览器一直处于白屏,所以把JavaScript文件放在页面底部更...
  • 之前一直知道页面中添加了阻塞类的js页面会停止加载。今天在页面中测试template遇到了这种情况,做个记录。在页面中执行 $(function(){alert("xxx")});时, 页面静止加载, 图片、css什么的都中断了加载以及渲染...
  • 由于每个[removed]标签下载时阻塞页面解析过程,所以限制页面的[removed]总数也可以改善性能。适用于内联脚本和外部脚本。 3、非阻塞脚本 等页面完成加载后,再加载js代码。也就是,在window.load事件发出后开始下载...
  • js阻塞

    2021-04-05 21:43:48
    今天来聊聊前端性能问题中的js阻塞问题。 浏览器渲染机制 首先先来看看浏览器渲染机制,大致分为以下几步 1、浏览器根据服务器响应回来的html,进行解析后构建一颗DOM节点树; 2、根据css文件,构建得到CSSOM树; 3...
  • alert阻塞线程,导致页面渲染未执行

    千次阅读 2019-12-28 12:08:20
    今天开发中遇到一个比较奇葩的问题,就是ajax异步执行... js是单线程执行,如果执行一些比较耗时的代码或者直接阻塞线程(alert),浏览器就没办法同时去渲染 GUI,——因为单线程,事实上交js引擎确实已经执行了...
  • 4.js会阻塞DOM解析和渲染吗?5.css会阻塞js的执行?6.JS 是否触发页面渲染?7.如何引用script来缓解DOM渲染阻塞?8.一个问题:内联式script标签应该放到body标签之前或者之后是否可行?9.总结 浏览器渲染机制:解析...
  • 一直以为如果js写在head里就需要用window.onload=function(){},如果写在body结尾前面,则不用写,但是为什么下面的代码不写的话,最开始载入页面img的高度全部为0?(就是看不见图)执行js需要等img加载好吗,这...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,129
精华内容 24,851
关键字:

为什么js会阻塞页面