随风丶逆风的博客

于是回过头排查资源请求是否异常，通过PerformanceResourceTiming API能力，看到资源的类型是空的，资源类型未能正确识别。此时，注意到高版本设备中，会触发资源加载异常，但不会触发audio的error事件。可以看到编码格式为1，是PCM（Pulse Code Modulation / 脉冲编码调制），无信号压缩。首先通过error事件的日志数据，发现ErrorEvent中并没有错误message，头一次见。，发现audio/wave是标准的，但如果编码格式非1，支持度有限。

又到了一年一度的年终总结了，回顾一年可谓一波三折，感慨良多，最有感触的大概就是疫情带来各种影响吧，经济下行、市场不景气、互联网寒冬。回顾去年年终规划《【随风丶逆风】2021年终总结》带@丁同学回家，去2个地方旅游~疫情原因，BJ进出政策异常严格，出游计划一直被打乱，不过把丁同学带回家了，算完成一半吧。2023年一起补上阅读15本以上书籍吧，稳定自己的心态，改善自己的性格上半年基本保持一个月1本书，下半年有点放松，书买了不少，但就阅读了10余本，勉强符合预期。

本文主要讲述卷积神经网络相关知识，并使用face-api.js搭建一个简单的虚拟形象系统，给自己带上口罩、眼镜之类的。

在日常前端开发中，经常使用ES6+语法，但碍于用户使用的浏览器各不相同，新语法在旧版本浏览器中不支持，此时我们通常会使用babel将其转换成支持度更为广泛的ES5语法，这种“将不识别的语言转换为可识别的语言”过程就叫「编译」，所使用的工具就是编译器。除了babel，常见的编译器还有gcc等。如果直接就看babel的源码了解编译器怎么工作的，怕是很多人都会望而却步，好在babel的维护者之一 James Kyle 有一个最小编译器的开源项目，截止目前超过21.5k stars。

本文讲述了集中cocos creator实现不规则图片区域点击的实现方法，并横向对比优劣，最终给出一个可能的最佳实践

前言回头看了看去年的年终总结《一个普通IT男的2020总结》里给自己立下了几个flag： 阅读五本非技术书籍，陶冶一下情操大约读了10本书，技术非技术都有 有时间就多逛逛北京去了北京10多个景点，也算是溜达了不少 谈个女朋友遇到了自己的女神 @丁同学 坚持运动，久坐成疾天气热的时候差不多每周都会运动，比如爬山、游泳等，冷了之后就没怎么运动了 依旧坚持每个月2篇以上博客工作太忙，博客更新频次低，整体来看平均一个月有2篇，勉强算达成。不过在公司内部也沉淀不少文档

目前比较流行的小程序开源框架有京东的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

什么是WebAssemblyJS的弊端JS代码在V8引擎会经历如下过程：JS源码经过Parse解析器转换成AST；经过Ignition解释器，将AST转成字节码；通过Turbofan将字节码转成CPU直接执行的代码。期间执行比较频繁的代码称为热代码，其编译后的机器码会被缓存下来，等到下次执行这段代码时直接执行机器码。但是JS是动态类型语言，如果变量类型改变了，这个时候就需要Turbofan反优化，将热代码回退给Iginition解释器才解释一次。asm.js于是 Mozilla 提出了

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，在摩托罗拉

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日在旧金山的莫斯康中心西翼举行

图谱可视化比较流行的开源库有三个：ECharts、d3、cytoscape开源库简介包体积(kb)下载量社区活跃度ECharts功能齐全，也是中台知识图谱所用工具，动效、交互强316.7kb36w+高d3数据驱动视图渲染的库，灵活比较高88.4139w+中cytoscape图论分析和可视化的库，交互能力较薄弱107.84w+中npm生态示例echartshttps://echarts.apache.org/exampl

原因在Husky 4.x版本时，husky通过创建所有类型的git hooks来保证用户设置任何类型的hooks都能正常工作，这样会导致git的每个阶段都会调用husky所设置的脚本，同时在这个脚本中husky会检查用户是否配置该hook，如果有就运行用户配置的命令，如果没有就继续往下执行。但是带来的副作用是，即使用户没有设置任何hooks，也照样自动添加全部的hooks。Husky 5.x版本之后有break change，不再全局设置git hooks文件，使用了从git 2.9开始引入的一个新功能

背景开发中遇到connect包裹forwardRef组件后，ref引用失效，返回undefined的问题。const CompA = React.forwardRef<OutputInterface, IProps>((props, ref) => { // ...})export default connect(mapStateToProps, mapDispatchToProps)(CompA);原因源码：React.forwardRef从下面截取的源码中，可

推荐阅读时长25分钟前言目前市场上音视频技术方案大致分为以下几类，WebRTC因其超低延时、集成音视频采集传输等优点，是在线教育、远程会议等领域首选技术。方案优势劣势应用场景基于浏览器插件的flash播放RTMP即将淘汰即将淘汰传统直播跨平台的HLS/DASH 播放方案- 跨端广泛支持：苹果浏览器原生支持 - hls.js - 延时高 - 碎片化 传统直播，如赛事直播、大型会议直播基于HTML5 MSE 能力的flv播放技术- 格式简单 - 无需.

推荐阅读时间背景最近改造项目，所有静态资源的url由服务端下发，而且带上了认证和过期时间等params，导致静态资源优化利器之一的http缓存失效了：只要下发资源的url过期了资源就会重新请求下载，但实际上该资源并没有变更。本文就从三个方面来讲述离线化/长缓存：http缓存离线缓存(Application Cache)Service WorkerHTTP缓存下面这部分直接引用的之前的文章《一文读懂HTTP缓存机制》一句话概况：本地缓存请求到的资源，后续请求尽可能直接复用这些资源.

ElementUIelementUI将弹窗层级管理收敛到了一个入口PopupManager中，涉及zIndex层级的弹窗组件实例都需要注册到PopupManager中。源码传送门// element/src/utils/popup/popup-manager.jsimport { addClass, removeClass } from 'element-ui/src/utils/dom';// 是否有模态层let hasModal = false;// 是否有初始zIndexlet has

分支说明master分支master分支只部署到线上。每次新功能在测试环境验证通过了才可以合并到master分支。要保证master分支就是线上最新代码。develop分支用于部署到集成测试环境。feat/xxx分支命名规则是：feat/{版本}-{功能点}。feature分支基于最新的master分支拉，开发完毕之后往develop分支合。然后上测试环境即可。hotfix/xxx分支用于线上bug，只能从最新的master分支中切出来。基本原则基本的feature分支开发+MR 的工

前言一位漂亮的UI小姐姐，给了一个高60px、宽112px的确定按钮，和一个宽高都是60px的返回按钮，其中返回按钮由端上实现，确定按钮由H5实现。于是大家都按照设计稿写好了样式，联调的时候，pc没有问题，开心；ios没有问题，开心极了；然而安卓在安卓机上拉胯了！！于是开始排坑之路。像素（pixel）像素（pixel）是影像显示的基本单位，它是一个取样单位，一般情况像素采用点或者方块显示。一般屏幕上每个像素采用RGB色域（红、绿、蓝），印刷机采用CMYK色域（青、品红、黄、黑）。详情可以参考wik

前言今天一个同事问我切片上传超时的问题。他是切片后直接上传，同时设置了超时，后面的切片总是上传超时。场景模拟启服务首先用node起一个服务，通过sleep的方式模拟每份切片上传需要3s。const Koa = require('koa')const Router = require('koa-router')const sleep = (time = 0)=> { return new Promise(resolve => { setTimeout(() =&gt

基本知识以下复制粘贴的张旭鑫大佬的文章。SVG中有个比较重要的属性分支，名为stroke, 中文软件中称之为“描边”。stroke 表示描边颜色。这很有意思，名字不是stroke-color, 而就是单纯的stroke. 其值，官方称之为”paint“，我就不上梁小丑般翻译了。一般有如下类型值：none, currentColor, <color>，none表示没有颜色，<color>就是我们常规的颜色值。RGBA, HSBA都支持。currentColor略高深，我看

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

背景网络环境总是多样且复杂的，一张图片可能会因为网路状况差而加载失败或加载超长时间，也可能因为权限不足或者资源不存在而加载失败，这些都会导致用户体验变差，所以我们需要一个图片加载异常的兜底方案。<img>加载错误解决方案内联事件直接在img标签上使用内联事件处理图片加载失败的情况，但是这种方式代码侵入性太大，指不定就会有地方漏掉。<img src='xxxxx' onerror="this.src = 'default.png'">全局img添加事件第一个方案侵入性太

新手村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')

埋点数据采集方案什么是埋点埋点，它的学名是事件追踪（Event Tracking），主要是针对特定用户行为或业务过程进行捕获、处理和发送的相关技术及实施过程。埋点是数据领域的一个专业术语，也是互联网领域的一个俗称。埋点是产品数据分析的基础，一般用于推荐系统的反馈、用户行为的监控和分析、新功能或者运营活动效果的统计分析等。埋点包含两个重要概念：事件（event），属性（param）事件（event）：应用中发生了什么，例如用户操作、系统事件或系统错误。以你拍一产品为例，包含以下事件：enter_p

安卓安装chromeGoogle Chrome 网络浏览器启动开发者选项谷歌手机开启「开发者选项」的方式，以小米为例是多次点击miui版本号开启在「开发者选项中」打开「USB调试」打开chrome的检查器数据线连接至mac上打开Chrome, 地址栏输入chrome://inspect在Devices选项, 打开发现USB设备选择打开待调试webview页面，即可看到出现在设备列表中点击其下方的inspect按钮，即可进入「控制台」调试ios下载安装Safari Tech

导语随着移动端领域的快速发展，业务场景愈发复杂，为减少开发量和投入成本，混合应用（Hybrid App）占据了不少市场。混合应用承载H5页面的容器就是webview，前端人员在开发过程中或多或少都需要与原生（Native App）之间交互，这个交互的桥梁就叫做JSBridge。同样也有一套通用的调试方法来确保JSB通信顺利。什么是WebViewWebView是原生应用用来展示网页的view组件，本质上就是一款内置了webkit内核的无头浏览器（headless browser），提供了例如页面前进后退

现象ipad mini3 在app切入后台，重新切回app，页面重新渲染（闪屏）排查问题对比资源较少的页面，偶发闪屏（概率极小），资源较大的页面频繁闪频（概率极大）。大致定位原因是webview本身有所限制。对比安卓和ios，发现安卓没有问题，ios才有。大致定位原因是ios的webview的问题开启safari检查器，在控制台的时间线（timeline）上看到，切换至后台重新打开app后频繁触发full gc。原因webkit的绘制机制webkit在绘制页面时会将结构分为各种层，当层足

主流截图方案前端截图若采用前端截图的方案，大致过程如下。将html转图片提交，三次兜底上传至服务端，成功后获得回传id，若三次失败，则提示错误。前端截图的方案有两个缺陷不能避免，第一转图片比较费时（具体查看方案实践）；其次提交的过程受网络情况影响。这两点加起来一次过程可能就要2秒以上。下面说说前端主流的转图片方案。canvas转换大致流程如下图，首先克隆dom树（获取开发者定义的样式等），使用iframe重新渲染一次dom，通过getComputedStyle获得最终

在使用第三方sdk时，偶遇一个小问题，遂记录一下。问题现象第三方sdk提供了渲染功能和操作按钮，因为业务场景的原因，需要改变这些按钮的样式和位置。我啪的一下，很快啊。直接f12，鼠标选中dom节点，查看class名字，使用important直接覆盖样式。但是它不讲武德，大小形状颜色都变了，fixed定位咋没生效呢。于是又啪的一下，打开了styles查看，发现fixed实际已经生效了。遂开始面向谷歌编程。问题原因父节点的样式中如果transform属性不为none，就会修改fixed的上文基准位置

前段时间在项目中遇到了一个奇怪的问题，遂记录一下解决过程。现象使用了其他部门提供的sdk进行开发，向他们的组件中注册了一个回调函数，当触发回调函数的时候，内部state一直是初始值，而当前组件的state却保持着更新。使用hooks声明页码和页数的状态state// 声明页码和页数的状态stateconst [pageIndex, setPageIndex] = useState<number>(0);const [pageCount, setPageCount] = useSt

现象最近有一个项目内嵌了一个iframe，会在一定条件下动态切换其的src达到切换页面的效果。同时页面父页面中有回退按钮，直接调用的go(-1)。此时就产生了一个奇怪的现象：点击回退按钮，iframe出现了后退，而父页面没有回退。类似于下面这样：// 动态切换srclet iframeSrc: string = 'http://example1.com'setTimeout(() => { iframeSrc = 'http://example2.com'}, 1000)// vu

作为一个菜鸡，年末跳槽成功，属实开心，遂写下自己如何做准备的。我从四个方面讲：前端知识、算法、项目、心态。前端知识如果前端相关的基础知识没掌握，那么一面通过的概率就比较低了。这里推荐几本书籍和几个大佬的博客，如果能够熟读，基本上一面问题不大：《JavaScript高级程序设计第四版》这本书也被叫做红宝书，是学习和提升Javascript知识不可或缺的书籍之一。相信对于大部分人而言，记住整本书里面的知识点是不太现实的，我反正是记不住，所以我是把这本书当成百科书使用，遇到某些知识点时就会仔细阅读整个

一直觉得年末总结，说白了是写给未来的自己看的。谁会闲着没事去关心陌生人的一年是如何度过的。当自己回过头整理经历时，翻翻日记博客之类，一些记忆自然而然就会涌上心头。一个人的除夕夜年初的时候抢到了回家的高铁票，还特意提前请了一天假，为了赶上除夕晚上的年夜饭。其实那会已经看到了不少关于疫情的消息，但是官方说法是未发现人传人的证据，所以没当回事，还是兴冲冲的坐上了回家的高铁。上火车刷微博才知道武汉上午10点要封城，感觉事情没有想象中的那么简单，于是中途下车买了返程票，也通知家里人赶快出来，结果第二天家里也封城了

vue$nextTick(function func)vue中用于dom的异步更新在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，在created()钩子函数执行的时候DOM 其实并未进行任何渲染。在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.$nextTick()的回调函数中。props与$emit父组件可以使用 props 把数据传给子组件。子组件可以使用

因为项目需要对接多个后台，早先并未配置动态代理，每次联调都要修改后台服务地址，然后重启服务（因为webpack配置文件不在文件监听内），非常影响开发效率，于是有了如下改造。因为webpack只会监听被入口文件（index.js）依赖的文件，所以只要令代理后台地址文件加入依赖即可。配置后台服务的地址新建proxyTarget.js文件，配置后台服务的地址，一般就是协议+主机名+端口号。// proxyTarget.jsmodule.exports = { local: 'http://127

使用copy-webpack-plugin构建系统的配置文件问题早先项目的配置信息比较少，所以直接由开发人员在代码层面维护修改，随着用户需求变多需要配置的东西越来越多，维护起来相当不方便，遂将配置信息放入统一配置文件中，即方便开发人员维护，也有利于后期拓展。解决办法最先直接弄了一个configs.json文件统一管理配置信息，但是打包之后，配置文件会被压缩至chunk中无法直接修改，如果配置信息有问题，就需要修改配置文件再次打包，非常浪费时间。后面看到项目webpack配置文件中有使用copy-we

将以下代码复制添加至入口文件index.html中，可以解决IOS留海遮挡页面顶部的适配问题。

本文的 demo 源码地址，欢迎自取star：https://github.com/DavidChen93/vue-practical-directives自定义指令简介在 Vue2.0 中除了默认内置的指令（v-model 和 v-show）以外，也支持注册自定义指令。虽然代码复用和抽象的主要形式是组件，但是有时候仍然需要对顶层的 dom 元素进行操作，此时自定义指令就派上用场了。注意：v-model 和 v-show 的实现方式和自定义指令不一样，前者在模板编译（compile）时就已经进行处理

各位读者可以先思考一下这道题的输出结果是什么？我第一次答这题是错了。。。console.log('start');Promise.resolve() .then(() => { console.log('p1');}).then(() => { console.log('p2');});(new Promise(resolve => { console.log('p3') resolve()})).then(() => { conso

问题今天刷leetcode的时候，发现有些函数老是重复书写，于是单独写了一个uitls.js模块，通过import的方式导入，没想到居然报错了。解决方案错误警告其实已经给出了解决方案，在package.json文件中设置"type": "module"。所以执行一下下面的命令，默认所有配置为‘y’，从而快速生成package.json，然后修改文件即可。npm init -y{ "name": "leetcode", "version": "1.0.0", "descripti