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不一般没有什么要求的话頂场优先就可以了。

隔行转逐行

    

Https优化方案(优化证书验证篇–OCSP)

一句话概括就是:OCSP 是server 把自己的站点证书和中间证书以及根证书打包一起下发到客户端,省去客户端查询的过程。

OCSP实时查询会增加客户端的性能开销。因此,可以考虑通过OCSP stapling的方案来解决:OCSP stapling是一种允许在TLS握手中包含吊销信息的协议功能,启用OCSP stapling后,服务端可以代替客户端完成证书吊销状态的检测,并将全部信息在握手过程中返回给客户端。增加的握手信息大小在1KB以内,但省去了用户代理独立验证吊销状态的时间。
启用OCSP stapling的方式有很多种,比如在线校验。此方式需要支持服务器能够主动访问证书校验服务器才能生效,并且在每次重启nginx的时候会主动请求一次,如果网络不通会导致nginx启动缓慢。…