New <video> Policies for iOS 政策限制了音频必须由用户主动触发。 不过如果是自己的 APP 的话就可以通过修改 iOS 配置来禁用这个限制。 如图所示，通过配置 mediaTypesRequiringUserActionForPlayback，自己的 APP 中，Web 播放音频就不需要人为来触发了。 注意：需要判断 iOS 10 以下，使...
硬件加速不是银弹
积木区发现一个诡异的现象，在一些低端机型上，使用 translate3d 反而更卡？来看看 Composite（合成层） 的细节。 Chrome Rendering Web 展示流程 JavaScript => Style => Layout => Paint => Composite JavaScript：我们会使用 JavaScript 来实...
JAVASCRIPT BUT LESS IFFY
“这很难，是因为它很复杂，还是因为对它不熟悉？熟悉度是接受更复杂代码的充分理由吗？“ 发现一篇好文，看完之后写代码瞬间好理解了很多！！！翻译一下全文。 原文地址：https://jrsinclair.com/articles/2017/javascript-but-less-iffy/ 这是关于降低 JavaScript 代码复杂性的一系列文章的第三部分。在以前的文章中，我们认为缩进是...
前端监控工具制作
原生监控 lighthouse api 公司项目多起来之后, 文档的作用虽然大, 但是起不到强制约束的作用, 例如部分项目没有正确使用 CDN 等。这时候我们可以利用 lighthouse 提供的 api 制作自己公司的校验军规。 原生监控 主要利用了 Window.performance 的 API。 页面性能 class Perf { init(cb: Fu...
AudioContext被动关闭
使用 howler.js 的时候发现，设备被“打断”的场景下，声音就再也播不出来了。甚至在合作方的硬件设备上静置一段时间也出现同样的情况。 看 howler 代码的时候发现，AudioContext 只会被 new 一次，并且存在 Holwer.ctx 上： Howler.ctx = new AudioContext(); 再次读取 Howler.ctx 的时候，如果已经有实例了，就...
JSBridge
JSBridge 其实在职业生涯中已经多次用过了，例如微信的 WeiXinJSBridge（JSSDK）、RN 的 window.postMessage，但让我自己描述这一过程所用的语句还非常“外行”，现在系统整理一下。 原文地址：https://juejin.im/post/5abca877f265da238155b6bc 原理 JSBridge 调用可以看作一次 RPC（re...
JavaScript的反应性
反应性并不是 JavaScript 编程通常的运行方式，Vue 的反应性是如何实现的？ 原文地址：https://mp.weixin.qq.com/s/Wm5-3hsqre7ft_f0YBnoeg 程序基本运行逻辑 let price = 5; let quantity = 2; let total = price * quantity; price = 20; console.log...
什么是Mutator
Blockly 里面的 Blocks 有一个很重要的概念 Mutator，在改它实现的时候慢慢悟出 Mutator 概念的精妙之处。 Mutator 是什么？ Wikipedia 上的解释： In computer science, a mutator method is a method used to control changes to a variable. They are ...
大话数据结构
大话数据结构 数据结构 数据结构就是以某种特定的布局存储数据 这个布局使得某些操作非常高些，另外一些操作不那么高效 理解数据结构，就能为手头问题选择最优的数据结构 算法 算法是解决特定问题求解步骤的描述 存储结构 顺序存储结构 在内存地址中连续存储 建立定长数组，计算机在内存中开辟连续空间 ...
JS拷贝
浅拷贝 / 深拷贝： clone-deep JSON.stringify 尤雨溪的 circular-json-es6 @jsmini/clone … 浅拷贝 浅拷贝: 以赋值的形式拷贝引用对象，仍指向同一个地址，修改时原对象也会受到影响 Object.assign 展开运算符(…) clone-deep 深拷贝需要考虑： JSON 克...