本知识学习时间：1小时百度。学完前端，谷歌为我重新打开了新世界的大门。但是无论使用什么浏览器，登录网站都是我们每个互联网用户每天都会做的事情。但我们有没有想过，从我们打开浏览器，在地址栏输入一串字符，到按下键盘上的回车键，页面展现在我们眼前，在这连续不断的动作背后，网络和电脑都替我们做了吗？什么？而你即将从事的前端工作涉及到哪一项或几项工作？1相关概念简介首先，打开一个你最常浏览的网站，你会在顶部的地址栏中看到一串字符。比如知乎：https://www.zhihu.com/people/oliver-8-10/activities上面这一系列字符我们称之为URL（统一资源定位符UniformResourceLocator），其实就是我们平时所说的“URL”。1.1URL的作用在浩瀚的网络世界中，我们的浏览器依靠URL来寻找资源的具体位置。1.2URL的组成部分（用下面的例子说明）https://www.zhihu.com/people/oliver-8-10/activities1.2.1协议部分https是浏览器与www世界的通信方式WideWeb，它会告诉浏览器在网络世界中找到资源的正确位置。常用协议包括：http（最常见的网络传输协议）、https（加密网络传输协议）、file（本地文件夹协议）、ftp、telnet等。1.2.2网址www.zhihu.com部分为我们常说的“域名”。为了便于记忆，人们使用语义域名登录网站。但是我们要知道，每一个域名的背后都有其对应的IP地址。IP是网络世界中每一台联网的计算机为实现相互通信而遵循的规则协议。IP具体可以分为：1??局域网IP：比如在合租的房子里，大家共享一个路由的wifi，所以实际上所有的连接都是连接到这个wifi的电脑都在同一个局域网，这里的IP就是局域网知识产权；在同一个局域网内，可以通过该IP地址直接访问本局域网内的其他机器；但是陌生人无法通过这个IP找到你，因为这个IP是假的，只能在这个小圈子里用。2??公网IP：如果你做了网站，想放到公网，需要申请公网IP，需要申请公网IP。3??本机IP：电脑当前IP为127.0.0.1，代表自己。1.2.3资源路径部分/people/oliver-8-10/activities1.3DNS提到域名和IP的关系，你必须了解DNS（DomainNameSystem域名系统）——用来记录域名和IP之间的映射关系IP地址信息。DNS的作用：可以免去人们记忆那些繁琐的数字；网上可以查到全国的DNS信息，每个省都有对应分配的IP网段；大企业都有自己的DNS服务器，专门用来存放域名和IP映射关系；比如谷歌的DNS服务器地址8.8.8.8；国内知名DNS服务器地址114.114.114.114。2一般流程概述URL输入到页面显示的流程如下：在浏览器中输入URL；浏览器搜索域名对应的IP地址；浏览器根据IP地址与服务器建立联系；浏览器与服务器通信：浏览器请求，服务器处理请求并渲染页面。3具体过程概述3.1第一步，在浏览器中输入网址，在地址栏中输入相应的网址。3.2第二步，浏览器搜索域名对应的IP地址第一步，我们已经输入了对应的URL，但是浏览器本身并不能识别这个URL是什么，所以从我们输入URL的那一刻起，浏览器会搜索域名解析找到对应的IP——DNS解析是浏览器的实际寻址方式：查找浏览器缓存——对于最近浏览过的网站，浏览器会缓存一段时间的DNS记录（如果不是，请往下）；查找系统缓存——从C盘的hosts文件中查找是否有存储的DNS信息，查找是否有目标域名和对应的IP地址（如果没有则往下）；查找路由器缓存（如果没有，请关闭）；lookfortheISPDNScache——从网络服务商（如电信）的DNS缓存信息中查找（如果没有找到），如果通过以上方法都没有找到对应的IP，则会查找根域名服务器对于目标URL对应的IP，根域名服务器将请求传送给下级服务器，逐层向下发送，直到找到对应的IP。3.3第三步，浏览器根据IP地址与服务器建立连接。第二步，浏览器通过IP寻址找到对应的服务器，浏览器将用户发起的http请求发送给服务器。服务器开始处理用户请求：每个服务器都会安装一个处理请求的应用——web服务器；常见的Web服务器产品包括：apache、nginx、IIS和Lighttpd等；web服务器可以理解为一个管理器，它不做具体的事情，而是将配置文件组合起来，将不同用户发送的请求委托给服务器上的程序来处理相应的请求（服务器上相应的程序开始向处理请求的部分，通俗的说就是实际的后台处理工作）：后台开发的框架有很多，但是大部分都是按照MVC（modelviewcontroller）设计模式来构建的，它划分了应用服务器上的程序分为三个核心组件，分别处理各自的任务，实现了输入、处理、输出的分离：3.3.1模型（model）模型是对实际开发过程中涉及的业务规则和数据格式进行建模；应用于模型的代码只需编写一次即可被多个视图复用；在MVC的三个组件中，模型处理最多；一个模型可以为多个视图提供数据。3.3.2视图（view）视图是用户看到并与之交互的界面；这部分是我们前端工作的主力军。3.3.3Controller（控制器）角色：接受用户输入并调用模型（M）和视图（V）完成用户的需求；status：controller也处于管理者的位置——收到来自视图（V）的请求并决定调用哪个模型组件（M）来处理请求，进而决定使用哪个视图（V）来展示数据由模型(M)过程返回。?简而言之：首先，控制器（C）接收到用户的请求，决定调用哪个模型（M）进行处理；然后，模型（M）使用业务逻辑处理用户的请求并返回数据；最后，控制器（C）再使用对应的视图（V）格式化模型（M），然后返回html字符串给浏览器。3.4第四步，浏览器与服务器的通信。上面第三步，服务器返回html字符串给浏览器。这时候浏览器会解析，渲染，最后绘制网页：3.4.1加载浏览器从上到下加载一个html页面；在加载过程中，浏览器同时解析和渲染；在这个过程中，当遇到link标签、image标签、script标签时，浏览器会再次向服务器发送请求，获取对应的css文件、图片资源、js文件，并执行js代码加载解析同步地。3.4.2解析和渲染解析的过程其实就是生成dom树（DocumentObjectModel文档对象模型）；dom树由dom元素和属性节点，加上css解析的style对象和js解析后的action实现组成；渲染：就是将dom树可视化。3.4.3绘制web浏览器通过渲染将dom树可视化，得到渲染树；构建渲染树，使页面按照正确的顺序绘制，浏览器按照一定的渲染规则实现网站页面的绘制，最终完成页面展示的渲染。后记：以上就是从URL输入到页面显示的全过程。不得不佩服电脑的神通，佩服人类无穷的智慧。代码的世界是严谨而细致的。如果你付钱，它会还给你。当然，以上每一个节点都包含了很多的知识点。对于学习前端的你我来说，一定要保持一颗谦虚的心，学无止境。也值得你我接下来的10000小时去善待。（本文版权归《奥利前端一万小时》所有，未经授权请勿转载）
