Month: 7月 2020

Web Components 是什么?它为什么对我们这么重要?

摘要

先看一看未来的 WebComponent 标准,再简单了解怎么写 WebComponents,最后说说它的重要性。

简介

这篇文章简单介绍 WebComponent 标准,介绍哪些浏览器已经开始支持 WebComponents,讨论 WebComponents 能解决什么问题,以及它对 web 开发的重要性。你可以了解到如何利用 Vanilla javascript 编写一个简单的 WebComponent,我还会针对它的潜在优势分享我自己的一些拙见。…

                

还在看那些老掉牙的性能优化文章么?这些最新性能指标了解下

性能优化相关的文章其实网上挺多,但是大部分都是在讲如何优化性能,也就是讲方法论。但是在实际工作中,如何量化性能优化也是相当重要的一环。今天本文会介绍谷歌提倡的七个用户体验指标(也可以认为是性能指标),每个指标分别根据以下几点讲解:

  1. 指标本身的作用、测量、推荐时间区间等
  2. 如何指标进行优化,该内容会在文末统一讲解

FP & FCP

首次绘制,FP(First Paint),这个指标用于记录页面第一次绘制像素的时间。

首次内容绘制,FCP(First Contentful Paint),这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。

这两个指标看起来大同小异,但是 FP 发生的时间一定小于等于 FCP,如下图是掘金的指标:

    

玩转前端 Video 播放器

Web 开发者们一直以来想在 Web 中使用音频和视频,但早些时候,传统的 Web 技术不能够在 Web 中嵌入音频和视频,所以一些像 Flash、Silverlight 的专利技术在处理这些内容上变得很受欢迎。

这些技术能够正常的工作,但是却有着一系列的问题,包括无法很好的支持 HTML/CSS 特性、安全问题,以及可行性问题。

幸运的是,当 HTML5 标准公布后,其中包含许多的新特性,包括 <video><audio> 标签,以及一些 JavaScript APIs 用于对其进行控制。随着通信技术和网络技术的不断发展,目前音视频已经成为大家生活中不可或缺的一部分。此外,伴随着 5G 技术的慢慢普及,实时音视频领域还会有更大的想象空间。

接下来本文将从八个方面入手,全方位带你一起探索前端 Video 播放器和主流的流媒体技术。阅读完本文,你将了解以下内容:

ffmpeg逐行扫描转隔行扫描

摘要

none

命令参数

ffmpeg -i input -aspect 16:9 -c:v mpeg2video -b:v 4000k -minrate 4000k -maxrate 4000k -bufsize 2000k -dc 9 -flags +ilme+ildct -alternate_scan 1 -top 0 output
Bash

其实主要的就是如下参数:

-flags +ilme+ildct -alternate_scan 1 -top 0
Bash

alternate_scan使用隔行转码,top不一般没有什么要求的话頂场优先就可以了。

隔行转逐行