Taobao Fed | 淘宝前端开发团队

淘宝前端开发团队

Latest articles

Web端H.265播放器研发解密

音视频编解码对于前端工程师是一个比较少涉足的领域,涉及到流媒体技术中的文本、图形、图像、音频和视频多种理论知识的学习,才能够应用到具体实践中,我们自研web播放器并支持h.265解码,在码率优化的大背景下(保持画质不变情况下,应用图像增强、roi区域检测、智能场景分类和h265编解码等多种技术能力,将码流降低50%。达到减少带宽成本,提升视频服务QoE的目的),真正做到了h265解码播放的全域覆盖。本文主要分享了我们基于WebAssembly实现H.265格式的解封装、解码和播放。 背景H.265又称HEVC(全称High Efficiency Video Coding,高效率视频编码),是ITU-T H.264/MPEG-4 AVC标准的继任者。相比H.264,H.265拥有更高的压缩率,也就意味着同样码率(又称比特率是指每秒传送的比特(bit)数。单位为bps(Bit...

淘宝前端团队 2019 年实习生内部推荐通道已开启

随着阿里巴巴 2019 年实习生招聘的启动,淘宝前端团队(Taobao FED)实习生内部推荐也已经拉开序幕。这是一个有着十多年历史与荣耀的团队,相信你已经从各个渠道听到过我们的名字。选择一家公司进行实习,对于大学生来说是一个关键的抉择;找到有潜力的实习生进行培养,对于一个团队来说更是求贤若渴。 在这里,请让我向你介绍我的小伙伴们以及我们在做的一些事情。如果你感到有兴趣,并且认为自己足够优秀,不要吝啬你的才华,直接邮件简历给他们,也许他们将会成为你职业生涯的第一个老板,以及你全新人生阶段的良师益友。 他们是前端各个领域的执牛耳者。你可以选择跟随这些业界大牛学习和成长: 从 Node.js 应用框架到全链路监控以及故障演练,从基于 TypeScript 的 IoC 容器到 Serverless...

imgcook 体验版发布

imgcook 体验版发布经过淘宝前端团队内部近一年半的打磨,imgcook 迎来了社区体验版发布,欢迎试用~。 imgcook 是什么?imgcook 是专注以各种图像(Sketch/PSD/静态图片)为原材料烹饪的匠心大厨,通过智能化手段将各种图像一键生成可维护的 UI 视图代码,期望此 imgcook (图像大厨) 未来能够成为一位 P5 级别的重构工程师,能切实提高开发的开发效率,并助力开发、设计师、测试的高效协作,我们期望做到: 100% 还原【设计师再也不用还原走查了】 100% 兼容【测试再也不用适配样式了】 一键上线【开发再也不用切图写样式了】 愿景:能够高度还原各种图像,释放 UI 开发生产力,让你关注更具挑战性的事情! 为什么做 imgcook?对于 UI...

WebGL 纹理详解

WebGL 纹理详解Buffer(数据缓冲区)与 Texture(纹理)是 WebGL 程序的两大数据来源。Buffer 可以通过 ArrayBuffer 或更语义化的 TypedArray 来构造;而 Texture 在大多数情况下,是通过 Image 对象来构造的。在构造和使用 Texture 的过程中,需要确定很多选项来以不同的方式构造 Texture;这些选项之间有着各种各样的关系,或互相依赖,或互相排斥,或互相影响。最近,我又重新梳理了一遍我所用到的 WebGL 纹理各种参数的影响,稍作整理,以防遗忘。 为此,我专门编写了一个 Demo,如下所示。Demo 页的右上角有一个使用 dat.GUI 生成的控件,其中列举了影响纹理的一些选项。这篇文章将逐个讨论这些选项的作用和相互关系。...

前端架构杂思录:议 Function Component 与 Hooks

最近团队里 @大果 分享了 React Hooks,也尝试讨论下 Function Component 与 React Hooks,技术的发展路径总是逐步降低其门槛,简单从轻量级角度我们做一个排序: 1createClass Component > Class Component > Function Component技术上 Class Component 是可以完全代替 createClass Component 方式,所以已经是废弃不推荐使用,那是不是 Function Component 也可以完全替代 Class Component?在没有 Hooks 之前显然是无法做到的。 123function Hey(props, context) { return <span>Good...

Atag - Web Components 最佳实践

引子上一次社区中谈论起 Web Components 已经可以追溯到三四年前了,彼时 Web Components 仍处于不稳定的草案阶段,Polymer 的出世使大家似乎看到了新一代的前端技术,但直到今天,在今年五月 Google I/O 发布 Polymer 3 之后, Web Components 的规模化应用才看似成为了可能。 过去一段时间,我一直在使用 Web Components 构建淘宝小程序的 基础组件 Atag。MDN 上对 Web Components 这个名词的解释是 Web Components是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。 我们从中提取几个关键字:可重用 定制元素 封装 这些特性刚好能满足可复用组件的需求,更重要的是,这是由...

Workbox 3:Service Worker 可以如此简单

如果你追求极致的 Web 体验,你一定在站点中使用过 PWA,也一定面临过在编写 Service Worker 代码时的犹豫不决,因为 Service Worker 太重要了,一旦注册在用户的浏览器,全站的请求都会被 Service Worker 控制,一不留神,小问题也成了大问题了。不过到了现在有了 Workbox 3,一切关于 Service Worker 的担心都不再是问题。 科普 Service Worker如果你已经熟悉 Service Worker,可以跳过此段。 Service Worker 是 PWA 中重要的一部分,它是一个网站安插在用户浏览器中的大脑。Service Worker 是这样被注册在页面上的: 123if ('serviceWorker' in navigator)...

基于 BindingX 的富交互解决方案

基于 BindingX 的富交互解决方案BindingX 官网: https://alibaba.github.io/bindingx/BindingX 项目地址: https://github.com/alibaba/bindingx 一. 背景在 Weex 环境下实现一些复杂的手势交互效果可能会产生卡顿,这是因为每次手势交互都会产生两次 JS-native 通信。第一次是 native call JS,将手势事件传递到 JS 层交给前端处理,当 JS 层接收到回调后,会产生第二次通信,JS call native,用来驱动界面变化。与此同时,手势回调事件触发的频率是非常高的,频繁通信带来的时间成本很可能导致界面无法在 16ms 中完成绘制,因而产生卡顿。 我们提出了 Expression...

活用 Shader,让你的页面更小,更炫,更快

可编程着色器(shader)是运行在 GPU 中的程序,是现代图形渲染技术的基础。shader 赋予了开发者「逐像素着色」的能力。桌面/移动设备的图形程序 API 诸如 OpenGL,OpenGL ES,DirectX 以及新一代的 Vulkan,shader 都是重中之重,核心中的核心。 WebGL 的出现,使得在浏览器环境中渲染 3D 场景变得轻而易举。但是 WebGL 和 shader 不仅可以用来渲染 3D 场景,还可以做一些其他酷酷的事情。前两天,我用 shader 技术改造 / 复刻了之前开发的一个业务页面,颇有心得和启发,不妨记录下来。 广告:在 GCanvas 的帮助下,前端开发可以在 Weex,RN 等 Hybrid 环境中使用本文中用到的技术。详情见 GCanvas。...

Rax 系列教程(长列表)

引子Rax 提供的长列表标签有很多,在什么场景下使用什么列表组件,怎样选择列表组件性能会更好,这些问题可能会给刚接触 Rax 的同学带来困扰。本文结合 Rax 0.5 发布版本对列表能力进行一次详细的梳理。 如何让页面滚动在开始正题之前先说说为什么要有长列表的概念,以及如何让页面可以滚动。 传统的 Web 页面天生在浏览器里就是可以滚动的,我们额外引入一个滚动容器的概念好像比较多余。但当我们做跨容器开发时,这一层概念就变的有意义。native 的页面天生不可滚动,需要借助滚动容器的滚动能力,比如 iOS 中的 UITableView、Android 中的 RecyclerView,通过组件的方式让页面的部分内容可以滚动。 写好了一个页面发现在 Weex 上是白屏,很可能就是滚动容器没有撑开。真实需求中我们往往想要整个页面滚动,首先要解决的就是屏幕高度问题。下面这段是比较常用的页面占满全屏的手段。...

Discover, share and read the best on the web

Subscribe to RSS Feeds, Blogs, Podcasts, Twitter searches, Facebook pages, even Email Newsletters! Get unfiltered news feeds or filter them to your liking.

Get Inoreader
Inoreader - Subscribe to RSS Feeds, Blogs, Podcasts, Twitter searches, Facebook pages, even Email Newsletters!