从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将会被执行。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容