有关浏览器缓存的几个疑问 浏览器缓存判断流程？ 两种分类协商缓存和强制缓存是什么？怎么判断？ 缓存的资源放在哪儿？ 不同的刷新对缓存的影响？ 浏览器缓存的流程当客户端请求某个资源，首先需要询问浏览器是否存在缓存有以下三种结果： 不存在，那么直接向服务器发起请求，就像第一次访问该网站一样 存在，通过Cache-Control、Expires判断后缓存已失效，那么则使用协商缓存，携带该资源缓存标识向服务器发起请求，服务器根据 http header 判断后决定是否使用缓存，若协商缓存失效重新拉取请求结果则状态码为 200 ，若协商缓存生效那么继续使用缓存状态码为 304 存在，通过Cache-Control、Expires判断后未失效，那么继续使用缓存状态码为 304 图示： 123456789101112131415161718 浏览器发起请求 | ...

three.js 3D版本update 一个文字粒子效果,折腾了一些时间，纯粹觉得好玩 点这里看效果 随机初始化部分粒子1、首先要明白每个粒子都是一个对象，都有自己的起点，移动速度，移动轨迹，终点 2、粒子活动轨迹：初始化 —- 聚合拼合文字形状 —- 散开 —- 再聚合 —- 散开… 3、根据动画时间调整粒子的移动速度来安排他们的位置 12345678910111213141516171819202122232425262728293031323334353637383940414243444546class Point{ constructor() { this.startx = Math.floor(Math.random() * docsize[0]), // 初始起点 this.starty = Math.floo...

最近使用 iframe 的时候想要获取 iframe 文档信息的时候遇到了跨域问题，最后使用 postmessage 做父子页面通信解决需求也顺便学习了下 webworker 的使用webWoker 使用依赖 postMessage() 和 onMessage(), 所以先说这两个吧 postMessage && onMessage 提供网页文档之间互相发送和接收信息的功能，可用于解决跨域访问的问题 会在所有页面脚本执行完毕之后(包括方法之后或者之前设置的 timeout 事件)再执行 挂载于 window 对象上 postMessage 语法： otherWindow.postMessage(message, targetOrigin, [transfer]);  message: 发送的数据，不限类型，因为他自己会序列化 &emsp...

vue-cli已经内置了 TypeScript 工具支持，在 Vue (3.x) 中也计划了相当多的 TypeScript 支持改进，很多大佬以及用过的人也都在推荐入坑，而且目前也比较成熟，资源也很丰富，值得入坑 ? typescript官方介绍 TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上我的理解是 TypeScript扩展了JavaScript的语法，为 js 增加了类型机制，引入类，接口，枚举，泛型，方法重载等一系列的概念和方法，丰富了js的使用，而且和 VScode 搭配写起来是真的舒服 全局安装：npm install -g typescript编译命令：tsc hello.ts TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写...

看了很多大佬的文章，自己也对项目做了一些优化，其实有很多地方平常码代码的时候稍微注意一下就能节约很多性能开销 1.离屏渲染在离屏canvas上预渲染相似的图形或重复的对象，通俗的解释是将离屏canvas当成预渲染，在离屏canvas上绘制好一整块图形，绘制好后在放到视图canvas中，适合每一帧画图运算复杂的图形 比如你想把一张图片放到canvas上，使用drawImage()方法，有三种写法 123456// 将image放到目标canvas指定位置void ctx.drawImage(image, dx, dy); // 将image放到目标canvas指定位置，指定宽高渲染void ctx.drawImage(image, dx, dy, dWidth, dHeight);// 将image裁剪之后放到目标canvas指定位置，指定宽高渲染void ctx.drawImage(...

最近用canvas蛮多的，canvas写动画也蛮好使的 canvas 由 js 来控制，但用 js 写动画通常3种方法控制时间 setInterval( function, delay ) 在指定的毫秒数下循环调用函数或表达式，直到使用clearInterval清除 setTimeout( function, delay ) 在指定的毫秒数后调用函数或计算表达式 前两个是平时会用得会比较多的，setInterval 和 setTimeout的本质是将回调函数添加到任务队列的尾部等待执行，但是前面的任务到底需要多少时间执行完是不确定的，如果前面堵塞了那么后面就无法执行尤其setInterval指定的是”开始执行”之间的间隔，并不考虑每次任务执行本身所消耗的时间，下一个回调开始执行的时间 = 指定时间 - 回调函数执行的时间，因此实际上，两次执行之间的间隔会小于指定的时间 下面的写...

背景介绍ImageData 是canvas的图像数据，由** ImageData() 构造函数返回一个实例化的对象， 三个可读属性 ** data：一个 Uint8ClampedArray 类型的一维数组，包含RGBA 顺序的数据，每4个元素表示一个RGBA 值即对应一个像素, 左上角在数组的索引0位置，像素从左到右被处理，然后往下，遍历整个数组 RGBA：** R - 红色（0-255）、G - 绿色（0-255）、B - 蓝色（0-255）、A - alpha 通道（0-255; 0 是透明的，255 是完全可见的） Uint8ClampedArray（8位无符号整型固定数组）：** 类型化数组表示一个由值固定在0-255区间的8位无符号整型组成的数组；如果你指定一个在 [0,255] 区间外的值，它将被替换为0或255；如果你指定一个非整数，那么它将被设置为最接...

前段时间做了个客户端的项目，主要适用于老师教案管理、远程上课录屏、和学生互动答疑等场景，原生开发对公司来说成本有点大，基于guthub上有各种桌面打包框架so只能前端上了 Electron + vue = product 这是一篇踩坑的记录，没有太深入的原理什么的讲解，主要是码代码过程中碰到的一些暗坑你如果正在写Electron的项目那么你也可能会遇到，这篇文章会给你一些参考 为什么用Electron这是目前大家知道比较多的三种跨平台的桌面框架NWJS https://nwjs.io/HEX http://hex.youdao.com/zh-cn/tutorial/index.htmlElectron https://Electronjs.org/docs | ** Electron ** | ** nw.js ** | ** hex **:—-: | :—...

前段时间做一个windows的桌面应用，vue + electron，涉及到录屏和摄像功能，网上相关的文档蛮少的给需要的人一些参考 如果文章描写有误或者还有更好的方法，请留言告诉我，笔芯 (´▽`ʃ♡ƪ) 背景介绍** 涉及技术：vue、electron、ffmpeg、node ** 关于录屏和摄像对比了两种方法 使用HTML5的api实现 摄像：mediaDevices（获取设备）+ getUserMedia（获取流） + MediaRecorder（存储） 录屏：getDisplayMedia（获取流） + MediaRecorder（存储） ffmpeg + node：FFmpeg是一套非常强大的音视频处理的开源工具，不多介绍，而Electron基于node和chromium，它允许使用node的API以及几乎所有的node模块，这意味这着我们可以调用cmd命令来操作ffm...

最近学习node，写demo登陆和注册功能的时候因为要考虑后台的加密和安全所以也想了下前端的，前端传输密码的时候是否应该加密之后再传输呢看了一些网站的登陆，csdn、简书等是明文传输，但腾讯、百度这些一线大站是经过前端加密的，看了些大佬的文章，顺便自己搬个凳子记个笔记 前端是否需要对密码进行加密传输前端的加密本身不能对网站的安全性有任何提高功能，所有的关于网站的安全技术都应该放在后台，但是这也不是完全没有意义，可以增加攻击成本，尽可能降低攻击带来的损失，毕竟丢了密文比丢了明文要强，而且犯罪分子技术参差不齐，简单的加密能够拦截很大一部分菜鸟，至于高手。。。 最后看到比较统一的是隐秘信息传输应该使用https 什么是https? ssl证书又是什么这篇文章只是想弄懂流程和原理，不会去纠结具体的术语 HTTP协议以明文方式发送内容，不提供任何方式的数据加密，处在同一网络中的其它用户可以通过...