一个页面从输入URL到页面加载显示完成，这个过程都发生了什么？
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了一个页面从输入URL到页面加载显示完成，这个过程都发生了什么？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1921字，纯文字阅读大概需要3分钟。
内容图文
对于网址栏的URL不同的操作方式有不同的加载资源、获取数据的方式，下面的详细过程针对"在地址栏输入URL，按enter(回车)键加载资源"此种操作方式做解析，其它的方式的过程大同小异，差异会在后面再做分析。
1. 浏览器开启一个线程来处理这个请求，对URL判断如果是http协议就按照web方式处理；
2. 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容（此时没有向服务端发请求）。若没有，则进行下一步操作（后面需要向服务端发送请求）；
3. 通过DNS解析获取网址的IP地址;
4. 向真实IP地址服务器发起tcp连接，与浏览器建立tcp三次握手。
5. 握手成功后，进行HTTP协议会话，浏览器发送报头(请求报头);
6. 进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
7. 进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
8. 处理结束回馈报头，将数据返回至浏览器;
9. 浏览器开始下载html文档(响应报头，状态码200)，同时设置缓存;
10. 之后浏览器对整个 HTML 结构进行解析，形成 DOM 树；与此同时，它还需要对相应的 CSS 文件进行解析，形成 CSS 树（CSSOM）。
接下来，需要结合 DOM + CSSOM，形成一个绘制树（Render Tree）;
11. 得到绘制树之后，需要计算每个结点在页面中的位置，这一个过程称为layout ；
12. layout的过程是在一个连续的二维平面上进行的，接下来，需要将这些结果栅格化，映射到屏幕的离散二维平面上，这一过
程称为 paint ; 现代浏览器为提升性能，将页面划分多个 layer，各自进行 paint 然后组合成一个页面（composite layers）。
PS: 开头说到的"对于网址栏的URL不同的操作方式有不同的加载资源、获取数据的方式"中其他方式的过程与上面方式差不多，只是在处理缓存这一环节上有些不同：
1. “转至”或地址栏里回车刷新：见上
2. F5刷新：没有第2步，在第8步判断返回值，如果返回304则表示有缓存，且此时直接用缓存；如果返回200则表示没有缓存，顺序执行至最后
3. Ctrl+F5刷新网页的区别：没有第2步，且在第8步一定返回200并顺序执行至最后
（对于以上3种不同方式更好的应该从http协议的缓存机制上做区分更容易理解，此处更侧重'向服务端发送请求及其返回值'这方面做一下区别）
PS: 10-12步更侧重于前端渲染页面过程，详细可参考：http://www.jianshu.com/p/016e8e78eb1f
内容总结
以上是互联网集市为您收集整理的一个页面从输入URL到页面加载显示完成，这个过程都发生了什么？全部内容，希望文章能够帮你解决一个页面从输入URL到页面加载显示完成，这个过程都发生了什么？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。