记录关于HTML 加载css 顺序的阻塞的问题

最新推荐文章于 2024-03-30 14:10:11 发布

aMing-前端码农

最新推荐文章于 2024-03-30 14:10:11 发布

阅读量194

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_34735024/article/details/129033540

版权

HTML 代码是从上往下的执行过程,如果遇到 <link> 标签加载外部css,会造成页面的渲染以及js代码执行阻塞,但不会阻塞DOM结构加载

<!DOCTYPE html> 
<html>   
	<head>     
		<title>Example HTML Page</title>    
        <script>
            console.log('1')  //文本从上往下会立即执行,但获取不到dom节点
        </script>
        <!-- 耗时3秒 -->
		<link rel="stylesheet" type="text/css" href="css/base.css"/> 
        <!-- 耗时3秒 -->
		<link rel="stylesheet" type="text/css" href="css/style.css"/> 
	</head>  
	 <body>    
	  	<!-- 这里放内容 -->   
           <div class="box">测试</div>
	 </body>
     <script>
            console.log('222')  //会等待3s后执行,可以获取到dom
     </script>       
</html>

浏览器会并行下载资源文件(ie,火狐,谷歌6个) 耗时3s,最终的页面会在css加载完3s之后才显示