前端一些知识点-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端一些知识点。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

cookies & webStorage & indexedDB

由来
- cookie设计的初衷是用于维护HTTP状态
原理
- 浏览器首先发送一个无状态请求到服务端
- 服务端带上cookie返回
- 浏览器后面的请求都会带上cookie（如果客户端或者服务端对cookie没有操作的话）
生成机制
- 服务端生成，在Http Response Header 中 Set-Cookie
- 客户端生成，通过 document.cookie设置
缺陷
- cookie大小限制4k
- cookie附在HTTP请求上，如果数据过大，或导致http请求非常大

loaclStorage
- 以域名为维度，浏览器持久化存储方案
- 大小5Mb
- 同步接口，占用线程的计算
- 使用方法：
  - localStorage.setItem(key,value)
  - localStorage.getItem(key)
sessionStorage
- 以域名为维度，浏览器基于会话级的存储方案（页面关闭后或者新开一个窗口之前存储的数据就会获取不到）
- 大小5Mb
- 同步接口，占用线程的计算
- 使用方法：
  - sessionStorage.setItem(key,value)
  - sessionStorage.getItem(key)
indexedDB
- 以域名为维度，浏览器大量结构化数据存储方案，运行在浏览器的非关系型数据库
- 不会小于250Mb，支持二进制存储，理论无上限
- 接口异步，支持事务机制（要不成功，要不失败）

representation state transfer Application Program Interface
表示性状态转移接口, API设计规范：
- 1. 将一切数据视作资源
- 1. 利用 HTTP 请求方式，描述对资源的操作（增、删、改、查）
- 1. 通过 HTTP 响应状态码，描述对资源的操作结果。
期望的效果是：
- 1. 看url就知道是什么资源
- 1. 看 method 知道对资源做了什么操作
- 1. 看 Response Code 知道操作是否成功
Method 规范：
- 1. GET 用于读取资源
- 1. POST用于创建资源
- 1. PUT用于更新资源
- 1. Patch 用于局部更新
- 1. Delete 用于删除
示例：
- 普通 API
  - /api/getUser
  - /api/createUser
  - /api/deleteUser
- RESTFul API
  - GET /api/users/:user_id
  - POST /api/users
  - DELETE /api/users/:user_id
好处：
- 有效降低沟通成本
- 前后端解耦更彻底
- 前端业务更灵活

内存的生命周期：
- 程序执行都先分配好内存（在js中是隐藏的操作）
- 在内存中进行逻辑读/写
- 垃圾清除，释放/回收内存（在js中是隐藏的操作）
内存泄漏是指在程序中已经不在使用的变量，但垃圾回收机制认为还在使用，导致内存无法释放。
场景1：意外定义全局变量，不如通过通过this定义变量时，this指向windows时，会导致变量都在windows对象中，即使组件的生命周期到了，定义的这些变量也有可能不会被回收。
场景2：console.log，打印一些变量到控制台，比如对象，那这个对象是释放不了的，因为它需要一直显示在控制台
场景3：没有控制好的闭包。比如闭包返回的function赋值给一个全局变量，但没有执行，如果这个全局变量没有置为null,那么这个function对象则一直会被GC认为在使用中
场景4：DOM泄漏。比如通过document.createElement创建的元素，再被插入到dom中后，删除对应的的父节点，怎创建的元素不在被使用，但是垃圾回收机制认为这些创建的元素还是在被引用。

文章来源地址https://www.toymoban.com/news/detail-839297.html

到了这里，关于前端一些知识点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！