浏览器地址栏输入url，发生了什么？--小小笔记

浏览器地址栏输入url，发生了什么

第一个版本

1.DNS解析url的IP地址
2.发送HTTP请求
3.TCP分割HTTP请求报文进行可靠的传输
4.IP协议对请求报文进行中转和传送
5.服务端TCP接受并重组报文
6.服务端HTTP处理请求
7.返回资源

第二个版本

1.浏览器向DNS服务器查找输入URL对应的IP地址
2.DNS服务器返回网站对应的IP地址
3.浏览器根据IP地址，在80端口上，与目标WEB服务器建立TCP连接
4.浏览器获取请求页面的Html代码
5.浏览器渲染
6.关闭浏览器窗口，终止与服务器的连接

浏览器渲染

1.解析html，自上而下，先head，在body
2.解析到头部css外部链接时，同步去下载，遇到js，也同步去下载（js一般不建议放在头部，会影响渲染时间）
3.解析body部分，边解析，边生产DOM树，同时等待css下载
4.一旦css下载完成，DOM树+CSSOM生产Render树（同步）
5.渲染树一旦有结构模型，接着同步计算渲染树节点布局位置
6.一旦计算出坐标后，开始渲染
7.3-6步如果遇到图片则跳过去渲染下边的部分，等待图片下载成功，返回来渲染原理图片的位置
8.同7步，渲染过程中，如果出现Js调整DOM树结构，则重新渲染
9.最终所有的节点和资源渲染完成
10.渲染完成后开始onload事件
11.整个页面load完成

浏览器重排（reflow）和重绘（repaint）

重绘：DOM元素属性发生变化（如：color）

重排：DOM元素发生变化，涉及到元素布局（如：width）

不论是页面发生了重排还是重绘，都会影响到性能（尤其是重绘）

发生重排的场景：

• 页面初始渲染
• 添加/删除DOM元素
• 改变元素位置
• 改变元素尺寸（盒模型）
• 改变元素内容（文本，图片）
• 改变窗口大小

减少重排

1.样式集中修改，可以添加一个类，样式集中在类中修改
2.使用absolute脱离文档流
3.使用disaplay:none，不使用visibility，不改变z-index
4.能用css3就用css3

渲染三阶段：layout，paint，composite layers

备注：自己看完别人的文章，大概总结一下，内容不全，语句也不太顺，哈哈哈哈哈，主要是为自己日后翻阅方便