Web前端面试——HTTP部分

1.一次完整的HTTP事务流程

（1）域名解析

（2）发起TCP的三次握手

（3）建立TCP连接后发起http请求

（4）服务器响应http请求，浏览器得到HTML代码

（5）浏览器解析HTML代码，并请求HTML代码中的资源

（6）浏览器对页面进行渲染呈现给用户

（7）连接结束

2.用什么解析成IP？

从网址到IP地址的转换，称为DNS解析，DNS解析是一个递归查询的过程，具体步骤如下（以www.google.com为例）：

（1）首先在本地域名服务器（最近的一台DNS服务器）中查询IP地址

（2）如果没有找到，本地域名服务器会向根域名服务器发送一个请求

（3）如果根域名服务器中也不存在该域名，但判定这个域名属于“com”域，则本地域名服务器会向com顶级域名服务器发送一个请求

（4）如果com顶级域名服务器没有找到该域名，但判定这个域名属于“google.com”域，则本地域名服务器会向google.com域名服务器发送一个请求，以此类推

（5）直到本地域名服务器得到域名对应的IP地址，并将其缓存到本地，供下次查询使用

（6）综上，网址的解析过程为.->.com->google.com->www.google.com.。

3.Tcp三次握手？四次挥手？

三次握手的必要性：为了保证服务器能接收到客户端的信息并做出正确的应答而进行前两次（第一次和第二次）握手，为了保证客户端能够接收到服务端的信息并能做出正确的应答而进行后两次（第二次和第三次）握手。

上图部分标志说明：

（1）ACK：TCP规定，只有当ACK=1时有效，也规定连接建立后所有发送的报文的ACK必须为1

（2）SYN（SYNchronization）：在连接建立时用来同步序号。当SYN=1而ACK=0时，表明这个是一个连接请求报文。对方若同意建立连接，则响应报文中SYN=1，ACK=1。因此，SYN置1表示这是一个连接请求或连接接受报文。

（3）FIN（finish）：终结的意思，用来释放一个连接。当FIN=1时，表明此报文段的发送方的数据已经发送完毕，并请求释放连接。

三次握手说明：

（1）第一次握手：建立连接。客户端发送连接请求报文段，将SYN位置1，序列号seq（sequence number）为x；然后，客户端进入SYN_SEND状态，等待服务器的确认。

（2）第二次握手：服务器收到SYN报文段。服务器收到客户端的SYN报文段，需要对这个SYN报文段进行确认，ACK位置1，确认号ack（acknowledgement number）为x+1；同时，自己还要发送SYN请求信息，将SYN位置1，序列号seq为y；服务器将上述SYN+ACK报文段一并发送给客户端，此时服务器进入SYN_RECV状态。

（3）第三次握手：客户端收到服务器的SYN+ACK报文段。然后将确认号ack设置为y+1，向服务器发送ACK报文段。这个报文段发送完毕后，客户端和服务器都进入ESTABLISHED状态，完成TCP三次握手，之后可以开始传数据。

四次挥手：当客户端和服务器通过三次握手建立了TCP连接之后，当数据传输完毕，就要断开TCP连接，这个过程称为四次挥手。四次挥手说明：

（1）第一次挥手：主机1（可以是客户端，也可以是服务器）设置序列号seq为u，向主机2发送一个FIN报文段；此时，主机1进入FIN_WAIT状态，这表示主机1没有数据要发送给主机2了。

（2）第二次挥手：主机2收到了主机1发送的FIN报文段，向主机1回复一个ACK报文段，确认号ack为u+1，序列号seq为v；主机2进入CLOSE_WAIT状态；主机1收到主机2发送的ACK报文段之后，进入FIN_WAIT_2状态。

（3）第三次挥手：主机2向主机1发送FIN报文段，设置序列号seq为w，确认号ack为u+1，请求关闭连接，同时主机2进入LAST_ACK状态

（4）第四次挥手：主机1收到主机2发送的FIN报文段，向主机2发送ACK报文段，确认号ack为w+1，序列号seq为u+1，然后主机1进入TIME_WAIT状态；主机2收到主机1的ACK报文段以后，就关闭连接；此时，主机1等待2MSL（MSL，最长报文段寿命）后依然没有收到回复，则证明服务端已经正常关闭，那么主机1也可以关闭连接了。

4.HTTP请求码及其作用？

HTTP状态码：当用户访问一个网页时，浏览器会向网页所在的服务器出请求，当浏览器接收并显示网页前，此网页所在服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求，HTTP状态码用于描述服务器对请求的处理结果。

HTTP状态码分类：

（1）1**：信息，服务器收到请求，需要请求者继续执行操作

（2）2**：成功，操作被成功接收并处理

（3）3**：重定向，需要进一步的操作以完成请求

（4）4**：客户端错误，请求包含语法错误或者无法完成请求

（5）5**：服务器错误，服务器在处理请求的过程中发生了错误

常见的HTTP状态码：

• 200——OK，请求成功
• 301——Moved Permanently，资源（网页等）被永久转移到其他URL
• 302——Found，307——Temporary Redirect，临时重定向，请求的文档被临时移动到别处
• 304——Not Modified，未修改，表示客户端缓存的版本是最近的
• 401——Unauthorized，请求要求用户的身份认证
• 403——Forbidden，禁止，服务器理解客户端请求，但是拒绝处理此请求，通常是权限设置所致
• 404——Not Found，请求的资源（网页等）不存在
• 500——Internal Server Error——内部服务器错误
• 502——Bad Gateway，充当网关或代理的服务器从远端服务器接收到了一个无效的请求
• 504——Gateway Time-out，充当网关或代理的服务器，未及时从远端服务器获取请求

5.浏览器解析渲染过程？

（1）浏览器解析HTML源码，然后创建一个DOM树。

    在DOM树中，每一个HTML标签都有一个对应的节点（元素节点），并且每一个文本也都有一个对应的文本节点，DOM树的根节点就是documentElement，对应的是html标签

（2）浏览器解析CSS代码，然后创建一个CSSOM树。

    解析CSS的时候会按照如下顺序来定义优先级（递增）：浏览器默认设置<用户设置<外联样式<内联样式<标签样式

（3）根据DOM树和CSSOM来构建一个渲染树（render tree）。

（4）当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

6.渲染树（render tree）和DOM树的关系？

（1）在DOM树构建的同时，浏览器会构建渲染树。（为了提高用户体验，浏览器并不会等到所有HTML文档加载完成之后才建立渲染树并渲染，而是会在从网络层获取html文档的同时把已经接收到的局部内容先渲染出来）

（2）DOM树完全和html标签一一对应，而渲染树会忽略（即不包含）不需要渲染的元素（如head，样式为display:none的元素等）

（3）渲染树中每一个节点都存储着对应的CSS属性

7.reflow（重排，回流）和repaint（重绘）？

reflow：浏览器要花时间去渲染，当它发现了某个部分发生了变化并且影响了布局，就需要倒回去重新渲染

repaint：如果只是改变了某个元素的背景颜色或文字颜色等，不影响元素周围或内部布局，就只会引起浏览器的repaint，重画其中一部分。

reflow比repaint更花费时间，也就更影响性能，所以在写代码时应尽量避免过多的reflow。

8.什么时候会发生reflow？

（1）页面初始化的时候

（2）操作DOM的时候（增加或删除DOM元素）

（3）某些元素的尺寸改了（边距，填充，边框，宽高）

（4）CSS的属性发生变化（隐藏display：none）

（5）内容改变（文本改变或图片改变而引起的的计算值的宽高改变）

（6）浏览器窗口尺寸改变（当resize事件发生时）

9.如何减少reflow/repaint？

（1）不要逐个修改DOM样式，可以预先定义好css的class，然后修改DOM的className，将多个需要进行相同操作的元素一次修改

（2）不要把DOM结点的属性值放在一个循环里当成循环的变量

（3）当动画元素使用fixed或absolute的position时（脱离了文档流），那么在修改他们的CSS时不会发生reflow

（4）不要使用table布局，因为可能很小的一个改动都会造成整个table的重新布局

（5）在内存中多次操作结点，完成后再添加到文档中去

（6）如果要对一个元素进行复杂的操作，可以先隐藏它（display：none），操作完成后再显示

（7）对于需要经常取出的引起浏览器重排的属性值，要缓存到变量中

10.为什么要先引入css文件，再引入js文件？

（1）js代码的下载是阻塞下载，不可以和其他代码并行下载和解析；CSS的加载不会阻塞DOM树的解析（会阻塞其渲染，也会阻塞后面的js执行）

（2）页面加载时，是按照从上到下，从左到右的顺序加载的。如果将js放在前面，会立即执行，阻塞后续的资源下载和执行。如果外部脚本加载时间过长，会造成网页长时间失去响应，浏览器就会呈现“假死”状态（阻塞效应）

（2）页面需要等到head中的js和css加载完成之后才开始绘制，当js放在body最后时，不需要等待，可以避免资源阻塞，同时使静态页面迅速显示

（3）部分js的执行依赖于前面的样式。

（4）js一般是处理功能，所以不需要提前加载。先给用户观感，在给用户上手体验。

11.为了避免用户看到长时间的白屏时间，应尽可能的提高CSS的加载速度，具体方法？

（1）使用CDN（Content Delivery Network，内容分发网络），CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，减少加载时间

（2）对css进行压缩

（3）合理的使用缓存（设置cache-control，expires以及E-tag）

（4）减少http请求数，将多个css文件合并，或者干脆直接写成内联样式（但是内联样式的缺点是不能缓存）

12.页面性能优化？

页面性能为什么不好？回顾第五个问题：浏览器解析渲染过程，其中前三部都非常快，第四步（生成布局layout）和第五步（绘制paint）合称为渲染，耗时长。网页生成的时候至少会渲染一次，用户访问的过程中，还会不断重新渲染。

优化方法如下：

（1）回顾问题11

（2）将样式表放在头部，将脚本放在底部

（3）减少重排（reflow）和重绘（repaint）（回顾问题9）

13.浏览器缓存机制？

 

 

14.HTTP和HTTPS的区别

HTTP（Hyper Text Transfer Protocol，超文本传输协议）被用于在web浏览器和网站服务器之间传递信息，HTTP协议以明文的方式发送内容，不提供任何方式的数据加密，如果攻击者截取了web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号，密码等支付信息。

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer，安全套接字超文本传输协议），为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL/TLS，依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。其中SSL（Secure Socket Layer，安全套接层），TLS（Transport Layer Securit，传输层安全协议），SSL 3.0和TLS 1.0差别很小，在HTTPS通信中具体使用哪一个还要看客户端和服务端的支持程度，二者在网络模型中位于哪一层？

区别：

（1）HTTPS协议需要CA申请证书，一般免费证书比较少，所以需要一定费用

（2）HTTP是超文本传输协议，信息室明文传输，HTTPS则是具有安全性的SSL加密传输协议

（3）HTTP和HTTPS使用的是完全不同的连接方式，使用的端口号也不一样，前者是80，后者是443

（4）HTTP连接很简单，是无状态的；HTTPS协议是由HTTP+SSL协议构建的可进行加密传输、身份认证的网络协议，比较安全。

（5）谷歌搜索引擎算法中，比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中排名会更高

15.客户端使用HTTPS方式与web服务器通信的步骤：

（1）客户使用HTTPS的URL访问web服务器，要求与web服务器建立SSL连接

（2）web服务器收到客户端请求后，将网站的证书信息（证书中包含公钥）传送一份给客户端

（3）客户端的浏览器与web服务器开始协商SSL连接的安全等级，也就是信息的加密等级

（4）客户端的浏览器根据双方同意的安全等级，建立会话秘钥，然后利用网站的公钥将会话秘钥加密，并传送给网站

（5）web服务器利用自己的私钥解密出会话秘钥

（6）web服务器利用会话秘钥加密与客户端之间的通信

16.如何从HTTP切换到HTTPS？

（1）需要将页面中所有的链接（例如js,css,图片等链接）都由http改为https

（2）一般情况下会建议保留HTTP，所以在切换的时候可以做HTTP和HTTPS的兼容，具体实现方式是：去掉页面连接中的http头部，这样恶意自动匹配HTTP头和HTTPS头

17.TCP/IP四层协议体系结构？

由上至下顺序为：

（1）应用层（FTP、Telnet、SMTP、RIP、NFS、DNS）

（2）运输层（TCP、UDP）

（3）网际层（IP、ICMP、ARP、RARP）

（4）网络接口层

18.五层协议体系结构？

（1）应用层

（2）运输层

（3）网络层

（4）数据链路层

（5）物理层

19.OSI的七层体系结构？

（1）应用层

（2）表示层

（3）会话层

（4）运输层

（5）网络层

（6）数据链路层

（7）物理层

20.浏览器同源策略

（1）浏览器安全的基石是“同源策略”（same-origin policy）。所谓“同源”指的是“三个相同”：

• 协议相同
• 域名相同
• 端口相同

 

（2）同源策略的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

 

（3）如果非同源，共有三种行为受到限制：

• Cookie、LocalStorage和IndexDB无法读取
• DOM无法获得
• AJAX请求不能发送

（3）不受同源策略限制的：

• 页面中的链接，重定向以及表单提交
• 跨域资源的引入是可以的，但是js不能读写加载的内容。（如<script src=...></script>，<img>，<link>，<iframe>）

21.跨域？

（1）受同源策略的限制，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象，就需要跨域。

（2）跨域的实现方式

• 降域 document.domain
• 设置窗口片段标识符，监听读取location.hash
• window.name
• HTML5的postMessage方法
• LocalStorage
• JSONP
• WebSocket
• CORS

22.重申了12的问题并扩展：前端优化方案？移动端优化方案？（面试常考，同时还会针对其中某些方案深入）

（1）前端优化方案（可以查一下雅虎军规）：

减少请求数量：合并脚本和样式表，CSS Sprites，划分主域

降低请求带宽：使用GZip，精简JavaScript，移除重复脚本，图像优化，尽可能减少DOM节点数

缓存利用：使用CDN，使用外部的JavaScript和CSS，减少DNS查找，添加Expires头，配置ETag，使Ajax可缓存

页面结构：将样式表放在头部，将脚本放在底部，尽早刷新文档的输出

代码校验：避免CSS表达式，避免重定向

（2）移动端优化方案：

在上述的前端优化方案的基础上，可以做以下优化：保持单个内容小于25KB，打包组件成符合文档

23.关于22题的一些关键词说明

CSS Sprites：在国内又称为CSS精灵，是一种网页图片应用处理方式。目前对不高于200KB单张图片的所需载入时间基本差不多。CSS Sprites的原理其实就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，来显示需要显示的部分。这样可以很好地减少网页的http请求，缺点是需要合理的合并图片，维护比较麻烦。

划分主域：（待补充）

GZip：其思想就是把文件现在服务器端进行压缩，其压缩率可达85%，然后再传输，传输完毕后浏览器会重新对压缩过的内容进行解压，并执行。其好处在于GZip的支持度很高，爬虫可识别，但缺点是对pdf文件的压缩效果不大，会浪费CPU。

图片优化：CSS Sprites（小图片合并雪碧图），使用小且可缓存的favicon.ico

CDN：内容分发网络（Content Delivery Network）。将网站的内容发布到最接近用户的cache服务器内，通过DNS负载均衡的技术，判断用户来源就近访问cache服务器去的所需的内容。将静态内容分布到CDN可以较少用户响应时间20%或更多。

Ajax可缓存：（待补充）

24.

 

 

 

转载自原文链接, 如需删除请联系管理员。

原文链接：Web前端面试——HTTP部分，转载请注明来源！