Ctrf+F相信大家一定不陌生，很多人都依赖Ctrf+F来搜索网页上想要看到的内容，也是最频繁使用的功能之一。浏览器之间存在兼容性问题，但是肯定都提供原生搜索框（而且快捷键都是ctrf+f）

项目中需要渲染一个5000+节点的树组件，但是在引入element Tree组件之后发现性能非常差，无论是滚动、展开/收起节点还是点击节点卡顿都非常明显，利用performance跑一下性能数据发现到问题所在从上图可以看到，除去Idle之外，总共花费的时间为12s，其中Scripting花了10s从上图可以看出，Scripting期间除了 Observe 之外...

wx.request是小程序提供的API，用于发起网络请求，在频繁并且响应较慢的业务中的请求，页面白屏或者loading时间也相应比较长，然而合理的利用缓存是个很好提升界面响应速度，减少网络资源占用的手段。mrc提供2种换成模式用于业务中使用

其中除了菊花图以外网上还流传这各种各样的loading动画，在PC端上几乎要统一江湖了，不过最近在移动端上面看到不同于菊花图的加载方式，就是这篇文章需要分享的Skeleton Screen，中文称之为"骨架屏"

传统H5的懒加载方式都是通过监听页面的scroll事件来实现的，结合viewport的高度来判断。小程序也类似，通过监听页面onPageScroll事件获取当前滚动的数据，结合getSystemInfo获取设备信息来判断。由于scroll事件密集发生，计算量很大，经常会造成FPS降低、页面卡顿等问题。这里说的是通过另外一种方式来实现

这篇文章主要介绍下笔者看源码的一些心得和方式，由于笔者看的大部分是前端项目，当然也看过一些其它领域的源码，不过不多，所以内容主要还是以前端项目为主

2017年1月9号微信小程序正式上线，小程序不需要安装就能使用，依托微信强大的生态环境，能做到很多H5所不能做的事情。从微信小程序发布这段时间，陆陆续续开发了不少小程序相关的项目，总结了一些通用性的组件，但是对于小程序如何做测试，依然是一头雾水，直到做了不少的项目，积累的一些经验和开源库之后才理清如何做...

可以将需要监听的数据放入watch里面，当数据改变时推送相应的订阅事件(注：不在data里面的数据项不会放入观察者列表，比如上面的'b.e[3][4]')

最近公司有个项目需要在H5上面发放代金券，研究了好几天微信公众平台和商户平台的文档，梳理下微信卡券和代金券之间的联系。以下微信公众平台简称mp平台，商户平台简称pay平台。mp平台开发文档pay平台开发文档

将图片转换为html节点(一个特别无聊的轮子......) 示例 HTML页面 原图 转换后 安装 npm install img2html --save 简单使用 {代码...} API elm 必填，img节点，原图 注：原图尽量不要太大，如果超过300px，那么步长应该设置大于2 renderElm 必填，渲染之后像素节点容器 step 选填，步长，默认值：2 能够有效减少渲染的像...

使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。

一天早上组里还早激烈的讨论某个项目的可用性和发展前景，突然老大说了句，能不能做个小程序的版本呢？然后大家纷纷讨论起来，有反对有支持，我就说了一句，刚出来的时候搞过一会。。。然后就把我推出来了（日了狗了~~）

vue-schedule Vue.js file schedule component install {代码...} Example [链接] {代码...} CommonJS {代码...} ES6 {代码...} props time-ground:时间范围示例 {代码...} week-ground:星期示例 {代码...} task-detail:具体事项，具体事项需要与星期对应示例 {代码...}

这个是setTimeout最主要的功能，但也是很坑的地方，首先javascript其实是运行在单线程的环境下，意味者定时器会在未来的某个时间支持，但是具体的执行的时间并不能够很准确的运行，容易受到其它时间的影响，比如DOM的计算、事件的执行、各种函数的执行和运算。但是我们可以利用延迟执行的一些特性来达到我们想要的功能。

node-grade serve端的可以预处理图片背景，代替图片未加载之前的空白背景 展示 node-grade 安装 npm install node-grade 使用 {代码...} 开发 {代码...} 离线生成原理 使用node-grade库提取2种主色，替换模版中需要显示的背景style 模版HTML {代码...} 编译后HTML {代码...} 欢迎给issue和star 注意事项 目前只支持jpg/j...

这里以三种经典布局来讲解react-native布局概念，主要以flexbox为主，react native中有两个基本元素< View >与< Text >，分别类似于web端div和span，用于布局和修饰。需要注意的是，react native不是所有的CSS属性都支持，这里有react native所支持的CSS属性

JDK（必须，不解释）SDK（建议使用Android Studio，集成SDK以及模拟器）genymotion（如果是使用真机或者Android Studio自带的模拟器，可以选择不装）NVM（node版本控制器，需要node4.0以上版本）

slide 滑屏组件 自定义滑屏组件，可定制滑屏动画 可控制每屏动画效果 Install {代码...} 访问[链接]:8080/ Examples {代码...} Notes 滑动容器只能传入ID值，不允许传入class

再次更新预加载组件，更新点如下： 添加ES6语法支持 React-Preload preload 资源预加载组件 队列，可以支持队列加载和回调，也可以加载视频或者音频 进度条，可以动态获取进度条信息 支持img标签的预加载，添加pSrc属性即可 原生ES5 demo Install {代码...} 访问[链接]:8080/es6-demo Examples {代码...} {代码...} Note...

相信很多人都看过微软2015开发者大会，其中有一段讲解window holographic让我觉得特别惊讶，我一直以为虚拟投影暂时还是人们幻想中的一种技术，现在确实是展示在我面前，也让我有一种想要弄懂其中奥秘的激情。从2D到3D的视觉转换到底有什么不同呢？作为一名菜鸟级别的前端开发者，我决定从Three.js方面入手，去理解3D世...

mongoose-study 使用mongoose可以让我们更好使用mongodb数据库，而不需要写繁琐的业务逻辑。 安装 npm install mongoose 初始化使用 使用mongoose前，需安装node和mongodb，这里不讲node和mongodb的安装方法。 {代码...} 快速入门 在mongoose中，所有的数据都是一种模式，每个模式都映射到mongodb的集合，并且定义该集合...