很多爆款H5的一些酷酷的场景变换很多都是视频实现的，但是，视频的实现也有局限，如iOS下不能自动播放，动态数据不支持等，此时又当如何处理呢？
我们可以使用序列图片，通过JS脚本，来模拟视频播放效果，以上所有局限将通通可以规避。实现的方法很多，但是很多平时可以的方法在这种场景下会有性能跟不上的问题，那有没有什么高性能的实现方法呢？有……
“JS实例”目录存档
炫酷H5中序列图片视频化播放的高性能实现
2018年05月1日，星期二Service Worker实现浏览器端页面渲染或CSS,JS编译
2018年04月24日，星期二Service Worker提供了一种能力，可以fetch请求的资源，然后后Service Worker中进行编译或转化，返回处理后的其他资源，这种特性可以用来实现各种资源的在线的客户端编译，本文就将抛砖引玉，通过两个应用案例，展示未来web开发可能的面貌。
小tips: 纯前端JS读取与解析本地文本类文件
2018年03月27日，星期二所谓文本类文件，指MIME Type为text/*文件，例如，CSS文件（text/stylesheet），JS文件（text/javascript），HTML文件（text/html），txt文本（text/plain）等等。
在现代浏览器下，我们可以直接对这些文件进行处理，无论是通过type=file表单元素还是从桌面拖拽到网页中都是可以的……
小tips: 使用JS检测用户是否安装某font-family字体
2018年02月24日，星期六下午突发灵感，写了一段JavaScript小脚本，可以用来判断用户的操作系统是否安装了某字体，代码非常简单，使用也非常方便，性能也比较快，兼容性也非常好，在一些特殊的交互场景非常有用。总之，希望本文的内容能够对您的学习有所帮助。
CORS ajax跨域请求php简单完整案例一则
2018年02月9日，星期五CORS是Cross-Origin Resource Sharing的缩写，表示跨域的资源分享，不仅可以跨子域，就算域名长得完全不一样，也可以进行资源获取。
比较常见的应用之一就是Ajax跨域请求数据。
小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现
2018年02月2日，星期五对于一个宽度不固定的滚动容器，如果里面内容已经滚动到了一定的高度，这个时候滚动容器的宽度发生变化，则里面内容的位置会进行重定位，一不留神就不知道刚才的位置是哪里了。
尤其是看小说这种非常考验眼力的场景。于是，就有需求：当滚动容器尺寸发生变化的时候（如宽屏窄屏切换，或者默认尺寸变全屏时候），最上面元素位置要保持不变，这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。
那么该如何实现呢？
瞎折腾：把JS,CSS任意文本文件加密成一张图片
2017年12月24日，星期日周末在家就是应该放松的，我的放松手段很简单，就是学习前端知识，写写文章，抽个时间去钓鱼，完美。
本文内容就是一个临时起意的折腾，一个对JS，CSS等文本文件加密为图片的想法。介绍了web信息转图片以及本地文件如何转图片，以及如何解密等。
希望本文的内容对您的学习有所帮助。
使用canvas实现和HTML5 video交互的弹幕效果
2017年09月10日，星期日本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果，适合在个人博客或者运营页面，这种非视频场景使用；另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果，也就是真视频弹幕效果。
iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览
2017年08月24日，星期四前端代码效果实时预览的需求实际上是非常常见的，传统做法是这样子的，会新建一个另外的独立页面，专门用来接收传入的前端代码，通过新开窗口或者嵌入iframe页面的方式达到最终效果，然而实际上，对于这个预览效果，如果代码是我们自己控制，而不是全权交给用户编辑的，是没有必要新建一个另外的预览页面，亦或者是在新窗口（新标签页）中浏览的。可以直接在当前页面构建一个文档上下文，实现更加方便快捷的预览。
HTML5 file API加canvas实现图片前端JS压缩并上传
2017年07月30日，星期日很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众，一张原始图片超过2M几乎是标配，此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像，就会遇到因为图片大小限制而不能上传的窘境，不得不对图片进行再处理，而这种体验其实非常不好的。如果可以在前端进行压缩，就不会有这种尺寸限制的问题，自然用户体验就可以大大提升，非常具有价值！
我的应用
我的应用