打开chrome浏览器在地址栏输入网址回车之后,
chrome 浏览器搜索自身的DNS缓存,看是否有目标网址对应的IP地址(这个缓存大概只有一分钟左右);
如果没搜到会搜索系统自身的DNS缓存,
如果本地系统的DNS缓存也没有搜到会尝试读取本地host文件;
如果host文件里也没有,系统会发起一个DNS的系统调用,
宽带运营商服务器查看本身缓存;
如果没有会代替浏览器发起一个迭代DNS解析请求;
-- 先找根域名,比如先找com域顶级域的IP地址,然后再找到baidu.com域的ip地址,再找到确定页面的IP地址;
运营商服务器把结果返回操作系统内核同时缓存起来;
操作系统内核把结果返回给浏览器;
域名解析完成之后,发起HTTP三次握手;
-- 1.确认是否通信,2.返回确认结果,3.确认开始通信;
之后建立起TCP/IP连接,浏览器就可以向服务器发送HTTP请求了,比如用HTTP的GET方法请求根域里面的一个域名,协议可以采用HTTP1.0的一个协议;
服务器端接收到这个请求,根据路径参数,经过后端的一些处理,把处理后的结果数据返回到浏览器;
浏览器拿到完整的HTML代码,在解析和渲染这个页面的时候,里面的JS、css、图片静态资源,也是一个个的HTTP请求,都需要经过上述的几步;
浏览器拿到全部资源后解析为页面渲染出来;
1.浏览器将html文件自上而下开始加载,并在加在过程中进行解析渲染;
解析:
1.浏览器会将HTML文件解析成一个DOM树,DOM树的遍历是一个深度遍历的过程,当前一个节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2.将css解析为CSS Rule Tree。
3.根据DOM树和CSSOM来构造Rendering Tree。
4.有了render tree,浏览器已经知道了网页中的每个节点和每个节点的css定义,以及他们的从属关系,下一步操作为Layout,顾名思义就是计算出每个节点在屏幕中的位置,
5.在下一步就是绘制,即遍历render树,并使用UI后端绘制每个节点。
上述这个过程是逐步完成的,即为了更好的用户体验,渲染引擎会尽可能早的将内容呈现到屏幕上,并不会等到所有的HTML解析完成之后再去构建和布局render树,它是解析完一部分内容就显示一部分内容,同时,可能还通过网络在下载其他内容。
reflow(重排):浏览器要花时间去渲染,当他发现某部分发生嗯冷变化影响了布局,那就需要倒回去重新渲染;
repaint(重绘):如果只是改变背景颜色和颜色,不影响周边元素或者内部布局的属性,将只会引起重绘,重画某一部分;
reflow比repaint花费时间更长,也就更影响性能,所以写代码 到时候,要尽量避免重排。