qq_34425377的博客

通过设计「差分压缩算法」，并在 QQ 音视频涂鸦互动场景中应用和优化，我们成功实现了涂鸦延迟控制在 80ms 以内，带宽节省 60% 的目标，并将该算法在 QQ 音视频团队进行了技术复用，为提升音视频互动体验和降低网络成本做出了贡献。

React项目：推荐使用，提升开发效率Vue/小程序：可使用计算属性替代。

/ 自定义指令异常处理示例try {// 使用try-catch包裹可能出错的指令逻辑el.focus()console.error('focus指令异常', err)})// 可以在这里添加错误恢复逻辑})

和都是 React 的错误边界方法，用于处理子组件的错误。这两个方法共同作用，确保组件能够优雅地处理和恢复错误。触发时机: 当子组件抛出错误时，React 会首先调用这个静态方法。功能: 允许你更新状态以便在渲染错误界面之前准备新状态。返回值: 返回一个对象来更新组件状态，或者返回null。触发时机: 在之后调用，主要用于执行副作用，比如日志记录。功能: 可以处理错误信息，进行记录或其他操作。参数: 接收两个参数：错误信息和错误的组件栈。// 上报错误}, []);

CDN带宽 = （图片类页面静态资源大小 + 非图片类页面静态资源大小 * 30%） * 每秒请求量 * 8 / 1024 / 1024，其中，乘以8是为了把Byte转为bit，1 Byte = 8 bit，我们资源大小的单位是KB、MB之类的Byte，带宽用的单位是Gbps、Mbps的bit，连续除以两个1024是为了把Kbps转为Gbps；将页面上的某些元素（如图片、视频等）延迟加载，等待用户滚动到相应的位置时再进行加载，避免了一开始就加载过多的内容造成的延迟。

1、flex布局参考阮一峰 - flex布局简述：背景：传统布局：display+position+float布局，复杂麻烦，尤其垂直居中比较困难。元素词：1.容器：指进行处理布局的代码块，管理全部小块（项目）.block { display: flex; // inline-flex行内}2.项目：容器内部的元素，管理每个小块内部及小块间的关系属性（各6个）：1.容器// 布局换行类flex-direction: row; // row row-reverse column c

目录：一、gulp、webpack对比总结二、前端工程化简介前言：经验不足，仅记录下当前自己的认识，非常希望可以得到反馈，无论是指点还是提出问题，一起讨论成长。一、gulp、webpack对比总结：这两者正巧都可以完成打包的功能，经常拿来作比较罢了。分析对比过程中，越比较越觉得就只能探讨打包形式及过程中用的包，根本没得好比的嘛，还是总结下：建议webpack常用，gulp辅助小流程工具。还是分别讲解大致讲解下吧：打包编译的过程，都有绕不开的共同问题：mode开发模式、mainfest文件映射关系

一、作用域1、js中作用域：全局作用域、函数作用域、块级作用域（es6增加）全局作用域：1、页面打开创建、关闭销毁；2、全局变量，window对象；3、不小心声明的未定义好的变量，会变成全局变量，易造成全局污染。函数作用域：1、函数创建时产生，执行完销毁；2、每次调用创建新的作用域，互相之间不重复；块级作用域：1、块作用域由 { } 包括2、执行时创建，执行完销毁1.1、作用域链 vs 执行上下文js解释型语言，执行分为：解释、执行两个阶段。分别处理事情不一样：解释阶段：词法

前言：记录多方见过的经典坑位面试题。目录：1、this指向题（传说）

《前端面试宝典》之目录简单记录下已经了解过的面试题，方便回顾总结及拓展，有问题可以一起讨论，一起努力！this指向题核心点：谁调用指向谁，无即window（隐含）。var length = 100;function f1(){ console.log(this.length);}var obj = { length: 10, f2: function(f1){ f1(); arguments[0](); }, f3: f1}obj.f2(f1, 1, 2);//