配置 ufw 阻止外部访问 ubuntu docker 服务的端口

在 ubuntu 上部署好 docker 应用后,默认情况下 ufw 是禁用不了 docker 暴露的端口,需要自己重新配置 docker 和 iptables,但是修改它们的配置会导致容器无法访问外部网络。所以更好的的办法是修改 ufw 的配置,只需改一处地方即可,编辑 /etc/ufw/after.rules ,在末尾添加:保存后重启 ufw(如果不生效可以重启机器试试):这样子就可以禁掉 d...

Vue 动画性能优化

在使用 JS 来实现动画的场景下,需要频繁的操作 DOM,如果使用 Vue 的数据响应式更新去做,会比直接使用原生 JS 操作 (element.style.transform) 更加耗时。因为 Vue 在数据更新后,需要更新自身维护的虚拟 DOM 节点,对新旧节点进行对比,再更新视图。使用 Vue 操作动画每轮 requestAnimationFrame 都会去对比新旧节点,更新组件信息,消耗5...

10 个月前 前端 Vue

用 Web Components 实现一个 AppDrawer 组件

Web Components 和 vue、react 都是基于组件化的形式去书写页面。Web Components 的主要作用及特点:可以创建新的 html 标签、扩展 html 标记创建可复用的组件不依赖框架,但是需要浏览器支持,且浏览器自带调试 Web Components 的能力与 Shadow DOM 配合使用更加强大(隔离DOM、作用域CSS、不用担心CSS命名重复)示例:Drawer ...

在 Vue 里使用高阶组件

高阶组件的特点和高阶函数类似,高阶函数接受一个/多个函数作为参数,返回另一个函数,高阶组件则是组件作为参数,返回另外一个组件。只要满足其中2个条件之一即可。高阶组件在一些场景下可以对组件进行复用,增强组件功能,控制渲染的内容。在 Vue 里创建高阶组件:场景1 页面鉴权场景2 复用组件总结Vue 里使用 HOC 没有 React 里用得那么灵活,React 大部分时候是写函数,和高阶组件的契合度高...

11 个月前 前端 Vue

一段关于对信息技术革命的总结的话

来源: https://www.guancha.cn/xiangligang/2019_03_04_492251.shtml语言的发明,让信息可以共享。文字的发明,让信息可以记录。印刷术的发明,让信息可以传得更远。无线电的发明,让信息变成远距离还可以实时传输。电视的发明,让信息变成远距离实时还可以多媒体。互联网的发明,让信息变成远距离实时多媒体还可以双向交互。...

1 年前 生活

单页应用首屏渲染的想法和实践

记录使用较小的成本换来较好的用户体验和提升页面加载速度,适用场景:web 移动端单页应用,前后端(数据层)分离的项目。白屏在做 Web 移动端项目的时候遇到首屏加载慢的情况,因为页面的渲染都依赖 JS 文件输出,所以就导致需要等待 JS 文件加载完成页面才能被渲染出来。在未加载完 JS 文件的情况下,会导致页面白屏一段时间。解决白屏问题:使用同构框架 / 预渲染插件。让浏览器在加载 JS 文件之前...

Node 实现 Http 反向代理功能

代理请求的流程使用 http.createServer 创建服务,监听客户端请求。客户端请求时,获取此次请求头数据,利用 http.request(...) 请求源目标地址获取实际响应内容。设置此次请求的响应体为 http.request(...) 返回的响应体。具体实现实现参考了 node-http-proxy 源码。...

实现3D图文粒子化

Demo图片/文字粒子化首先需要取得图片或者文字的像素点,可以将它们绘制到 canvas 上得到它们的像素点,主要使用 getImageData(x, y, width, height) 方法获取。然后通过遍历画布的大小得到每个位置像素点,为了让粒子之间互相有间隔,遍历的时候用一个变量来控制像素点数量,最后再将透明的点(alpha值小于128)过滤掉即可得到最终的像素点。离散动画实现将粒子目标位置...