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. centos7下安装elasticSearch错误总结(单节点模式)

    1.首先确定你安装了jdk,版本需要1.8以上 2.上传elasticsearchjar包,只需配置一个文件即可 修改配置文件config/elasticsearch.yml    network.h ...

  2. 前端学习webpack

    ### 模块化- 为了保证代码充分解耦,一个大的项目拆分成互相依赖的一个一个的小的模块,最后再通过简单的方式合并在一起- 每一个js文件都可以看成一个单独的模块在node这边(服务器端),提出Comm ...

  3. exchange 2007迁移到2010

    标签:exchange 2007 2010 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://zpf666.blog.51cto.c ...

  4. Hadoop入门案列,初学者Coder

    1.WordCount Job类: package com.simope.mr.wcFor; import org.apache.hadoop.conf.Configuration; import o ...

  5. inline-block 空隙

    IE8-9.Firefox.Safari 是4px Chrome下是8px 出现原因 标签换行引起 解决方案网上很多 但是在布局中尽量避免使用inline-block

  6. Spark性能超过Hadoop百倍

    Spark在偷换概念,Hadoop跑硬盘,Spark跑内存,地球人都知道,内存的速度可是远超硬盘一个量级,超过100倍又有什么奇怪的.如果要比,咱们都拿硬盘来跑跑看!

  7. libvirt保持虚拟机运行情况下修改名称

    通过virsh list命令能看到虚拟机的列表: [root@compute2 ~]# virsh list Id 名称 状态 ------------------------------------ ...

  8. SVM知识点

    SVM(Support Vector Machine),支持向量机,有监督学习模型,一种分类模型.在特征空间(输入空间为欧式空间或离散集合,特征空间为欧式空间或希尔伯特空间)中寻找间隔最大化的分离超平 ...

  9. 转 Using $.ajaxPrefilter() To Configure AJAX Requests In jQuery 1.5

    Using $.ajaxPrefilter() To Configure AJAX Requests In jQuery 1.5 Posted February 18, 2011 at 6:29 PM ...

  10. eclipse快捷键(复制自己看)

    1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/)快速修正:Ctrl+1单词补全:Alt+/打开外部Java文档:Shift+F2 显示搜索对话框:Ctrl+H快速O ...