面试题总结（1）—— HTTP/浏览器

目录

1. http和https
2. 常见状态码
3. 常见请求头
4. http的请求方式
5. GET和POST区别
6. HTTP预请求
7. 强、协商缓存
8. cache-control的值
9. TCP三次握手
10. TCP和UDP
11. WebSocket
12. 输入url到页面渲染完成之间，发生了哪些事
13. 文件加载规则
14. script标签defer和async的区别
15. 文件下载
16. Cookie、sessionStorage、localStorage
17. Cookie和session的区别
18. CSRF和XSS
19. Web Worker
20. Doctype作用，严格模式与混杂模式
21. 对HTML语义化标签的理解
22. iframe是什么？有什么缺点？
23. iframe通信
24. onload和onready
25. 讲讲viewport和移动端布局
26. 一句话概括RESTFUL
27. click在ios上有300ms延迟，原因及如何解决？
28. web性能优化

http和https

1. 基本概念
   • http：超文本传输协议，用于从www服务器传输超文本到本地浏览器的传输协议
   • https：http + SSL，用于建立信息安全通道，确保服务器的真实性和数据传输的安全性
2. https的工作原理
   • 客户端向服务器发起连接请求
   • 服务器返回证书和非对称加密公钥
   • 客户端验证证书，使用公钥加密验证数据验证服务器
   • 服务器使用私钥解密，将相同数据再加密后返回完成验证
   • 客户端产生对称加密密钥，使用公钥加密后传给服务器
   • 服务器解密获得密钥，此后使用对称加密进行通信
3. https的缺点
   • 效率较低：握手阶段费时，延长页面加载时间。加密消耗性能，不如明文快
   • 成本高： 证书要钱
4. 版本区别
   • http1.0：每次请求建立一次TCP连接，请求完毕后断开连接
   • http1.1：建立一次TCP长连接，同步的进行多次请求，前面的请求会拥塞后面的请求
   • http2.0：建立一次TCP连接，并发的进行多次请求。二进制编码

常见状态码

状态码	含义
200	请求成功（返回全量数据）
301	永久重定向
302	临时重定向
307	临时重定向（http1.1）发送Post请求，询问用户是否重定向
304	协商缓存（无需返回全量数据）
400	请求无效（参数与后台不一致）
401	请求需要验证用户身份
403	服务器收到请求，但是拒绝执行

常见请求头

请求头	含义	例如
通用首部	表示一些通用信息	date表示创建时间
请求首部	请求报文独有	cookie，if-Modified-Since
响应首部	响应报文独有	set-cookie，location
实体首部	描述实体部分	allow描述请求方法，content-type描述主题类型，content-Encoding描述编码方式

http的请求方式

GET,POST,HEAD,OPTIONS,PUT,DELETE,TRACE,CONNECT

GET和POST区别

1. 本质区别：GET参数通过URL传递，POST放在Request body中
2. 由于本质区别，所以长度限制不同，安全性不同，编码方式不同

HTTP预请求

在处理复杂跨域请求时，浏览器会在发送请求之前，使用OPTIONS方法向服务器发送一个预请求请求，如果服务器响应结果为拒绝性质，则不再发送真正的请求。
进行预请求的条件：

简单请求：（不发送OPTIONS请求）

1. 不使用自定义请求头
2. 使用GET、POST或HEAD方法
3. 使用的content-type：text/plain、multipart/form-data或application/x-www-form-urlencoded

非简单请求：（发送OPTIONS请求）

强、协商缓存

服务器资源不是固定不变的，如果当服务器资源更新后，用户还访问本地缓存，则相当于没有更新。如果当服务器资源没有更新时，用户还从服务器获取资源，则会浪费资源。因此出现了两种缓存机制：强缓存（始终从缓存读取），协商缓存（请求服务器后判断是否从缓存读取）

强缓存：不会发送HTTP请求，状态码为200，浏览器直接从缓存中读取数据。相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。

协商缓存：会发送HTTP 请求，状态码为304，浏览器向服务器发送请求，如果命中缓存，则从缓存中取。相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match。

参考

cache-control的值

max-age：缓存有效期
no-cache：协商缓存，当服务器确认使用缓存后读取缓存
no-store：禁止缓存，每次请求需要重新下载完整资源
public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器
private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存

默认值：private

TCP三次握手

客户端向服务器发起连接请求
服务器响应请求并向客户端发起连接请求
客户端响应连接请求

TCP和UDP

TCP：面相连接的（需要建立连接），一对一的，可靠的信息传输
UDP：面相保温的（无需建立连接），一对多的，不可靠信息传输

WebSocket

基本概念：
HTML5中的协议，基于http的，支持持久性连接

作用：
不再局限于客户端主动请求服务器，建立连接后，客户端可以向服务器发送消息，服务器也可以主动向客户端推送消息

输入url到页面渲染完成之间，发生了哪些事

• 浏览器搜索自身的DNS缓存
• 浏览器搜索操作系统的DNS缓存
• 读取本地的HOST文件
• 浏览器发起DNS的系统调用
  • 宽带运营商会查看本地的DNS缓存
  • 运营商服务器向根域名发起DNS请求
  • 根域名向运营商返回DNS解析结果
  • 运营商把DNS解析结果返回给操作系统内核并缓存该结果
  • 操作系统内核把返回结果返回给浏览器
• 浏览器拿到对应的IP地址后构建HTTP请求并向服务器发起HTTP请求
• 服务器接收到请求后，根据路径参数把请求结果返回给浏览器
• 浏览器拿到页面代码后根据HTML构建DOM树
• DOM树构建过程遇到资源请求则重复上面步骤获取资源
• 如果资源获取可以读取缓存则使用对应的强缓存和协商缓存规则
• DOM树构建过程如遇到JS脚本则停止DOM树构建来下载和执行相应脚本
• 浏览器根据样式构建CSSOM树
• 构建完CSSOM树后与DOM树合并为渲染树
• 布局并渲染页面

文件加载规则

CSS文件加载相对于Dom解析是异步，会阻塞Dom渲染，不会阻塞Dom解析
JS 文件加载相对于Dom解析是同步，会阻塞Dom解析，在加载并运行完毕后触发onload事件

文件加载相对于同类文件加载是同步

script标签defer和async的区别

共同点：都是异步加载，遇到script标签便进行加载，文件下载期间不会阻塞HTML文档的解析
不同点：
defer 在文档解析完后执行，即触发domContentLoaded事件后，可保证执行顺序。
async 在文件下载完后立马执行，执行完后再进行HTML文档解析

文件下载

1. 跳转类

<a target="_blank" href='xxx'></a>
window.open('xxx')
window.location.href = 'xxx'

2. download属性

<a download='xxx' href='xxx'></a>

3. http header

res.setHeader("Content-Disposition","attachment;filename=xxx")

4. canvas.toDataURL()

• 只可用于同源图片文件

非浏览器可打开文件： 1,2,3皆可，1,2无视跨域
浏览器可打开文件：1,2,3 皆可，1,2必须同源

Cookie、sessionStorage、localStorage

共同点：保存在浏览器端，同源共享
Cookie：会在浏览器与服务器之间来回传递，设置过期时间前有效，大小限制每个源4K
sessionStorage： 仅在当前浏览器窗口关闭前有效
localStorage：始终有效，可作为持久数据存储，大小限制每个源2.5M-10M

Cookie和session的区别

cookie将数据存储在浏览器，安全性不好
session将数据存储在服务器，更加安全
cookie存储sessionId用来标识用户，服务器获取到sessionId用来读取用户状态信息

CSRF和XSS

CSRF
XSS

Web Worker

参考

Doctype作用，严格模式与混杂模式

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，有两种模式：严格模式和混杂模式。

严格模式：排版和JS 运作模式是 以该浏览器支持的最高标准运行。

混杂模式：向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

对HTML语义化标签的理解

语义化标签指正确的标签包含了正确的内容，结构良好便于阅读

iframe是什么？有什么缺点？

iframe会创建包含另一个文档的内联框架
缺点：

1. 阻塞主页面的onload事件（使用动态添加src解决）
2. 不利于SEO
3. 与主页面共享连接池，浏览器限制同源并发http请求数，因此影响主页面性能

iframe通信

同源：父页面，cookie
不同源： document.domain,location.hash,window.name
皆可：postMessage

onload和onready

DOM文档加载的步骤为：

1. 解析HTML结构
2. 加载外部脚本和样式表文件
3. 解析并执行脚本代码
4. DOM树构建完成。// DOMContentLoaded, 浏览器刷新按钮重置
5. 加载图片等外部文件
6. 页面加载完毕。// window.onload

讲讲viewport和移动端布局

PC端viewport：
用于显示非移动端设计的页面。会有一个默认的宽度，这个宽度大于屏幕的实际分辨率

移动端viewport：
用于显示移动端设计的页面。宽高为屏幕实际分辨率

区别在于：（使用后为移动端，不使用为PC端）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

布局采用rem，如果不考虑兼容用vw,vh最好

document.addEventListener('DOMContentLoaded', () => {
    
    
    const html = document.querySelector('html')
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > 50 ? 50 : fontSize
    html.style.fontSize = fontSize + 'px'
})

一句话概括RESTFUL

用URL定位资源，用HTTP请求方式描述操作

click在ios上有300ms延迟，原因及如何解决？

原因：IOS存在双击缩放，浏览器无法在第一次点击后判断此次是单击还是双击操作
解决方案：

1. 禁用缩放

<meta name="viewport" content="width=device-width, user-scalable=no">

2. 使用fastClick
   检测到touchend后立即发出模拟click事件，并阻止300ms后触发的事件

web性能优化

降低请求量：合并资源，减少HTTP请求数，gzip压缩，webP，lazyLoad
加快请求速度：与解析DNS，减少域名数，并行加载，CDN分发
缓存：HTTP协议缓存，离线缓存manifest，离线数据缓存localStorage
渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline