大家好，我是前端小白，刚刚学习到从URL输入到页面展现发生了什么这个问题，以我现在的能力对这个问题理解的还不是特别的深入，但是还想总结一下自己目前理解的程度，以后有了更深层次的理解体会，在继续更新。哈哈~~~
我们经常在浏览器地址栏输入一些网址，然后浏览器会反馈给我们相应的页面，但是有没有想过，在我们输入网址到呈现页面的过程中，到底发什么了什么？
大概这样的一个流程：
1、在地址栏里面输入URL
2、域名解析
3、服务器处理
4、网站处理流程
5、浏览器处理
6、页面绘制
一、什么是URL?
URL是统一资源定位符，用于定位互联网上的资源。说白了就是网址，URL的格式如下：
协议类型://<主机名>:<端口>/<路径>/文件名
URL有4种传输协议：http、https、ftp、file
那这个URL为例：http://www.jianshu.com/u/7cb163d9f
http 超文本传输协议
www.jianshu.com 主机名
/u/7cb163d9f 文件路径
二、域名解析
当用户在浏览器中输入url后,你使用的电脑会发出一个DNS请求到本地DNS服务器。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动,DNS请求到达本地DNS服务器之后会有以下几个步骤：
1、浏览器缓存 – 浏览器会缓存DNS记录一段时间
2、系统缓存 - 从 Hosts 文件查找是否有该域名和对应 IP。
3、路由器缓存 – 一般路由器也会缓存域名信息。
4、ISP DNS 缓存 – 比如到电信的 DNS 上查找缓存。
5、如果都没有找到，则向根域名服务器查找域名对应 IP，根域名服务器把请求转发到下一级，知道找到 IP
1618288278-57f00bf9444dd.png
三、服务器处理
服务器是一台安装系统的机器，常见的系统如Linux、windows server 2012
系统里安装的处理请求的应用叫 Web server
四、网站处理流程
MVC 模型(model)-视图(view)-控制器(controller)
26373b7e-83c5-41f3-bb33-c614fb8a37fd.png
五、浏览器处理
HTML字符串被浏览器接受后被一句句读取解析
解析到link 标签后重新发送请求获取css
解析到 script标签后发送请求获取 js，并执行代码
解析到img 标签后发送请求获取图片资源
六、页面绘制
浏览器根据 HTML 和 CSS 计算得到渲染树，绘制到屏幕上,js 会被执行
参考：
http://book.jirengu.com/jrg-team/frontend-knowledge-ppt/www/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8-%E4%BB%8E%20URL%E8%BE%93%E5%85%A5%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%8E%B0.html#/
http://www.jianshu.com/p/fc957e25102e
https://segmentfault.com/a/1190000006879700
网友评论