基本流程:
1、用户在浏览器中输入url地址
2、****浏览器解析域名得到服务器ip地址
浏览器会首先从缓存中找是否存在域名,如果存在就直接取出对应的ip地址,如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器,将对应的ip发给客户端;然后访问根域名解析器,将对应的ip发给客户端;最后访问本地域名服务器,得到最终的ip地址。
3、TCP三次握手建立客户端和服务器的连接
因为HTTP是基于TCP的可靠传输,所以在发送http数据报之前,需要先进行TCP的三次握手建立连接。三次握手过程如下:
第一次握手:客户端--->服务端 ack=1,seq=x(x随机生成)
第二次握手:服务端--->客户端 ACK=1,ack=x+1,seq=y(y随机生成)
第三次握手:客户端--->服务端 ACK=1,ack=y+1,seq=x+1
完成第三次握手时,实际上客户端已经与服务器建立了连接,所以第三次握手的报文已经可以携带数据了。
4、客户端发送HTTP请求获取服务器端的静态资源
5、服务器发送HTTP响应报文给客户端,客户端获取到页面静态资源
6、TCP四次挥手关闭客户端和服务器的连接
数据传输完毕后,TCP会进行四次挥手断开连接,释放资源。四次挥手过程如下:
第一次挥手:客户端--->服务器 FIN=1,ack=1,seq=u 客户端状态变为FIN_WAIT_1
第二次挥手:服务器--->客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT,TCP进入半关闭状态
第三次挥手:服务器--->客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK
第四次挥手:客户端--->服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT,此时TCP未释放,需要等待计时器计时完成后,客户端状态变为CLOSED
7、浏览器解析文档资源并渲染页面
浏览器解析文档资源并渲染页面流程:
(1)解析html资源,构建DOM Tree
(2)解析css资源,构建CSS Rule Tree
(3)JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree
(4)解析完成后综合DOM Tree和CSS Tree会生成Render Tree,计算每个元素的位置,这个过程就是回流(layout or reflow)
(5)调用操作系统Native GUI的绘制
(6)页面绘制完成
涉及到的其他知识点:
1、Render Tree的生成
DOM Tree和CSS Tree结合会生成Render Tree,是由可视化元素按照其顺序生成的树形结构,非可视化元素是不会出现到渲染树中的。
非可视化元素:head、display:none;(注意:visibility:hidden的元素会出现在渲染树中)
2、回流和重绘
回流(reflow,也叫重排、布局):某部分的变化影响了布局,浏览器需要重新渲染。(如元素大小、位置的改变)
重绘(repaint):元素的某一部分发生改变,尺寸、位置没有改变。(字体颜色、背景颜色的改变)
引起回流的几个主要原因:
(1)网页初始化
(2)JS操作DOM树(增加、删除元素等)
(3)某些元素的尺寸改变
(4)CSS属性的改变
浏览器的“dirty”系统:
为了避免页面细小的改变就引起回流和重绘,“dirty”系统会将这些改变操作积攒一批再进行操作,这又叫异步reflow或者增量异步reflow。有些特殊情况不会这么做:resize窗口、改变了页面默认的字体等,这些操作会直接触发回流。
编写代码时如何减少回流和重绘:
(1)修改样式不要逐条修改,定义CSS样式的class,直接修改元素的className
(2)不要将DOM节点的属性值放在循环中当成循环的变量
(3)为动画的HTML元素使用fixed或absolute的position属性,修改它们的CSS就不会触发reflow
(4)把DOM离线后修改,设置display:none或者clone元素到内存中,修改完成再显示回页面
(5)不要使用table布局,一个微小的改变就可能引起整个table的重新布局
3、性能优化
(1)提升HTML的加载速度
页面精简,删除不必要的内容,将内嵌的JS和CSS移至外部文件,使用压缩工具等
减少文件数量,合并文件,减少请求次数
减少域名查询,外部引入的资源尽量少使用不同的域名
使用缓存,重用数据
优化页面元素的加载顺序
使用合法的标签
根据浏览器类型选择合适的策略
(2)编写合理的CSS
DOM的深度尽量浅
使用合法的CSS属性
不要为ID选择器指定类名或标签名
避免使用后代选择器,尽量使用子选择器
避免使用通配符
(3)关于JS标签
js标签的加载和执行特点:载入后立即执行,执行时会阻塞页面后续内容
将所有的js标签放在页面底部,保证脚本执行前已完成DOM渲染
尽可能合并脚本
减少内联js的使用
注意多个js标签的引入顺序
使用defer属性,该属性可以使脚本在文档完全呈现以后再执行
使用async属性,可以使当前脚本不必等待其他脚本的执行,也不必阻塞文档的呈现
版权归原作者 cute_ming 所有, 如有侵权,请联系我们删除。