跳到主要内容

基础问题

问题​

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（服务器正忙或停机维护）。 https://segmentfault.com/img/bVSrhI?w=666&h=224

一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？​

总的来说，根据 web 浏览器地址栏中指定的 URL，web 浏览器从 web 服务器端获取资源文件等信息，从而显示出 web 页面。具体而言，有如下几个步骤：

    • 1.浏览器接收 URL(包含的信息：协议方案名、服务器地址:服务器端口号、带层次的文件路径、查询字符串？、片段标识符) https://segmentfault.com/img/bVSq5e?w=768&h=160
    • 2.将 URL 与缓存进行比对如果请求的页面在缓存中且未过期，则直接进行第 8 步。 https://segmentfault.com/img/bVSq6h?w=798&h=1214
    • 3.负责域名解析 DNS 服务。系统进行 DNS 查找，并将 IP 地址返回给浏览器。DNS 服务适合 HTTP 协议一样位于应用层的协议。它提供域名到 IP 地址之间的解析服务。可以通过域名查找 IP 地址，也可以逆向从 IP 地址反查找域名。
    • 4.浏览器与服务器建立 TCP 连接（在传输层）这一步很复杂因为用到了 HTTPS。三次握手(SYN,SYN/ACK,ACK)，若有一次任何一方收不到信息那么将会重新发起 TCP 连接。 https://segmentfault.com/img/bVSrbA?w=694&h=592
    • 5.浏览器向服务器通过 TCP 协议连接发送 HTTP 请求。数据经过应用层、传输层、网络层、链路层，传输到下一个目的地。应用层决定了向用户提供应用服务时的通信（http 协议，DNS 服务）。传输层对上层应用层，提供处于网络连接中的两台计算机之间的数据传输（TCP 协议和 UDP 协议）。网络层用来处理网络上流动的数据包，数据包是网络传输的最小数据单位，该层规定通过怎样的路径到达对方计算机，并把数据传输给对方。链路层处理连接网络的硬件部分（网卡，光纤）。这一步骤还会涉及发送给服务器的请求报文（请求方法、请求 URI、协议版本、首部字段、内容实体）。 https://segmentfault.com/img/bVSreP?w=736&h=372
    • 6.服务器收到请求，从它的文档空间中查找资源并返回 HTTP 响应。服务器返回的响应报文包括协议版本、状态码、解释状态码的原因短语、响应首部字段、实体主体。 https://segmentfault.com/img/bVSrfD?w=664&h=334
    • 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)。 https://segmentfault.com/img/bVSrg7?w=1416&h=782

页面渲染的过程​

页面渲染过程总的来说是，浏览器拿到 html 文档，自上而下构建 dom 树，再根据 dom 树构建渲染树（和 dom 树有区别，浏览器解析 html 文档和解析 css 样式形成 dom 树和 cssdom 树，结合这两种才会构建渲染树）。这里有一种情况，如果在 head 中写入 link 某个 css 文件，而后插入 script 标签，引入一个巨大的 js 文件，由于浏览器下载 css 文件需耗时间，这个时候浏览器还在自上而下地去解析 dom 树，但是遇到 script 标签，并且由于样式表没有下载下来，阻塞了构建渲染树。一旦 css 文件加载完成，会结合刚在的 dom 树构建渲染树，显示到页面，接续加载 js 文件。但是恰巧 js 文件巨大，阻塞了浏览器向下解析，等待这个巨大的 js 文件下载完成后才继续向下解析。如此反复， 最后将渲染树渲染到页面。

随着 http2 的发展，前端性能优化中的哪些传统方案可以被替代​

  • 雪碧图
  • 资源文件合并

jsonp 原理​