首页 > 在前端中 在浏览器中输入一个网址 从输入到页面显示出来 是个什么样的过程

在前端中 在浏览器中输入一个网址 从输入到页面显示出来 是个什么样的过程

在浏览器中输入一个网址 确定好一个页面 渲染到浏览器中 是怎样的过程


  1. DNS, 查询域名对应的IP

  2. 发送HTTP请求, 获取HTML文件. 这个文件可能是静态的, 有可能是动态生成的, 但是浏览器并不关心.

  3. 解析获取到的HTML, 加载HTML中应用的各种资源, 包括: js, css, jpg...

  4. 执行js.

当然这里面还有很多细节. 比如浏览器的并发度, js执行对浏览器的阻塞等等...


https://.com/a/1190000000697...


这个问题虽然只有两个2个动作:输入URL和呈现页面,但这背后发生了很多"有趣"的事情,这个过程也涉及到很多方面的技术,包括像浏览器、DNS、http、html、服务器等。如果让我来回答,它大致的过程应该是这样的:DNS解析-->建立连接,发送数据包 -->服务器响应请求,返回给浏览器-->浏览器渲染程序页面。

1.DNS解析

当我搜索这个问题的时候,首先在浏览器输入了一个URL地址,但URL中服务器地址是一个域名而不是一个指定的IP地址,路由器并不知道你想要查找的地址,那么DNS域名解析系统会将该域名解析成ip,而IP地址是唯一的, 每一个ip地址对应网络上的一台计算机

2.建立网络连接,发送数据包

由于1的努力,已经能够根据ip和端口号与网络上对应的服务器建立连接,浏览器这边会向服务器发送一个数据包,里面包含了大量的信息,但这个数据包有一定的格式。就像我给你邮个快递,也得遵循邮递公司的一些规则吧!我得写上我的身份信息、寄的物品、标明邮递地址....道理是一样的,到了网络中这些规则就是“Http协议(网络协议)”。

3.服务器响应请求,返回给浏览器

服务器会分解你的数据包,例如你查找的是一个文档,那么服务器可能会返回一个doc文档或者zip压缩资源给你;如果你访问的是一个链接页面,那么服务器相应的返回一个包含HTML/CSS标记文档,这些请求和响应都有一个通用的写法,这些规则也就是前面提到的"http协议"。
客户端向服务器请求资源时,除了告诉服务器要请求的资源,同时还会附带一些其他的信息,这部分信息放在"header"部分(服务器响应请求也一样!),主要有请求头(略)和响应头,

http响应头详解:

   Request URL:https://static.zhihu.com/static/revved/-/css/m.652b53b3.css
   Request Method:GET
   Status Code:200 OK (from cache)
   Remote Address:123.125.110.16:443
   Response Headers
   accept-ranges:bytes //在整个返回体中本部分的字节位置
   access-control-allow-origin:*//跨域请求,*则允许所有域名的脚本访问该资源。
   cache-control:max-age=600  //指定请求和响应遵循的缓存机制,当你请求头里设置no-cache时,是告诉服务器我这里没有缓存。响应头里这里设置的时间是600,意思浏览器600秒之内别来找我,自己去缓存找吧!
   content-encoding:gzip   // web服务器支持的返回内容压缩编码类型为gzip,web服务器表明自己使用了什么压缩方法。
   content-length:49207 //资源长度
   content-type:text/css //告诉客户端,资源文件的类型,一般还有字符编码,例如charset=UTF-8,客户端将通过utf-8对资源进行解码,然后对资源进行html解析。
   date:Mon, 07 Mar 2016 12:23:37 GMT//记录时间
   expires:Mon, 07 Mar 2016 12:33:37 GMT //表明该实体将于什么时候过期
   last-modified:Mon, 07 Mar 2016 07:19:19 GMT//请求资源的最后修改时间
   server:nnws/1.7.3.6 //服务器信息,by the way!这是啥服务器?
   status:200 OK //状态码
   version:HTTP/1.1 //http协议版本1.1
   x-cache-lookup:Hit From MemCache Gz //查看服务器中是否有某个网页缓存,有则返回Hit,没有返回Miss

看到http响应状态码我突然想到了404,= =!顺便带几个常见的:

   100  Continue  继续,一般在发送post请求时,已发送了http、header之后服务端将返回此信息,表示确认,之后发送具体参数信息
   200 OK   正常返回信息
   201  Created  请求成功并且服务器创建了新的资源
   301  Moved Permanently  请求的网页已永久移动到新位置。
   400 Bad Request  服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
   404 Not Found  找不到如何与 URI 相匹配的资源。   
   500 Internal Server Error  最常见的服务器端错误。

4.浏览器渲染呈现

浏览器拿到响应的页面代码,将其解析呈现在用户面前,至于为什么会是看到的这个样子,有时又是另外的一些页面效果,这里就涉及到web标准了,也就是我们经常提到的w3c标准。根据资源的类型,在网页上呈现给用户,这个过程叫网页渲染。解析和呈现的过程主要由浏览器的渲染引擎实现,浏览器的渲染引擎质量就决定了浏览器的好坏(引擎这一块已经超出了我的理解范围了)。

【热门文章】
【热门文章】