用户打开浏览器,输入 baidu.com,页面展示百度首页。整个过程发生了什么?——这是一个从输入URL到页面展现的问题。
从输入URL到页面展现的过程
基本名词
URL:统一资源定位符,用于定位互联网上的资源。
协议:http https ftp file
IP:每个处于互联网的机器都有一个IP,127.0.0.1代表本机IP。
DNS:Domain Name System,域名系统。
服务器:服务器是一台安装系统的服务器,常见的系统 如Linux。
Web Server:系统里安装的处理请求的应用叫Web Server,接受用户的请求,返回给网站代码。
1.在浏览器里输入URL
2.域名解析
把域名解析成IP,域名存在的作用就是方便记忆,一个IP可以对应多个域名,域名不可重复。
域名解析流程:
(1)在浏览器里找缓存:浏览器会缓存之前用过的DNS一段时间。
(2)在系统缓存里查找:从Host文件查找是否有该域名对应的IP。
(3)在路由器缓存里查找:一般路由器也会缓存域名。
(4)在ISPDNS缓存里查找:也就是在对应服务供应商那里查找。
(5)在根域名服务器查找域名对应的IP。
3.服务器处理
web server接受用户的请求,并返回代码。
web server担任管控的角色,对于不同用户发送的请求,会结合配置文件,把不同的请求委托给服务器上处理对应请求的程序进行处理,然后返回后台程序处理的结果作为相应。
4.网站处理流程
网站处理,就是实际后台处理的工作。后台开发现在有很多框架,但大部分还是按照MVC设计模式进行搭建的。MVC是一个设计模式,将应用程序分成三个核心部件:模型(model)--视图(view)--控制器(controller),他们各自处理自己的任务,实现输入、处理和输出。
(1)视图(view)
视图是用户看到并与之交互的界面,是前端工作的主力部分。
(2)模型(model)
模型是将实际开发中的业务规则和所涉及的数据格式模型化,应用于模型的代码只需写一次就可以被多个视图使用。在MVC的三个部件中,模型拥有最多的处理任务,一个模型能为多个视图提供数据。
(3)控制器(controller)
控制器接受服务器传送过来的用户输入并调用模型和视图去完成用户需求。Controller处于管理角色,从视图接受请求并决定调用哪儿个模型构件去处理请求,然后在确定用哪儿个视图来显示模型处理返回的数据。
5.浏览器处理
通过后台处理返回html字符串结果会被浏览器读取解析,对应的就是html页面加载、解析、渲染的工作。
(1)加载
浏览器对一个html页面的加载顺序是从上而下的,并在加载过程中进行解析渲染处理。在这个过程中遇到link标签、image标签、script标签时,浏览器会再次向服务器发送请求获取css文件、图片资源、js文件,并执行js代码,同步进行加载解析。
(2)解析、渲染
解析的过程中,其实就是生成解析树,即dom树。dom树是由dom元素及属性节点组成,加上css解析的样式对象和js解析后的动作实现。而渲染,就是将dom树进行可视化表示。
6.绘制网页
浏览器通过上面步骤计算得到渲染树,是dom树的可视化表示,构建渲染树使页面以正确的顺序绘制出来,遵循一定的渲染规则,经过一系列的渲染工作,实现网页的绘制,由此最终完成了页面的绘制。