css渲染-2

最新推荐文章于 2024-05-07 15:15:45 发布

bmxklYzj

最新推荐文章于 2024-05-07 15:15:45 发布

阅读量898

点赞数

分类专栏： web前端文章标签： css chrome ie

本文链接：https://blog.csdn.net/yang_zongjun/article/details/51316915

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

参见之前写的：
http://blog.csdn.net/yang_zongjun/article/details/51202156

今天又实践了下，结论：
chrome是等待所有的css下载完毕才开始渲染页面，会出现白屏
ie会先展示dom，然后会出现无样式内容的闪烁

html

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

    <!--
  <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
  <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/sbase_c006953e.js"></script>
  <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/mancard/js/config_30f743a0.js"></script>
  <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/min_super_49d2ee0d.js"></script>
  <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/message/js/mt_show_1.8.js"></script>
  <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/mantpl/js/shopping/index_9bf67964.js"></script>
  <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/newmusic/js/newmusic_min_df09dfd2.js"></script>
  <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/mancard/js/mancard_0c43f965.js"></script>
  -->
                <style>

    </style>
</head>
<body>


<div id="my-id">
    dsafdf
</div>

<img src="http://stevesouders.com/bin/sleep.cgi?type=gif&sleep=2&expires=-1&last=0&imagenum=5&t=1462352197" height="20">

<!-- 正常的本地文件 -->

<link rel="stylesheet" href="css/style.css">
 <!-- google css 无法获取的文件，模拟阻塞 -->
<link rel="stylesheet" href="https://www.google.com.hk/search?q=dsaf&oq=dsaf&aqs=chrome..69i57j69i59l2.1401j0j8&sourceid=chrome&es_sm=122&ie=UTF-8">

<link rel="stylesheet" href="css/style2.css">
</body>
</html>

style1.css

div {
     color: red;
}

style2.css

img {
    width: 200px;
}

效果是：
chrome下载完所有css，等待1s（google的css阻塞导致），然后直接出现红色的字，等图片下载完之后，直接是出来大图
ie先是出现红色的字（其实是先出来黑色的字，由于字体的style1.css是本地的文件，下载很快，直接就立马渲染成红色的了），图片下载完之后出现小图，然后等了10s（google的css阻塞，对的，chrome下载文件最多只等待1s，而ie要等10s）图片变成大图，所以印证了结论。