博客折腾总结

  之前看到有人说,写 Blog 的人都是这样的,从刚接触 Blog 感觉很新鲜,用的都是免费的开箱即用先搭起来再说,然后发现免费的限制总是很多,开始不安分想法开始变得有点多,开始自己购买域名和空间,搭建独立博客想怎么折腾怎么折腾,后来又觉得独立博客的管理太麻烦,只是想要个能写能看能发布的简单的,再有那么一点点的自定义,周周转转还是回来了   前段时间自己买了域名、服务器、搭建环境,用 koa 写接口 + mysql 管理 + pug(原 jade ) 写页面做服务器渲染,接触了很多没接触过的东西   但是看看这个博客其实还是用 hexo 生成,之前是用的 next 主题,很好看符合大多数人的审美,但是用的人太多了,其实再看到有一个一样的博客的时候就想换了,所以这次还是自己写了个主题,一直在犹豫要不要发布到 hexo 的主题...

31.1k2019-08-05
域名解析

二级域名设置阿里云的域名解析设置页面 —> 点击添加记录 —> 出现弹框 *@:直接解析主域名 aliyun.com **:泛解析,匹配其他所有域名 *.aliyun.com *mail:将域名解析为mail.aliyun.com,通常用于解析邮箱服务器 *二级域名:如:abc.aliyun.com,填写abc *手机网站:如:m.aliyun.com,填写m *显性URL/隐形URL:转发的地址必须完成备案且备案接入商为阿里云 TTL:为缓存时间,数值越小,修改记录各地生效时间越快,默认为10分钟

11502019-08-05
npm && yarn 差异以及常用命令

yarn 从去年vue-cli更新以来一直用,但一直都没认真了解过 yarn 背景介绍安装方法 三种安装方式Yarn 是一个包管理器,代码通过包(package) 或者模块(module)的方式来共享, 一个包里包含所有需要共享的代码,以及描述包信息的文件,称为 package.json 。 yarn npm 差异 同步安装:npm 是按照队列执行每个 package,Yarn 是同步执行所有任务 离线模式:Yarn可以从缓存中获取以前安装过的安装包,而npm每次都从网络下载 安装版本统一:yarn.lock 文件记录了所有安装模块的版本号,这样使我们每次拉取同一个项目依赖时使用都是一样的版本号,而 npm 需要执行 npm shrinkwrap 才会生成一个锁定文件 npm-shrinkwrap.json npm 输出内容多长,安装慢就算了还老是失败,相较而言 yarn 真的快多了...

14532019-07-01
理解浏览器缓存机制

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

51.6k2019-05-14
canvas 文字粒子特效

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

49902019-04-23
Web Worker && postMessage && onMessage 使用教程

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

61.4k2019-04-21
typescript 学习之基础篇

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 编写...

102.6k2019-03-25
canvas性能优化篇

看了很多大佬的文章,自己也对项目做了一些优化,其实有很多地方平常码代码的时候稍微注意一下就能节约很多性能开销 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(...

51.3k2019-03-18
canvas动画篇

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

26402019-03-07
Google notes

现在越来越习惯用google了,不是我嫌弃百度,只是用了google发现百度真的让人爱不起来,没有对比就没有伤害 收集了一些google常用的语法,备忘 这些是已经被弃用的:+、~、inpostauthor:、allinpostauthor:、inposttitle:、link:、info:、daterange:、phonebook:、# 这些是在被弃用边缘,搜索结果不是非常准确的 symbol example explain .. apple 2010..2014 范围搜索,返回2010到2014,不超过2015的信息 inanchor: inanchor:apple iphone 返回锚文本中包含指定词汇的页面 allinanchor: inanchor:apple iphone 和inanchor类似,返回锚文本中包含所有指定词汇的页面 blogurl:...

26342019-03-01