服务器端：
1.查找缓存
2.通过DNS服务器将URL转换成IP地址
3.浏览器给服务器发出http请求
4.网站的永久重定向
5.服务器跟踪重定向地址
6.服务器处理响应
7.服务器发回响应
浏览器端：
1.下载HTML
2.将HTML解析成Dom Tree
3.将css文件解析成 CSSOM
4.根据Dom树和CSSOM 形成render Tree
5.布局 计算出renderTree的每一个节点的位置
6.渲染 render Tree
在浏览器渲染过程中，会发生回流和重绘。
回流：浏览器回去整个重新渲染。
重绘：当元素的一部分属性发生变化（布局不变，比如颜色改变），会触发重绘。
回流对性能的影响比重绘要大，由定义可知，回流必然引起重绘，不过重绘不一定会引起回流。
引起回流的事情：
1.dom树结构发生变化，比如增加或删除节点。
2.改变边距，尺寸（几何属性）等等
3.获取某些属性（比如getComputedStyle）
4.window.resize()
不过要说明的是，浏览器并不会你每有一个js操作就会去回流重绘，事实上它会维护一个队列，把这些操作放在这个队列里，操作积累到一定数量之后，或者到了一定的时间间隔，它才会执行。
最后，举个栗子
比如
<!Doctype html>
<html>
<head>
<title>栗子</title>
<link rel="stylesheet" src="style.css">
</head>
<body>
<p id="noShow"></p>
<p id="test">
<p></p>
<img src="1.jpg"/>
</p>
</body>
<script src="app.js">
</html>
这个的渲染过程是怎样的呢
浏览器发现link标签，于是发出请求，请求css文件
浏览器继续向下，发现img标签，然后请求img，同时继续向下（浏览器天生异步）
浏览器渲染到某一块时，img请求到了，然后发现布局变了，不得不重新渲染
浏览器请求js文件
假如js文件内容是
document.getElementById('noShow').style.display="none"; //回流+重绘
dodocument.getElementTagName('p').style.color="red";//重绘
dodocument.getElementTagName('p').innerHTML='offer';
最后走到</html>的时候渲染结束
这也解释了我们为什么通常把css放在前面，js放在后面
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
我要评论
网友评论