1. 音视频基础 本文将给大家进行音视频基础的常规知识点的梳理。当然，短短的一篇文章并不能让大家立即变成音视频领域的专家，但这些知识点已经基本涵盖了音视频的入门知识。我们将按照下面的内容给大家 * 音视频的基本概念 * 音视频播放的流程 * 音视频编解码 * 音视频封装格式 * 音视频常见的传输协议 1.1 音视频基本概念 首先，我们需要先主了解下一些音视频常见的技术概念以及简单的原理。 1.1.1 采样率 采样，是指把物理信号转化为数字信号的过程。采样频率，定义了每秒从连续信号中提取并组成离散信号的采样个数，单位为赫兹(Hz)。形象来说，采样频率是指将模拟信号转换成数字信号时的采样频率，也就是单位时间内采样多少点。

【关于腾讯前端技术大会(TWEB)】 腾讯Web前端团队在蓬勃发展的这几年间，先后举办了一系列业界顶尖的Web前端技术大会，不断地输出业界前沿的标准以及最优的前端实践，希望能跟千千万万的前端开发者一同推动行业的发展。现在由腾讯Web前端技术委员会联合腾讯各大 Web 前端团队推出全新的 < 腾讯前端技术大会TWeb /> ，旨在打造一个高品质、高标准的行业交流会议，为你带来更多高质量的腾讯Web前端技术内容。 我们通过组织腾讯内各大前端团队以及邀请业界知名的讲师，将腾讯和业界上最前沿的前端技术、Web标准以及一线互联网大厂的优秀实践经验分享给大家，力求带给参会者一个高标准高品质的会议。

本篇记录了阅读 Compiler.js [https://github.com/webpack/webpack/blob/v4.41.0/lib/Compiler.js] 过程中的一些笔记。(Webpack版本4.41.0) 阅读前需要先对tapable有一定的了解，可参考 Tapable github [https://github.com/webpack/tapable] . 这里主要对webpack调用了Compiler.run()到资源输出完毕后经历的过程及其代码进行了一些梳理。 代码特点 webpack的异步代码基本采用回调函数的形式进行书写，tapable实际上也是注册callback的形式，需要仔细区分各个部分对应的callback。 Compiler类成员变量的类型、含义都比较清晰，也有足够的文档支持，这里不做具体解读了。 大致流程 Compiler中的方法调用顺序大致如下（以.run为入口）： Compiler.run(callback) 开始执行构建 Compiler.readRecord(callback) 读取之前的构建记录

webpack提倡一切皆模块，所有类型的文件都可以经过文件加载器处理变成我们可加载的模块，那么这个文件加载器便是loader。 那么我们如何开发一个webpack loader呢，让我们一起探索探索吧~ 一、loader执行顺序 在开发loader之前，我们先了解一下webpack loader的执行顺序。 webpack是支持loader的链式调用的，即一个文件可以经多个loader处理。当一个文件使用多个loader处理时，他的处理顺序是倒序，即传入loader数组的从右到左执行。 例如,对于scss文件，我们的配置如下，那么它的执行顺序是sass-loader -》 css-loader -》 postcss-loader -》style-loader： module: { rules: [ { test: /.scss|.css/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2, }, }, 'postcss-loader', loader:

需求简介 腾讯企鹅辅导在学生上课结束后推送“学习报告”，是课程所提供的一项重要服务。家长在“学习报告”中能查看孩子上课时间及互动情况，答题及掌握知识点，作业考试分数，班级排名等诸多数据，继而让学生家长及时掌握孩子的学习情况。 此次改版升级是针对旧学习报告的的数据和展示进行的一次优化：增加考试模块、知识点采用更简单的表达形式、在视觉交互上更加年轻活泼、并运用了更多数据图表可视化在其数据展示中。 设计稿 考试模块-数据图表可视化的应用 1.数据可视化组件库的选择及应用 在考试模块中，需要展示学生成绩变化趋势的曲线图，而这需要用到第三方的可视化组件库，继而快速回忆起比较知名的几款：国外的HighChart，百度家的Echart，阿里的AntV（移动端F2）等。当然也希望腾讯有一天也能有同样知名好用的的可视化组件库。

移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试工具weinre 其他方案 附录：ES6标准兼容情况 页面容器 移动设备上的各种浏览器 chrome、safari、firefox、samsung browser 各类app内的webview 不同平台实现不一样 iOS平台 iOS 8.0以前的UIWebView，现在（2019年）基本被淘汰，不用管。 iOS 8.0及以后的WKWebView，主流应用内均使用它作为容器展示html Android平台 WebView实现一般为Android WebView，部分手机厂商会默认设置成chrome实现，差别不是很大。 微信平台 微信iOS端是采用wkwebkit进行渲染的，Android平台采用的是x5内核 debug方案 Android端 由于移动端网页开发不能直接打开developer tools，导致我们调试起来稍微麻烦。好在我们有解决方案： Remote Devices

变量的运算是日常开发中必须且频繁接触的内容。 其中 相等运算符 可算是使用频率最高的运算符。 除了直接使用之外，我们平常使用的过滤、映射、排序等等，当然都会进行值的比较。 类型转换 有一定基础的开发中都知道， 在 JavaScript 中使用相等运算符，会进行类型转换， 举个例子： '1' == 1// truetrue == 1// true 类型转换，在开发上，有时候会带给我们一些便利。 例如少写几句代码：） 但类型转换也会隐藏陷阱，就像下面的例子： '0' == 0// true !!'0' == 0// false 假设字符串 0 跟 数字 0 均使用变量， 就会写出非常不直观，不符合直觉的代码： a == b // true !!a == b // false 当然，如果我们使用了 === 全等运算符，就可以避免掉坑啦。 所以，在日常工作中，要多使用 === 哦。 SAMEVALUE 与 SAMEVALUEZERO SameValue 与 SameValueZero 会被成对提及的内容。 这两个玩意是用来做什么的呢？

前言 在小程序 textarea 组件上展示一个模态弹窗组件，会发现 textarea 中输入的文字内容，会直接穿透模态弹窗显示在最上面，而且还能点击输入文字。 限制 小程序 textarea 是由客户端创建的原生组件，由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制： * 原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 * 后插入的原生组件可以覆盖之前的原生组件。 * 原生组件还无法在 picker-view [https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html] 中使用。 * 基础库 2.4.4 以下版本，原生组件不支持在 scroll-view [https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html] 、 swiper

前言 webpack提倡一切皆模块，所有类型的文件都可以经过文件加载器处理变成我们可加载的模块，那么这个文件加载器便是loader。 那么我们如何开发一个webpack loader呢，让我们一起探索探索吧~ 一、LOADER执行顺序 在开发loader之前，我们先了解一下webpack loader的执行顺序。 webpack是支持loader的链式调用的，即一个文件可以经多个loader处理。当一个文件使用多个loader处理时，他的处理顺序是倒序，即传入loader数组的从右到左执行。 例如,对于scss文件，我们的配置如下，那么它的执行顺序是sass-loader -》 css-loader -》 postcss-loader -》style-loader： module: { rules: [ { test: /\.scss|\.css/, use: [ 'style-loader', { loader: 'css-loader',

这篇分析，可能微信的同学来写会更合适。这里只是做了次体验，记录体验中遇到的问题以及一些想法。 简介 kbone 主要提供了编写 web 端代码，编译到小程序端的能力。 web 端采用的框架是 vue ，然后提供一个适配层在小程序端适配 web 端代码。详细介绍参考： https://github.com/wechat-miniprogram/kbone/blob/develop/README.md [https://github.com/wechat-miniprogram/kbone/blob/develop/README.md] 原理 BUILD阶段 kbone 提供了一个 webpack 插件，该插件在 vueLoaderPlugin 处理后继续处理 chunk ，添加小程序端特定方法的封装，以及 window 和 document 的注入，小程序端配置的注入。 RUNTIME阶段

前言 树形组件的需求，很多人遇到都觉得头疼、逻辑复杂，除了展示之外，还要有增删该查的逻辑。一般树形组件具有多个层级，如果当前层级有下一个层级，会有像 children、list 等属性，数据结构一般就是 const tree = [ { name: 'a', id: 1, }, { name: 'b', id: 2, children: [ { name: 'c', id: 3 } ] }, ] 界面大概就是这种： [https://user-gold-cdn.xitu.io/2019/7/21/16c13247c92936fa?w=908&amp;h=502&amp;f=png&amp;s=108344]

在企鹅辅导品牌页中，我们需要实现一个动画如下： 页面滚动到动画区域，播放动画, 对应动画部分如下： 帧动画当前的实现有以下几种方式： 1. GIF 动画 大家比较熟悉的图片格式 1. lottie 1. APNG (Animated Portable Network Graphics) 基于 PNG 格式扩展的一种动画格式，增加了对动画图像的支持，其诞生是为了替代老旧的 GIF 格式，但部分浏览器不支持，需要考虑兼容； 1. HTML video 元素