css基础篇（一）——浏览器加载和渲染网页

1.介绍

虽然这篇是css笔记，但是做为web开发，天天和浏览器打交道，有必要先理理我目前了解的浏览器加载和渲染页面的过程。

2.页面加载和渲染流程

如图:(该篇重点是css,所以该图重点说明css渲染)

• 1.重建DOM树:渲染引擎开始解析html文档，转换树中的标签到DOM节点
• 2.构建渲染树:解析css，根据css选择器找到节点的样式,创建另外一个树———渲染树
• 3.布局渲染树：从根节点开始，计算出每一个元素的大小和位置
• 4.绘制渲染树：遍历渲染树将每个节点都绘制出来

整个流程简易描述：用户访问网页发送http请求，服务器收到请求做出相应处理后通过http response将html文件返回给浏览器;浏览器解析http response并创建DOM树；浏览器下载css，并应用在DOM树上，进行渲染；浏览器下载js，并解析执行js；

3.相关概念（重绘，回流，css引擎查找样式表规则）

重绘:是一个元素的外观改变，但没有改变布局的情况下发生;
场景描述：当不设定尺寸，同时外部容器没有定死宽高，占据空间会从0到完全出现，左右上下都有可能位移，发生大规模的重绘。;

回流:浏览器发现某个部分发生了点变化影响布局，需要倒回去重新渲染;
场景描述：某个元素具有很复杂的动画效果（从上到下从做到右的动），改变了布局，就会出现回流;
解决方案：这种元素使用绝对定位，使它脱离文档流;

css引擎查找样式表规则:从右到左查找;
场景描述：#ul li 是现在在页面中查找所有li，再找到#ul;
解决方案：根据具体情况，尽量少使用后代选择器