浏览器
浏览器缓存（http缓存）
浏览器缓存是将文件保存在客户端，在同一个会话中会检查缓存的副本是否足够新，在后退网页时，访问过的资源可以直接从缓存中拿出来使用。通过这种方式减少服务器处理请求量，用户获得更快的 访问体验。
浏览器的缓存分为强缓存和协商缓存。浏览器向服务端发送请求时，先判断是否命中强缓存在判断是否命中协商缓存。所以强缓存不发送request到服务端。
-
强缓存根据header信息中的expires和cache-control判断。Cache-Control 与 Expires 可以在服务端配置同时启用，同时启用的时候 Cache-Control 优先级高。 expires是http1.0的规范，它包含一个gmt格式的绝对事件字符串，代表资源失效时间。cache-control是http1.1出现的header信息，通过该字段中的max-age值来判断资源失效时间，是一个相对事件，单位是秒。还有其他几个设置值：
s-maxage 它用于设置代理服务器的缓存时间
no-cache：需要进行协商缓存，发送请求到服务器确认是否使用缓存。
no-store：禁止使用缓存，每一次都要重新请求数据。
public：可以被所有的用户缓存，包括终端用户和 CDN 等中间代理服务器。
private：只能被终端用户的浏览器缓存，不允许 CDN 等中继缓存服务器对其缓存
如果没有命中强缓存，发送请求到服务器查看是否命中协商缓存。服务器通过请求中的header的内容判断如果命中协商缓存，服务器返回304告诉浏览器使用本地缓存，否则返回新的资源。
last-modify/if-modify-since 浏览器第一次请求一个资源时，浏览器返回的header中会包含一个last-modify值，这是资源最后一次更新的时间。再次发送请求时，header中会包含一个if-modify-since值，该值等于之间返回的last-modify。服务器收到后判断是否命中缓存，如果命中则返回304，且不会返回任何资源。这样做的缺点是当资源在一个周期内有回到原来的样子，last-modify会认为无法使用，于是有了ETag/If-None-Match
ETag根据资源内容编码，当资源回到原来的样子，ETag值保持不变。服务器通过浏览器request header中If-None-Match判断hi否命中缓存。
Last-Modified 与 ETag 是可以一起使用的，服务器会优先验证 ETag，一致的情况下，才会继续比对 Last-Modified，最后才决定是否返回 304。
同源政策与跨域
- 同源策略可防止 JavaScript 发起跨域请求。源被定义为协议、主机名和端口号的组合。两个页面同时拥有相同的协议、主机名和端口号，则被认为是同源的。此策略可防止页面上的恶意脚本通过该页面的文档对象模型，访问另一个网页上的敏感数据。常见的处理跨域的方法，jsonp和cors。
-
JSONP （JSON with Padding） 这种方式跨域是通过script标签引入js文件，这个js文件又会返回一个js函数调用，也就是请求后通过callback的方式回传结果，将需要的数据通过参数传入
优点: 兼容性更好,支持老版本浏览器
缺点：只支持get请求 -
CORS （Cross Origin Resources Sharing）
其原理是使用自定义的http头部请求，能是服务器支持XMLHttpRequest跨域请求。
优点：
1.支持所有类型的http请求
2.比jsonp有更好的错误处理机制
3.被大多数浏览器所支持 - h5的postMessage方法
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。这种方法不能和服务端交换数据，只能在两个窗口（iframe）之间交换数据。
浏览器渲染
- 将html代码按深度优先遍历生成dom树，将css渲染成cssom树，dom树和cssom树构成render tree。浏览器进入layout环节，将所有的节点位置计算出来，最后绘制（paint）所有节点的内容
回流（reflow）和重绘（repaint）
- 回流发生在页面中的元素发生布局变化时，比如改变宽高，元素的规模尺寸和布局。每个页面都会至少经历一次回流，就是页面第一次渲染的时候
- 重绘发生在元素的样式发生变化，页面只需要重新渲染，比如颜色改变，而不改变盒子的位置、大小等其他属性。
为什么css放在顶部，js放在后面
- 浏览器预先加载css后可以，可以提前开始渲染
- js大部分事件处理功能在页面渲染后才执行，这样可以节省加载时间，提高用户体验
输入url到浏览器地址栏
- 输入url到地址栏按下回车
- 浏览器开始解析url，并在缓存中查找，比较缓存是否过期
- dns解析url对应的ip
- 根据ip建立tcp连接
- http发起请求，请求对应的资源
- 服务端处理请求，浏览器处理http响应
- 浏览器html解析器将html文件解析，按代码深度遍历生成dom树，css解析器构建cssom树。根据dom树cssom树构成渲染树。浏览器进入layout环节，将所有的节点位置计算出来，最后绘制（paint）所有节点的内容。
- 关闭tcp连接
浏览器的垃圾回收
储存方式与运输方式
cookie，sessionStorage，localStorage
- cookie是在客户端记录用户信息的一种机制，保存在客户端，最大4kb
- session实在服务端记录用户状态的一种机制。session对象数据储存在服务端，通过浏览器和服务端之间传输session_id找到对应的session对象。
- sessionstorage和localstorage是webstorage提供的两种存储方式，sessionstorage仅在会话存在期间可用，localstorage除非数据被清除，否则一直可用。
token、cookie、session
- token是令牌，他的身份认证是唯一的，安全性最好，用于判断用户是否授权
- cookie是储存在客户端的txt文件，用于存储用户信息
- session实在服务端记录用户状态的一种机制。session对象数据储存在服务端，通过浏览器和服务端之间传输session_id找到对应的session对象，回话完成即被销毁。cookie存在session_id。
http
http状态码
- 1** 请求正在处理
- 2** 请求被成功接收并处理( 200 请求成功；201 用户新建或修改数据成功；202 一个请求已成功进入后台；204 用户删除成功）
- 3** 重定向，需要进一步操作以完成请求( 304命中缓存)
- 4** 客户端错误，请求包含语法错误或无法完成请求(400 格式错误；401 用户没有权限，要求身份验证；403，用户得到权限，但是禁止访问；404 错误路径找不到文件)
- 5** 服务器错误，服务器在处理请求的过程中发生了错误 （500 服务器出错；503 服务器超负荷或停机维护）
http1、http2、http3
-
Http1.0 与 http1.1
Http1.0 为了支持多种类型的文件下载，引入了请求头响应头，还提供了Cache机制、状态码等基本参数。
http1.1 引入了持久连接来提高效率，即在一个tcp连接中传输多个http请求，浏览器为每个域名最多支持六个tcp持久连接。 使用CDN实现域名分片机制。
-
Http1.1 与 http2.0
http1.1的缺陷：1. tcp慢启动 2. 多条tcp连接会竞争固定带宽 3. 表头阻塞问题：在一个请求没有结束之前，其他请求只能是等待状态。
http2.0 的改进： 1. 一个与域名只使用一个tcp连接 2. 多路复用 解决表头阻塞。
HTTP2 使用了多路复用技术，可以将请求通过二进制分帧层分成多个带有ID编号的帧数据去传输，这样带来了一个额外的好处，就是当收到一个优先级高的请求时，比如接收到JavaScript或者CSS关键资源的请求，服务器可以暂停之前的请求来优先处理关键资源的请求。
-
Http2.0 与 http3.0
http2.0 的缺陷： tcp的队头阻塞，tcp建立连接的延时
http3.0 的改进： QUIC协议（Quick UDP Internet Connections）
http/https
- http无需证书，https需要申请证书
- http是超文本传输协议，是明文传输。https是具有安全性的ssl加密传输协议
- http的端口号是80，https的端口号是443
- https的加密过程：https是http将报文信息传输给ssl socket进行加密，ssk socket加密后再将报文发送给tcp socket，目的主机将tcp套接字报文获取后传给ssl socket，ssl解密后交给对应的进程。
get/post
- get：从指定的资源请求数据 post： 向指定的资源提交已处理的数据
- get：get数据放在url后，用？分隔url和传输数据，参数用&相连 post：post数据在http的header包的body中传输
- get：get移交的数据长度有限制，因为浏览器对url长度有限制（2048字符），post没有限制
- get可被浏览器缓存，产生的url地址可以存为书签,get请求参数会被保存在浏览器的历史记录里，post均不行
- get的数据在url中对所有人都可见，安全性更差
TCP三次握手
- 客户端传给服务端syn包请求建立连接客户端进入syn_send状态，服务端返回确认码ack并发出一个自己的syn包，服务端进入syn_recv状态，客户端收到收到服务端的syn+ack包，返回确认码ack。客户端和服务端进入established状态，三次握手完成
TCP四次挥手
- 客户端向服务端发送fin码请求关闭客户端到服务端的数据连接，服务端返回ack码。服务端关闭与客户端的数据连接，发送一个fin码，客户端返回ack码确认。收到ack，服务端进入closed状态，客户端再等待2msl（最大生存时间）时间后进入closed状态。为什么要等2msl？如果最后传给服务端的ack丢失，服务端将在超时后重发fin包，如果在2msl时间内没有等到服务端重发的fin包，则证明四次挥手完成。
网络七层模型
- 应用层: 向客户提供应用，文件传输，电子邮件，虚拟终端 http,ftp,telent,dns,smtp
- 表达层： 数据格式化，代码转化
- 会话层： 解除或建立与别的节点之间的联系
- 传输层: 对报文进行分组或重组，以tcp/udp的形式封装报文 tcp,udp
- 网络层： 为数据包选择路由，将报文发送给目标网络或主机 ip
- 链路层： 负责封装和解析ip报文
- 物理层： 物理形式上的数据传输
CDN
- Content Delivery Network 内容分发网络。是一组在地理上分散的服务器，他们协同工作以应对互联网的内容的快速交付。CDN可以将用户请求重定向到最近的服务节点上，解决网络拥堵的问题，提高用户的浏览体验。
常见的web安全与防御
- sql注入 ：将sql代码伪装到请求的输入参数中，传入到服务器解析并执行的一种方法。防御：对用户输入进行校验
- xss（cross site scripting）：跨站脚本攻击，往web页面中插入恶意的html标签和js脚本，比如在论坛中放置一个看似安全的连接，来获取用户的cookie信息。防御： 将重要的cookie设置为http only，js中的document.cookie会失效
- csrf（cross site request forgery）：跨站点请求伪造，伪装受信任的用户发送请求。防御：通过验证码，强制用户进行交互，避免用户在不知情的情况下被发送请求。
