本学问进修用时：1小时
媒介：学前端前，我经常使用的阅读器是搜狗、360，搜索引擎用的是百度。学前端后，谷歌算是从新为我翻开了熟悉新天下的大门。但不管用什么阅读器，登录网站都是我们每一个互联网人天天都邑做的事。但我们是不是想过，从我们翻开阅读器在地点栏中输入一连串的字符，到按下键盘上的 Enter 键、页面展如今我们面前，这一一连行动的背地，收集、计算机都为我们做了些什么？以及你行将处置的前端事情又在这个中介入了哪一项或哪几项事情呢？
1 相干观点简述
起首，翻开你最常阅读的一个网站，在最上方的地点栏里，你将会看到一连串的字符。比方知乎：
https://www.zhihu.com/people/oliver-8-10/activities
上边这一连串的字符，就叫做 URL（Uniform Resource Locator 一致资本定位符），现实上就是我们一般叫的“网址”。
1.1 URL 的作用
在茫茫收集天下中，我们的阅读器是靠一个个 URL 来查找资本的详细位置的。
1.2 URL 的构成部份（用以下例子申明）
https://www.zhihu.com/people/oliver-8-10/activities
1.2.1 协定部份
https
它是阅读器和 www 万维网之间的沟通体式格局，它会通知阅读器在收集天下中找到资本的准确位置。罕见的协定有：http（最罕见的收集传输协定）、https（举行加密的收集传输协定）、file（当地文件夹协定）、ftp、telnet 等。
1.2.2 收集地点部份
www.zhihu.com
即我们常说的“域名”（Domain Name），为了轻易影象，人们用能够语义化的域名来登录网站。但我们必需晓得，每一个域名背地都有其对应的 IP 地点。IP 是收集天下中每台联网的计算机为完成互相通讯而遵照的划定规矩协定，IP 能够详细分为：
1局域网 IP：
- 比方一个合租的屋子，人人共用一个路由的 wifi，那现实上一切连接上这个 wifi 的电脑都处于一样一个局域网，这里的 IP 就是局域网 IP；
- 在一样的局域网里，能够直接经过历程这个 IP 地点接见这个局域网里的其他机械；
- 但陌生人是不能够经过历程这个 IP 找到你的，由于这个 IP 是假的，只在这个小圈子里能够用。
2公网 IP：
- 假如你做了一个网站要放在公网上，就要要求公网 IP，公网 IP 是须要要求的。
3本机 IP：
- 当前电脑的 IP 是 127.0.0.1 ，就是代表自身。
1.2.3 资本途径部份
/people/oliver-8-10/activities
1.3 DNS
提到域名和 IP 关联后，就必需明白 DNS（Domain Name System 域名体系）——用来纪录域名和 IP 地点互相映照的信息。
- DNS 作用：能够让人们免于记着那些烦琐的数串；
- 全国 DNS 信息能够在网上查找到，各省都有对应分派的 IP 网段；
- 大型企业都有自身的 DNS 服务器，特地用来存储域名和 IP 的映照关联；
- 如谷歌的 DNS 服务器地点 8.8.8.8 ；国内着名 DNS 服务器地点 114.114.114.114 。
2 大抵流程概述
从 URL 输入到页面展现经过以下历程：
3 详细流程概述
3.1 第一步，在阅读器输入 URL
在地点栏输入响应的 URL 。
3.2 第二步，阅读器查找域名对应的 IP 地点
第一步中，我们已输入了响应的 URL，但阅读器自身并不能辨认 URL 是什么，因而从我们输入 URL 最先，阅读器就要举行域名剖析来找到对应 IP——DNS 剖析是阅读器的现实寻址体式格局：
- 查找阅读器缓存——近期阅读过的网站，阅读器会缓存 DNS 纪录一段时间 （假如没有则往下） ；
- 查找体系缓存——从 C 盘的 hosts 文件查找是不是有存储的 DNS 信息，查找是不是有目的域名和对应的 IP 地点 （假如没有则往下）；
- 查找路由器缓存 （假如没有则往下）；
- 查找 ISP DNS 缓存——从收集服务商（比方电信）的 DNS 缓存信息中查找（假如没有则往下）；
- 经过以上体式格局都没找到对应 IP 的话，就会向根域名服务器查找目的 URL 对应的 IP，根域名服务器会向下级服务器通报要求，层层下发，直到找到对应的 IP 为止。
3.3 第三步，阅读器依据 IP 地点与服务器竖立联络
第2步中，阅读器经过历程 IP 寻址找到了对应的服务器，阅读器就将用户提议的 http 要求发送给服务器。服务器最先处置惩罚用户要求：
- 每台服务器上都邑装置处置惩罚要求的运用——web sever；
- 罕见的 web sever 产物有：apache 、nginx 、IIS 和 Lighttpd 等；
- web sever 能够明白为一个管理者，它不做详细的要求处置惩罚，而是会连系配置文件，把差别用户发来的要求托付给服务器上特地处置惩罚响应要求的递次（服务器上的响应递次最先处置惩罚要求的这一部份，浅显说就是现实背景处置惩罚的事情）：
背景开辟如今有许多框架，但大部份都是根据 MVC（model view controller）设想形式搭建的，它将服务器上的运用递次分红3个核心部件且离别处置惩罚自身的使命，完成输入、处置惩罚、输出的星散：
3.3.1 模子（model）
- 模子，是将现实开辟历程当中的营业划定规矩和所触及的数据格式举行模子化；
- 运用于模子的代码只需写一次就能够被多个视图重用；
- 在 MVC 三个部件中，模子具有最多的处置惩罚使命；
- 一个模子能为多个视图供应数据。
3.3.2 视图（view）
- 视图是用户看到并与之交互的界面；
- 这一部份，也就是我们前端事情的主力地点。
3.3.3 控制器（controller）
- 作用：吸收用户的输入并挪用模子（M）和视图（V）去完成用户的需求；
- 职位：控制器也是处于一个管理者的职位——从视图（V）吸收要求并决议挪用哪一个模子构件（M）来处置惩罚要求，然后再肯定用哪一个视图（V）来显现模子（M）处置惩罚返回的数据。
总而言之：
- 起首，控制器（C）吸收用户的要求，并决议应当挪用哪一个模子（M）来举行处置惩罚；
- 然后，模子（M）用营业逻辑来处置惩罚用户的要求并返回数据；
- 末了，控制器（C）再用响应的视图（V）来格式化模子（M），进而返回 html 字符串给阅读器。
3.4 第四步，阅读器与服务器通讯
在上边的第 3 步中，服务器返回了 html 字符串给阅读器，此时，阅读器将会对其举行剖析、衬着并终究绘制网页：
3.4.1 加载
- 阅读器对一个 html 页面的加载递次是从上而下的；
- 阅读器在加载的历程当中，同时举行剖析、衬着处置惩罚；
- 在这个历程当中，碰到 link 标签、image 标签、script 标签时，阅读器会再次向服务器发送要求以猎取响应的 css 文件、图片资本、js 文件，并实行 js 代码，同步举行加载、剖析。
3.4.2 剖析、衬着
- 剖析的历程，实在就是天生 dom 树（Document Object Model 文档对象模子）；
- dom 树是由 dom 元素及属性节点构成，而且加上 css 剖析的款式对象和 js剖析后的行动完成；
- 衬着：就是将 dom 树举行可视化示意。
3.4.3 绘制网页
- 阅读器经过历程衬着，将 dom 树可视化，获得衬着树；
- 构建衬着树使页面以准确的递次绘制出来，阅读器遵照肯定的衬着划定规矩，完成网站页面的绘制，并终究完成页面的展现。
跋文：以上就是从 URL 输入到页面展现的悉数历程，不能不信服计算机真的神通广大、人类真的伶俐无限。代码的天下是严谨的、是敷衍了事的，你支付，它就有回馈。固然，以上每一个节点都席卷许多的学问点，关于学前端的你我来讲，要坚持谦虚之心，学无止境，它也值得你我用后边的 10000 小时来看待。
（本文版权归 “Olis 前端一万小时” 一切，未经受权，请勿转载）