寅时码

欸，朋友们好，我是性能优化带师，寅时码 昨天，产品发来张截图，问我怎么这么卡 我一看，噢~原来是佐田，后端的数据，有三千多条，给我挤爆了 这时间，按照传统前端的方式，应该是 减数据、截数据、分段出 引

要问我认为最难的事是什么，那只有维护前人的代码。我经常能看见一个文件里，写上百行，没有几个函数，没有注释，没有换行 一头扎进去，闷头写到天昏地暗的

引言 最近再做3D的大屏，然后客户发来1G的图片压缩包，让我全放上去当轮播图 这不得卡死啊，现成且现代化好用的第三方库没找到 于是又到了我最爱的实现源码环节，核心代码十多行即可 底部有源码

1. 布局 上面用来显示底部的文字，或者图片也行 然后绝对定位，再放入canvas覆盖 2. 创建画布 传入的参数是父容器，让他们的大小一致 3. 设置样式 注意globalCompositeOper

直接说结论，用type一把梭即可，除非你要发布到`npm`。接下来我一一解释 为什么定义对象都要使用type呢？

实现思路 你需要提供暂停执行的能力 你需要接收resolve的返回值 基于上述要求，可以想到生成器来实现此功能 生成器的简单使用 首先需要用 * 关键字定义生成器 当执行时，遇到yield关键字会停止

效果 HTML 实现思路 input要隐藏，同时需要可以点击 首先要根据input的值来改变样式 初始化样式 先定义变量 设置label样式，这里border-radius不是百分比，而是近乎无限大的

HTML 具体实现 初始化 获取具体帧画面 这个函数，能根据给定的视频文件和某一秒，生成那一秒的视频画面 时间也可以给个数组，最终返回对应的Blob和url对象 接下来需要实现genFrame函数 首

HTML 具体实现 首先初始化参数 接下来实现这个ImgShowCvs类 首先初始化参数 接下来绑定点击事件 注意，在类里绑定事件，this指向是DOM元素，所以用箭头函数定义，做法同React的类组