CSS机制

CSS机制之异步加载机制

 

　　当我们引入CSS后，浏览器是这么加载CSS的呢，这里我们就要了解异步加载和同步加载了。

　   异步加载：并行，多线程。（同时进行）

      同步加载：串行，单线程。

        首先浏览器加载HTML文档，当读到引入CSS的这一行代码的时候，浏览器不会等到CSS全部加载完毕后再去加载下一行HTMl代码，这样用户体验很差，为了避免这一情况，浏览器用了一招，这一招厉害了，他直接开启了另外一个线程加载，这时候CSS加载，HTML也继续加载，这便是very important异步加载机制。

CSS机制之渲染机制

　　当页面开始渲染的时候，是从右向左的，需要先找到要操作的元素，然后再逐层找到父集。

       举个栗子吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div .two div{
            width:100px;
            height:100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div>
        <div class="one">
            <div></div>
        </div>
        <div class="two">
            <div></div>
        </div>
    </div>
</body>
</html>

　　　上面实现的就是先找到我们要加上样式的div，然后找到属性是two的父集，接着找这个父集上面的div标签。

 

posted @ 2017-11-29 14:29  暮雨橙风  阅读(124)  评论(0)  编辑  收藏  举报