引入 Brotli 进行 Web Server的压缩

目前我们大多数网站都是启用的 gzip 来进行 资源传输的压缩,这有利于我们更加快速的访问我们的网站;但是除了 gzip 外,我们或许还有别的选项,而且性能会更好,比如 Facebook 便是启用的 Brotli 算法; Brotli Brotli 最初发布于2015年,用于网络字体的离线压缩。Google软件工程师在2015年9月发布了包含通用无损数据压缩的Brotli增强版本,特别侧重于HTTP压缩。新版本还展现了跨平台的性能改进,以及减少解码所需的内存。 与常见的通用压缩算法不同,Brotli使用一个预定义的120千字节字典。该字典包含超过13000个常用单词、 详情 »

修复 IE8 webpack 兼容性的问题

由于需要支持 IE8 ,因此我们直接使用 babel 转换出来的 es5 代码在 IE8 上并不能很好的运行,而且修复这个问题会让大家 头痛 ヽ(`Д´)ノ。 大概这里简单说下解决问题的一些关键方法吧。 es3ify-loader es3ify-loader 大概是第一个让你看到希望的。你需要在 postLoaders 或者放在 babel 转换前。 module: { loaders: [ { test: 详情 »

Media Source 系列 - 结合 range 控制媒体请求缓存大小

上一篇写了 Media Source 系列 - 播放 m3u8 文件 , 写了使用 MSE 来播放一个包含分片内容的资源。同样除此之外,我们可以借助 MSE 来进行更加 细粒 的缓存控制调度。 HTTP Range HTTP Range ,HTTP 协议范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件, 详情 »

Media Source 系列 - 播放 m3u8 文件

前一篇文章 《使用 Media Source Extensions 播放视频》 我们大致写了 Media Source Extensions, MSE 的基本介绍和使用。这篇文章是在之前基础上完成的,文章将实现如何借助 MSE 来播放流文件比如 m3u8 或者 dash。 自己之前在知乎上回答过这个问题 有支持M3U8格式的HTML5播放器吗? 有简单说一些基本实现思路,但是没有贴实现的代码,因为已经有很多前端开源的播放器了比如 hls.js, 详情 »

使用 mux.js 播放 .ts 文件

使用 mux.js 播放 .ts 文件 本篇大概是Media Source 系列 - 播放 m3u8 文件 的一篇补充。这里大概需要涉及一些视频的编码和解码方面的知识补充。 mux.js 是 videojs 团队出品的一款轻量级前端工具,用于嗅探或者修改 video 的视频的格式: Lightweight utilities for 详情 »

使用 concurrently 运行多个 npm 命令

我们平时可能需要同时在一个 npm scripts 中运行多个 npm 命令。我们第一时间想到了 && 。当然大多数情况我们是可以完成既定的需求,因为其实这些都是在同个进程中,如果我们需要运行的命令需要拿到两个进程的的输出,比如我们同时启动两个 server ,不同端口号。 在日常我们经常会遇到一个用于静态资源的服务器,一个是 业务的 Web 服务器,我们可以使用 webpack 的 middleware 来实现,我们也可以单独拆分。 详情 »

Web前端年后跳槽面试复习指南

很多童鞋可能年后有自己的一些计划,比如换份工作环境,比如对职业目标有了新的打算。当然面试这一关不得不过,大概又不可能系统性的复习,这里罗列一些 重点 面试的知识点和文章,方便大家重温一些知识,祝大家心愿达成; HTML CSS 浏览器渲染 浏览器的渲染流程,这一块几乎很多人都会问,如果你是个初级前端,可能这个问题,你大致能够了解道出一些就好,但是如果你是个高级前端,这一块你至少得随时画出这些图,这些有助于你去了解性能优化的点: 这里安利两篇文章,非常详细的讲解了渲染的流程: How browsers work 详情 »

Mp4 转换为 Hls 或者 Dash 教程

最近接触流媒体的一些东西,大概这里安利两个命令行工具用于对 mp4 文件的操作; Ffmpeg ffmpeg 是一款非常出名的命令行工具,你可以用它进行格式转换(初中生的我只知道格式工厂),甚至对流进行编码; $ ffmpeg -i input.mp4 output.avi 除此之外你也可以使用它来进行媒体资源基本信息的查看,比如: $ ffmpeg -i videoplayback.mp4 你可以看到命令行的输出: 你可以看到视频的流的一些信息,比如分辨率,码率, 详情 »

谷歌开源 H5 流媒体播放器 shaka-player 初探

近些年,随着抖音或者快手大火,视频也成了前端比较热衷的领域,无论是最早的直播,还是现在的短视频,我们都离不开 Video ,我们也需要一个足够健壮的 HTML5 播放器来进行视频内容的播放。 Shaka Player 是 谷歌公司对外开源的一款 JavaScript 类库: Shaka Player is an open-source JavaScript library for adaptive media. 详情 »

Media Source 系列 - 使用 Media Source Extensions 播放视频

终于有时间写关于 Media Source Extensions (后面简称 MSE) 。Media Source Extensions 是在 2016年成为推荐的的 Html5 API。 This specification extends HTMLMediaElement [HTML51] to allow JavaScript to generate media streams for 详情 »