- 浏览器通过用户在地址中输入的URL。
- 浏览器先查看浏览器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有, 则进入步骤三。
- 浏览器发起DNS解析请求,将域名转换为IP地址。
- 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
- 握手成功后,浏览器向服务器发送http请求,请求数据包。
- 服务器接收请求报文,并解析。
- 服务器处理用户请求,并将处理结果封装成HTTP响应报文。
- 服务器将HTTP响应报文发送给浏览器。
- 浏览器接收服务器响应的HTTP报文,并解析。
- 浏览器解析HTML页面并展示,在解析HTML页面时遇到新的资源需要再次发起请求。
- 最终浏览器展示出了页面。
请求返回后,便进入了我们关注的前端模块
简单来说,浏览器会解析HTML生成DOM Tree,根据CSS生成CSS Rule Tree,将 DOM Tree 和 CSS Rule Tree合并,构建Render tree(渲染树),然后进行布局(Layout),最后进行绘制(Painting)。这个过程是逐步完成的,期间 js 可能会参与到 DOM Tree 构建,CSS 也可能会影响到 DOM Tree构建。