css加载会造成阻塞吗
2021-06-30 本文已影响0人
A_dfa4
结论:
- css不会阻塞js的解析
- css会阻塞js的渲染
- css会阻塞js的执行
- 如果页面中同时存在css和js,并且存在js在css后面则DOMContentLoaded会在css加载完后执行
其他情况下 DOMContentLoaded 都不会等待css执行
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!-- <title>css阻塞</title>-->
<!-- <meta charset="UTF-8">-->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1">-->
<!-- <style>-->
<!-- h1 {-->
<!-- color: red !important-->
<!-- }-->
<!-- </style>-->
<!-- <script>-->
<!-- function h () {-->
<!-- console.log(document.querySelectorAll('h1'))-->
<!-- }-->
<!-- setTimeout(h, 0)-->
<!-- </script>-->
<!-- <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">-->
<!--</head>-->
<!--<body>-->
<!--<h1 style="color: #00a854">这是红色的</h1>-->
<!--</body>-->
<!--</html>-->
<!--dom 执行 解析 -> 渲染-->
<!--
1. 页面先打印 既 执行了 解析
2. 打印了dom 页面没加载出来 既 渲染没执行
总结: 1. css不会阻塞js的解析 2.css会阻塞js的渲染
-->
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!-- <title>css加载会阻塞js运行吗？</title>-->
<!-- <meta charset="UTF-8">-->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1">-->
<!-- <script>-->
<!-- console.log('before css')-->
<!-- var startDate = new Date()-->
<!-- </script>-->
<!-- <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">-->
<!--</head>-->
<!--<body>-->
<!--<h1>这是红色的</h1>-->
<!--<script>-->
<!-- var endDate = new Date()-->
<!-- console.log('after css')-->
<!-- console.log('经过了' + (endDate -startDate) + 'ms')-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!--20kb网络经过了9503ms -->
<!--总结：css会阻塞js的执行-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</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="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
<h6>www</h6>
<script>
console.log("后面的");
</script>
</head>
<body>
</body>
</html>
<!--如果js在css前面 DOMContentLoaded 不会被css加载影响 -->
如果页面中同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完后才执行。
其他情况下，DOMContentLoaded都不会等待css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。
<!--
如果页面中同时存在css和js,并且存在js在css后面则DOMContentLoaded会在css加载完后执行
其他情况下 DOMContentLoaded 都不会等待css执行
-->
<!--大总结:
1. css不会阻塞js的解析
2. css会阻塞js的渲染
3. css会阻塞js的执行
4. 如果页面中同时存在css和js,并且存在js在css后面则DOMContentLoaded会在css加载完后执行
其他情况下 DOMContentLoaded 都不会等待css执行
-->
