获取到html文件
第一步当用户在url中输入网址时
1. 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址，如果缓存中有，这个解析过程就结束。
2. 如果在本地没有找到对应的ip地址，就到本地域名服务器中去找。
3. 如果本地域名服务器没找到就向根域名服务器发起请求去找。
第二步：找到IP地址后浏览器和服务器建立连接(属于传输层，涉及TCP，UDP协议，TCP的三次握手和松手过程，TCP支持的应用协议主要有：Telnet、FTP、SMTP等；UDP支持的应用层协议主要有：NFS（网络文件系统）、SNMP（简单网络管理协议）、DNS（主域名称系统）、TFTP（通用文件传输协议）等。)
第三步： 浏览器发起HTTP(属于五层网络模型中的应用层，涉及HTTP协议，TODO: 《图解HTTP》)请求（属于五层模型中的应用层），服务器发送回HTTP报文。
接下来就会释放TCP链接。
构建DOM树
由于浏览器采用自上而下的方式解析，在遇到这两种元素时都会阻塞浏览器的解析，直到外部资源加载并解析或执行完毕后才会继续向下解析html。对于样式与脚本的先后顺序同样也会影响到浏览器的解析过程，究其原因主要在于：script脚本执行过程中可能会修改html界面（如document.write函数）；DOM节点的CSS样式会影响js的执行结果。
DOM树创建完成后DOMContentLoaded事件即触发，这时候可以用过script来操作DOM节点。
构建呈现树
HTML解析完毕后，开始构建呈现树RenderTree，这一步的主要工作在于将css样式应用到DOM节点上，WebKit内核将这一过程称为附着，其他浏览器有不同的概念。对前端工程师而言这个过程会涉及到CSS层叠问题。
呈现树的每一个节点即为与其相对应的DOM节点的CSS框，框的类型与DOM节点的display属性有关，block元素生成block框，inline元素生成inline框。每一个呈现树节点都有与之相对应的DOM节点，但DOM节点不一定有与之相对应的呈现树节点，比如display属性为none的DOM节点，而且呈现树节点在呈现树中的位置与他们在DOM树中的位置不一定相同，比如float与绝对定位元素。
布局
呈现树之后进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。
为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。
绘制
在绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。
原文地址：https://www.cnblogs.com/summerList/p/10860312.html