Https的加密过程
本文介绍目下的https协议，是如何进行加密的很久很久以前，数据都是明文传输的，这样的方式毫无安全可见。中间人可以随意获取甚至篡改数据，那现在的什么网上购物、支付等几无可能。后来就出现了https，在http的基础之上，加了一个安全套接层，它的作用，就是用来对数据进行加密和解密。熟悉osi七层模型的同学都很清楚，http是应用层协议，下面还有传输层的tcp和网络层ip。加密解密的操作，可以看作介于应用层和传输层之间，也就是货物上路之前的和卸货时的时间点。
对称加密和非对称加密形象的比喻，对称加密就是一把钥匙，既能加密，也能解密。而非对称加密则是，加密一把钥匙，解密一把钥匙。
加密策略的演进历程
纯对称加密发送请求前，浏览器会给s端发送加密相关的东西： 加密套件和加密列表.前者就是加密的具体方法，后者指的是浏览器能够支持的哪些方法。s端收到东西之后也会给c端返回数据。这里可以浅显的理解为使用的加密方式，也就是对称加密的钥匙。这样，浏览器之后发送的所有请求，都会用这把钥匙进行加密，到了服务器端，再用这把钥匙进行解密。
缺点: 那把钥匙，在传输过程中，也是明文的，因此问题并未解决。
对 ...
React系列：第三回(状态管理)
本文见到那介绍下React中的状态管理主流就是俩： Redux 和 Context
Redux// 安装
cnpm install @reduxjs/toolkit react-redux
基本使用redux是一个状态管理容器，类似vuex，几个重要的角色： store（数据源）、action及reducer（负责修改数据）。下面代码演示他的基本使用：
// index.js中引入redux的store和provider方法
import store from './store'
import { Provider } from 'react-redux'
...
...
<Provider store={store}>
<RouterProvider router={router}></RouterProvider>
</Provider>
// store的index
import { configureStore } from "@reduxjs/toolkit"; ...
React系列：第二回(React-router)
本文简单介绍下react-router的相关内容
类似于vue-router，安装react-router配置react项目的路由。先安装一下：
cnpm install react-router-dom
简易版本import { createBrowserRouter, RouterProvider } from 'react-router-dom'
const router = createBrowserRouter([
{
path: '/login',
element: <div>我是登陆页面</div>
},
{
path: '/index',
element: <div>我是内容页面</div>
}
])
...
...
// index入口文件配置
<RouterProvider router={router}></RouterProvider>
上面代码中，我们定义了两个路由的匹配规则，效果显示
通用路由 ...
代理神器-whistle
本文简单备注一下，whistle工具的使用在网络的系列文章中，我们有聊到过代理，何为“代理”？说白了就是双方中间多了个“代理”层，充当中间人的角色。但凡爬过梯子或者去网吧打过游戏的，想必都不会陌生。爬梯子的使用场景是： 上个“油管”，卧槽，咋看个视频都不让呢？架哥梯子吧。首先为什么页面打不开看不了？ 油管部署在外围，大陆网跟外界网络中间隔了一层GFW。由于某些政策原因，该站点被上黑名单。当我们的请求到达网络交界处“GFW”时，直接被咔嚓一刀，造成的看不了。为什么架个梯子就可以？当我们打开梯子软件之后，我们访问油管的请求会被梯子软件接管，他会带着这个请求，首先访问自己部署在外围的机器，然后将油管地址给到外围机器，让那台机器代替你的机器，给油管发请求。拿到内容后，返回给你的浏览器。这一波操作下来，就可以访问了。为什么可以了？因为绕过了中间那个审查隔离层。
代理的工具多如牛毛，那么本文的主角whistle，有什么亮眼的功能呢？
拦截请求到目标地址
https://www.baidu.com https://www.zhihu.com
The Life-and-Death Landscape Woven by Sound and Image: Japanese Views on Life and Death through Anime and Literature
The Life-and-Death Landscape Woven by Sound and Image: Japanese Views on Life and Death through Anime and LiteratureIn the cultural context of Japan, life and death have never been absolute boundaries of either-or, but rather intertwined, mutually reflective symbiotic existences. The soundtracks composed by Yasuharu Takanashi for Shiki and Hell Girl, with their melodies interweaving pathos and ethereality, establish the emotional foundation for the life-and-death narratives of these two anime se ...
canvas和svg渲染及其他
本文介绍下canvas和svg相关内容渲染层面在目前前端2d层面，图形化开发有两种方案：canvas和svg。借助它们都能帮我们绘制各种图形，但是两者底层原理完全不同。canvas本质就是批量绘制像素点，从dom结构看，他就是一个完整的dom节点，不管你在上面绘制了多少path，最终就是一个dom节点canvas。但是用svg则完全不同，svg绘制的path本身，就是一个个的dom节点。所以如果是海量数据，很显然，使用canvas批量绘制像素点的效率，远高于创建海量的dom节点。但是svg也有优点，因为是一个个的dom，所以支持原生事件（click/hover）、CSS 样式控制，交互开发成本低，且矢量图形缩放无失真。
性能考量-canvas有时候有些极端场景不可避免，比如Canvas 渲染 10 万条折线时出现卡顿，该如何优化？
视图渲染。这种手段的叫法有很多，什么脏矩阵、局部渲染等，但都是一个逻辑：只渲染视图范围内的数据。
数据抽稀。说白了就是减少数据点。比如2d图形开发，本质就是一个个的点组成的。那么一条线段可以用10000个点描述，也可以只用两个点描述（起始点）。这里有一些算 ...
Threejs系列：md2模型
本文介绍如何将md2模型，导进我们的页面中前面有介绍过使用gltf的loader，加载glb模型。那么针对古老的md2模型文件，如何操作呢？
1. 导入md2库
import { MD2Character } from 'three/examples/jsm/misc/MD2Character.js';
2. 加入一个平面贴图当作草地
const gt = new THREE.TextureLoader().load( 'textures/terrain/grasslight-big.jpg' );
const gg = new THREE.PlaneGeometry( 20, 20 );
const gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
const ground = new THREE.Mesh( gg, gm );
ground.rotation.x = - Math.PI / 2;
ground.material.map.repeat.set( ...
Threejs系列：补间动画
本文介绍threejs中的补间动画什么是补间动画？物体从a位置移动到b位置，移动过程中的展现形式，就是补间动画。
1. 导入tween库
// threejs自带了，无需安装
import * as TWEEN from 'three/examples/jsm/libs/tween.module'
const cube1 = new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({color: 'black'})
)
scene.add( cube1 );
const tween1 = new TWEEN.Tween(cube1.position)
tween1.to({ x: -10}, 3000)
tween1.easing(TWEEN.Easing.Bounce.InOut)
tween1.start()
const tween2 = new TWEEN.Tween(cube1.position)
tween2.to({ x: ...
Threejs系列：光线投射（捕获点击目标）
本文介绍threejs中的光线投射我们都知道，threejs是一个三维场景，但是在前端页面中，三维的场景，是画在二维的canvas画布中的，那么问题来了，在二维画布上的点击事件,需要到三维场景中获取点击目标，如何实现？光线投射。
实现思路： 先要归一化，针对坐标系，将通过点击事件获取的坐标值，转换成笛卡尔坐标系（右正上正）的数值，且区间范围控制在[-1, 1]。然后通过光线投射，由转换后的坐标点及相机位置点，得到一条线，这条线穿过的空间中的物体，就是我们的点击目标。
1. 归一化：坐标转换通过点击事件，获取当前画布的x、y。然后根据视图区域的宽高，归一化坐标数据到下图的坐标系中。
具体代码：
let mouse = new THREE.Vector2()
window.addEventListener('click', (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -((event.clientY / window.innerWidth) * 2 - 1)
...