- 博客(180)
- 收藏
- 关注
RSS订阅
原创 【万字长文】WebRTC浅析与实战
推荐阅读时长25分钟前言目前市场上音视频技术方案大致分为以下几类，WebRTC因其超低延时、集成音视频采集传输等优点，是在线教育、远程会议等领域首选技术。方案优势劣势应用场景基于浏览器插件的flash播放RTMP即将淘汰即将淘汰传统直播跨平台的HLS/DASH 播放方案- 跨端广泛支持：苹果浏览器原生支持 - hls.js - 延时高 - 碎片化 传统直播，如赛事直播、大型会议直播基于HTML5 MSE 能力的flv播放技术- 格式简单 - 无需.
2021-09-02 18:18:32
1370
原创 低版本浏览器(webview)空数据音频文件异常报错
于是回过头排查资源请求是否异常，通过PerformanceResourceTiming API能力，看到资源的类型是空的，资源类型未能正确识别。此时，注意到高版本设备中，会触发资源加载异常，但不会触发audio的error事件。可以看到编码格式为1，是PCM（Pulse Code Modulation / 脉冲编码调制），无信号压缩。首先通过error事件的日志数据，发现ErrorEvent中并没有错误message，头一次见。，发现audio/wave是标准的，但如果编码格式非1，支持度有限。
2023-02-02 21:01:38
609
1
原创 【随风丶逆风】2022年终总结
又到了一年一度的年终总结了，回顾一年可谓一波三折，感慨良多，最有感触的大概就是疫情带来各种影响吧，经济下行、市场不景气、互联网寒冬。回顾去年年终规划《【随风丶逆风】2021年终总结》带@丁同学回家，去2个地方旅游~疫情原因，BJ进出政策异常严格，出游计划一直被打乱，不过把丁同学带回家了，算完成一半吧。2023年一起补上阅读15本以上书籍吧，稳定自己的心态，改善自己的性格上半年基本保持一个月1本书，下半年有点放松，书买了不少，但就阅读了10余本，勉强符合预期。
2023-01-11 23:40:45
549
原创 简单实现一个虚拟形象系统
本文主要讲述卷积神经网络相关知识，并使用face-api.js搭建一个简单的虚拟形象系统，给自己带上口罩、眼镜之类的。
2022-11-24 20:08:33
2282
原创 最小编译器the-super-tiny-compiler
在日常前端开发中，经常使用ES6+语法，但碍于用户使用的浏览器各不相同，新语法在旧版本浏览器中不支持，此时我们通常会使用babel将其转换成支持度更为广泛的ES5语法，这种“将不识别的语言转换为可识别的语言”过程就叫「编译」，所使用的工具就是编译器。除了babel，常见的编译器还有gcc等。如果直接就看babel的源码了解编译器怎么工作的，怕是很多人都会望而却步，好在babel的维护者之一 James Kyle 有一个最小编译器的开源项目，截止目前超过21.5k stars。
2022-09-08 00:24:04
784
原创 Cocos Creator实现不规则区域点击
本文讲述了集中cocos creator实现不规则图片区域点击的实现方法，并横向对比优劣，最终给出一个可能的最佳实践
2022-09-07 23:51:13
2307
原创 【随风丶逆风】2021年终总结
前言回头看了看去年的年终总结《一个普通IT男的2020总结》里给自己立下了几个flag： 阅读五本非技术书籍，陶冶一下情操大约读了10本书，技术非技术都有 有时间就多逛逛北京去了北京10多个景点，也算是溜达了不少 谈个女朋友遇到了自己的女神 @丁同学 坚持运动，久坐成疾天气热的时候差不多每周都会运动，比如爬山、游泳等，冷了之后就没怎么运动了 依旧坚持每个月2篇以上博客工作太忙，博客更新频次低，整体来看平均一个月有2篇，勉强算达成。不过在公司内部也沉淀不少文档
2021-12-12 21:05:58
366
原创 什么是知识图谱？
前言知识图谱这一概念最早有Google 提出，它是结构化知识库结合语义网络的产物，在表示形式上跟语义网络相似，但语义网络偏向描述概念之间的关系，而知识图谱偏向实体之间的关联。举个例子：语义网络用相互连接的节点和边来表示知识。节点表示对象、概念，边表示节点之间的关系。比如下面这样知识图谱知识图谱的节点代表实体，边代表两个实体之间的关系，其中实体也可以是属性值，这两个实体之间的边也称之为属性。如下图就是实体“周杰伦”的知识图谱示例（这只是其中一部分），图中黄色节点表示真实世界中的实体，比如
2021-12-12 20:35:31
9403
1
原创 小程序开源框架选型及原理介绍
目前比较流行的小程序开源框架有京东的Taro、dclound的uni-app（集成mpvue）、美团的mpvue和腾讯的wepy。下面我们就从各方面对比这4个框架。选型社区生态以下数据通过 Github Statistics 获得维护状态可以看到uni-app和taro近期还有更新，而wepy和mpvue最新提交已经是几个月前。2. Star截止2021年10月27日，整体情况如下图。从图中可以看到，后起之秀uni-app和taro处于领先地位。框架Star 数量S
2021-12-12 20:26:14
2086
原创 入门级浅尝WebAssembly
什么是WebAssemblyJS的弊端JS代码在V8引擎会经历如下过程：JS源码经过Parse解析器转换成AST；经过Ignition解释器，将AST转成字节码；通过Turbofan将字节码转成CPU直接执行的代码。期间执行比较频繁的代码称为热代码，其编译后的机器码会被缓存下来，等到下次执行这段代码时直接执行机器码。但是JS是动态类型语言，如果变量类型改变了，这个时候就需要Turbofan反优化，将热代码回退给Iginition解释器才解释一次。asm.js于是 Mozilla 提出了
2021-12-12 20:14:35
1155
原创 近十年谷歌Google I/O大会导读
Google I/O是Google自2008年开始举办的网络开发者年会，讨论的焦点是用Google和开放网络技术开发的网络应用。2011Day 1: Music Beta, Android 3.1, Ice Cream Sandwich, Open Accessory, ADKDay 2: Chrome, Angry Birds, Chrome OS, Chromebooks2011年5月10-11日举行。第一天：主要是围绕“安卓”生态Android 3.1 Honeycomb，在摩托罗拉
2021-12-12 19:27:52
2430
1
原创 近十年苹果WWDC大会内容导读
2011WWDC 2011 发布会总结:Lion，iOS5，iCloud，One More Thing… | IT瘾6月6-10日在旧金山的莫斯康中心西翼举行。发布OS X 第八个版本 Lion（狮子）苹果公司为iPhone、iPad和iPod Touch提供支持的高级流动操作系统的下一个版本—iOS 5；苹果公司即将推出的云端服务产品—iCloud乔布斯主持的最后一次苹果公司活动2012惊喜不断，软硬皆施——WWDC 2012 小结6月11-15日在旧金山的莫斯康中心西翼举行
2021-12-12 19:17:57
1459
原创 图谱可视化开源库
图谱可视化比较流行的开源库有三个：ECharts、d3、cytoscape开源库简介包体积(kb)下载量社区活跃度ECharts功能齐全，也是中台知识图谱所用工具，动效、交互强316.7kb36w+高d3数据驱动视图渲染的库，灵活比较高88.4139w+中cytoscape图论分析和可视化的库，交互能力较薄弱107.84w+中npm生态示例echartshttps://echarts.apache.org/exampl
2021-12-12 19:07:22
1958
原创 解决husky6.0.0失效的问题
原因在Husky 4.x版本时，husky通过创建所有类型的git hooks来保证用户设置任何类型的hooks都能正常工作，这样会导致git的每个阶段都会调用husky所设置的脚本，同时在这个脚本中husky会检查用户是否配置该hook，如果有就运行用户配置的命令，如果没有就继续往下执行。但是带来的副作用是，即使用户没有设置任何hooks，也照样自动添加全部的hooks。Husky 5.x版本之后有break change，不再全局设置git hooks文件，使用了从git 2.9开始引入的一个新功能
2021-11-18 16:49:15
1255
原创 react-redux的connect与React.forwardRef结合ref失效的问题
背景开发中遇到connect包裹forwardRef组件后，ref引用失效，返回undefined的问题。const CompA = React.forwardRef<OutputInterface, IProps>((props, ref) => { // ...})export default connect(mapStateToProps, mapDispatchToProps)(CompA);原因源码：React.forwardRef从下面截取的源码中，可
2021-10-14 12:41:14
1892
1
原创 【万字长文】前端离线化/长缓存方案
推荐阅读时间背景最近改造项目，所有静态资源的url由服务端下发，而且带上了认证和过期时间等params，导致静态资源优化利器之一的http缓存失效了：只要下发资源的url过期了资源就会重新请求下载，但实际上该资源并没有变更。本文就从三个方面来讲述离线化/长缓存：http缓存离线缓存(Application Cache)Service WorkerHTTP缓存下面这部分直接引用的之前的文章《一文读懂HTTP缓存机制》一句话概况：本地缓存请求到的资源，后续请求尽可能直接复用这些资源.
2021-09-02 00:23:20
1470
原创 ElementUI 、AntDesign 、IVIew三大组件库z-index层级管理方案对比总结
ElementUIelementUI将弹窗层级管理收敛到了一个入口PopupManager中，涉及zIndex层级的弹窗组件实例都需要注册到PopupManager中。源码传送门// element/src/utils/popup/popup-manager.jsimport { addClass, removeClass } from 'element-ui/src/utils/dom';// 是否有模态层let hasModal = false;// 是否有初始zIndexlet has
2021-09-01 23:34:36
3158
原创 多人协作git workflow规范
分支说明master分支master分支只部署到线上。每次新功能在测试环境验证通过了才可以合并到master分支。要保证master分支就是线上最新代码。develop分支用于部署到集成测试环境。feat/xxx分支命名规则是：feat/{版本}-{功能点}。feature分支基于最新的master分支拉，开发完毕之后往develop分支合。然后上测试环境即可。hotfix/xxx分支用于线上bug，只能从最新的master分支中切出来。基本原则基本的feature分支开发+MR 的工
2021-05-28 23:55:19
355
原创 带你走进“像素”的世界
前言一位漂亮的UI小姐姐，给了一个高60px、宽112px的确定按钮，和一个宽高都是60px的返回按钮，其中返回按钮由端上实现，确定按钮由H5实现。于是大家都按照设计稿写好了样式，联调的时候，pc没有问题，开心；ios没有问题，开心极了；然而安卓在安卓机上拉胯了！！于是开始排坑之路。像素（pixel）像素（pixel）是影像显示的基本单位，它是一个取样单位，一般情况像素采用点或者方块显示。一般屏幕上每个像素采用RGB色域（红、绿、蓝），印刷机采用CMYK色域（青、品红、黄、黑）。详情可以参考wik
2021-04-29 00:04:09
383
原创 探究XHR时序以及异步队列
前言今天一个同事问我切片上传超时的问题。他是切片后直接上传，同时设置了超时，后面的切片总是上传超时。场景模拟启服务首先用node起一个服务，通过sleep的方式模拟每份切片上传需要3s。const Koa = require('koa')const Router = require('koa-router')const sleep = (time = 0)=> { return new Promise(resolve => { setTimeout(() =>
2021-04-29 00:02:50
554
原创 Vue环形倒计时组件
基本知识以下复制粘贴的张旭鑫大佬的文章。SVG中有个比较重要的属性分支，名为stroke, 中文软件中称之为“描边”。stroke 表示描边颜色。这很有意思，名字不是stroke-color, 而就是单纯的stroke. 其值，官方称之为”paint“，我就不上梁小丑般翻译了。一般有如下类型值：none, currentColor, <color>，none表示没有颜色，<color>就是我们常规的颜色值。RGBA, HSBA都支持。currentColor略高深，我看
2021-04-16 22:14:39
2497
2
原创 前端常见的几个限制
URL长度限制服务器The HTTP protocol does not place any a priori limit on the length of a URI. Servers MUST be able to handle the URI of any resource they serve, and SHOULD be able to handle URIs of unbounded length if they provide GET-based forms that could gen
2021-04-15 23:28:49
767
原创 图片加载异常兜底方案
背景网络环境总是多样且复杂的，一张图片可能会因为网路状况差而加载失败或加载超长时间，也可能因为权限不足或者资源不存在而加载失败，这些都会导致用户体验变差，所以我们需要一个图片加载异常的兜底方案。<img>加载错误解决方案内联事件直接在img标签上使用内联事件处理图片加载失败的情况，但是这种方式代码侵入性太大，指不定就会有地方漏掉。<img src='xxxxx' onerror="this.src = 'default.png'">全局img添加事件第一个方案侵入性太
2021-03-29 19:42:34
1841
原创 如何升级打怪式解析koa源码
新手村node起一个服务有多简单，相信只要会上网，都能搜到类似下面的代码快速启动一个服务。const http = require('http')const handler = ((req, res) => { res.end('Hello World!')})http .createServer(handler) .listen( 8888, () => { console.log('listening 127.0.0.1:8888')
2021-03-23 21:37:19
239
原创 前端埋点与监控方案
埋点数据采集方案什么是埋点埋点，它的学名是事件追踪（Event Tracking），主要是针对特定用户行为或业务过程进行捕获、处理和发送的相关技术及实施过程。埋点是数据领域的一个专业术语，也是互联网领域的一个俗称。埋点是产品数据分析的基础，一般用于推荐系统的反馈、用户行为的监控和分析、新功能或者运营活动效果的统计分析等。埋点包含两个重要概念：事件（event），属性（param）事件（event）：应用中发生了什么，例如用户操作、系统事件或系统错误。以你拍一产品为例，包含以下事件：enter_p
2021-03-11 01:01:06
1603
原创 前端webview调试总结
安卓安装chromeGoogle Chrome 网络浏览器启动开发者选项谷歌手机开启「开发者选项」的方式，以小米为例是多次点击miui版本号开启在「开发者选项中」打开「USB调试」打开chrome的检查器数据线连接至mac上打开Chrome, 地址栏输入chrome://inspect在Devices选项, 打开发现USB设备选择打开待调试webview页面，即可看到出现在设备列表中点击其下方的inspect按钮，即可进入「控制台」调试ios下载安装Safari Tech
2021-03-11 00:59:41
783
原创 JSBridge——如何与原生打交道
导语随着移动端领域的快速发展，业务场景愈发复杂，为减少开发量和投入成本，混合应用（Hybrid App）占据了不少市场。混合应用承载H5页面的容器就是webview，前端人员在开发过程中或多或少都需要与原生（Native App）之间交互，这个交互的桥梁就叫做JSBridge。同样也有一套通用的调试方法来确保JSB通信顺利。什么是WebViewWebView是原生应用用来展示网页的view组件，本质上就是一款内置了webkit内核的无头浏览器（headless browser），提供了例如页面前进后退
2021-03-11 00:58:44
515
原创 IOS混合应用切换app闪屏bug总结
现象ipad mini3 在app切入后台，重新切回app，页面重新渲染（闪屏）排查问题对比资源较少的页面，偶发闪屏（概率极小），资源较大的页面频繁闪频（概率极大）。大致定位原因是webview本身有所限制。对比安卓和ios，发现安卓没有问题，ios才有。大致定位原因是ios的webview的问题开启safari检查器，在控制台的时间线（timeline）上看到，切换至后台重新打开app后频繁触发full gc。原因webkit的绘制机制webkit在绘制页面时会将结构分为各种层，当层足
2021-03-11 00:54:16
1230
原创 前后端主流截图方案
主流截图方案前端截图若采用前端截图的方案，大致过程如下。将html转图片提交，三次兜底上传至服务端，成功后获得回传id，若三次失败，则提示错误。前端截图的方案有两个缺陷不能避免，第一转图片比较费时（具体查看方案实践）；其次提交的过程受网络情况影响。这两点加起来一次过程可能就要2秒以上。下面说说前端主流的转图片方案。canvas转换大致流程如下图，首先克隆dom树（获取开发者定义的样式等），使用iframe重新渲染一次dom，通过getComputedStyle获得最终
2021-02-21 14:37:02
1445
1
原创 父节点使用transform，子节点fixed定位失效
在使用第三方sdk时，偶遇一个小问题，遂记录一下。问题现象第三方sdk提供了渲染功能和操作按钮，因为业务场景的原因，需要改变这些按钮的样式和位置。我啪的一下，很快啊。直接f12，鼠标选中dom节点，查看class名字，使用important直接覆盖样式。但是它不讲武德，大小形状颜色都变了，fixed定位咋没生效呢。于是又啪的一下，打开了styles查看，发现fixed实际已经生效了。遂开始面向谷歌编程。问题原因父节点的样式中如果transform属性不为none，就会修改fixed的上文基准位置
2021-02-20 22:40:18
1451
原创 useCallback 导致回调函数state状态不更新的问题
前段时间在项目中遇到了一个奇怪的问题，遂记录一下解决过程。现象使用了其他部门提供的sdk进行开发，向他们的组件中注册了一个回调函数，当触发回调函数的时候，内部state一直是初始值，而当前组件的state却保持着更新。使用hooks声明页码和页数的状态state// 声明页码和页数的状态stateconst [pageIndex, setPageIndex] = useState<number>(0);const [pageCount, setPageCount] = useSt
2021-02-20 22:22:35
4567
1
原创 解决iframe动态切换src后历史记录，导致页面后退变为iframe后退的问题
现象最近有一个项目内嵌了一个iframe，会在一定条件下动态切换其的src达到切换页面的效果。同时页面父页面中有回退按钮，直接调用的go(-1)。此时就产生了一个奇怪的现象：点击回退按钮，iframe出现了后退，而父页面没有回退。类似于下面这样：// 动态切换srclet iframeSrc: string = 'http://example1.com'setTimeout(() => { iframeSrc = 'http://example2.com'}, 1000)// vu
2021-02-20 22:00:57
7435
16
原创 菜鸡前端找工作手册
作为一个菜鸡，年末跳槽成功，属实开心，遂写下自己如何做准备的。我从四个方面讲：前端知识、算法、项目、心态。前端知识如果前端相关的基础知识没掌握，那么一面通过的概率就比较低了。这里推荐几本书籍和几个大佬的博客，如果能够熟读，基本上一面问题不大：《JavaScript高级程序设计第四版》这本书也被叫做红宝书，是学习和提升Javascript知识不可或缺的书籍之一。相信对于大部分人而言，记住整本书里面的知识点是不太现实的，我反正是记不住，所以我是把这本书当成百科书使用，遇到某些知识点时就会仔细阅读整个
2021-01-21 17:55:03
202
原创 一个普通IT男的2020总结
一直觉得年末总结，说白了是写给未来的自己看的。谁会闲着没事去关心陌生人的一年是如何度过的。当自己回过头整理经历时，翻翻日记博客之类，一些记忆自然而然就会涌上心头。一个人的除夕夜年初的时候抢到了回家的高铁票，还特意提前请了一天假，为了赶上除夕晚上的年夜饭。其实那会已经看到了不少关于疫情的消息，但是官方说法是未发现人传人的证据，所以没当回事，还是兴冲冲的坐上了回家的高铁。上火车刷微博才知道武汉上午10点要封城，感觉事情没有想象中的那么简单，于是中途下车买了返程票，也通知家里人赶快出来，结果第二天家里也封城了
2021-01-21 16:07:39
228
3
原创 前端入门级不完全知识
vue$nextTick(function func)vue中用于dom的异步更新在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，在created()钩子函数执行的时候DOM 其实并未进行任何渲染。在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.$nextTick()的回调函数中。props与$emit父组件可以使用 props 把数据传给子组件。子组件可以使用
2020-12-30 17:53:02
216
原创 配置devServer动态代理，再也不用担心切后台了
因为项目需要对接多个后台，早先并未配置动态代理，每次联调都要修改后台服务地址，然后重启服务（因为webpack配置文件不在文件监听内），非常影响开发效率，于是有了如下改造。因为webpack只会监听被入口文件（index.js）依赖的文件，所以只要令代理后台地址文件加入依赖即可。配置后台服务的地址新建proxyTarget.js文件，配置后台服务的地址，一般就是协议+主机名+端口号。// proxyTarget.jsmodule.exports = { local: 'http://127
2020-12-30 16:12:15
2771
4
原创 使用copy-webpack-plugin构建系统的配置文件
使用copy-webpack-plugin构建系统的配置文件问题早先项目的配置信息比较少，所以直接由开发人员在代码层面维护修改，随着用户需求变多需要配置的东西越来越多，维护起来相当不方便，遂将配置信息放入统一配置文件中，即方便开发人员维护，也有利于后期拓展。解决办法最先直接弄了一个configs.json文件统一管理配置信息，但是打包之后，配置文件会被压缩至chunk中无法直接修改，如果配置信息有问题，就需要修改配置文件再次打包，非常浪费时间。后面看到项目webpack配置文件中有使用copy-we
2020-12-30 15:01:36
872
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人