自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

liusaint1992的专栏

恒者行远,思者常新

  • 博客(78)
  • 收藏
  • 关注

原创 前端性能优化总结

前端性能优化总结

2018-03-03 12:29:18 1131

原创 某视频app分析

https://github.com/liusaint/ls-blog/issues/44

2021-05-11 14:15:17 318

原创 微信小程序填坑篇 2

微信小程序开发的时候,很多接口都不太能信任,需要作一些额外的兜底处理。保证程序在什么情况下都能尽可能健康的运行。 也要有一套健全的异常收集反馈机制,方便迅速发现问题解决问题。 小程序生态的异常监控体系,主要包含小程序后台的代码运行报错,小程序告警群的使用,具体用户的信息收集上报,代码逻辑中可能的预警上报统计,微信新版本的内测跟进等方面。1.css支持。在ios12上 css3的支持不够好。有时候动画animation的forward无效。现象是动画结束后突然回到初始状态。极少数ios机型会出现a

2020-09-13 10:16:54 1535

原创 分帧加载 异步任务分解

最近在用cocos动画引擎写应用,为了优化性能封装了一个分帧加载的处理,简单讲就是拿到数据之后不一次性把数据展示出来,而是每一帧展示几个节点出来,每一帧作的操作少,应用体验更流畅。1秒大概是60帧,每帧大概是16ms,一帧中做的事情太多,执行时间太久,就会导致卡顿掉帧。 由于js是单线程,单个操作耗时不宜太久,要及时把线程让出来,对庞大的任务就需要作任务分解,异步执行。cocos项目或是传统前端项目,都可以利用异步的思想来分解任务,优化性能。封装一个任务队列,每次不直接执行任务,而是把任务往任务队列里

2020-08-22 15:34:38 810

原创 微信小程序填坑 视频篇

写了一年小程序,每天接受数万付费用户的考验,踩过小程序的坑数不胜数。先写一下视频篇,写一些会影响到用户正常看视频功能和影响业务主体流程的坑。1.一些低端设备无法播放高清视频 1080p需要接入转码,提供2种分辨率的视频。如果检测到播放高清视频报错,自动切入低清视频。也有可能高清视频播放不出来,也检测不到报错,所以还需要一个按钮来手动切换标清视频。问题现象是在有些设备直接播不出来,在有些设备上是有声音但黑屏无图像,可能会报一些类似MEDIA_ERR_DECODE(-4003,-1)这样的报错。2.同层渲

2020-05-16 11:27:20 2315

原创 英语字母笔画绘制功能解析

很多少儿英语启蒙学习的程序都有26个英文字母大小写笔画绘制的功能。小朋友可以跟着提示,一第一笔的将一个字母写出来。这里解析一下该功能实现流程。有一些初步的预想后,参考了竞品,流利说少儿英语,lingokids等。对流利说少儿英语的分析流利说的字母笔画教学,每一笔看起来都很自然,就像是人手写的一样,仔细看会发现,每一次写同一个字母写出来的字都是一模一样的,其实它是有一些预设的轨迹,当用户的触点...

2020-04-25 11:29:06 769

原创 学习类产品100+资源加载体验优化

我们在做很多学习或者游戏类的小程序的时候,经常会有一个场景,在正式进入学习之前,把所有需要的音频图片等资源下载好,这样在学习过程中,会有一种近乎离线学习的体验。这是学习产品中很重要的一个环节。这里总结一下,如何实现一个相对完善的资源加载环节。我们假定会有100个左右的图片音频下载。1.下载并发限制如果我们一次性发100个下载请求,小程序毫无疑问会崩掉。按照官方文档小程序一次性下载的最大数量为...

2020-04-18 11:20:49 194

原创 aeneas 实现音频强制对齐

做英语学习类产品经常会遇到读句子的时候针对单个单词的类卡拉ok的高亮效果。 这里记录一下音频进度和单词的一一对应关系(类似于歌词文件,粒度为单词级别)如何生成。纯人工来校对的话人工成本还是比较大的。 专业的词语是强制对齐(Forced Alignment)。这里介绍python库aeneas,可针对每句或每个单词的时间节点的json文件,还可以批量操作。准确率还不错。文档:https://gi...

2019-04-30 18:00:03 3855 4

原创 前后端分离项目中使用富文本编辑器UEditor

UEditor官网地址 http://fex.baidu.com/ueditor/最近使用富文本编辑器Braft Editor、wangEditor多少都有一些问题。于是使用了比较老牌的富文本编辑器UEditor。虽然也有一些问题,但是好在踩过坑的人多,一般的问题都可以解决。这里总结一下。1. UEditor实现onChange事件。UEditor自身提供了contentChange事...

2019-01-31 10:40:16 4066

原创 ant-design-pro 使用总结—自定义打包 构建配置

ant-design-pro使用了umi.js,没有直接使用webpack,我们要配置自定义的构建打包跟直接的webpack配置不太一样。首先,大部分的webpack打包配置都可以直接修改config/config.js来实现,比如 proxy,publicPath等。参考umi.js配置文档。https://umijs.org/zh/config/#基本配置。这里记录一些针对性的配置。ha...

2018-11-04 16:55:02 31777 17

原创 微信 jssdk 本地调试方案

微信 jssdk 本地调试方案微信公众号开发接口配置需要一个外网能访问的域名。localhost不在这个域名下,wx.config会失败。如果每次修改都发布到测试环境,又太影响开发效率。总结一下除了直接上测试环境之外的两种本地jssdk调试方案。1.使用内网穿透工具让外网能通过某个域名访问到我们本机的localhost。从而实现在本机上修改看效果。参考 https://...

2018-08-24 22:52:58 8882

原创 常见的web攻击方式及预防

1.sql注入。在用户的输入被直接动态拼装sql语句时,可能用户的恶意输入被拼到了sql语句上,而造成了一些恶意操作。比如查询到一些数据甚至删除一些数据。一般应对方法是对sql语句进行预处理。 thinkPHP防sql注入:https://www.kancloud.cn/manual/thinkphp/1844#2.XSS Cross Site Scripting。跨站脚本攻击。...

2018-06-30 11:44:26 2808

原创 使用chrome浏览器插件抢小米8

起因最近准备换手机,作为路痴喜欢小米8的双频gps功能,就决定抢一部。结果抢是抢不到的,从黄牛那里买也是不可能的。那就发挥一下程序员的优势,写个浏览器插件来抢吧。浏览器插件,通常用于在别人的网站上运行我们自己的代码,做一些固定的操作,写浏览器插件,先要明确2点: 1.我们的目的是什么。要达成什么。 2.网站的操作流程是什么。分析与准备我们要快人一步。从选择我们想要的型号,配置,...

2018-06-20 23:00:43 13965 45

原创 leetcode算法练习 JavaScript实现

leetcode表格内容由spider.js从leetcode-cn.com爬取。已做题目答案也从leetcode-cn.com中爬取并生成文件。解题进度:已解决 134/629 - 简单 92 中等 36 困难&am

2018-06-05 20:53:11 8182 3

原创 前端基本功之从大型项目中迅速定位修改位置

前端开发,有一项很重要的基本功,就是在大型项目中,比如几万行js代码中,迅速找到新增功能或调试bug的切入点。特别是你只是接手这个项目,并不了解其中每一个功能点所在的位置,也没有时间一行行读代码的情况,这个基本功显得尤其重要。 这项能力除了娴熟的调试工具使用技巧,更重要的还是对变化的观察力和总结归纳的能力。本文用一个讲一个功能案例的实现。功能背景一款大型canvas应用。我们使用了一些...

2018-05-26 16:32:48 2236

原创 大型canvas 2d应用的事件处理

总结几点大型canvas 2d应用的事件处理机制事件代理canvas画布是一个独立的dom。我们不能给我们绘制的元素单独添加事件。所有的事件都添加在canvas画布上,然后再来分发具体的操作。有点类似于我们的dom事件代理,将事件绑在父层节点,再根据点的dom来决定事件操作。前两年用canvas写小游戏的时候,就是在canvas的dom上绑定事件,然后根据鼠标的位置和所在位置的状态来处...

2018-05-17 18:01:45 672

原创 二叉树遍历(前序,后序,中序,层次)递归与迭代实现JavaScript

最近做leetcode题目。总结一下二叉树遍历的一般方法。数据结构function Node(val){ this.left = this.right = null; this.val = val;}先定义一棵树。node1是根节点。var node4 = {left: null, right: null, val: 4 }; var node5...

2018-05-14 16:03:42 3044 1

原创 探究点击事件在JavaScript事件循环中的表现

本文探究一下点击事件在event loop的情况。点击事件是同步还是异步?点击事件何时加入事件队列?点击事件加入事件队列的是什么,是回调函数吗?

2018-02-04 19:23:52 1880

原创 知乎快捷取消我关注的问题chrome插件

一次性把所有的问题加载出来。就在问题列表页面添加取消关注功能。chrome插件

2018-01-20 21:14:11 3569

原创 JavaScript面向对象编程

创建对象//1.字面量var obj1 = {}//2.构造函数function A(){}var obj2 = new A();//{}//3.Object.create()var obj3 = Object.create(obj1)构造函数与实例//构造函数。与普通函数的区别只是调用方式。所以一般约定首字母大写。function A(){ this

2018-01-19 20:03:48 278

原创 再说IE9中的console

IE9中console的坑以及修复,修复失败以及console的出现时机

2018-01-19 20:00:02 898

原创 一个异步编程的场景分析

一个常见场景,点击保存,获取表单数据,发送请求。一种防重复点击的策略:点击按钮,出现遮罩,提交请求。。。能不能保证只提交一次请求呢?未点保存时页面处理很卡没有响应的情况呢?点了保存后的操作导致页面无响应时继续点保存呢?在表单超复杂,用户的系统配置低的情况下,获取表单数据可能会花很长一段时间,甚至让浏览器停止响应,这时保存操作导致浏览器停止响应而我们又再次点击了保存按

2018-01-19 19:55:42 337

原创 记录一个bug,逻辑错误,结果正确,异步代码调试及IE下的渲染机制

一个bug。逻辑错误,chrome下结果正确,IE下结果不正确。分析过程。

2017-12-24 01:43:18 457

原创 jQuery Placeholder Plugin源码分析

placehoder jQuery插件逻辑。jQuery $valHook $propHook的使用。

2017-11-08 11:20:54 348

原创 在项目中自定义路径放入element-ui并修改编译源码

在项目中自定义路径引入element-ui并自定义修改element-ui源码后编译使用

2017-10-14 23:53:34 9240 1

原创 模拟multiple select,实现不按ctrl单击选中以及拖动选择

模拟multiple select,实现不按ctrl单击选中以及拖动选择

2017-10-09 19:42:09 2177

原创 IE踩坑记

IE下面的一些坑的总结

2017-09-17 00:29:28 418

原创 Object.defineProperty()的set方法除了用于双向绑定还能干嘛?

总结一种JavaScript debug方法

2017-09-14 23:52:48 1146

原创 在iframe中优雅地使用父窗口中的$

iframe中引入父窗口中的对象,使用其接口时功能不正常?作用域原理作怪。

2017-08-22 20:02:21 369

原创 一个不打开浏览器工具的调试方法

1.IE下的console的bug。2.使用window.onerror在不打开控制台的情况下弹出错误信息解决一些不方便打开控制台的bug。

2017-08-01 20:06:54 1002

原创 JavaScript中正则表达式常见使用函数

最近越来越感觉到正则表达式的强大,可以简化很多代码。并且正则表达式入门并不是很难。简单列一下JavaScript中使用正则表达式的一些方法。//定义几个会用到的变量var href = 'baidu.com?where=b5s&a=b';var regObj = /(\w+)=(\w+)/;//全局搜索var regObj1 = /(\w+)=(\w+)/g;正则对象上的方法1.regObj

2017-06-12 20:16:09 1048

原创 几种跨域处理方式

1.img,iframe等标签2.JSONP3.CORS4.服务端代理5.form,iframe与服务端配合。

2017-06-10 17:19:10 741

原创 一个简单的chrome拓展程序开发

开发一个简单的chrome插件。实现content script与插件的通信。点击插件图标运行插件,可以让页面上所有的a标签添加一个target="_blank",让页面在新标签页打开。

2016-11-17 22:57:59 8914 1

原创 禅道项目管理软件bug过滤脚本

对于禅道项目管理系统bug页面中的大量bug。隐藏掉自己不必理会的干扰项的JavaScript脚本。

2016-11-14 12:02:41 1828

原创 Chrome开发者工具使用经验

使用Chrome调试工具的一点经验。 未完待续。

2016-10-27 00:20:21 2968

原创 订阅-发布(观察者)模式在前端控件初始化时的运用

本文介绍使用订阅发布(观察者)模式在使用ajax请求的数据来初始化的控件中的运用。

2016-10-04 18:31:40 1447

原创 Bootstrap的DatePicker日期范围选择

Bootstrap DatePicker实现日期选择 开始日期不大于结束时间,结束时间不小于开始时间,开始日期和结束日期都不大于当前日期。

2016-09-20 00:10:44 23189 4

原创 多个AJAX请求问题总结

对同一个页面内有多个AJAX请求并且这些请求间有一定关系的几种情况的一些个人使用总结

2016-07-01 14:16:16 11599 1

原创 百度地图API五:大批量多次坐标转换结果返回顺序问题

百度地图多次在线坐标转换,返回转换结果。返回结果的顺序处理。AJAX返回的有序性探索。

2016-06-30 16:21:53 12305 9

原创 个人作品目录

一些个人作品的目录

2016-06-13 15:57:22 1229 5

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除