2022.04.24

算法

// <!-- add(1,2,3) -->
function argsSum(args){
return args.reduce((pre, cur) => {
return pre + cur
})
}
function add(...args1){
let sum1 = argsSum(args1)
let fn = function(...args2){
let sum2 = argsSum(args2)
return add(sum1 + sum2)
}
fn.toString = function(){
return sum1
}
return fn
}

function add(num){
    let arrs = Array.prototype.slice(arguments);
    let sum = 0;
    let fn.toSting() = function(){
        for(let i = 0; i < arr.length; i++){
          sum + =arrs[i]
        }
        return sum
    }
    return fn
}

对新技术了解不够

https 里面的 s 主要是干啥

shadow dom

mutation

tapd 的架构方面

前端性能优化方面 前端性能优化都做了哪些工作

canvas 的性能优化方面

cookie 的安全

包括 csrf 也说错了

• 使用缓存

  利用 canvas 进行预渲染, 先绘制到一个离屏 canvas 中，然后再通过 drawImage 把离屏 canvas 画到主 canvas 中。离屏 canvas 还有一个注意事项，如果你做的效果是会将对象不停地创建和销毁，请慎重使用离屏 canvas，至少不要给每个对象的属性绑定离屏 canvas。 save 和 restore 影响的不是 canvas 的状态，而是 context 的状态（比如：fillStyle、transform 等），canvas 上的内容是不会更改的

当对象被销毁时，离屏 canvas 也会被销毁，而大量的离屏 canvas 不停地被创建和销毁，会导致 canvas buffer 耗费大量 GPU 资源，容易造成浏览器崩溃或者严重卡帧现象。解决办法就是弄一个离屏 canvas 数组，预先装进足够数量的离屏 canvas，仅将仍然存活的对象缓存起来，当对象被销毁时，再解除缓存。这样就不会导致离屏 canvas 被销毁了。

myEntity.offscreenCanvas = document.createElement("canvas");
myEntity.offscreenCanvas.width = myEntity.width;
myEntity.offscreenCanvas.height = myEntity.height;
myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");

myEntity.render(myEntity.offscreenContext);

• 避免浮点运算

rounded = (0.5 + somenum) | 0; rounded = ~~ (0.5 + somenum); rounded = (0.5 + somenum) << 0;

• 尽量减少 canvas api 的调用

例如: 作粒子效果时，尽量少使用圆，最好使用方形，因为粒子太小，所以方形看上去也跟圆差不多。至于原因，很容易理解，我们画一个圆需要三个步骤：先 beginPath，然后用 arc 画弧，再用 fill 进行填充才能产生一个圆。但是画方形，只需要一个 fillRect 就可以了。虽然只是差了两个调用，当粒子对象数量达到一定时，这性能差距就会显示出来了。

• 使用 requestNextAnimationFrame 进行动画循环

  setTimeout 和 setInterval 并非是专为连续循环产生得 API, 所以无法达到流畅得动画表现, 顾用 requestNextAnimationFrame , 可能需要 polyfill

• 关闭透明度

创建 canvas 上下文得 api 存在第二个参数: contextAttribute 是上下文属性, 用于初始化上下文得一些属性, 对于不同得 contextType, contextAttributes 的可取值

const ctx = canvas.getContext("2d", {
  alpha: false,
});

alpha boolean类型值，表明 canvas 包含一个 alpha 通道. 默认为 true，如果设置为 false, 浏览器将认为 canvas 背景总是不透明的, 这样可以加速绘制透明的内容和图片

• 尽量不要频繁得调用比较耗时得 API

  shadow 和 绘图相关得 API, 例如: shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, drawImage, putImageData. 在进行绘制时也会增加耗时时间

• 避免堵塞

  web worker 最常用得场景就是大量得频繁计算, 减轻主线程压力, 如果遇到大规模的计算, 可以通过此 API 分担主线程压力.可以配合上文的离屏 canvas

• 利用剪辑区域来处理动画背景或其他不变得图像 只聚焦在我们 clip 的区域. _ 利用剪辑区域技术来恢复上一帧动画所占背景图得执行步骤: _ 调用 context.save()，保存屏幕 canvas 的状态 _ 通过调用 beginPath 来开始一段新的路径 _ 在 context 对象上调用 arc()、rect()等方法来设置路径 _ 调用 context.clip()方法，将当前路径设置为屏幕 canvas 的剪辑区域 _ 擦除屏幕 canvas 中的图像（实际上只会擦除剪辑区域所在的这一块范围） _ 将背景图像绘制到屏幕 canvas 上（绘制操作实际上只会影响剪辑区域所在的范围，所以每帧绘制图像像素数更少） _ 恢复屏幕 canvas 的状态参数，重置剪辑区域

• 使用多层画布去画一个复杂得场景 吐过某些对象需要经常移动或更改,而其他对象则保持相对静态.在这种情况下,可能得优化是使用多个元素对您的项目进行分层.

• 用 css 设置大的背景图 如果像大多数游戏那样，你有一张静态的背景图，用一个静态的

  元素，结合 background 特性，以及将它置于画布元素之后。这么做可以避免在每一帧在画布上绘制大图。

前端组件通信

对全局状态的共享 例如 vuex redux

里面涉及到状态管理库的特点：

状态管理库具有 3 个特点：可预测、中心化、可调式

全局上下文

事件监听