在地址栏输入网址时，浏览器到底做了什么
你有没有想过一个问题，当你在浏览器输入一个网站的网址打开一个页面时，浏览器到底做了什么。先看个草图来看一下大致过程.
大概过程就是这样，接下来再来看看里面的一些名词解析
1.DNS解析
当你在输入网址时，浏览器难道你的网址先会在本地查询是否有对应名字的ip地址，如果没有就像DNS服务器发送请求，找到以后将ip地址返回给浏览器。
2.TCP连接
当浏览器拿到ip地址，就会构造一个http报文，其中包含http请求头，请求方法，请求地址，遵循协议等。建立连接前，会进行TCP三次握手，然后服务器结束请求。
3.服务器响应
当服务器拿到请求请求响应，开始进行验证处理，将响应报文返回给浏览器，然后接触连接。
4.浏览器渲染
浏览器拿到html代码片段开始解析。大致流程可以分为四步
- 获取html标签，形成DOM树
- 加载css，构建CSSOM
- 将dom树和cssom合并形成渲染树
- 经过回流和重绘渲染页面
在读取html标签时，如果 遇到link，script,img的src标签等资源加载时，不会立即执行。而是将任务加入到一个任务队列等待执行，当dom加载完成，开始执行任务队列的任务.
回流和重绘
回流(reflow)：根据生成的渲染树计算元素的宽高位置或隐藏元素等变化，再将计算结果绘制出来，浏览器最少会产生一次回流，即页面初始化。
重绘(repaint):当元素只是涉及外观变化，而非位置的变化，就会触发重绘
注意：回流一定触发重绘，重绘不一定触发回流
性能优化：
1.减少http请求次数的大小
2.资源压缩整合
3.图片的懒加载
减少回流的方式
1.减少DOM操作
2.分离读写（现代浏览器渲染机制，当读到改变样式的语句时，不会立即执行，而是等待一会，看下一句是否还是样式操作，如果是将会一起执行）
例如：
xxx.style.width = "100px;
xxx.style.height = "100px'
上边两行代码只会进行一次回流，但是如果在其中间插入一句console.log（1）便会刷新浏览器渲染机制，引发两次回流。还有一些语句也会打断渲染机制(offset,client,scroll,getComputedStyle,currentStyle系列的语句)
3.样式集中改变，提前将需要更改的样式写到一个类中,直接更换类名
4.将需要大量动画效果的定位设计为绝对定位或固定定位(会脱硫文档流）
5.多使用transform，opacity等熟悉来完成动画效果，这些属性不会触发回流。
转载自原文链接, 如需删除请联系管理员。
原文链接：浏览器渲染执行过程，转载请注明来源！