过程大致分为2个过程:获取资源和解析渲染资源
从URL输入到浏览器地址栏回车之后,首先直行当前页面的beforeunload事件中的函数,然后跳转页面(假设已经允许跳转页面)
然后判断是否有缓存资源,若缓存列表中有资源则去缓存列表中加载,若没有则进行下面操作。
首先进行DNS解析,把域名解析为对应服务器的ip。若是https协议的链接,进行tls的连接。
然后建立tcp连接
连接建立之后浏览器携带请求头,请求行,以及cookie的等信息一块放入请求头中发送到服务器
然后经过负载均衡的服务器(将请求发送到多个服务器上)
服务器响应浏览器的请求,并返回内容给浏览器
然后浏览器根据状态码进行判断,若是400,500则报错,300则重定向(次数有限制,超出则报错),200则下载资源
然后解析文件
如果是gzip格式,则先解压,然后解码
然后准备渲染
若是HTML则渲染DOM树
若是CSS则渲染CSSOM树
若是script,
有async 则并行下载并执行js文件
有defer 则先下载js文件,等待HTML解析完成后再执行js
都没有,则会阻塞渲染,要js下载完成并且执行完成后再加载HTML,因此一般都放在最后
然后CSSDOM树和DOM树构建之后生成render树,进行页面布局,样式调整
生成render树过程中,浏览器开始调用GPU绘制,合成图层,展示在页面上。
流程图如下: