广州制作网站的公司,域名注册商平台,旅游网站网页设计,为网站吸引流量的方法前言
前几天面试问到了这个问题#xff0c;当时这个答得不敢确定哈哈#xff0c;虽然一面还是过了
现在再分析下这个#xff0c;总结下#xff0c;等下次遇到就能自信得回答#xff0c;666
准备工作
为了完成本次测试#xff0c;先来科普一下#xff0c;如何利用chr…前言
前几天面试问到了这个问题当时这个答得不敢确定哈哈虽然一面还是过了
现在再分析下这个总结下等下次遇到就能自信得回答666
准备工作
为了完成本次测试先来科普一下如何利用chrome来设置下载速度
打开chrome控制台(按下F12),可以看到下图重点在我画红圈的地方 这样我们对资源的下载速度上限就会被限制成20kb/s好那接下来就进入我们的正题
css加载会阻塞DOM树的解析渲染吗
测试代码
!DOCTYPE html
html langenheadtitlecss阻塞/titlemeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1styleh1 {color: red !important}/stylescriptfunction h () {console.log(document.querySelectorAll(h1))}setTimeout(h, 0)/scriptlink hrefhttps://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css relstylesheet/headbodyh1这是红色的/h1/body
/html假设 css加载会阻塞DOM树解析和渲染
假设结果: 在bootstrap.css还没加载完之前下面的内容不会被解析渲染那么我们一开始看到的应该是白屏h1不会显示出来。并且此时console.log的结果应该是一个空数组。
实际结果:如下图 css会阻塞DOM树解析 由上图我们可以看到当css还没加载完成的时候h1并没有显示但是此时控制台输出如下 可以得知此时DOM树至少已经解析完成到了h1那里但此时css还没加载完成。 也就说明css并不会阻塞DOM树的解析。
css加载会阻塞DOM树渲染
由上图我们也可以看到当css还没加载出来的时候页面显示白屏直到css加载完成之后红色字体才显示出来。 也就是说下面的内容虽然解析了但是并没有被渲染出来。 所以css加载会阻塞DOM树渲染。
其实我觉得这可能也是浏览器的一种优化机制。因为你加载css的时候可能会修改下面DOM节点的样式如果css加载不阻塞DOM树渲染的话那么当css加载完之后DOM树可能又得重新重绘或者回流了这就造成了一些没有必要的损耗。所以我干脆就先把DOM树的结构先解析完把可以做的工作做完然后等你css加载完之后在根据最终的样式来渲染DOM树这种做法性能方面确实会比较好一点。
css加载会阻塞js运行吗
测试代码
!DOCTYPE html
html langenheadtitlecss阻塞/titlemeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1scriptconsole.log(before css)var startDate new Date()/scriptlink hrefhttps://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css relstylesheet/headbodyh1这是红色的/h1scriptvar endDate new Date()console.log(after css)console.log(经过了 (endDate -startDate) ms)/script/body
/html假设: css加载会阻塞后面的js运行
预期结果: 在link后面的js代码应该要在css加载完成后才会运行
实际结果: 由上图我们可以看出位于css加载语句前的那个js代码先执行了但是位于css加载语句后面的代码迟迟没有执行直到css加载完成后它才执行。 这也就说明了css加载会阻塞后面的js语句的执行。
结论
css加载【不会】阻塞DOM结构的解析css加载【会】阻塞DOM结构的渲染css加载【会】阻塞后面js语句的执行
浏览器渲染过程
解析css文件和html文件分别形成CSSOM Tree和DOM Tree两者并行不会互相影响将解析后的CSSOM Tree与DOM Tree合并形成渲染树render Tree将合并后的渲染树渲染到页面上css文件和html文件的渲染并行所以不会阻塞DOM结构的解析但是会阻塞后续的页面渲染代码中JS语句可能会操作前面的DOM结构从而形成重绘和重排所以浏览器渲染时会让js语句的执行放在css执行完成之后所以css的加载也会造成js语句的执行
实际开发中有时由于css的加载过慢导致页面进入时有较长时间的白屏 解决方法
进行压缩如使用webpack、gulp等工具对css文件进行压缩减少请求数将多个css文件进行合并或者写成内联样式不推荐写成内联不方便后续需求修改和代码的阅读使用CDN引入cdn引入会根据当前的网络挑选最近的一个具有缓存内容的节点提供资源
DOMContentLoaded 只有在css加载完成后才会触发DOMContentLoaded事件。因此我们可以得出结论
如果页面中同时存在css和js并且存在js在css后面则DOMContentLoaded事件会在css加载完 后才执行。其他情况下DOMContentLoaded都不会等待css加载并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。
