【译】预加载视频实现快速播放

作者:François Beaufort | 译:Vicky·Ye 原文地址:https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload 在以往的项目中,只要有视频的存在,那么就会是个让人费神的项目。且不说对它的适配兼容问题,只说它的加载问题就能说上半天了。本文作者从视频预加载的各种方法入手,讨论了如何让视频播放速度更快的解决办法。 众所周知,能更快速的播放视频意味着会有更的多人观看到你的视频。在本文中,我将探索通过用户主动触发预加载资源来加速视频播放的技术。 注意: 除非另有说明,否则本文也适用于audio元素。 视频地址:https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload 致谢:版权所有Blender Foundation | www.blender.org 。 TL; DR 这很棒… 但… 视频preload属性 易用于Web服务器上托管的唯一文件。 浏览器可能完全忽略该属性。 HTML文档完全加载和解析后,资源才开始获取。 当应用程使用MSE扩展媒体时,MSE会忽略媒体元素上的preload属性。 Link preload 强制浏览器发出视频资源请求,但不会阻止文档的onload事件。 HTTP Range请求不兼容。 兼容MSE和文档片断。 获取完整资源时,文件只能是小型媒体(< 5MB)。 手动缓冲 完全控制 复杂的错误需要网页来处理。 视频预加载(preload)属性 如果视频资源是托管在Web服务器上的唯一文件,您可能会使用 video 标签的 preload属性来提示浏览器预加载的信息或内容量。 但这意味着Media Source Extensions(MSE)与 preload 将不兼容。 资源的获取将仅在HTML文档初始加载和解析完成后启动(例如, DOMContentLoaded事件已触发),而实际上在获取资源时将触发完全不同的 window.onload事件。 将 preload属性设置为 metadata表示用户不想马上加载视频,但是需要预先获取其元数据(尺寸,轨道列表,时长等)。 请注意,从Chrome 64开始, preload的默认值是 metadata(以前是 […]

【译】关于GraphQL,你需要知道这些

作者:Weblab Technology | 译:kongfanjia 原文地址: https://medium.com/@weblab_tech/graphql-everything-you-need-to-know-58756ff253d8 【译者注:链接序号对应下面索引列表,另外可以点击阅读原文查看详细的链接文章】 在你已经构建并使用了 REST API 很长一段时间后,最近可能听说了一个 API 技术领域的的新星 —— GraphQL。有些人说它很好,但另一些人并不这么认为。现在,我相信你一定会好奇 GraphQL 到底是什么,它与传统方法有什么不同? 本文的主要目的是强调 GraphQL 的主要特性并讨论这一特定 API 规范的主要优点和缺点。 GraphQL 通常被描述为一种前端导向的 API 技术,因为它允许前端开发人员用比以前更简单的方式请求数据。Facebook 推出的这种查询语言的目的是以直观和可调的格式来制定客户端应用程序,来描绘其数据的先决条件及交互。最棒的一点是该语言不依赖于任何特定的数据库管理系统,并且被我们当前使用的数据格式和编码方式所支持。 传统 REST 的一个基本问题是客户端无法个性化请求数据集。除此之外,运行和控制多个接口是另一个难点,因为客户端总是需要从多个接口请求数据。 在搭建一个 GraphQL 服务器时,最重要的是用单一的 URL 入口来完成数据获取和更改。因此,用户可以通过传送一个说明所需内容的查询字符串来从服务器请求数据集。 在我们继续之前,在这里您可以找到我们的个人经验。 https://github.com/weblab-technology/graphql-example GraphQL VS REST REST 和 GraphQL 的相似之处是它们都用于构建 API 并且通过 HTTP 进行管理。 就差异而言,REST 主要是一个以网络为中心的软件的结构概念,没有规范,也不获取明确的工具集。它更专注于 API 的稳定耐用性而非最优的性能。 而 GraphQL 是一种设计用于通过 […]

【译】React 优化:虚拟 DOM 详解

作者:Alexey Ivanov、 Andy Barnov | 译:大辉 原文地址:https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained 本文将带你学习 React 的虚拟 DOM,并应用这些知识来加速你的应用程序。在这个对框架内部进行全面友好的初步介绍中,我们将揭开JSX的神秘面纱,向您展示React如何做出渲染决策,解释如何找到瓶颈,并分享一些提示以避免常见错误。 React 持续领跑前端世界并且没有下降迹象的原因之一,就是其平易近人的学习曲线。在用 JSX 和 “State vs Props” 的概念武装你的大脑之后,你就可以开始开发了。 但要真正掌握 React,你需要有 React 思想。本文试着从这个方面来帮助你。下面通过我们其中的一个的项目 React table 来了解一下: 如果你已经熟悉 React 的工作方式,可以直接跳至“优化:挂载/卸载”这节来继续阅读。 (图中是一个在 eBay 的业务中拥有庞大数据的 React table) 通过这上百行动态的并且可过滤的数据行,来理解框架的细节对于保证用户的流畅体验是至关重要。 当程序出错的时候,你很容易感受到,输入文字变得卡顿,复选框检查都需要一秒钟的时间,模态框也很难显示出来。 为了解决这些问题,我们这篇文章要涵盖 React 组件从定义到在页面上呈现(然后更新)的整个生命周期。系好安全带,我们要发车了。 JSX 的原理 在前端圈中称为“转译”的过程,其实用“汇编”来描述是更正确的术语。 React 开发者推荐你使用一种混合了 HTML 和 JavaScript 的语法,即 JSX 来编写你的组件。但浏览器对 JSX 及其语法并不理解。浏览器只理解 JavaScript,所以 JSX 必须转换为 […]

Hello PWA

作者:永无止晋 2016年 Google 在 I/O 大会上提出一个 Next Web Generation 的概念 —— PWA 横空出世,2017年始开始流行,目前虽未完全成熟,但越来越火爆,可以预见未来会广为流行。你还在等什么? 一、Hello PWA PWA(Progressive Web App)[1], 渐进式 WEB 应用,是提升 Web App 的体验的一种方法,给用户原生应用的体验。PWA 可以通过 Service Worker, Manifest 等新技术让站点具备离线可用、添加到桌面、实时消息提醒等功能,从功能和体验上无限接近原生 App。 1.1. 背景 自1990年万维网之父-蒂莫西·约翰·“蒂姆”·伯纳·李爵士,创建了 HTTP、HTML 和 WorldWideWeb (全世界第一个网页浏览器)以来,Web 技术和影响力在以惊人的速度增长。HTML5,CSS3,Webpack,React,VUE,Babel,SPA 等技术的成熟与发展仿佛让 Web 进入了百家争鸣的春秋时期,Web应用能做的事情越来越多,大家对web的希望也越来越高。 但随着移动时代的到来,web 应用因为不能离线访问,没有快捷入口和页面频繁卡顿等开始失宠。除了原生应用因离线能力,瞬时加载和可靠性强等优点爆炸性崛起外,Hybrid ,React Native 等 APP 开发模式似乎也有点如日中天的“赶脚”。作为一名 Web 前端开发工程师已经瑟瑟发抖,你呢? 莫慌,老大哥 Google 的工程师们早就“抖”完了,并在2015年提出2016年推出 PWA ,号称 […]

Webpack打包实用优化方案

作者:汪楠 简介: Webpack是当下最热门的前端资源模块化管理和打包工具。如何提升打包效率,成为了大家关注的点之一。下文将分享我们开发到上线的实用优化方案。 目前最火的打包工具莫过于 Webpack 了,关于 Webpack 的优化方案,网上有很多文章可以供大家参考。查阅前人的资料,总结自己在项目中遇到的问题,最终得出一些比较实用的优化方案,本文将与大家一一分享。既然是打包优化,那么我们需要时刻关注以下几点: 减少编译时间 减少编译输出文件大小 提高页面性能 Webpack3.0 的 Scope Hoisting (作用域提升) Webpack3.0 最大的一个新功能就是 ScopeHoisting (作用域提升)。曾经的 Webpack 是将每一个模块(每一个被 import 或者 require 的代码) bundle 到每一个独立的闭包函数里。这会导致 bundle 的文件里,每一个模块外层都会有一些特殊的闭包包装,导致文件增大,同时它也使得编译后的 js 文件在浏览器中的执行效率降低。 虽然,理论知识已经了解,但我们还是用实际操作来验证一下: 开启 ScopeHoisting 非常简单,因为 webpack 已经内置了这个功能,在插件入口处新增 new webpack.optimize.ModuleConcatenationPlugin()。

执行编译后,结果如下: bundle.js 大小是3.03KB 我们把 new webpack.optimize.ModuleConcatenationPlugin() 打开,编译结果如下: 对比两个的区别大家可以发现,在 bundle.js 中 Webpack2.0 比 Webpack3.0 多了以下的代码: […]

© 2018 JDC. All Rights Reserved.