读书笔记 --- > [基础知识点] 小结3

1. cookie与session的区别

• 参考

• cookie机制

Cookie是服务器在本地机器上存储的小段文本,并随每一次发送至同一个服务器。网络服务器用HTTP头向客户端发送cookies,在客户端中,浏览器解析这些cookies并将它们保存为一个本地文件,它会自动将同一服务器的任何请求束缚上这些cookies。

具体来说,cookie机制采用的是在客户端保持状态的方案.它是在客户端的会话状态的存储机制,他需要用户打开客户端的cookie支持。cookie的作用就是为了解决HTTP协议无状态的缺陷所作的努力。

正统的cookie分发是通过扩展HTTP协议来实现的,服务器通过HTTP的响应头中加上一行特殊的指示,提示浏览器按照指示生成相应的cookie。然而存粹的客户端脚本如JavaScript也可以生成cookie。而cookie的使用是由浏览器按照一定的原则在后台自动发送给服务器的。浏览器检查所有存储的cookie,如果某个cookie所声明的作用范围大于将要请求的资源所在的位置,则把该cookie附在请求资源的HTTP请求头部上发送给服务器

cookie的内容主要包括: 名字、值,过时间,路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间,则表示这个cookiedd的生命周期为浏览器会话期间,关闭浏览器窗口,cookie会消失。这种生命周期为浏览器会话器的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里,当然这种行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存里的cookie,不同的浏览器有不同的处理方式…

session机制

session机制是一种服务器端的机制,服务器使用一种类似于散列表的结构来保存信息

当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识,如果已包含则说明以前已经为此客户端创建过session,服务器会按照session id把这个session检索出来使用,如果客户端请求不包含session id,则为此客户端创建一个session并且生成一个与此session相关联的session id, session id的值应该是一个既不会重用又不容易找到规律以仿造的字符串,这个session id将在本次响应中返回给客户端保存.

cookie与session的区别

比较值	cookie	session
存取方式	只能保管ASCII字符串; Unicode字符需转义; 不能直接存取Java对象	能够存取任何类型的数据;可看做是JAVA的一个容器类
隐私策略	存储在客户端的阅读器上,对客户端是可见的	存储在服务器上,对客户端是透明的
有效期	可以给Cookie的过期时间属性设为一个很大很大的数字	Session保存在服务器内存中,如果过期时间设置久了,会导致内存泄漏
服务器压力	不占服务器资源.如果阅读的用户十分多,推荐使用Cookie	每个用户都会产生一个Session,并发访问的用户十分多,会产生大量session,耗费大量内存
浏览器支持	需要浏览器支持,如果用户禁用了浏览器支持,则cookie不生效	若客户端浏览器不支持cookie，则需要用到session和URL重写.否则会失去用户的信息跟踪
跨域支持	支持跨域名访问	不支持跨域名访问
存储位置	客户端	服务器

2. cookie、sessionStorage和localStorage的区别

比较对象	cookie	sessionSorage	localStorage
有效期	根据设置的过期时间,过期则消失;未过期,浏览器关闭也不会消失	存储在浏览器的内存中,退出浏览器环境即消失	存储在客户端硬盘中,不主动删除不会消失
作用域	在同源窗口中是共享的	在不同的浏览器窗口中是不共享的	在同源窗口中是共享的
数据大小	不能超过4K	5M左右	5M左右
http请求	每次都会携带在http头部	仅在浏览器中保存	仅在浏览器保存
应用场景	主要用于识别用户登录	存储一些页面中传递的参数	存储一些页面中传递的参数

3. http状态码分类

分类	分类描述
1**	信息,服务器收到请求,需要请求者继续执行操作
2**	成功,操作并成功接收并处理
3**	重定向,需要进一步的操作以完成请求
4**	客户端错误,请求包含语法错误或无法完成请求
5**	服务端错误,服务器在处理请求的过程中发生了错误

4. http状态码列表

状态码	描述	中文描述
100	Continue	继续,客户端应继续其请求
101	Switchin Protocols	切换协议,服务器根据客户端的请求切换协议.
200	OK	请求成功,一般用于GET与POST
201	Created	已创建,成功请求并创立了新的资源
202	Accepted	已接受,已经接收请求,但未完成处理
203	Non-Authoritative Information	非授权信息,请求成功,但返回的mate信息不在原始服务器上
204	Not Content	无内容,服务器成功处理,但未返回内容
205	Reset Content	重置内容,服务器处理成功,用户终端应重置文档视图
206	Partial Content	部分内容,服务器成功处理了部分GET请求
300	Mutiple Choise	多种选择,请求的资源可包括多个位置
301	Moved Permanently	永久移动,请求的资源被永久的移动到新URL上
302	Found	临时移动,资源临时被移动.客户端应继续使用原有的URL
303	See Other	查看其他地址.
304	Not Modified	未修改,所请求的资源浏览器返回缓存(未过期)的资源
305	Use Proxy	使用代理,所请求的资源必需通过代理访问
306	Unused	已经被废弃的HTTP状态码
307	Temporary Redirect	临时重定向,使用GET请求重定向
400	Bad Request	客户端请求的语法错误,服务器无法理解
401	Unauthorized	请求要求用户的身份认证
402	Payment Required	保留,将来使用
403	Forbidden	服务器理理解客户端的请求,但是拒绝执行此请求
404	Not Found	服务器无法找到客户端请求的资源
405	Method Not Allowed	客户端请求的方法被禁止
406	Not Acceptable	服务器无法根据客户端请求的内容特性完成请求
407	Proxy Authentication Required	请求要求代理的身份认证,请求者应当使用代理进行授权
408	Request Time-out	服务器等待客户端发送的请求时间过长,超时
409	Conflict	服务器处理请求时发生了冲突
410	Gone	客户端请求的资源已经不存在(永久的删除,并不是更改了URL)
411	Length Requried	服务器无法处理客户端发送不带Content-Length的信息
412	Precondition Failed	客户端请求信息的先决条件错误
413	Request Entity Too Large	请求的实体过大,服务器无法处理
414	Request-URL Too Large	请求的URL过长,服务器无法处理
415	Unsupported Media Type	服务器无法处理请求附带的媒体格式
416	Requested range not satisfiable	客户端请求的范围无效
417	Expectation Failed	无服务无法满足Expect的请求头信息
500	Interval Server Error	服务器内部错误,无法完成请求
501	Not Implemented	服务器不支持请求的功能,无法完成请求
502	Bad Gateway	作为网关或代理工作的服务器尝试执行请求时,从远程服务器收到一个无效的响应
503	Service Unvailable	超荷或系统维护导致服务器暂时无法处理客户端的请求
504	Gateway Time-out	网关(或代理服务器)未能从远端服务器获取请求
505	HTTP Version not supported	服务器不支持请求的HTTP协议的版本

5. http常用的请求头

协议头	说明
Accept	可接受的内容类型(Content-Types)
Accept-Charset	可接受的字符集
Accept-Encoding	可接受的响应内容的编码方式
Accept-Language	可接受的响应内容语言列表
Accept-Datetime	可接受按照时间来表示的响应内容版本
Authorization	HTTP协议中需要认证资源的认证信息
Cache-Control	指定当前的请求/回复中,是否使用缓存机制
Connection	客户端优先使用的连接类型
Cookie	服务器通过Set-Cookie设置的一个HTTP协议Cookie
Content-Length	请求体的长度(8进制表示)
Content-MD5	数字签名,以Base64编码的结果表示
Content-Type	请求体的MIME类型(用于POST和PUT请求中)
Date	发送该消息的日期和时间
Expect	客户端要求服务器做出特定的行为
From	发起此请求的用户的邮箱地址
Host	服务器的域名及端口号
If-Match	客户端的实体与服务器上对应的实体相匹配时,才进行相应的操作
If-Modified-Since	对应的资源未修改,返回304
If-None-Match	对应的内容未被修改的情况下返回304 Not Modified
If-Range	如果实体未被修改,则返回所缺少的哪一个或多个部分
If-Unmodified-Since	仅当该实体自某个特定时间以来未被修改的情况下,才发送回应
Max-Forwards	限制该消息可被代理及网关转发的次数
Origin	发起一个针对跨域资源共享的请求
Pragma	与具体的实现相关,这些字段可能在请求/回应链中的任何时候产生
Proxy-Authorization	用于向代理进行认证的认证信息
Range	表示请求某个实体的一部分,字节偏移以0开始
Refer	表示浏览器所访问的前一个页面
TE	浏览器预期接受的传输时的编码方式
User-Agent	浏览器的身份标识字符串
Upgrade	要求服务器升级到一个高级版本协议
Via	告诉服务器请求是由哪些代理发出的
Warning	一个一般性的警告,表示在实体内容中可能存在错误

6. 强缓存与协商缓存

参考 - 浏览器缓存机制

概述

良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度

通常浏览器的缓存策略分为两种: 强缓存和协商缓存

• 基本原理
  • 浏览器在加载资源时,根据请求头部的expires和cache-control判断是否命中强缓存，若是强缓存,则直接从缓存读取资源,不会发送请求到服务器
  • 如果没有名中强缓存,浏览器会发送一条请求给服务器,服务器会根据last-modified和etag验证资源是否命中协商缓存.如果命中,服务器会返回 304(Not Modified)给浏览器,浏览器会使用缓存中的资源进行显示,并且修改expires和cache-control
  • 否则,服务器会返回新的数据资源.

注意点

• 强缓存字段有expires和cache-control,如果同时存在,cache-control的优先级会高于expires
• 协商缓存的相关字段:Last-Modified/If-Modified-Since,Etag/If-None-Match

是

否

是

否

是

服务器决策

服务器决策

否

200

304

浏览器请求

有缓存

是否过期

Etag?

从缓存读取

向web服务器请求带If-None-Match

Last-Modified

向Web服务器请求带If-Modified-Since

200 or 304

向web服务器请求

请求响应,缓存协商

呈现

7. 常见的http状态码

状态码	描述	中文描述
200	Ok	请求成功
201	Created	已经创建,成功请求并创建了新的资源
202	Accepted	已经接受请求,但是未处理
206	Partial Content	部分内容,服务器已经处理了部分GET请求
301	Moved Permanently	永久重定向,域名跳转
302	Found	临时重定向,让未登录的用户访问用户中心
304	Not Modified	资源未修改,告诉浏览器可以使用本地缓存
307	Temporary Redirect	临时重定向
400	Bad Request	服务器不能理解服务端的请求
401	Unauthorized	需要客户端提供验证信息
403	Forbiden	一般是客户端提交的数据无法通过服务端的验证,拒绝访问
404	Not Found	服务器通过URL无法找到对应的资源
500	Interval Server Error	服务器收到了请求,但是服务器执行的时候发送了错误

8. 前端优化

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

9. GET和POST的区别

属性	GET	POST
安全性	不安全	比较安全(也不是那么安全)
参数长度	被浏览器限制了长度	长度一般无限制
参数是否被缓存	可以在浏览历史记录里看到	不会被保留
TCP数据包	产生1个TCP数据包	产生2个TCP数据包
编码格式	只能进行url编码	支持多种编码方式

10. 画一个三角形

利用边框的均分原理

div {
    width: 0px;
    height: 0px;
    border-top: 10px solid red;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
}

11. 状态码304和200

• 状态码200: 请求已成功,请求所希望的响应头或数据体将随此响应返回.即返回的数据未全量的数据,如果文件不通过GZIP压缩的话,文件是多大,则要有多大传输量

• 状态码304: 如果客户端发送了一个带条件的GET请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。即客户端和服务器端只需要传输很少的数据量来做文件的校验,如果文件没有修改过,则不需要返回全量的数据

12. 说一下浏览器的缓存

• 分为强缓存和协商缓存

  • 浏览器根据IP地址获取资源时,首先在缓存种查找是否含义该资源,如果有且未过期则从缓存种获取,不请求浏览器而直接返回资源,这种返回的资源称为强缓存资源

  • 如果过期了：

    • 如果带有Etag,则会向服务器请求(带If-None-match)，服务器根据客户端传入的信息,判断客户端中的缓存是否过期,若过期则返回新资源(200),否则返回状态码304,不带有资源
    • 如果不带Etag,则会检查是否带Last-Modified,如果有,则向服务器请求(带If-Modified-Since),服务器根据客户端传入的信息,判断客户端中的缓存是否过期,若过期则返回新资源(200),否则返回状态码304,不带有资源
    • 如果不带Last-Modified则直接向服务器直接申请新资源

• 强缓存,是根据是否过期判断的,协商缓存是通过服务器判断的.

13. HTML5新增的元素

• 语义化:新增了 header,footer,nav,aside,section等语义化标签
• 表单: 新增加了color,email,data,range等类型
• 存储: 提供了sessionStorage, localStorage 和离线缓存
• 多媒体: 音频(audio) 和 视频(vedio)
• 其他: 地理定位,canvas画布、拖放(drag)、多线程(Web Worker)

14. 在地址栏输入一个URL到这个页面呈现出来,中间会发生什么

• 输入url后,首先会根据域名去寻找对应的ip

  • 浏览器首先会去寻找缓存,查看缓存中是否有记录,缓存的查找记录为: 浏览器缓存 --> 系统缓存 --> 路由缓存,
  • 缓存中没有则查找hosts文件中是否有记录
  • hosts文件中没有记录则查询DNS服务器,得到ip地址

• 得到ip地址后,浏览器会根据这个ip以及相应的端口号,构造一个http请求

  • 请求报文包括
    • 请求方法
    • 请求说明
    • 请求附带的数据

• 然后,浏览器将http请求封装在一个tcp包中

  • 这个tcp包会一次经过: 传输层、网络层、数据链路层、物理层

• tcp请求到达服务器,服务器请求并返回资源

• 浏览器得到html文档后,第一次会根据html生成一个DOM树,其中遇到异步(如CSS和JS的加载),会将异步任务放到异步队列中去(开一个线程去获取)

• 当同步任务执行完毕后,会去任务队列中去寻找已经完成资源,然后进行事件循环(每次读取队首完成的任务到栈内存中执行,执行完毕在去任务队列中获取).

• 事件循环过后,所有CSS加载完成,会生成一棵CSSOM规则.然后浏览器会将DOM树和CSSOM规则合并成一棵渲染树,主要是排除非视觉节点(Script、meta..)

• 紧接着进行回流(Layout): 根据渲染树,计算出它们在视口(viewPort)中的准确位置和大小.

• 然后重绘(Painting): 根据Render树和回流得到的几何信息,得到绝对像素点

• Display: 将像素点发送给GPU进行渲染

15. 常见的http的头部

• 首部可以分为:
  • 通用首部
    • 一些通用的信息: 如date表示报文创建时间
  • 请求首部
    • 请求报文中独有的: cookie, 和缓存相关的如 if-Modified-Since
  • 响应首部
    • 响应报文中独有的: 如set-cookie,和重定向相关的location
  • 实体首部
    • 用来描述实体部分, allow用来描述可执行的请求方法,content-type描述主体类型,content-Encoding描述主体的编码方式

16. http2.0特性

1. 内容安全: 基于https,天然具有安全性,通过http2.0的特性可以避免单纯使用https的性能下降
2. 二进制格式: http1.x的解析是基于文本的, http2.0将所有的传输信息分割为更小的消息和帧,并对他们采用二进制格式编码,基于二进制可以让协议有更多的扩展性,比如引入了帧来传输数据和指令
3. 多路复用,这个功能相当于是长连接的增强,每个request请求可以随机的混杂在一起,接收方可以根据request的id将request再归属到各自不同的服务端请求里面,另外多路复用中也支持了流的优先级,允许客户端告诉服务器哪些内容是更优先的资源,可以优先输出.