前端性能优化_css加载会造成哪些阻塞现象?

站长手记 作者: 2024-08-28 15:45:01
css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。
css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。这就是造成在css下载完成之前,页面刚开始会出现白屏现象的原因。

浏览器渲染流程:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <h1>this is a test</h1>
    <link rel="stylesheet" type="text/css" href="test.css">
    <img src="1.jpg">
    <hr>
    <span>this is a test</span>
</body>
</html>
img{
    width: 50%;
}
if(oSession.uriContains('test.css')){
    oSession["response-trickle-delay"] = "3000";
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70200.html
前端性能优化 css加载