1. http状态码有哪些?分别表示什么意思?
      状态码告知从服务器返回的请求结果。
      2XX表明请求被正常处理了。200OK、204No Content(服务器接收的请求已经处理成功,但在返回的响应报文中不包含实体的主体部分)、206Partial Content(客户端进行了范围请求,对资源的某一部分请求);3XX重定向,301moved permanently(资源已分配新的uri)、302 found(本次使用新uri访问)、303 see other(以get定向到另一个uri)、304 not modified、307 temporary redirect(不会从post改为get);4XX客户端错误,400 bad request(请求报文中存在语法错误),402 unauthorized(发送的请求需要通过http认证)、403 forbidden(服务器拒绝了对资源的访问)、404 not found(服务器上没有请求的资源);500XX服务器错误 500internal server error(服务器在执行是发生了错误)、503 service unavailable(服务器正忙或停机维护)。
    2. 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情?
      总的来说,根据web浏览器地址栏中指定的URL,web浏览器从web服务器端获取资源文件等信息,从而显示出web页面。具体而言,有如下几个步骤:

      • 1.浏览器接收URL(包含的信息:协议方案名、服务器地址:服务器端口号、带层次的文件路径、查询字符串?、片段标识符)
      • 2.将URL与缓存进行比对如果请求的页面在缓存中且未过期,则直接进行第8步。
      • 3.负责域名解析DNS服务。系统进行DNS查找,并将IP地址返回给浏览器。
        DNS服务适合HTTP协议一样位于应用层的协议。它提供域名到IP地址之间的解析服务。可以通过域名查找IP地址,也可以逆向从IP地址反查找域名。
      • 4.浏览器与服务器建立TCP连接(在传输层)
        这一步很复杂因为用到了HTTPS。三次握手(SYN,SYN/ACK,ACK),若有一次任何一方收不到信息那么将会重新发起 TCP 连接。
      • 5.浏览器向服务器通过TCP协议连接发送HTTP请求。
        数据经过应用层、传输层、网络层、链路层,传输到下一个目的地。应用层决定了向用户提供应用服务时的通信(http协议,DNS服务)。传输层对上层应用层,提供处于网络连接中的两台计算机之间的数据传输(TCP协议和UDP协议)。网络层用来处理网络上流动的数据包,数据包是网络传输的最小数据单位,该层规定通过怎样的路径到达对方计算机,并把数据传输给对方。链路层处理连接网络的硬件部分(网卡,光纤)。这一步骤还会涉及发送给服务器的请求报文(请求方法、请求URI、协议版本、首部字段、内容实体)。
      • 6.服务器收到请求,从它的文档空间中查找资源并返回HTTP响应。
        服务器返回的响应报文包括协议版本、状态码、解释状态码的原因短语、响应首部字段、实体主体。
      • 7.浏览器接受 HTTP 响应,检查 HTTP header 里的状态码,并做出不同的处理方式。关于返回的状态码的具体说明看上个问题。
      • 8.如果是可以缓存的,这个响应则会被存储起来。
        根据首部字段判断是否进行缓存。例如,Cache-Control, no-cache(每次使用缓存前和服务器确认),no-store 绝对禁止缓存。
      • 9.浏览器解码响应
        浏览器拿到index.html文件后,就开始解析其中的html代码,遇js/css/image等静态资源时,就向服务器端去请求下载;解析成对应的树形数据结构DOM树、CSS规则树,Javascript脚本通过DOM API和CSSOM API来操作DOM树、CSS规则树。
      • 10.渲染页面
      • 11.关闭TCP连接或继续保持连接
        通过四次挥手关闭连接(FIN ACK, ACK, FIN ACK, ACK)。
    3. 页面渲染的过程
      页面渲染过程总的来说是,浏览器拿到html文档,自上而下构建dom树,再根据dom树构建渲染树(和dom树有区别,浏览器解析html文档和解析css样式形成dom树和cssdom树,结合这两种才会构建渲染树)。这里有一种情况,如果在head中写入link某个css文件,而后插入script标签,引入一个巨大的js文件,由于浏览器下载css文件需耗时间,这个时候浏览器还在自上而下地去解析dom树,但是遇到script标签,并且由于样式表没有下载下来,阻塞了构建渲染树。一旦css文件加载完成,会结合刚在的dom树构建渲染树,显示到页面,接续加载js文件。但是恰巧js文件巨大,阻塞了浏览器向下解析,等待这个巨大的js文件下载完成后才继续向下解析。如此反复, 最后将渲染树渲染到页面。

[01]url请求到渲染的更多相关文章

  1. SpringMVC学习系列(3) 之 URL请求到Action的映射规则

    在系列(2)中我们展示了一个简单的get请求,并返回了一个简单的helloworld页面.本篇我们来学习如何来配置一个action的url映射规则. 在系列(2)中我们在HelloWorldContr ...

  2. IIS 7.5 + asp.net MVC4 设置路由处理URL请求

    使用asp.net MVC4开发的网站,在本地的VS012环境下运行,一切正常.但当发布到Windows 2008 R2(IIS7.5 + Framework4.5)上时,访问相关网页时,出现有下面的 ...

  3. 无论url请求什么.都可以拼接class类名.实例化.传递get参数-->给当前控制器-->传递给抽象父类-->都交给抽象父类.这个方法去处理call_user_func_array()

    <?phpdefine('DS','/');define('A_PATH',str_replace('\\','/',dirname(__FILE__)).DS); //01获取到主程序目录cl ...

  4. 一个vue请求接口渲染页面的例子

    new Vue({ el:'#bodylist', data: { list: [ { "type_id": "1", "type_name" ...

  5. SpringMVC 之URL请求到Action的映射(1)

    URL路径映射 1.1.对一个action配置多个URL映射: @RequestMapping(value={"/index", "/hello"}, meth ...

  6. (前端常考面试题)从敲入 URL 到浏览器渲染完成,到底发生了什么 ?

    前言 小汪最近在看[WebKit 技术内幕]一书,说实话,这本书写的太官方了,不通俗易懂. 但是看完书,对浏览器内核的 WebKit 有了进一步的了解,所以从浏览器内核出发,写这篇文章以记录学到的知识 ...

  7. drf框架 - 请求模块 | 渲染模块

    Postman接口工具 官方 https://www.getpostman.com/ get请求,携带参数采用Params​post等请求,提交数据包可以采用三种方式:form-date.urlenc ...

  8. 第二章、drf框架 - 请求模块 | 渲染模块 解析模块 | 异常模块 | 响应模块 (详细版)

    目录 drf框架 - 请求模块 | 渲染模块 解析模块 | 异常模块 | 响应模块 Postman接口工具 drf框架 注册rest_framework drf框架风格 drf请求生命周期 请求模块 ...

  9. drf框架概况-resful接口规范-请求模块-渲染模块-Postman-drf请求生命周期

    drf框架 全称:django-rest- framework 知识点: """ 1.接口:什么是接口.restful接口规范 2.CBV生命周期源码-基于restful ...

随机推荐

  1. Ehcache缓存实例

    一:目录 EhCache 简介 Hello World 示例 Spring 整合 Dummy CacheManager 的配置和作用 二: 简介 1. 基本介绍 EhCache 是一个纯Java的进程 ...

  2. hive报错:Caused by: ERROR XBM0H: Directory /var/lib/hive/metastore/metastore_db cannot be created.

    在cdh集群中,删除之前的hive服务,然后将hive添加到其他节点,然后再通过hive客户端连接hive报错: Caused by: ERROR XJ041: Failed to create da ...

  3. 在Linux中安装和配置OpenVPN Server的最简便方法!

    本文介绍了如何在基于RPM和DEB的系统中安装和配置OpenVPN服务器.我们在本文中将使用一个名为openvpn-install的脚本,它使整个OpenVPN服务器的安装和配置过程实现了自动化.该脚 ...

  4. HBase全网最佳学习资料汇总

    HBase全网最佳学习资料汇总 摘要: HBase这几年在国内使用的越来越广泛,在一定规模的企业中几乎是必备存储引擎,互联网企业阿里巴巴.百度.腾讯.京东.小米都有数千台的HBase集群,中国电信的话 ...

  5. NSDictionary底层实现原理

    一言以蔽之:在OC中NSDictionary是使用hash表来实现key和value的映射和存储的. 那么问题来了什么是hash表呢? 哈希表(hash表): 又叫做散列表,是根据关键码值(key v ...

  6. 实现一个简单版的express

    express应该算是早期最优秀的一个node框架了,刚开始学node做后端语言就是用的express,它的cli可以帮我们搭建好项目目录,就像现在的vue,react一样.express本身没有做太 ...

  7. 第九篇 Python数据类型之集合

    集合 set 写在最前,必须要会的:1.长度len2.成员运算in和not in3.|合集4.&交集5.-差集6.^对称差集7.==8.父集:>,>= 9.子集:<,< ...

  8. (Python爬虫01)-本想给随笔加个序号才发现这么不方便

    本想给随机加个序号,才发现还得去返回看看文章的序号.好在cnblog能断点自动保存. 作为一个小程序员,点赞的同时还在想,谁知道咋实现这种实时保存呢?有知道的给个参考文档呗.太感激了! 重点在这里 有 ...

  9. Python Flask之旅

    <Pyhton Flask之旅> 以前学flask时做的总结,搬运到这里,markdown格式写的有点乱,凑合看吧. 参考博客 http://blog.csdn.net/nunchakus ...

  10. Fast-RCNN论文总结整理

    此篇博客写作思路是一边翻译英文原文一边总结博主在阅读过程中遇到的问题及一些思考,因为博主本人阅读英文论文水平不高,所以还请大家在看此篇博客的过程中带着批判的眼神阅读!小墨镜带好,有什么不对的地方请在留 ...