万丈高楼平地起（3）继续梳理js 知识点（浏览器存储，TCP流程，get post ,js内存）

站长

2024年04月14日 15:54 · 阅读数 5

1 浏览器存储

简介：浏览器存储大致可分为三个点，cookie,localStorage,sessionStorage下面我将为大家一一介绍这三种浏览器存储方式并总结

一、cookie

1、cookie的定义

cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用docum.cookie可以查看当前正在浏览网站的cookie。

2、cookie存在的安全问题

cookie虽然很方便，但是使用cookie有一个很大的弊端，cookie中的所有数据在客户端就可以被修改，数据非常容易被伪造，那么一些重要的数据就不能放在cookie中存储，cookie存储过多数据字段会影响传输效率。、

3、cookie的作用

保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面是就不需要重新登陆了。cookie还可以设置过期时间，当超过时期限制后，cookie就会自动消失。因此系统往往可以提示用户保持登录状态时间：常见选项有一个月、三个月、一年等。
跟踪用户行为。例如一个天气预报网站，能够根据用户选择地区显示当地的天气情况，如果每次都需要选择所在地是十分繁琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问地区，当下次在打开该页面时，他就会自动显示上次用户所在地区的天气情况。十分便捷
定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

二、sessionStorage

当用户账号和密码登录某个网站后，刷新页面仍然保持登录状态，服务器如何分辨这次发起请求的用户是刚才登录过的用户呢？这里就是用session保存状态。用户在输入用户名密码提交给服务器，服务端验证通过后会创建一个session用于创建记录用户相关消息。这个session可保存在服务器内存中也可保存在数据库中。

创建session后，会把相关联的session_id通过setCookie 添加到http相应头部
浏览器在加载页面时发现响应头部有set-cookie字段,就把这个cookie种到浏览器指定域名下。
当下次刷新页面时,发送的请求会带上这条cookie,服务端在接收到后根据这个session_id来识别用户。

cookie 是存储在浏览器里的一小段数据，而session是一种让服务器能识别某个用户的机制，session在实现的过程中需要cookie。二者不是一个概念。

三、localStorage

1.localStorage 是H5本地存储web Storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用js手动清除。
2.不参与网络传输
3.一般用于性能优化，可以保存图片、js、css、html模板、大量数据

2 网络请求方式post和get

1)使用get方法传递参数

1 在浏览器地址中输入某个url地址或者单机或单机网页上的一个超链接时，浏览器发出的请求消息的请求方式为GET. 例如：http://localhost:8080/html/index.html 或：
2 如果网页中的**表单元素的method属性明确的被设置为GET**,浏览器提交这个form表单时的方式就是GET. 例 :
```
<form action='save.do' method='get'> </form>
```
3 使用GET请求方式给WEB服务器传递参数,(格式为？+参数)，即把请求参数放在url路径后面。例：baidu.com?key=lc&wd=ll
4 使用get方式传递的参数大小一般限制在1kb以内。

2) 使用POST参数传递参数

1. POST请求方式主要用于form表单提交数据给web服务器。form表单的method提交方式要设为POST. 例：
```
    <form action='submint.do' method='post'></form>
```

POST方式将各个表单字段元素及其数据作为HTTP消息的实体内容发送给web服务器。即post方式将请求参数放在请求体里面，下面是响应消息结构

    POST /counter.jsp HTTP/1.1
     referer: http://localhost:8080/Register.html
     content-type: application/x-www-form-urlencoded
     host: localhost:8080
     content-length: 43

     form-data:name=zhangsan&password=123

3 post方式传输的数据量要比使用GET方式传送的数据量大得多。

3. TCP三次握手四次挥手

TCP三次握手

为什么要进行TCP握手建立请求链接呢？

为了防止已失效的链接请求报文段突然又传回服务器端，从而产生错误

1)客户端发送syn(同步序列编号)请求，进入syn_send状态，等待确认。
2)客户端接受syn包并确认，发送syn+ack包，进入syn_recv状态。
3)客户端接受syn+ack包，发送ack包，双方进入established状态。

TCP四次挥手

1)客户端发送fin给服务端，用于关闭client到server的数据传输客户端进入fin_wait状态
2)服务端接受fin后，发送一个ack包给客户端。服务端进入close_wait状态。
3)服务端发送一个fin给客户端，用于关闭server到client的数据传输。服务端进入last_ack状态
4)客户端收到fin后，进入time_wait状态，接着发送一个ack给服务端，服务端进入closed状态

为什么建立是三次握手，而关闭是四次挥手呢？

因为建立链接时，客户端接受的是syn+ack包。而关闭时，服务器端接收到fin后，客户端仅仅是不在发送数据，但是还是可以接收数据的。服务端此时可以选择立刻关闭链接，或者在发送一些数据后，在发送fin包来关闭链接。因此fin包和ack包一般都会分开发送。

4 内存机制及内存泄露

内存泄露是每个开发者最终都要面对的问题。内存泄露会引发：反应迟缓、崩溃和高延迟等一系列问题。

定义

内存泄露的定义：应用程序不需要占用内存的时候，由于某些原因，内存没有被操作系统或可用内存池回收。编程语言管理内存的方式各不相同。只有开发者最清楚哪些内存不需要，操作系统可以回收。一些编程语言提供了语言特性，可以帮助开发者做类似的事情。

JavaScript的内存回收机制

js的垃圾回收算法主要依赖引用的概念，例如一个对象如果有另一个对象的访问权限，不论这里是显式还是隐式。js有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。当对象没有引用指向时，该对象就会被垃圾回收机制回收。

标记清除

工作原理： 当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记离开环境的就会回收内存。

工作流程：

1. 垃圾回收器在运行的时候会给储存在内存中的所有变量都加上标记。
1. 去掉环境中的变量以及被环境中的变量引用的变量标记（闭包）
1. 依然被标记的会被示为准备删除的环境变量。
1. 垃圾回收器完成内存清除工作，销毁那些带标记的值，并回收它们所占用的内存空间。

引用计数

工作原理： 跟踪记录每个值被引用的次数

工作流程：

1. 声明一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1.
1. 同一个值又被赋值给另一个变量，这个引用类型值的次数加1。
1. 当包含这个引用数据类型值的变量又被赋值成另一个值了，那么这个引用类型值的次数减一。
1. 当引用次数变成0时，说明没法访问这个值了。
1. 当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存。

内存泄露

1. 意外的全局变量
1. 闭包
1. 未被清空的定时器
1. 未被销毁的事件监听
1. dom引用