前端缓存相关
谈到前端性能优化，缓存策略是必聊得。今天咱们就来扒一扒主要的两部分：强缓存和协商缓存。 以前我的理解就是：当我们需要向服务器请求资源时，浏览器首先会检查，是否命中强缓存。如果命中，则直接从缓存中拿资源，注意，此情况不需要像后端发送请求。如果没有命中，就会像后端真实发送请求，然后由后端判断，是否命中协商缓存。若命中，返回304，告诉前端资源未更新，可以用本地的，若没有命中，则找到对应资源返回，状态码通常200。上面的表述不能说不对，但是显然缺少细节。现在既然要来扒一扒，咱么就深入一下。
1. 强缓存：强缓存主要是通过http请求头中的Cache-Control和Expire两个字段控制。Expire是HTTP1.0标准下的字段，在这里我们可以忽略。我们重点来讨论的Cache-Control这个字段。Cache-Control是HTTP/1.1标准下的。 一般，我们会设置Cache-Control的值为“public, max-age=xxx”，表示在xxx秒内再次访问该资源，均使用本地的缓存，不再向服务器发起请求。 为什么指定缓存过期时间需要两个字段呢？ 因为有 ...
Threejs系列：着色器
本文研究下threejs中，着色器的相关内容及使用方法Shader（着色器）的功能如其名称： 上色用的。分为两种： 顶点着色器和片段着色器
顶点着色器： 用来确定输入的点数据在屏幕上的具体位置,即：定位
片段着色器： 确定点的颜色，并上色.即：着色
编写着色器规范编写着色器需要用到glsl语言，即：opengl shader language.一种类似于c的东东。
首先分别创建顶点着色器和片段着色器文件，在main.js中引入
import vertexShader from './shader/vertexShader.glsl'
import fragmentShader from './shader/fragmentShader.glsl'
...
...
// 创建着色器材质
const geo = new THREE.PlaneGeometry(1, 1)
const shaderMaterial = new THREE.RawShaderMaterial({
vertexShader: vertexShader,
fragmentShader: ...
Blender备忘录： 第一回
本文主要介绍一些Blender软件的基本使用
Threejs系列：灯光
本文介绍threejs中的灯光相关设置threejs中的光照配置的标配： 环境光 + 光源
环境光： 无处不在的光
// 环境光
const envLight = new THREE.AmbientLight('white', 1)
scene.add(envLight)
注意：不添加环境光，物体设置的颜色无法显示。
点光源
// 灯光配置
const pointLight = new THREE.PointLight(0xffffff,1, 1000)
pointLight.position.set(2, 3, 2)
pointLight.castShadow = true
scene.add(pointLight)
const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize, 'white' );
scene.add( pointLightHelper );
注意， 此处我们还加了一个helper帮助显示光源位置
创建物体和地面
// 物体
...
Threejs系列：相机
本文主要研究一下threejs中的相机threejs中的相机：
ArrayCamera：包含着一组子摄像机，常用于多人同屏的渲染，更好地提升VR场景的渲染性能
StereoCamera：双透视摄像机（立体相机），常用于创建 3D 立体影像，比如 3D 电影之类或 VR
CubeCamera：有6个渲染，分别是立方体的6个面，常用于渲染环境、反光等
OrthographicCamera：正交相机，在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。这对于渲染2D场景或者UI元素是非常有用的。
PerspectiveCamera：透视相机，这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
透视相机语法：PerspectiveCamera( fov, aspect, near, far )fov：摄像机视锥体垂直视野角度aspect：摄像机视锥体长宽比，一般设置为Canvas画布宽高比width / heightnear：摄像机视锥体近端面far：摄像机视锥体远端面，far-near构成了视锥体高度方向
...
Canvas系列: 基本使用
本文记录一些基本的操作基本图形绘制
具体代码：
c.beginPath()
c.arc(300, 200, 100, 0, 2 * Math.PI)
const g = c.createLinearGradient(0, 0, 600, 400)
g.addColorStop(0, 'green')
g.addColorStop(1, 'red')
c.fillStyle = g
c.fill()
c.stroke()
c.closePath()
c.beginPath()
c.arc(250, 150, 20, 0, 2 * Math.PI)
c.stroke()
c.closePath()
c.beginPath()
c.arc(350, 150, 20, 0, 2 * Math.PI)
c.stroke()
c.closePath()
c.beginPath()
c.ellipse(300, 200, 10, 30, 0, 0, 2 * Math.PI)
c.stroke()
c.closePath()
c.beginPath()
c.moveTo(250, 300)
...
Canvas系列：windows泡泡屏保
本文尝试用原生canvas实现windows的泡泡屏保效果，基于vue3框架最终效果如下：
首先html代码创建一个canvas画布
<div class="steam">
<canvas width="360" height="520"></canvas>
</div>
...
...
// 页面挂载完毕后，依次执行画布和circle初始化
onMounted(() => {
initCanvas()
createCircles()
})
const initCanvas = () => {
const canvas: any = document.querySelector('canvas')
c = canvas.getContext('2d')
canvas.onmousemove = (e: any) => {
moveInfo.x = e.x
moveInfo.y = e.y
moveInfo.actualX = moveInfo.x - canvas.get ...
Games-104: 第一回
本系列文章，是围绕Game-104课程的内容，做的备忘录及自己的一些想法游戏的伟大之处在于，他在尝试模仿上帝的行为。任何游戏引擎的核心，看俩函数：tickLogic、tickRender。前者用于计算obj的各种状态，后者用于绘制出来。这里的tick，可以理解为时间片。我们说动画的理论基础是：人是靠视觉残留感知一个连续世界的。在之前介绍屏幕刷新率中我们有解释过，对于人眼而言，若一秒钟闪24张图片，那么人眼就认为是连续的。即使是我们正常浏览网页，看起来页面是没有在动的，但实际上却在以屏幕刷新率的闪动频率不停的变化着。那么游戏引擎的基石也是如此。需要在每一帧的时间间隔内完成上面的俩函数的绘制。在tick1时刻，张三静止，tick2时刻张三挥拳打了李四，李四掉了五点血（假定在这个区间内完成），ticklogic做的事情是计算拳头、李四等obj的各个状态，确定之后，重新render生成新的帧绘制出来。
而也就是这两部分，决定了不管是软件还是web应用的性能。
算法：动态规划
本文介绍一种经典的算法思想：动态规划
官方文邹邹定义：将一个问题拆成几个子问题，分别求解这些子问题，即可推断出大问题的解。个人理解：未来取决于当下，脱钩于过去使用DP的场景：能将大问题拆成几个小问题，且满足无后效性、最优子结构性质。
经典算法必须有经典场景：斐波那契数列。这种数列的一个最大特点： 初始值：f(1) = 1, f(2) = 1,之后的每一项都是前两项的和。所以f(3) = f(1) + f(2) = 2….
1. 爬楼梯爬楼梯的方式有两种，一次一级或者两级，那么跳到n级，有多少种跳法？实际就是一个斐波拉契数列，f(1) = 1, f(2) = 1…
const climbStairs = function(n) {
if (n <= 1) return 1
const f = [1,2]
for (let i = 2; i < n; i++) {
f[i] = f[i-1] + f[i-2]
}
return f ...