话题
biliou Node.js全栈
什么是PROTOBUF ? protoBuf (PB) 我理解来说,就是一种 数据结构 ,由google 团队开发 protoBuf 需要程序员实现制定 schema,然后根据 schema 生成二进制的数据。传输完成后,如果需要重新将这些数据,接收端还需要使用使用 schema 将获得到的二进制数据解码。 相对于JSON来说,编码解码的步骤比较繁琐,但是,protobuf 比 JSON 快 https://github.com/dcodeIO/protobuf.js/blob/master/README.md#performance [https://github.com/dcodeIO/protobuf.js/blob/master/README.md#performance] 这是 dcodeIO 团队对 protobuf 和 native JSON 做了一些测试 从报告中可以看出,无论是编码解码还是结合的过程( protobuf 从对象编码为二进制,从二进制数据解码为对象 JSON ...显示全部
9 个月前发表 4494次浏览 1条评论 0次收藏
朱灵子 React Native
REACT-NATIVE安卓预加载优化方案 本文针对使用React Native开发混合应用的过程中安卓端白屏时间较长的问题,提出了 react-native 安卓端RootView预加载优化方案,本文主要围绕以下几个方面展开分析: * 导致React-Native安卓端白屏时间较长的关键性因素 * React-Native安卓预加载优化方案 * React-Native安卓预加载方案实现细节 导致REACT-NATIVE安卓端白屏时间较长的关键性因素 我们对不同网络状态下不同机型的React-Native线上项目进行了实时性能监控,下图所示为React Native IOS和安卓端线上性能数据对比分析图[http://7tszky.com1.z0.glb.clouddn.com/Fky1XkVN4gyERFl30OTZ7Q9TVyYM] ...显示全部
10 个月前发表 1099次浏览 0条评论 0次收藏
caorich 性能
DATA.JSON 文件格式 以下的内容当设计接口的详细说明时,请移步 bodymovin的官方文档 [https://github.com/bodymovin/bodymovin/tree/master/docs/json] 。文档的是用 JSON Schema [http://json-schema.org/] 编写的,这玩意儿就是一个词汇表,相当于本体的json实现,规范了对象、属性的表达方式(而已)。 言归正传。了解AE导出的data.json数据格式的最好方法就是先制作一个简单得不能再简单的关键帧动画,看看它导出的data.json是什么样的。 我们用AE制作了一个简单的动画,一个宽100,高200的长方形,在400*400的正方形白色底的画布上,从位置(100,200)移动到(300,200)。动画的时间长度为1s, fpr为30(一秒30帧)。现在我们导出data.json文件来看看 { ...显示全部
1 年前发表 834次浏览 1条评论 0次收藏
程柳锋 Node.js全栈
当Javascript的性能遇到瓶颈,或者需要增强Javascript能力的时候,就需要依赖native模块来实现了。 应用场景 日常工作中,我们经常需要将原生的Node.js模块做为依赖并在项目中进行使用。下面有个列表,你可能对它们的名字很熟悉: * node-sass [https://github.com/sass/node-sass] 将sass文件编译成css文件 * node-microtime [https://github.com/wadey/node-microtime] : 扩展Javascript的时间精度 * node-inspector [https://github.com/node-inspector] :进行调试 * v8-profiler [https://github.com/node-inspector/v8-profiler] :性能及内存使用分析 通常,我们开发原生Node.js模块包括但不仅限于以下原因: ...显示全部
1 年前发表 3079次浏览 0条评论 0次收藏
villainthr HTML&h5
SW-ROUTER image.png-2kB [http://static.zybuluo.com/jimmythr/wbmnfy7hah7qzjrzq8mhm7x5/image.png] PWA 全称是 Progressive Web Apps 。它的目的就是让你的网页越来越快。主要内容可以参考: PWA-cookbook [https://github.com/JimmyVV/PWA-cookbook/wiki/PWA-guider] 。不过,它上手的难度也是有的。它本身是基于 worker 而发展出 Service Worker,所以,要使用 PWA 你就必须学会如何使用 SW,然后,SW 里面还有很多坑要踩。而其中最大的坑就是,如何处理文件资源的缓存,这个一直都是 CS 领域的心病。当然,在 SW 中,这也是有点困难的。不过,为了大家能更快的掌握 SW 这里,鄙人写了一个关于处理 fetch 事件的路由分发库 sw-router [https://github.com/JimmyVV/sw-router] 。 这里也主要介绍一下它。 下载 ...显示全部
1 年前发表 1736次浏览 0条评论 0次收藏
villainthr HTML&h5
在几年前,天空一声巨响,ajax 闪亮登场. 前端宝宝们如获至宝~ 已经表单提交神马的, 真的太 心累了. 有了ajax之后, 网页的性能可大幅提升,告别刷新,告别如水的流量. 不过,长江后浪推前浪,一代更比一代强. 由于ajax被同域限制着, 导致, 多服务器配置,云服务资源的存储 没办法充分利用. 所以,业界想到另外一种方法--JSONP. JSONP实际上和ajax没有半点关系,唯一相同的就是都是异步执行,而且JSONP完美解决了CD(cross domain)问题. 科技就是第一生产力, web发展so fast. 以前追求就是静态网页,显示信息而已。 现在,正朝着web2.0,webapp前进。 以前的单向交流 已经不能满足 需求了。 怎么办呢? 改呗~ 所以,紧接着SSE,websocket 诞生了. 至今为止, 前端通信方式算是告一段落。 这里我们将围绕上述的几种通信方式进行,简单的介绍. 以下是几个技术的顺序. * ajax * JSOP * SSE * websocket ok~ 进入主题吧~ AJAX 相信这个应该不用过多的讲解了吧. 差不多就4步: ...显示全部
1 年前发表 1789次浏览 0条评论 0次收藏
villainthr HTML&h5
TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。 例如:路径动画 gif [http://demo.icanbecreative.com/animate-along-svg-path/svg-animate-along-path-600.gif] 图形渐变: fig [http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/08/1407310358spinner-cropped.gif] 线条动画: test.gif-388.2kB [http://static.zybuluo.com/jimmythr/ctsujbawcdlyqpcslean3jvx/test.gif] 以及,相关的动画的矩阵知识,这个也是现在 CSS 动画里面最重要,同时也是最为欠缺的知识点: image.png-7.1kB [http://static.zybuluo.com/jimmythr/v37ft0wq7elij74vaq9vlt99/image.png] ...显示全部
1 年前发表 1915次浏览 1条评论 0次收藏
caorich 性能
BODYMOVIN是什么 专业制作动画采用Adobe公司的 after effect 软件。做出来的动画可以导出为json文件,bodymovin就是这个动画json文件的前端播放器,支持渲染为svg\canvas\html三种格式。它不仅可以播放动画,可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。可以说是不可多得的好工具。 [http://i1.piimg.com/567571/c73e953311b7464c.png] 使用方法 bodymovin官网 [https://github.com/bodymovin/bodymovin] 首先机子要装AE(adobe after effect),如果没装,就需要找设计师要动画的json文件。 这里假设已经获取到动画导出的json文件了。我扒了codepen的例子到我的站点,大家可以用 这个json文件 [http://makto.win/bodymovin/bodymovin/data1.json] 来测试: 动画基本播放 以下所有代码默认都已经导入了 bodymovin.min.js ...显示全部
1 年前发表 1613次浏览 0条评论 0次收藏
villainthr HTML&h5
SVG 全称是 Scalable Vector Graphics,即,矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先,不要把 SVG 和 CSS,Canvas,HTML 搞混。他们之间并没有你中有我,我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。 如何书写 开篇说过,SVG 就是一个 XML。看一下代码吧: <svgx="0px"y="0px"width="450px"height="100px"viewBox="0 0 450 100"><rectx="10"y="5"fill="white"stroke="black"width="90"height="90"/><circlefill="white"stroke="black"cx="170"cy="50"r="45"/><polygonfill="white"stroke="black"points="279,5 294,35 328,40 303,62 ...显示全部
1 年前发表 2526次浏览 2条评论 0次收藏
villainthr HTML&h5
Web 进制操作是一个比较底层的话题,因为平常做业务的时候根本用不到太多,或者说,根本用不到。 老铁,没毛病 那什么情况会用到呢? * canvas * websocket * file * fetch * webgl * ... 上面只是列了部分内容。现在比较流行的就是音视频的处理,怎么说呢? 如果,有涉及直播的话,那么这应该就是一个非常!非常!非常!重要的一块内容。我这里就不废话了,先主要看一下里面的基础内容。 整体架构 首先,一开始我们是怎么接触到底层的 bit 流呢? 记住:只有一个对象我们可以搞到 bit 流 --> ArrayBuffer 这很似曾相识,例如在 fetch 使用中,我们可以通过 res.arrayBuffer(); 来直接获取 ArrayBuffer 对象。websocket 中,监听 message ,返回来的 event.data 也是 arraybuffer。 let socket = new WebSocket('ws://127.0.0.1:8080'); socket.binaryType = 'arraybuffer'; ...显示全部
1 年前发表 1772次浏览 0条评论 0次收藏
王少飞 HTML&h5
启用硬件加速 1 在chrome的地址栏中输入 chrome://settings/ 回车 [http://shaofei.wang/content/images/2017/04/QQ--20170408192029.png] 2 滚动页面到地步,点击 ==显示高级设置== [http://shaofei.wang/content/images/2017/04/QQ--20170408192219.png] 3 再次滚动到页面地步,找到 ==使用硬件加速模式== [http://shaofei.wang/content/images/2017/04/QQ--20170408192255.png] 开启GUP硬件加速 1 在chrome的地址栏中输入 chrome://flags/#disable-accelerated-video-decode 找到==硬件加速的视频解码==,点击==启用== [http://shaofei.wang/content/images/2017/04/QQ--20170408192649.png] 完成上面两步后重启浏览器。 ...显示全部
1 年前发表 2809次浏览 0条评论 0次收藏
villainthr HTML&h5
市面上现在流行两种沙箱模式,一种是使用iframe,还有一种是直接在页面上使用new Function + eval进行执行. 殊途同归,主要还是防止一些Hacker们 吃饱了没事干,收别人钱来 Hack 你的网站. 一般情况, 我们的代码量有60%业务+40%安全. 剩下的就看天意了. 接下来,我们来一步一步分析,如果做到在前端的沙箱.文末 看俺有没有心情放一个彩蛋吧. 直接嵌套 这种方式说起来并不是什么特别好的点子,因为需要花费比较多的精力在安全性上. EVAL执行 最简单的方式,就是使用eval进行代码的执行 eval('console.log("a simple script");'); 但,如果你是直接这么使用的话, congraduations... do die... 因为,eval 的特性是如果当前域里面没有,则会向上遍历.一直到最顶层的global scope 比如window.以及,他还可以访问closure内的变量.看demo: functionAuth(username) { var password = "trustno1"; ...显示全部
1 年前发表 1824次浏览 0条评论 0次收藏