从URL输入到页面展现

划重点

输入一个url地址——对url中的域名进行解析——服务器处理——网站处理——浏览器处理

一、URL

1、现象:

随意在浏览器里输入一个网址,比如baidu.com你会看到什么?看到百度的搜索页面:
image.png

2、url是什么

它是统一资源定位符(Uniform Resource Locator),用于定位互联网上的资源。即寻找互联网上的资源,如图片、文件或者css文件等,需要通过互联网的一个东西,则叫url。

3、url由什么组成

协议、端口号、域名,其他相关信息

4、常见的协议

http、https、ftp、file协议
如:*

  • http:// wangxiaoqin.com/blog 帮你找到网络上的某个资源。明文传输,即传输过程中使用路由器拦截,如用户名密码都能被看到

  • https:// 10.245.23.456:3000/users 经过一个加密后的协议, 相当于加了一层隧道,无法破解,用户名和密码都不会被看到,是一个安全的协议

  • file:///users/hunger/workspace/a.html 从本地打开至浏览器,用于定位你本地电脑上的文件

  • // wangxiaoqin.com/static/imgs/a.png 当前文件的url与当前页面的协议保持一致


二、对URL中的域名进行解析

对于http://wnagxiaoqin.com的URL,浏览器实际上不知道wangxiaoqin.com到底是什么东西,需要查找wangxiaoqin.com网站所在的服务器的IP地址,才能知道找到目标。

即通过一种方式,将wangxiaoqin.com解析成wangxiaoqin.com所对应的IP。

1、域名的作用最后也是要找到IP,为何不直接使用IP?

平时用的网站,IP对应的均为数字,或者一个网站对应众多IP地址,而域名则具有语义化的作用,好识别

2、域名是什么

对于http://wangxiaoqin.com.com:**8080**/blog,wangxiaoqin.com就是域名(注:**:8080**可以省略)
如,www.baidu.com(加粗的为域名)

3、IP地址是什么

每个处于互联网的设备都有IP地址,刑如:192.168.0.1 ,没有IP地址别人就找不到你。
局域网IP和公网IP是有差别的,如公司使用同一个路由器,连接同一WiFi,处于同一局域网,IP地址相应的就是局域网的IP地址。直接通过这个IP地址,访问到这个局域网其他机器,外界的其他人则找不到。

  • 实践点: 调试手机:如做一个手机页面的开发项目,在PC端搭了一个服务器测试是没问题,手机上的测试:手机和电脑连接同一个WiFi,手机浏览器通过电脑的ip地址去访问电脑上的服务器
  • 公网IP需要申请
    • 127.0.0.1代表本机的IP

4、如何把一个域名解析成一个IP地址?

流程:

  • 浏览器缓存: 通过输入wangxiaoqin.com,之前找到过这个域名相对应的IP地址,将会缓存DNS记录一段时间,即过往记录,下次访问直接访问IP地址;
  • 系统缓存: 若是第一次访问网站,将会查找系统缓存,即从Hosts文件查找是否有该域名和对应的IP地址(通过soptlight搜索houstbuddy——/etc/hosts或develop找到hosts文件,即IP+缓存名

作用:
开发一个网站,开发过程中,关于开发网站的html、css等文件资料均在本地,而我想要写一个线上的域名,如wangxiaoqin.com。想要修改,则可以开启一个服务器去测试,不想找到远程服务器的东西,而是找到电脑中的文件。此时,我们可以在系统缓存中找到wangxiaoqin.com对应的IP地址,打开html文件,所有的请求资源如果是wangxiaoqin.com则将会自动转向相对应的IP地址

  • 路由器缓存, 一般的路由器登录之后也会缓存域名信息
  • ISP DNS缓存, 比如到电信(你的服务商)的DNS 上查找缓存
  • 如果以上都没有,开启查找IP的过程: 如访问某个小国的新的域名,则向根域名服务器查找域名对应的IP,比如我请求的是abc.com,那它就会向根域名服务器.com这个域名服务器去查找,把请求转发到下一级,找到之后便会告诉你IP是多少

5、dns连接上网问题

(1)dns是什么
DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。通过域名,最终得到该域名对应的IP地址的过程叫做域名解析(或主机名解析)。

(2)电脑突然上不了网

  • 修改dns为8.8.8.8或者114.114.114.114即能上网
  • 8.8.8.8 , 即谷歌提供的一个dns服务器。如打不开baidu.com是因为你中间的某个环节出问题,然后baidu.com对应的IP找不到,此时可将电脑中的dns服务器直接改成谷歌的服务器,那么就会直接从谷歌的服务器去找该域名下对应IP
  • 114.114.114.114 ,权威提供dns的国内服务商
    结论: 从某个有记录的服务器去查找

(3)dns劫持是什么
比如,黑客攻击某个节点或某根域名服务器(即攻击这里所管理的众多IP地址),如baidu.com相对应的百度IP被侵入任意网站的IP,再打开baidu.com通过域名解析之后,可能通过ISP dns上查找到任意IP,会得到“真域名 假IP”的假网站,危害巨大

通过域名,在浏览器输入url地址,得到IP地址 (经过一段复杂的IP寻址的过程) 知道IP之后,浏览器可以向IP地址发送请求


三、服务器处理(浏览器可以向IP地址发送请求)

1、服务器是什么

服务器是一台安装系统的机器,就是一台电脑。

2、常见的系统

如linux(无图形界面)、windows sever2012(可以安装一些服务端的软件,有图形界面)。

3、机器处理请求

如何知道wangxiaoqin.com是什么?系统里安装的处理请求(如wangxiaoqin.com)的软件应用叫web server,用于接收网站发来的请求,并处理

4、web服务器

(1)常见的web服务器
Apache、Nginx、IIS、Lighttpd

(2)作用
web服务器,用于接收用户的Request交给网站相关代码,或者接收请求反向代理到其他web服务器。即管理的入口
白色区域为服务器所在的机器系统.png

机器上安装了Nginx的web服务器,如访问http://jscode.mehttp://jirengu.comhttp://hungerworks.com(三个网站请求,网站地址和域名都不一样,但都是在同一个服务器里),通过域名解析得到了机器里的同一个IP地址:202.112.230.14,即打开这三个网站均能找到这台机器,请求被机器中的web服务器——Nginx接管,通过配置文件将请求的网站匹配相应的文件夹代码,运行返回效果。

凡是通过http方式获取的网站,都是通过web服务器做一个管控。即使在本地搭建网站也是需要搭建web服务器。

web服务器处理完请求之后交至网站(如wagxiaoqin.com),运行代码文件,后台云烟执行。


四、网站处理流程

1、后台语言

ruby、nodejs、python

2、MVC模式(模型(model)视图(view)控制器(controller))

rails+ruby做范例
比如,浏览器访问jirengu.com/users,交至/users这个网站后代码运行,匹配路由,发现有/users之后,交给控制器(一个代码文件),它会向模型(可看成文件)发送调用查找所有用户请求,模型从数据库中进行查找,数据库返回之后,控制器获取模型所提供user.all的接口数据,控制器获取所有用户数据,将数据添置到视图(可看成模板)中生成一个html,发回浏览器,即能看到有所有用户的html页面。前端对应则是视图(htmlcss框架等)


五、浏览器处理

网站处理之后,该网站生成html页面发回浏览器,html字符串被浏览器接收后被一句句读取解析,当解析到link标签后,如某个标签对应的css地址,重新发送请求获取css地址;当解析到script标签后,向如src的地址向服务器发送请求,获取js并执行代码;当解析到img标签后发送请求获取图片资源

即第一次获取html时,浏览器会重新把html里的链接和相关资源再请求一次,审查元素里有众多requests


六、绘制网页

浏览器根据html和css计算得到渲染树,绘制到屏幕。即浏览器根据html、css,它知道每个元素该怎样去放置,假设页面作为一幅画,css控制画的样子,html控制画的内容,浏览器画(渲染),之后js将会被执行。

-------------本文结束感谢您的阅读-------------