Explainfuture's Blog

前端知识 接下来的内容会是我 面试 / 遇到 不会的点，或者是掌握得不清楚的点，我会尽可能将整个流程写明白，让我自己能跑通整个流程。 浏览器的同源策略？What 当我们写好一个后端程序和前端程序的时候，前端向后端发送请求，提示CORS未通过，这通常是浏览器的同源策略导致的。 同源策略是浏览器对跨源读写的限制，例子：js不能读另一个源的响应内容。 链路：浏览器先执行同源策略 – 如果跨源，则需要带上CORS响应头显式访问 – 否则浏览器拦截 同源策略是拦截策略，而CORS是服务器给浏览器的许可证明 Why 这是为了防止Web里的跨源攻击，运行在某个 origin 下的脚本，不能读取其他 origin 的存储（localStorage/cookie/DOM）和响应内容；哪怕这些请求是用户本人在同一个浏览器里触发的。 How 服务端通过 CORS 配置决定向哪些 Origin 返回允许头；若未允许，浏览器会拦截前端 JS 读取响应（即使请求到达并拿到 200）。 校验三大部分：协议、主机名、端口 123456789101112public...

面试心得Meshy 由于是第一次面试前端，会有一些紧张，并且有一些基础并不牢固，很多事情都是想当然，以为看过就会，实际上一动手就废。这是一次我想提前终止的面试，因为我真的被他问的有些不知所措。 在最后的交流环节里，我向他请教：在您学习开发的过程中，您是如何将知识内化的？ 他给我的答复是：他会尝试模拟这个过程，看看自己的逻辑是否能跑通，如果不行，学习一下他跑不通的逻辑，也就是无穷尽的探索欲。 这给了我很大启发，我动手其实也有，但是感觉更像是一个typer，instead of thinker，我虽然得到了结果，但是这些东西并没有内化到我自己的心里。所以在今天回家的高铁上，我总结了五个点。 当你遇到一个问题，尝试去可视化这个问题，比如用笔写下来或者用你的大脑想 尝试去模拟这个过程，看看目前的知识是否足以解决这个问题 写下你的想法并且去找到标准答案，尝试去想一下这个答案是否完美，如果不完美，我们自己可以进行优化吗？ 回忆刚刚的整个过程，并且尝试将过程复述给其他人，或者自己。 不要直接抄答案，要自己从大脑里面检索出想法。

React的基础api React.createElement() 作用：用来创建一个React元素 参数： 参数的名称 button/div/p(html标签必须小写) 标签中的属性 class属性需要使用className来设置 在设置事件时，属性名修改需要驼峰命名法 元素的内容（子元素） 注意点 React元素最终会通过虚拟DOM转换为真实DOM元素 React元素一经创建就无法修改，只能通过新创建的元素进行替换 ReactDOM.createRoot() 操作dom，将要挂载的dom转为React对象 root.render() 用来将React元素渲染到根元素上 根元素中所有内容都会被删除，被React元素替换 当重复调用render()时，React会将两次渲染的结果对比(diff)，它会确保只修改那些变化的元素，对DOM做最少的操作 事件命名 1234567React.createElement('button',{ onClick: ()=>{ ...

为了更深了解Redis，重新学习一次黑马点评，从原理到实现。 数据类型 一种非关系型数据库(NoSQL)、里面都是键值对(key-value)的存储形式，不过value可以使用一个json 是一种非结构化、存储在内存（因此速度快）的数据库 单线程，每个命令具备原子性 低延迟，速度快（基于内存，IO多路复用，良好的编码） 支持数据持久化 支持主从集群 基本的数据结构类型有五种：String、Hash、List、Set、ZSet(SortedSet) 通用命令 keys：查找关键词（不要在生产环境用这个，redis是单线程的，会阻塞其他任务） keys *(*是通配符，查所有) del：删除一个key exists：判断是否存在 （语法：exists...

Learn the FastAPI fastapi是一个web开发框架，目前我个人感觉是比springboot更方便，因为我只下载了python&&pip两个库，就可以很快的启动后端 环境创建 先下载python（我下载了3.12），创建一个新文件夹，然后使用VS Code打开这个文件夹，接着调出cmd，在里面先安装好虚拟环境：使用命令python -m venv venv创建，并使用命令venv\Scripts\activate激活虚拟环境。 我们需要的是fastapi以及uvicorn，使用pip install，可以换源，之前我已经换过清华源了，会快一些。 写测试样例：新建py文件test.py 12345678910111213from fastapi import FastAPIapp = FastAPI()@app.get("/add")def add(): return {"result" : 10+20}@app.get("/sub")def sub(): ...

HashMap 的底层原理以及如何扩容？ HashMap 由 数组 + 链表 + 红黑树 构成 初始大小为 16，通过哈希策略将数据分布到不同的桶中 扩容机制： 当数组长度小于 64 时，扩容并且会 Rehash 当数组长度大于等于 64 且链表长度超过 8 时，链表转为 红黑树，查询复杂度从 O(n) 变为 O(logN) 扩容时数组大小翻倍（*2），装载因子默认为 0.75，可自定义 Redis 的穿透、击穿、雪崩缓存穿透 现象：客户端访问不存在的数据，缓存和数据库均未命中，大量请求直达数据库，导致负载过大甚至宕机 原因： 业务层误删缓存和数据库的数据 恶意请求不存在的数据 解决方案： 未命中时将空值写入缓存，下次请求直接返回空值 使用 布隆过滤器拦截不存在的请求 缓存击穿 现象：某个热点数据在缓存失效的瞬间，大量并发请求直达数据库，导致服务崩溃 解决方案： 对热点数据设置 永不过期 使用 互斥锁，一个线程重建缓存，其他线程等待 缓存雪崩 现象：大量缓存同时过期，或 Redis 节点故障，导致所有请求直达数据库，造成数据库宕机 ...

NIO(Non-Blocking Input/Output) 三大组件 Channel Buffer Selector Selector Selector可以和一个线程合作，可以理解为Selector是摄像头，可以同时监听多个Channel的I/O状态，然后交由一个线程去处理这些就绪事件 你可以把 Selector 想成一个 监控中心（摄像头）。 它一直盯着多个 门口（Channel）。 一旦某个门口有人按门铃（I/O 就绪），监控中心就通知唯一的值班员（线程）过去处理。 相较于传统的IO而言： 传统阻塞 I/O：一个连接对应一个线程，线程多了就很浪费（上下文切换，CPU核数不够等）。 NIO + Selector：一个线程就能处理成千上万个连接的 I/O 事件，大幅减少线程切换和资源占用。 ByteBuffer 大致有两个部分：Channel（数据来源/目标）和 Buffer（数据中转区）。 初始为写模式，调用 channel.read(buffer) 将数据写入缓冲区。 调用 flip()...

集群 下面介绍一个传统服务请求的全过程： 用户需要通过ip（但因为ip太难记了，所以要买一个域名绑定ip）访问网站； 请求进入Nginx网关，负责负载均衡（如轮询、权重）和流量转发； 发送给部署了相同jar包的服务器，这样实现了高可用高并发； 数据库也可以部署在多台服务器上。 集群就是同一个功能的副本 分布式架构 定义：分布式架构是将一个大型应用的功能拆分为多个小型服务（微服务），分别部署在不同的服务器上，彼此协作完成整个业务流程。 下面介绍大致流程 原来的大型应用的功能都被拆分成了小模块，可以去部署到同一ip下的不同位置； 不同功能之间想要请求数据时要发一个http请求，获得json数据，就需要远程调用(RPC); 每个服务都将自己的地址信息注册到注册中心（如Nacos、Eureka），其他服务可通过注册中心获取其地址，实现服务发现与调用； 注册中心也可以进行客户端或服务端负载均衡； 为了提高系统的稳定性，还会加入服务熔断、限流、降级等机制（如使用...

微信小程序开发 在传统的网页开发中，网页编程采用的是三件套HTML + CSS +JS，其中HTML描述结构，CSS描述样式，JS用来处理这个页面和用户的交互； 在小程序中，wxml充当类似于html的角色， 配置文件 pages：存放微信小程序的所有页面 .eslintrc.js：格式化代码 app.js：微信小程序的入口文件，用于描述微信小程序的整体逻辑 app.json：微信小程序的全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏 app.wxss：微信小程序的全局样式文件 project.config.json：微信开发者工具上做的任何配置都会写入这个文件中 语法 不需要写后缀名，第一个是默认页面，想要设置分包作为首页可以在app.json添加entryPagePath 1234"pages":[ "pages/index/index", ...

学习Nginx基本用法：正向代理 && 反向代理 && 动静分离 &&...