-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 114 KB
/
index.html
1
<!DOCTYPE html><html lang="zh-cn"><head><meta name="generator" content="Hexo 3.9.0"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="theme-color" content="#f8f5ec"><meta name="msapplication-navbutton-color" content="#f8f5ec"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec"><meta name="description" content="FredTsang's Blog"><meta property="og:description" content="FredTsang's Blog"><meta name="keywords" content="FredZeng,FredTsang,Blog,TF5,TECH F5VE"><link rel="alternate" href="/atom.xml" title="FredTsang"><link rel="canonical" href="https://fredzeng.github.io/"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/css/style.css?v="><script id="baidu_push">!function(){var t=document.createElement("script"),e=window.location.protocol.split(":")[0];t.src="https"===e?"https://zz.bdstatic.com/linksubmit/push.js":"http://push.zhanzhang.baidu.com/push.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}()</script><script>window.config={leancloud:"",toc:!0,fancybox:"",pjax:"",latex:""}</script><title>FredTsang</title></head><body><div id="mobile-navbar" class="mobile-navbar"><div class="mobile-header-logo"> <a href="/." class="logo">FredTsang</a></div><div class="mobile-navbar-icon"><span></span><span></span><span></span></div></div><nav id="mobile-menu" class="mobile-menu slideout-menu"><ul class="mobile-menu-list"><a href="/"><li class="mobile-menu-item">Home</li></a><a href="/archives/"><li class="mobile-menu-item">Archives</li></a><a href="/categories/"><li class="mobile-menu-item">Categories</li></a></ul></nav><div class="container" id="mobile-panel"><header id="header" class="header"><div class="logo-wrapper"> <a href="/." class="logo">FredTsang</a></div><nav class="site-navbar"><ul id="menu" class="menu"><li class="menu-item"> <a class="menu-item-link" href="/">Home</a></li><li class="menu-item"> <a class="menu-item-link" href="/archives/">Archives</a></li><li class="menu-item"> <a class="menu-item-link" href="/categories/">Categories</a></li></ul></nav></header><main id="main" class="main"><div class="content-wrapper"><div id="content" class="content"><section id="posts" class="posts"><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2024/07/12/media/mobile/">移动端音视频开发踩过的坑</a></h1><div class="post-meta"> <span class="post-time">2024-07-12</span></div></header><div class="post-content"><h2 id="1、DOM-同时监听-touchend-和-mousedown-会依次触发-touchend-gt-mousedown"><a href="#1、DOM-同时监听-touchend-和-mousedown-会依次触发-touchend-gt-mousedown" class="headerlink" title="1、DOM 同时监听 touchend 和 mousedown 会依次触发 touchend -> mousedown"></a>1、DOM 同时监听 <code>touchend</code> 和 <code>mousedown</code> 会依次触发 <code>touchend -> mousedown</code></h2><p>最小复现 Demo:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"width: 100px; height: 100px; background-color: red;"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">'div'</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="javascript"> <span class="function"><span class="keyword">function</span> <span class="title">onClick</span>(<span class="params">evt</span>) </span>{</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(evt.type);</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"><span class="javascript"> div.addEventListener(<span class="string">'mousedown'</span>, onClick);</span></span><br><span class="line"><span class="javascript"> div.addEventListener(<span class="string">'touchend'</span>, onClick);</span></span><br><span class="line"> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure><p>在最开始的设想中，是希望 <code><div></code> 在 PC 端点击时，仅触发 <code>mousedown</code> 的回调；在移动端点击时，仅触发 <code>touchend</code> 的回调；</p><p>但实际上，在移动端，如果 <code><div></code> 同时监听了 <code>touchend</code> 和 <code>mousedown</code> 事件，点击时会依次执行 <code>touchend</code> 和 <code>mousedown</code> 的回调函数；</p><p>想要在移动端点击时<strong>仅</strong>触发 <code>touchend</code>，我们需要在 <code>touchend</code> 的回调中调用 <code>e.preventDefault()</code>，来阻止浏览器的默认行为:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">onClick</span>(<span class="params">evt</span>) </span>{</span><br><span class="line"> evt.preventDefault();</span><br><span class="line"> <span class="built_in">console</span>.log(evt.type);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">div.addEventListener(<span class="string">'touchend'</span>, onClick);</span><br></pre></td></tr></table></figure><h2 id="2、HTMLMediaElement-fastSeek-和-HTMLMediaElement-currentTime-精度不一致"><a href="#2、HTMLMediaElement-fastSeek-和-HTMLMediaElement-currentTime-精度不一致" class="headerlink" title="2、HTMLMediaElement.fastSeek() 和 HTMLMediaElement.currentTime 精度不一致"></a>2、<code>HTMLMediaElement.fastSeek()</code> 和 <code>HTMLMediaElement.currentTime</code> 精度不一致</h2><p>在使用 <code><video></code> 播放点播视频时，我们可以通过 <code>HTMLMediaElement.currentTime</code> 来改变播放进度，其使用方式一般为：<code>video.currentTime = 10.5</code>；</p><p>除此之外，Safari 和 Firefox 还提供了 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/fastSeek" target="_blank" rel="noopener">HTMLMediaElement.fastSeek()</a> 方式来快速跳转进度，其使用方式为：<code>video.fastSeek(10.5)</code>；</p><p><code>HTMLMediaElement.fastSeek()</code> 和 <code>HTMLMediaElement.currentTime</code> 两者的区别在于：<code>HTMLMediaElement.fastSeek()</code> 在跳转进度时并不是严格跳转到所设置的时间点（该 API 为了能快速改变播放进度，跳转的时候可能会丢失一些精度），如：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">video.addEventListener(<span class="string">'seeked'</span>, () => {</span><br><span class="line"> <span class="built_in">console</span>.log(video.currentTime) <span class="comment">// 跳转后的 currentTime 可能是 10.000</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">video.fastSeek(<span class="number">10.320</span>); <span class="comment">// 期望跳到 10.320</span></span><br></pre></td></tr></table></figure><p>关于 <code>HTMLMediaElement.fastSeek()</code> 的跳转精度问题，MDN 文档中是这样描述的：</p><blockquote><p>The <code>HTMLMediaElement.fastSeek()</code> method quickly seeks the media to the new time with <strong>precision tradeoff</strong>.</p></blockquote><p><code>HTMLMediaElement.fastSeek()</code> 并不是我们常用的改变播放进度的方式，之所以提到它，是因为在 video.js 的实现中，如果是在 Safari 下拖动播放器进度条，<a href="https://github.com/videojs/video.js/blob/v8.16.1/src/js/tech/html5.js#L561" target="_blank" rel="noopener">Html5 Tech</a> 就会使用 <code>HTMLMediaElement.fastSeek()</code> 方式来设置播放进度；</p><p>正如上面的例子所示，使用 <code>HTMLMediaElement.fastSeek()</code> 设置播放进度，由于精度可能会被丢弃，播放器的进度条在显示的时候可能会出现”<strong>回跳</strong>“的现象。</p><h2 id="3、Safari-Element-级别的自动播放策略"><a href="#3、Safari-Element-级别的自动播放策略" class="headerlink" title="3、Safari - Element 级别的自动播放策略"></a>3、Safari - Element 级别的自动播放策略</h2><p>原文：<a href="https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/" target="_blank" rel="noopener">https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/</a></p><blockquote><p>Auto-play restrictions are granted on a per-element basis. Change the source of the media element instead of creating multiple media elements if you want to play multiple videos back to back (or play a pre-roll ad with sound, followed by the main video).</p></blockquote><p>我们可能知道，想要在 Chrome 有声音的去自动播放一个有音轨的视频，一般要求用户先和页面进行交互（比如用户点击过页面），然后我们才可以愉快的调用 <code>video.play()</code>；</p><p>而且，只要用户和页面（Document）交互过，后续我们动态创建的媒体元素（<code><video autoplay></code> 和 <code><audio autoplay></code>）就都可以自动播放；</p><p>因此，我们可以认为，Chrome 的这种交互后才能自动播放的策略是页面（Document）级别的 —— 只要和页面交互过，后续该页面的所有媒体元素就都可以自动播放；</p><p>然而，Safari 的自动播放策略则是针对<strong>单个媒体元素</strong>生效的（元素级别）：</p><ul><li>用户和一个媒体元素有过交互后，该媒体元素后续无论如何改变播放源（src），都可以自动播放</li><li>但如果再新创建一个媒体元素，该媒体元素还是无法自动播放，仍需要用户交互</li></ul><p>这就意味着，如果我们想要在 Safari 中连续/切换播放多个视频时保持自动播放，我们就应该尽可能复用同一个媒体元素（<code><video></code>、<code><audio></code>），而不是不断去替换媒体元素 ———— 在使用 React 或 Vue 开发时我们应该注意这一点。</p><h2 id="4、iOS-Safari-不支持设置音量"><a href="#4、iOS-Safari-不支持设置音量" class="headerlink" title="4、iOS Safari 不支持设置音量"></a>4、iOS Safari 不支持设置音量</h2><p>在 iOS Safari 中是无法通过 <code>HTMLMediaElement.volume</code> 来设置音量大小的，该表现在 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume" target="_blank" rel="noopener">MDN文档</a> 中也有所描述：</p><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/media-volume.png" loading="lazy"></p><blockquote><p>iOS Safari 通过 <code>HTMLMediaElement.volume</code> 设置的音量大小并不会在媒体元素上生效</p><p>iOS Safari 通过 <code>HTMLMediaElement.volume</code> 获取到的音量大小值永远是 1</p></blockquote><p>在 iOS Safari 中，我们能修改的是 <code>HTMLMediaElement.muted</code>，切换媒体元素的静音状态。</p><p>最小复现 Demo（在 iOS 中打开）:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">video</span> <span class="attr">controls</span> <span class="attr">autoplay</span>></span><span class="tag"></<span class="name">video</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span></span><br><span class="line"><span class="javascript"> <span class="keyword">var</span> video = <span class="built_in">document</span>.querySelector(<span class="string">'video'</span>);</span></span><br><span class="line"><span class="javascript"> video.src = <span class="string">''</span>;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript"> video.addEventListener(<span class="string">'play'</span>, () => {</span></span><br><span class="line"><span class="javascript"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span></span><br><span class="line"><span class="javascript"> video.volume = <span class="number">0.2</span>; <span class="comment">// 3s 后尝试将音量大小修改为 0.2</span></span></span><br><span class="line"> }, 3000);</span><br><span class="line"></span><br><span class="line"><span class="javascript"> setTimeout(<span class="function"><span class="params">()</span> =></span> {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">console</span>.log(<span class="string">'volume:'</span>, video.volume); <span class="comment">// 5s 后打印当前音量大小，返回的应该还是 1</span></span></span><br><span class="line"> }, 5000);</span><br><span class="line"> });</span><br><span class="line"> <span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2023/09/26/media/history/">电影发展简史</a></h1><div class="post-meta"> <span class="post-time">2023-09-26</span> <span class="post-category"><a href="/categories/media/">media</a></span></div></header><div class="post-content"><h3 id="在我们的生活中，电影和电视为我们提供了丰富多样的娱乐选择，但我们是否知道它们哪一个更早出现？"><a href="#在我们的生活中，电影和电视为我们提供了丰富多样的娱乐选择，但我们是否知道它们哪一个更早出现？" class="headerlink" title="在我们的生活中，电影和电视为我们提供了丰富多样的娱乐选择，但我们是否知道它们哪一个更早出现？"></a>在我们的生活中，电影和电视为我们提供了丰富多样的娱乐选择，但我们是否知道它们哪一个更早出现？</h3><blockquote><p>电影比电视更早出现。</p></blockquote><p>在1878年，摄影师迈布里奇接受了一项实验委托，拍摄《<strong>运动中的马</strong>》，目的是观察马在奔跑时四只腿是否会同时离开地面；在迈布里奇的帮助下，他利用相机连续拍照技术，将多张照片按时间顺序生成了一条连贯的照片带，最终确定奔跑的马在某个瞬间会有四腿同时离地的状态。这一结论打破了早期的观念，即马在奔跑时至少有一腿接触地面。</p><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/The_Horse_in_Motion.jpeg" loading="lazy"></p><p>在这之后，有人将迈布里奇制作的照片带快速牵动，然后发现照片带中每张静止的马竟然“活”了起来，这件事引起了巨大轰动，并被迅速传开。他的这项研究对于摄影和运动的理解产生了重大影响，被认为是早期电影的先驱之一。</p><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/The_Horse_in_Motion.gif" loading="lazy"></p><p>在1888年，法国发明家路易·普林斯拍摄了现今已知最早的短片——《<a href="https://www.youtube.com/watch?v=F1i40rnpOsA" target="_blank" rel="noopener">朗德海花园场景</a>》，影片时长只有2.11s。</p><h4 id="黑白无声电影"><a href="#黑白无声电影" class="headerlink" title="黑白无声电影"></a>黑白无声电影</h4><p>1895年，兄弟雅克和奥古斯特·卢米埃尔（Lumière brothers）在法国发明了光影放映机，展示了世界上第一部商业化的电影。随后，黑白无声电影开始流行起来，包括乔治·梅利埃斯（Georges Méliès）的幻想电影。</p><p>为了提升观众体验，一些放映会伴随着管弦乐团的演奏家们演出、剧院风琴演奏、现场音效和来自表演人员或者放映员的解读。</p><h4 id="有声电影"><a href="#有声电影" class="headerlink" title="有声电影"></a>有声电影</h4><p>1927年，华纳兄弟公司（Warner Bros.）推出了第一部有声电影《爵士歌王》（The Jazz Singer），这标志着有声电影时代的开始。有声电影的出现大大改变了电影产业，并引发了一系列技术和艺术的创新。</p><h4 id="彩色电影"><a href="#彩色电影" class="headerlink" title="彩色电影"></a>彩色电影</h4><p>20世纪30年代，彩色电影开始兴起。通过不同的技术和处理方法，电影可以以彩色形式呈现，增加了观众的视觉享受。</p><h4 id="宽银幕和3D电影"><a href="#宽银幕和3D电影" class="headerlink" title="宽银幕和3D电影"></a>宽银幕和3D电影</h4><p>20世纪50年代和60年代，宽银幕和3D电影开始流行。宽银幕技术提供了更广阔的画面，增强了电影的视觉冲击力。而3D技术则使观众能够获得更加身临其境的观影体验。</p></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2023/09/26/media/flv/1-flv/">了解 flv</a></h1><div class="post-meta"> <span class="post-time">2023-09-26</span> <span class="post-category"><a href="/categories/media/">media</a> <a href="/categories/media/flv/">flv</a></span></div></header><div class="post-content"><h3 id="一、Web-如何播放-MP4？"><a href="#一、Web-如何播放-MP4？" class="headerlink" title="一、Web 如何播放 MP4？"></a>一、Web 如何播放 MP4？</h3><h3 id="二、如何在-Web-播放-flv？"><a href="#二、如何在-Web-播放-flv？" class="headerlink" title="二、如何在 Web 播放 flv？"></a>二、如何在 Web 播放 flv？</h3><h3 id="三、了解-flv-格式"><a href="#三、了解-flv-格式" class="headerlink" title="三、了解 flv 格式"></a>三、了解 flv 格式</h3></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2023/09/21/media/flv/2-flv/">玩转 flv.js</a></h1><div class="post-meta"> <span class="post-time">2023-09-21</span> <span class="post-category"><a href="/categories/media/">media</a> <a href="/categories/media/flv/">flv</a></span></div></header><div class="post-content"><h3 id="1-如何极致实践低延迟？"><a href="#1-如何极致实践低延迟？" class="headerlink" title="1. 如何极致实践低延迟？"></a>1. 如何极致实践低延迟？</h3><h3 id="2-如何优雅断线重连？"><a href="#2-如何优雅断线重连？" class="headerlink" title="2. 如何优雅断线重连？"></a>2. 如何优雅断线重连？</h3><h3 id="3-如何同时播放多路flv？"><a href="#3-如何同时播放多路flv？" class="headerlink" title="3. 如何同时播放多路flv？"></a>3. 如何同时播放多路flv？</h3></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2023/09/18/media/flv/3-flv/">如何分析 flv</a></h1><div class="post-meta"> <span class="post-time">2023-09-18</span> <span class="post-category"><a href="/categories/media/">media</a> <a href="/categories/media/flv/">flv</a></span></div></header><div class="post-content"><h3 id="1-保留现场"><a href="#1-保留现场" class="headerlink" title="1. 保留现场"></a>1. 保留现场</h3><p>在定位 flv 直播问题时（由于直播场景的特殊性，出问题的流可能转瞬即逝），我们首先需要将流保存下来，以供后续的问题定位和修复验证；</p><p>我们可以在命令行中使用 <code>curl</code> 命令，将 flv 流以文件形式保存下来：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">curl https://xxx.com/test.flv -o test.flv</span><br></pre></td></tr></table></figure><h3 id="2-问题初判"><a href="#2-问题初判" class="headerlink" title="2. 问题初判"></a>2. 问题初判</h3><p>在对保存下来的 flv 文件深入分析之前，我们可以使用如 <code>ffplay</code>, <code>ffprobe</code> 等工具初步分析/播放一下 flv 文件，看看这些工具能否给我们提供一些有用的信息：</p><h4 id="2-1-使用-ffplay"><a href="#2-1-使用-ffplay" class="headerlink" title="2.1 使用 ffplay"></a>2.1 使用 ffplay</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ffplay -hide_banner -autoexit -loglevel level -report -i test.flv</span><br></pre></td></tr></table></figure><ul><li><code>-hide_banner</code> 在控制台中不打印 ffplay 的 banner 信息</li><li><code>-autoexit</code> 播放结束后自动关闭播放窗口</li><li><code>-loglevel level</code> 在控制台和日志文件输出日志时，带上日志等级（如：<code>[error]</code>, <code>[warning]</code>, <code>[debug]</code>, <code>[verbose]</code>）</li><li><code>-report</code> 输出日志文件</li><li><code>-i</code> 后面接视频文件的相对路径 or 绝对路径</li></ul><blockquote><p>更多参数：<a href="https://ffmpeg.org/ffplay.html" target="_blank" rel="noopener">https://ffmpeg.org/ffplay.html</a></p></blockquote><h4 id="2-2-使用-ffprobe"><a href="#2-2-使用-ffprobe" class="headerlink" title="2.2 使用 ffprobe"></a>2.2 使用 ffprobe</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ffprobe -loglevel level -hide_banner -unit -show_frames -select_streams v -show_error -of ini -i test.flv > test.ini 2>&1</span><br></pre></td></tr></table></figure><ul><li><code>-unit</code> 输出的信息中带上单位</li><li><code>-select_streams v</code> 只查看视频轨（<code>v</code>）信息</li><li><code>-show_frames</code> 查看每一帧信息</li><li><code>-show_error</code> 打印错误</li><li><code>-of ini</code> 以<code>.ini</code>格式输出结果</li><li><code>> test.ini 2>&1</code> 使用管道符将结果及错误信息都输出到 <code>test.ini</code> 文件中</li></ul><blockquote><p>更多参数：<a href="https://ffmpeg.org/ffprobe.html" target="_blank" rel="noopener">https://ffmpeg.org/ffprobe.html</a></p></blockquote><h3 id="3-flv分析"><a href="#3-flv分析" class="headerlink" title="3. flv分析"></a>3. flv分析</h3><p>ffplay 和 ffprobe 只能告诉我们哪个时间点，或者哪一帧出了问题，但具体是什么问题还是需要我们深入分析 flv 流/文件；</p><p>此处推荐使用 <a href="https://github.com/zymill/flvAnalyser" target="_blank" rel="noopener">flvAnalyser</a>，一个可视化的 flv 分析工具；该工具支持 H.264 和 H.265，可以查看到具体的 nalu；</p><p><img src="https://user-images.githubusercontent.com/18504455/232966564-3918273e-bca2-4d7a-92c3-f6152ea58298.png" loading="lazy"></p></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2023/05/18/media-bench/">如何压测流媒体服务器？</a></h1><div class="post-meta"> <span class="post-time">2023-05-18</span></div></header><div class="post-content"><p>介绍一些用于压测流媒体服务器的工具：</p><h3 id="st-load"><a href="#st-load" class="headerlink" title="st-load"></a>st-load</h3><p><a href="https://ossrs.net/lts/zh-cn/" target="_blank" rel="noopener">SRS</a>是一个开源的实时视频服务器，它可以支持RTMP、WebRTC、HLS、HTTP-FLV、SRT等多种实时流媒体协议；</p><p>SRS的作者为了能更好的验证SRS服务器的流媒体转发性能，同时提供了专门的测试套件 <a href="https://github.com/ossrs/srs-bench/tree/master" target="_blank" rel="noopener">st-load</a></p><p>该套件中提供了：</p><ul><li>sb_hls_load 支持HLS点播和直播</li><li>sb_http_load 支持HTTP负载测试，所有并发重复下载一个http文件</li><li>sb_rtmp_load 支持RTMP流播放测试，一个进程支持5k并发</li><li>sb_rtmp_publish 支持RTMP流推流测试，一个进程支持500个并发</li></ul><p>该套件需要在 linux 下运行，它会模拟客户端行为拉流。</p><h4 id="使用方法"><a href="#使用方法" class="headerlink" title="使用方法"></a>使用方法</h4><p>Build from source, then run RTMP benchmark:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git clone https://github.com/ossrs/srs-bench.git &&</span><br><span class="line">cd srs-bench && ./configure && make &&</span><br><span class="line">./objs/sb_rtmp_load -c 1 -r rtmp://127.0.0.1:1935/live/livestream</span><br></pre></td></tr></table></figure><p>Or directly by docker:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">docker run --rm -it --network=host --name sb ossrs/srs:sb \</span><br><span class="line"> ./objs/sb_rtmp_load -c 1 -r rtmp://127.0.0.1:1935/live/livestream</span><br></pre></td></tr></table></figure><p>For HTTP-FLV benchmark:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">docker run --rm -it --network=host --name sb ossrs/srs:sb \</span><br><span class="line"> ./objs/sb_http_load -c 1 -r http://127.0.0.1:8080/live/livestream.flv</span><br></pre></td></tr></table></figure><p>For HLS benchmark:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">docker run --rm -it --network=host --name sb ossrs/srs:sb \</span><br><span class="line"> ./objs/sb_hls_load -c 1 -r http://127.0.0.1:8080/live/livestream.m3u8</span><br></pre></td></tr></table></figure><p>Or from Aliyun mirror:</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">docker run --rm -it --network=host --name sb \</span><br><span class="line"> registry.cn-hangzhou.aliyuncs.com/ossrs/srs:sb \</span><br><span class="line"> ./objs/sb_rtmp_load -c 1 -r rtmp://127.0.0.1:1935/live/livestream</span><br></pre></td></tr></table></figure><blockquote><p>Note: Please use <code>docker kill sb</code> to stop it.</p></blockquote><p>使用 <code>./objs/sb_rtmp_load</code> or <code>./objs/sb_hls_load</code> or <code>./objs/sb_http_load</code> 去拉不同协议的流，<code>-c</code> 表示负载数</p><h3 id="flazr"><a href="#flazr" class="headerlink" title="flazr"></a>flazr</h3><p>flazr 是 RTMP 的一个 java 实现，这个项目提供了一个流媒体服务器和相关的工具类；</p><p>该工具可以在 windows 上运行，我们可以使用它来压测 rtmp 拉流；</p><p>下载地址：<a href="https://sourceforge.net/projects/flazr/files/flazr/" target="_blank" rel="noopener">https://sourceforge.net/projects/flazr/files/flazr/</a></p><h3 id="JMeter"><a href="#JMeter" class="headerlink" title="JMeter"></a>JMeter</h3><p>使用 JMeter 的BlazeMeter-HLS Plugin，可以压测 hls 播放</p><p>参考：<a href="https://zhuanlan.zhihu.com/p/624834220" target="_blank" rel="noopener">https://zhuanlan.zhihu.com/p/624834220</a></p></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2023/05/15/media/media01/">前端音视频经验之谈（一）</a></h1><div class="post-meta"> <span class="post-time">2023-05-15</span> <span class="post-category"><a href="/categories/media/">media</a></span></div></header><div class="post-content"><h2 id="前端音视频经验之谈（一）"><a href="#前端音视频经验之谈（一）" class="headerlink" title="前端音视频经验之谈（一）"></a>前端音视频经验之谈（一）</h2><h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>本文以 FLV 为切入点，分享笔者在前端实时音视频方面遇到并解决过的一些问题；</p><p>笔者负责过的一些业务场景：</p><ol><li><p>常见直播业务<br>设备端使用 RTMP 协议推流 -> （云端）流媒体服务器 -> CDN 分发 -> 播放端拉 http-flv, hls, webrtc</p></li><li><p>Web 预览相机 RTSP 流<br>相机 RTSP -> 流媒体（格式）转换服务（将 RTSP 转为 http-flv） -> 播放端拉 http-flv</p></li></ol><p>Web 前端在上述的场景中，主要是负责播放不同协议的流媒体资源；</p><h3 id="如何尽可能稳定播放？"><a href="#如何尽可能稳定播放？" class="headerlink" title="如何尽可能稳定播放？"></a>如何尽可能稳定播放？</h3><p>前端在刚开始接触实时音视频的时候，我们首先面临的核心问题应该是：“如何<strong>稳定</strong>的去播放？”</p><p>在 Web 上播放一个 MP4 视频时，我们一般是直接依赖 Html5 提供的能力，在整个播放过程中，浏览器本身会去请求数据，然后解码、渲染、播放，基本不需要开发者介入：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">video</span> <span class="attr">src</span>=<span class="string">"https://demo.com/test.mp4"</span> <span class="attr">controls</span> <span class="attr">autoplay</span> <span class="attr">muted</span>></span><span class="tag"></<span class="name">video</span>></span></span><br></pre></td></tr></table></figure><p>而在播放实时流（如 http-flv）时，前端就需要使用专门的播放器（如 <code>flv.js</code>, <code>mpegts.js</code>）：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./flv.min.js"</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">video</span> <span class="attr">id</span>=<span class="string">"videoEl"</span>></span><span class="tag"></<span class="name">video</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span></span><br><span class="line"> if (flvjs.isSupported()) {</span><br><span class="line"><span class="javascript"> <span class="keyword">const</span> player = flvjs.createPlayer({</span></span><br><span class="line"><span class="javascript"> isLive: <span class="literal">true</span>, <span class="comment">// 直播</span></span></span><br><span class="line"><span class="javascript"> type: <span class="string">'flv'</span>,</span></span><br><span class="line"><span class="javascript"> url: <span class="string">'https://xxx.flv'</span></span></span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"><span class="javascript"> player.attachMediaElement(<span class="built_in">document</span>.getElementById(<span class="string">'videoEl'</span>));</span></span><br><span class="line"> player.load();</span><br><span class="line"> player.play();</span><br><span class="line"> }</span><br><span class="line"><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><p>在 <code>flv.js</code>, <code>mpegts.js</code> 这些库的实现中：</p><ul><li>flv 流的加载可以基于 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/fetch" target="_blank" rel="noopener">Fetch API</a> 实现</li><li>为了能让浏览器播放 flv 流，库开发者还需要将 flv 流 解封装 -> 转封装为 fMP4（只改变了流媒体资源的封装格式）</li><li>转封装后的 fMP4 流媒体数据，需要利用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Source_Extensions_API" target="_blank" rel="noopener">MSE API</a> 塞进原生 <code><video></code></li><li>最终由浏览器 <code><video></code> 完成对 fMP4 的解码、渲染、播放</li></ul><p>在大多数时候，我们都是作为 <code>flv.js</code>, <code>mpegts.js</code> 这些库的使用方；</p><p>以直播业务为例，前端一般会得到一个 http-flv 流地址，然后使用 <code>flv.js</code> 来播放；</p><p>但这个过程并不会是一帆风顺的，在实际播放一个实时的 http-flv 时，前端可能会遇到以下情况：</p><ol><li>播放端刚开始播放的时候，http 请求一直在 pending</li></ol><p><strong>前端可观察到的现象：</strong></p><p>Network 面板中的 fetch 请求一直在 pending，浏览器需要等待 10s+ 才会抛出超时/访问失败的错误</p><p><strong>前端实际可获得的信息</strong></p><p>浏览器超时后，fetch() 会抛一个错误，flv.js 会抛出一个错误事件</p><p><strong>造成此问题可能的原因：</strong></p><p>播放端无法访问流地址（如在公网播放内网的flv流）；</p><p>设备端未推流（播放端和流媒体服务建立了 TCP 连接，但一直没收到数据）；</p><p><strong>一些优化：</strong></p><p>在原有的 flv.js 实现中，通过 fetch() 请求 http-flv；当真的出现在公网播放内网的flv流的情况时，用户需要等待10s+才能得到响应；</p><p>为了提高用户体验，我们增加了一个 <code>xhrTimeout</code> 配置，由前端去指定超过多长时间没收到数据就抛出超时错误，提高响应速度；</p><ol start="2"><li>http 响应返回了 404 等非 200 OK 的状态码</li></ol><p><strong>前端可观察到的现象：</strong></p><p>http 请求能正常响应，但状态码错误</p><p><strong>前端实际可获得的信息</strong></p><p>flv.js 会判断状态码是否为 200，遇到异常错误码会抛出一个错误事件</p><p><strong>造成此问题可能的原因：</strong></p><p>设备端未推流；<br>设备端推流地址错误；<br>设备端无法访问流媒体服务；<br>流媒体服务异常；</p><ol start="3"><li>播放突然中断 - http 连接断开</li></ol><p><strong>前端可观察到的现象：</strong></p><p>Network 面板中的 http 连接断开</p><p><strong>前端实际可获得的信息</strong></p><p>fetch() 会抛一个错误，flv.js 会抛出一个错误事件</p><p><strong>造成此问题可能的原因：</strong></p><p>播放端网络中断；<br>播放端网络发生了切换（wifi <-> 4G）；<br>设备端推流中断；<br>流媒体服务异常；</p><ol start="4"><li>播放突然中断 - http 连接正常</li></ol><p><strong>前端可观察到的现象：</strong></p><p>Network 面板中的 http 连接正常</p><p><strong>前端实际可获得的信息</strong></p><p><code><video></code> 抛出错误事件；<br>MSE 抛出错误，flv.js 会抛出一个错误事件；</p><p><strong>造成此问题可能的原因：</strong></p><p>流异常，浏览器无法兼容，解码失败；</p><p>情况1、2一般发生在刚开始尝试拉流，情况3、4一般发生在拉流播放过程中；</p><p>前端在播放实时流时，在遇到上述 2、3、4 情况时，应该做到“尽可能重试”；</p><p>// TODO:</p><hr><p>下面会介绍一些非网络因素引起的问题：</p><h3 id="音画不同步的可能原因？"><a href="#音画不同步的可能原因？" class="headerlink" title="音画不同步的可能原因？"></a>音画不同步的可能原因？</h3><p>前置知识：</p><p>音频流由一帧一帧的音频帧（一段段的小音频）组成，根据音频的采样率和音频编码格式，可以算出音频帧的播放时长：<br>音频的采样率为 48000Hz，表示音频设备 1s 采集 48000 个样本；<br>音频以 AAC 编码，那么一个 aac 音频帧则会包含 1024 个样本，所以一个 aac 音频帧记录了 1024 * 1000 / 48000 = 21.33ms 的可播放音频；我们可以将 21.33ms 称为标准音频帧时长；</p><p>为了能让音频、视频有序且同步播放，一般每个音频帧、视频帧都会有各自的一个 DTS、PTS；<br>对于音频帧而言，一般是立即解码、立即播放的，所以它的 DTS 一般等于 PTS；</p><p>在理想情况下，音、视频的时间戳都应该是严格单调递增的；以上述 48000Hz AAC 音频为例，每一个音频帧应该以 21.33 ms 递增，考虑到时间戳一般以整数形式存储，音频帧以 21ms、22ms 来递增也是合理的；</p><p>遇到过一个问题：用户在 Web 观看 flv 直播流时，累计播放一段时间后，出现了音频快于视频画面的现象；在 VLC 上播放则不会出现这样的问题；</p><p><img src="https://cdn.jsdelivr.net/gh/images/audio_gap.png" loading="lazy"></p><p>我们会发现，音频流的时间戳并不是严格递增的，某些音频帧之间的时间间隔大于 21.33ms；</p><p>对于这种音频存在Gap的情况，如果在 Chrome 浏览器中不做处理，直接塞给 <code><video></code> 播放，Chrome 会把后续的音频向前推进/播放，以便把Gap抹掉；</p><p>那么就会出现如下的情况，一帧应该在第95ms播放的音频被推进到第77ms播放；</p><p>由于音频帧的单位是毫秒级别，单单一两帧（少量）的音频帧并不会引起明显的音画不同步；</p><p>但如果此问题大量出现，那么随着播放时长的增加，声音快于视频的表现就会愈发明显；</p><p>这也就是为什么刚开始音画同步，播放一段时间后音画不同步。</p><p>解决方案：</p><p>flv.js 本身就有考虑到这种音频存在 Gap 的情况（最新版本默认开启配置 fixAudioTimestampGap: true），当发现 Gap >= 3 * 标准音频帧时长 时，flv.js 会主动填充静音帧，以保证音频帧按照时间戳播放。</p><h3 id="卡顿的可能原因？"><a href="#卡顿的可能原因？" class="headerlink" title="卡顿的可能原因？"></a>卡顿的可能原因？</h3><p>卡顿的现象：</p><p>1、画面在 loading</p><p>2、帧率不够，出现跳帧</p><h3 id="如何正确使用-flv-js-实现低延迟？"><a href="#如何正确使用-flv-js-实现低延迟？" class="headerlink" title="如何正确使用 flv.js 实现低延迟？"></a>如何正确使用 flv.js 实现低延迟？</h3><p>网上给出的 flv 延迟数据一般在 2s，但在实际直播拉流时，延迟可能会到 4-6s，这可能是因为我们并没有正确使用 flv.js</p><h4 id="1、关闭-enableWorker-worker-配置"><a href="#1、关闭-enableWorker-worker-配置" class="headerlink" title="1、关闭 enableWorker worker 配置"></a>1、关闭 <code>enableWorker</code> worker 配置</h4><p>开启 worker 会提高延迟</p><h4 id="2、关闭-enableStashBuffer-false-下载缓冲区配置"><a href="#2、关闭-enableStashBuffer-false-下载缓冲区配置" class="headerlink" title="2、关闭 enableStashBuffer: false 下载缓冲区配置"></a>2、关闭 <code>enableStashBuffer: false</code> 下载缓冲区配置</h4><p>通过设置 <code>enableStashBuffer: false</code>，我们可以关闭 flv.js 的下载缓冲区；</p><p>一般来说，通过 <code>fetch</code> 请求到的流数据，会先存放在一个 <strong>ArrayBuffer</strong> 里面，等它满了才会塞进 <code><video></code> 播放；</p><p>关闭了下载缓冲区，请求到的流数据就会马上塞进 <code><video></code>，从而能降低该缓冲区带来的延迟；</p><p>风险：设立下载缓冲区是为了应对网络抖动（network jittering）的情况，关闭后可能会提高卡顿率</p><p>建议：纯内网情况下网络抖动的风险较低</p><h4 id="3、开启-liveBufferLatencyChasing-true-跳帧配置"><a href="#3、开启-liveBufferLatencyChasing-true-跳帧配置" class="headerlink" title="3、开启 liveBufferLatencyChasing: true 跳帧配置"></a>3、开启 <code>liveBufferLatencyChasing: true</code> 跳帧配置</h4><p>除了 <strong>ArrayBuffer</strong> 这个下载用的缓冲区，<code><video></code> 本身也有自己的播放缓冲区，通过 <code>video.buffered</code> 可以查看当前缓冲了的范围；</p><p>通过设置 <code>liveBufferLatencyChasing: true</code>，我们可以开启跳帧功能；</p><p>在检测到播放缓冲区过大时，跳过一部分媒体流，直接播放较新的内容，从而缩小播放画面和最新流画面之间的延迟；</p></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2023/02/06/npm/">npm 命令速记</a></h1><div class="post-meta"> <span class="post-time">2023-02-06</span></div></header><div class="post-content"><ul><li>查看 npm 包所有版本</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm view <package_name> versions</span><br></pre></td></tr></table></figure><ul><li>在本地打出一个 <code>.tgz</code> 包</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm pack</span><br></pre></td></tr></table></figure><blockquote><p>加上 <code>--dry-run</code> 参数的话，只会列出参与打包的文件，并不会真的生成 <code>.tgz</code> 文件</p></blockquote></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2023/01/28/specifications/">音视频协议标准</a></h1><div class="post-meta"> <span class="post-time">2023-01-28</span></div></header><div class="post-content"><h2 id="常见音视频协议标准"><a href="#常见音视频协议标准" class="headerlink" title="常见音视频协议标准"></a>常见音视频协议标准</h2><ul><li><a href="https://ossrs.io/lts/zh-cn/docs/v5/tools/specs" target="_blank" rel="noopener">各种音视频协议标准</a></li><li><a href="https://www.itu.int/rec/T-REC-H.264/en" target="_blank" rel="noopener">H.264</a></li><li><a href="https://www.itu.int/rec/T-REC-H.265/en" target="_blank" rel="noopener">H.265</a></li><li><a href="http://download.macromedia.com/f4v/video_file_format_spec_v10_1.pdf" target="_blank" rel="noopener">FLV</a></li></ul><h2 id="常用音视频分析工具"><a href="#常用音视频分析工具" class="headerlink" title="常用音视频分析工具"></a>常用音视频分析工具</h2><ul><li><a href="https://github.com/zymill/flvAnalyser" target="_blank" rel="noopener">FLV 分析工具：FlvAnalyser</a></li><li><a href="https://easyice.cn/archives/85" target="_blank" rel="noopener">HLS 分析工具：EasyICE</a></li><li><a href="https://github.com/latelee/H264BSAnalyzer/tree/master/release" target="_blank" rel="noopener">H264BSAnalyzer</a></li><li><a href="https://mp4-explorer.apponic.com/" target="_blank" rel="noopener">mp4explorer</a></li><li><a href="#">mp4info</a></li><li>TS 流分析工具：TSExpert</li></ul><h2 id="常用推-拉流工具"><a href="#常用推-拉流工具" class="headerlink" title="常用推/拉流工具"></a>常用推/拉流工具</h2><ul><li><a href="https://obsproject.com/download" target="_blank" rel="noopener">OBS</a></li><li><a href="https://www.videolan.org/vlc/" target="_blank" rel="noopener">VLC</a></li><li><a href="https://potplayer.daum.net/" target="_blank" rel="noopener">PotPlayer</a></li></ul></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2023/01/01/media/tutorial/">Web 如何排查音视频问题</a></h1><div class="post-meta"> <span class="post-time">2023-01-01</span> <span class="post-category"><a href="/categories/media/">media</a></span></div></header><div class="post-content"><h2 id="MP4-播放失败"><a href="#MP4-播放失败" class="headerlink" title="MP4 播放失败"></a>MP4 播放失败</h2><ol><li><p>当发现 MP4 在浏览器上播放出错时，先 F12 打开 DevTools 查看 Console（控制台）面板是否出现报错；</p></li><li><p>其次，可以打开 DevTools 的 Media（媒体）面板，查看对应 <code><video></code> 播放器的 Message（消息）面板是否有告警/报错；</p></li></ol><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/media-msg.png" loading="lazy"></p><ol start="3"><li><p>如果 Console 无报错，Message 无报错，说明浏览器认为流媒体文件是可以正常解码播放的；<br>至于播放出来的效果，浏览器并不保证，如可能会出现音画不同步、视频画面闪烁等情况；这大概率是视频本身就有问题。</p></li><li><p>出现浏览器能正常播放，但播放效果不符合预期的问题时：</p></li></ol><ul><li>使用 VLC、PotPlayer 工具也去播放对比看一下</li><li>单独用一个 Tab 打开视频地址 or 把视频下载下来然后拖进浏览器播放；如果这样做还是有问题，那就大概率是视频本身的问题</li></ul><h2 id="FLV-播放失败"><a href="#FLV-播放失败" class="headerlink" title="FLV 播放失败"></a>FLV 播放失败</h2><ol><li>参照《MP4 播放失败》收集错误信息</li><li><a href="https://fredzeng.github.io/2023/09/18/media/flv/3-flv/">如何分析 flv</a></li></ol><h2 id="WebRTC-播放失败"><a href="#WebRTC-播放失败" class="headerlink" title="WebRTC 播放失败"></a>WebRTC 播放失败</h2><ol><li>参照《MP4 播放失败》收集错误信息</li><li>查看 WebRTC 日志：<a href="chrome://webrtc-internals/" target="_blank" rel="noopener">chrome://webrtc-internals/</a>、<a href="chrome://webrtc-logs/" target="_blank" rel="noopener">chrome://webrtc-logs/</a></li></ol><h2 id="在-Safari-中调试媒体"><a href="#在-Safari-中调试媒体" class="headerlink" title="在 Safari 中调试媒体"></a>在 Safari 中调试媒体</h2><p><a href="https://webkit.org/blog/8923/debugging-media-in-web-inspector/" target="_blank" rel="noopener">https://webkit.org/blog/8923/debugging-media-in-web-inspector/</a></p></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2022/11/28/safari/">iOS webview 调试</a></h1><div class="post-meta"> <span class="post-time">2022-11-28</span></div></header><div class="post-content"><ol><li>在 iOS 设备上，依次打开 “设置” -> “Safari浏览器” -> “高级” -> 开启 “JavaScript” 和 “网页检查器”</li></ol><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/iOS1.png" loading="lazy"></p><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/iOS2.png" loading="lazy"></p><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/iOS3.png" loading="lazy"></p><ol start="2"><li>在 Mac 设备上，显示 Safari 浏览器的 “开发” 菜单</li></ol><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/Safari1.png" loading="lazy"></p><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/Safari2.png" loading="lazy"></p><ol start="3"><li>将 iOS 设备连接到对应的 Mac 设备上，并在 iOS 设备上打开对应的 webview 页面，此时能在 Safari 浏览器的 “开发” 菜单中看到可调试的 webview 页面，选中对应的页面即可</li></ol><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/Safari3.png" loading="lazy"></p><h3 id="如何调试-WebRTC-媒体播放？"><a href="#如何调试-WebRTC-媒体播放？" class="headerlink" title="如何调试 WebRTC / 媒体播放？"></a>如何调试 WebRTC / 媒体播放？</h3><p>在 Safari 的网页检查器中，打开 “媒体日志记录”、“MSE日志记录”、“WebRTC日志记录” 设置</p><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/Safari4.png" loading="lazy"></p></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2022/07/08/clear-unused-files/">清理前端项目中未被使用到的文件</a></h1><div class="post-meta"> <span class="post-time">2022-07-08</span> <span class="post-category"><a href="/categories/webpack/">webpack</a> <a href="/categories/webpack/frontend/">frontend</a></span></div></header><div class="post-content"><p>一个项目经过多次迭代后，不可避免的会残留一些未被使用到/多余的文件，人为的去分析文件的引用情况是一种费时、费力的行为；<br>使用 <a href="https://www.npmjs.com/package/unused-files-webpack-plugin" target="_blank" rel="noopener">unused-files-webpack-plugin</a> webpack 插件可以快速的找出哪些文件未被使用到。</p><p>安装：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i --save-dev unused-files-webpack-plugin</span><br></pre></td></tr></table></figure><p>or</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add --dev unused-files-webpack-plugin</span><br></pre></td></tr></table></figure><p>配置：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> { UnusedFilesWebpackPlugin } = <span class="built_in">require</span>(<span class="string">"unused-files-webpack-plugin"</span>);</span><br><span class="line"> </span><br><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line"> plugins: [</span><br><span class="line"> <span class="keyword">new</span> UnusedFilesWebpackPlugin({</span><br><span class="line"> patterns: [<span class="string">'src/**/*.*'</span>]</span><br><span class="line"> }),</span><br><span class="line"> ],</span><br><span class="line">};</span><br></pre></td></tr></table></figure></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2022/07/06/tools/">常用在线工具</a></h1><div class="post-meta"> <span class="post-time">2022-07-06</span></div></header><div class="post-content"><ul><li>PDF 工具</li></ul><p><a href="https://tools.pdf24.org/zh/" target="_blank" rel="noopener">https://tools.pdf24.org/zh/</a></p><ul><li>在线画图</li></ul><p><a href="https://www.processon.com/" target="_blank" rel="noopener">https://www.processon.com/</a></p><ul><li>在线压缩 svg</li></ul><p><a href="https://www.zhangxinxu.com/sp/svgo/" target="_blank" rel="noopener">https://www.zhangxinxu.com/sp/svgo/</a></p><ul><li>在线压缩图片</li></ul><p><a href="https://fengyuanchen.github.io/compressorjs/" target="_blank" rel="noopener">https://fengyuanchen.github.io/compressorjs/</a></p><ul><li>在线分析 mp4</li></ul><p><a href="https://gpac.github.io/mp4box.js/test/filereader.html" target="_blank" rel="noopener">https://gpac.github.io/mp4box.js/test/filereader.html</a></p><ul><li>腾讯工具箱</li></ul><p><a href="https://tool.browser.qq.com/" target="_blank" rel="noopener">https://tool.browser.qq.com/</a></p><hr><ul><li>teambition</li></ul><p><a href="https://account.teambition.com/login" target="_blank" rel="noopener">https://account.teambition.com/login</a></p><ul><li>墨刀</li></ul><p><a href="https://modao.cc/" target="_blank" rel="noopener">https://modao.cc/</a></p><ul><li>Trello</li></ul><p><a href="https://trello.com/" target="_blank" rel="noopener">https://trello.com/</a></p></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2022/06/27/captions/">字幕</a></h1><div class="post-meta"> <span class="post-time">2022-06-27</span></div></header><div class="post-content"><h2 id="视频字幕"><a href="#视频字幕" class="headerlink" title="视频字幕"></a>视频字幕</h2><p>对于常见的视频（如 mp4、mkv）而言，根据字幕信息嵌入到视频中的方式，可以把字幕分为硬字幕和软字幕；</p><p><strong>硬字幕</strong>是指字幕以图像的方式和视频画面相融合并硬编码在视频文件中，因此我们无法直接从视频中提取、编辑或删除字幕；由于硬字幕作为视频画面的一部分，因此可以保证在任何设备和任何播放器上看到的字幕都是完全一样的，不会有字体、位置等差异；想要从视频中提取出硬字幕，可以使用 OCR 从视频帧中识别字幕文本，从而生成 srt 等字幕文件。</p><p><strong>软字幕</strong>根据字幕的加载/封装方式，可以分为内挂字幕和外挂字幕。（在部分资料中，会把内挂字幕等同于软字幕，而外挂字幕作为另一种类型）</p><ul><li><p>内挂字幕：一般指字幕文件和视频（音频流+视频流）一同封装在（MP4、MKV）视频文件中，播放时需要经过播放器处理解析显示。字幕文件以字幕流/字幕轨的方式存在于视频文件中，一个视频可以有多个内挂字幕（即多路字幕流），用户可通过播放器切换要显示的字幕。</p></li><li><p>外挂字幕：指字幕以单独的文件格式存在，常见的类型有 srt、ass、vtt 等；在播放视频时，用户需要手动导入/打开字幕文件；在同一目录下，如果字幕文件名和视频文件名相同时，部分播放器能够自动加载字幕，否则需要手动打开。</p></li></ul><p>软字幕的显示都需要播放器的支持，一般能够支持 mp4、mkv 和 webm；</p><ul><li>修改外挂字幕，只需要修改对应的字幕文件即可；</li><li>修改内挂字幕，则需要使用相关工具对字幕流/字幕轨进行修改。</li></ul><h3 id="使用-ffmpeg-给-mp4-添加内挂字幕："><a href="#使用-ffmpeg-给-mp4-添加内挂字幕：" class="headerlink" title="使用 ffmpeg 给 mp4 添加内挂字幕："></a>使用 ffmpeg 给 mp4 添加内挂字幕：</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ffmpeg -i sintel-short.mp4 -i sintel-en.srt -c copy -c:s mov_text sintel-short-en.mp4</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/windows-mp4.png" alt="windows-mp4" loading="lazy"></p><p>【Windows 默认播放器，播放时无字幕】</p><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/vlc-mp4.png" alt="vlc-mp4" loading="lazy"></p><p>【VLC 播放器，播放时需要选择字幕】</p><h3 id="使用-ffmpeg-给-mp4-添加内挂字幕，并转为-mkv："><a href="#使用-ffmpeg-给-mp4-添加内挂字幕，并转为-mkv：" class="headerlink" title="使用 ffmpeg 给 mp4 添加内挂字幕，并转为 mkv："></a>使用 ffmpeg 给 mp4 添加内挂字幕，并转为 mkv：</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ffmpeg -i sintel-short.mp4 -i sintel-en.srt -c copy -c:s copy sintel-short-en.mkv</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/windows-mkv.png" alt="windows-mkv" loading="lazy"></p><p>【Windows 默认播放器，播放时需要选择字幕】</p><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/vlc-mkv.png" alt="vlc-mkv" loading="lazy"></p><p>【VLC 播放器，播放时会自动显示字幕】</p><h3 id="使用-ffmpeg-给-mp4-添加多个内挂字幕，并转为-mkv："><a href="#使用-ffmpeg-给-mp4-添加多个内挂字幕，并转为-mkv：" class="headerlink" title="使用 ffmpeg 给 mp4 添加多个内挂字幕，并转为 mkv："></a>使用 ffmpeg 给 mp4 添加多个内挂字幕，并转为 mkv：</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">ffmpeg -i sintel-short.mp4 -i sintel-en.srt -i sintel-de.srt \</span><br><span class="line"> -map 0:v -map 0:a -map 1 -map 2 \</span><br><span class="line"> -c copy -c:s copy \</span><br><span class="line"> -metadata:s:s:0 language=eng -metadata:s:s:1 language=deu \</span><br><span class="line"> sintel-short-mul.mkv</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/windows-mkv-mul.png" alt="windows-mkv-mul" loading="lazy"></p><p>【Windows 默认播放器，播放时可以切换字幕】</p><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/vlc-mkv-mul.png" alt="vlc-mkv-mul" loading="lazy"></p><p>【VLC 播放器，播放时可以切换字幕】</p><blockquote><p>可以看到，给 mp4 添加字幕时我们使用的是 -c:s mov_text，而给 mkv 添加字幕时我们使用的是 -c:s copy；<br>-c:s 是 -scodec 的简写，它用于设置字幕的编码类型；<br>对于 mp4 而言，我们需要指定使用 mov_text 编码器去处理字幕轨/字幕流。</p><p>常见的字幕编码器（-c:s）参数：<br>对于 MKV：copy,ass,srt,ssa<br>对于 MP4：copy,mov_text（如果是给 MP4 添加字幕，只能用 mov_text）<br>对于 MOV：copy,mov_text</p></blockquote><h3 id="srt-字幕"><a href="#srt-字幕" class="headerlink" title="srt 字幕"></a>srt 字幕</h3><p>srt 是一种比较流行的文本字幕格式，可以使用系统自带的文本编辑器来打开</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">00:00:00,000 --> 00:00:12,000</span><br><span class="line">[Test]</span><br><span class="line"></span><br><span class="line">2</span><br><span class="line">00:00:18,700 --> 00:00:21,500</span><br><span class="line">This blade has a dark past.</span><br><span class="line"></span><br><span class="line">3</span><br><span class="line">00:00:22,800 --> 00:00:26,800</span><br><span class="line">It has shed much innocent blood.</span><br><span class="line"></span><br><span class="line">4</span><br><span class="line">00:00:29,000 --> 00:00:32,450</span><br><span class="line">You're a fool for traveling alone,</span><br><span class="line">so completely unprepared.</span><br></pre></td></tr></table></figure><h2 id="H5-视频字幕"><a href="#H5-视频字幕" class="headerlink" title="H5 视频字幕"></a>H5 视频字幕</h2><p>H5 视频字幕与普通的视频字幕相类似，也可以分为硬字幕和软字幕；硬字幕依然是已经将字幕内容编码在视频画面中，使得我们在不同的浏览器、不同的设备（移动端、PC端）能看到一样的效果。</p><p>H5 并不会从 mp4 视频中解析并显示内挂字幕，但它支持通过使用 <code><track></code> 元素为视频指定外挂字幕；外挂字幕的文件格式为 WebVTT，其文件名后缀一般为 <code>.vtt</code>，其 MIME 类型为 <code>text/vtt</code>；</p><p>在 Chrome 和 Firefox 浏览器下，.vtt 字幕是可以无障碍加载显示的，但是对于IE10+浏览器，虽然也支持.vtt字幕，但是需要定义 MIME type，否则会无视WebVTT格式。</p><p>为<code><video></code>添加多个字幕：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">video</span> <span class="attr">id</span>=<span class="string">"video"</span> <span class="attr">preload</span>=<span class="string">"metadata"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"video/sintel-short.mp4"</span> <span class="attr">type</span>=<span class="string">"video/mp4"</span> /></span></span><br><span class="line"> <span class="comment"><!-- 英语（因为设置了 default 属性，所以会默认启用英语字幕） --></span></span><br><span class="line"> <span class="tag"><<span class="name">track</span></span></span><br><span class="line"><span class="tag"> <span class="attr">label</span>=<span class="string">"English"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">kind</span>=<span class="string">"subtitles"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">srclang</span>=<span class="string">"en"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">src</span>=<span class="string">"subtitles/vtt/sintel-en.vtt"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">default</span>=<span class="string">""</span></span></span><br><span class="line"><span class="tag"> /></span></span><br><span class="line"> <span class="comment"><!-- 德语 --></span></span><br><span class="line"> <span class="tag"><<span class="name">track</span></span></span><br><span class="line"><span class="tag"> <span class="attr">label</span>=<span class="string">"Deutsch"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">kind</span>=<span class="string">"subtitles"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">srclang</span>=<span class="string">"de"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">src</span>=<span class="string">"subtitles/vtt/sintel-de.vtt"</span></span></span><br><span class="line"><span class="tag"> /></span></span><br><span class="line"> <span class="comment"><!-- 西班牙语 --></span></span><br><span class="line"> <span class="tag"><<span class="name">track</span></span></span><br><span class="line"><span class="tag"> <span class="attr">label</span>=<span class="string">"Español"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">kind</span>=<span class="string">"subtitles"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">srclang</span>=<span class="string">"es"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">src</span>=<span class="string">"subtitles/vtt/sintel-es.vtt"</span></span></span><br><span class="line"><span class="tag"> /></span></span><br><span class="line"><span class="tag"></<span class="name">video</span>></span></span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/images/multi-track.png" alt="multi-track" loading="lazy"></p><h3 id="WebVTT-字幕"><a href="#WebVTT-字幕" class="headerlink" title="WebVTT 字幕"></a>WebVTT 字幕</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">WEBVTT</span><br><span class="line"></span><br><span class="line">0</span><br><span class="line">00:00:00.000 --> 00:00:12.000</span><br><span class="line"><v Test>[Test]</v></span><br><span class="line"></span><br><span class="line">NOTE This is a comment and must be preceded by a blank line</span><br><span class="line"></span><br><span class="line">1</span><br><span class="line">00:00:18.700 --> 00:00:21.500</span><br><span class="line">This blade has a dark past.</span><br><span class="line"></span><br><span class="line">2</span><br><span class="line">00:00:22.800 --> 00:00:26.800</span><br><span class="line">It has shed much innocent blood.</span><br><span class="line"></span><br><span class="line">3</span><br><span class="line">00:00:29.000 --> 00:00:32.450</span><br><span class="line">You're a fool for traveling alone,</span><br><span class="line">so completely unprepared.</span><br><span class="line"></span><br><span class="line">4</span><br><span class="line">00:00:32.750 --> 00:00:35.800</span><br><span class="line">You're lucky your blood's still flowing.</span><br></pre></td></tr></table></figure><p>可以看到，vtt 字幕的文本格式和 srt 字幕相似；其中，WebVTT 字幕须以 WebVTT 开头，以表明这是 WebVTT 字幕。</p><blockquote><p>使用 ffmpeg -i input.srt output.vtt 可以将 srt 文件转为 vtt 文件</p></blockquote><p>此外，在CSS中提供了专门的伪元素<code>::cue</code>来控制字幕的样式，可以控制的 CSS 属性包括：</p><ul><li>color</li><li>opacity</li><li>visibility</li><li>text-decoration</li><li>text-shadow</li><li>background 及相关属性</li><li>outline 及相关属性</li><li>font 及相关属性，包括 line-height</li><li>white-space</li></ul><p>因此，我们可以通过修改::cue伪元素样式，来控制 H5 <code><video></code> 字幕样式；</p><p>但是，原生的字幕样式控制，由于CSS属性上的限制，我们不能修改字幕出现的位置、实现更复杂的排版等，我们是否可以对字幕有更全面的样式控制？</p><p>在 video.js 中，提供了 TextTrackDisplay 组件来显示字幕；它将字幕内容渲染在 div 中，并以绝对定位的方式覆盖到视频上，使得我们可以修改所有的 CSS 属性。</p><p>缺点：部分移动端浏览器（如 iOS 浏览器、部分华为系统浏览器），全屏后会被系统劫持播放器样式，导致自定义播放器组件不显示，引起字幕不显示的问题；因此，在 video.js 的字幕实现中，会根据 user-agent 选择使用原生或 TextTrackDisplay 组件来显示字幕。</p></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2022/06/27/tools/imagemin/">node.js 图片压缩</a></h1><div class="post-meta"> <span class="post-time">2022-06-27</span> <span class="post-category"><a href="/categories/tools/">tools</a></span></div></header><div class="post-content"><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -D images imagemin imagemin-mozjpeg imagemin-pngquant slash get-all-files</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> images <span class="keyword">from</span> <span class="string">'images'</span>;</span><br><span class="line"><span class="keyword">import</span> imagemin <span class="keyword">from</span> <span class="string">'imagemin'</span>;</span><br><span class="line"><span class="keyword">import</span> imageminMozjpeg <span class="keyword">from</span> <span class="string">'imagemin-mozjpeg'</span>;</span><br><span class="line"><span class="keyword">import</span> imageminPngquant <span class="keyword">from</span> <span class="string">'imagemin-pngquant'</span>;</span><br><span class="line"><span class="keyword">import</span> fsPromises <span class="keyword">from</span> <span class="string">'fs/promises'</span>;</span><br><span class="line"><span class="keyword">import</span> path <span class="keyword">from</span> <span class="string">'path'</span>;</span><br><span class="line"><span class="keyword">import</span> convertToUnixPath <span class="keyword">from</span> <span class="string">'slash'</span>;</span><br><span class="line"><span class="keyword">import</span> { getAllFiles } <span class="keyword">from</span> <span class="string">'get-all-files'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> handleFile = <span class="keyword">async</span> (sourcePath) => {</span><br><span class="line"> <span class="comment">// 如果图片 width > 750，等比缩小图片宽高</span></span><br><span class="line"> <span class="keyword">if</span> (images(sourcePath).width() > <span class="number">375</span> * <span class="number">2</span>) {</span><br><span class="line"> <span class="keyword">const</span> fileType = path.extname(sourcePath).replace(<span class="string">'.'</span>, <span class="string">''</span>).toLowerCase();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> buffer = <span class="keyword">await</span> imagemin.buffer(</span><br><span class="line"> images(sourcePath)</span><br><span class="line"> .size(<span class="number">375</span> * <span class="number">2</span>) <span class="comment">// 调整图片的宽度，高度会等比缩小</span></span><br><span class="line"> .toBuffer(fileType),</span><br><span class="line"> {</span><br><span class="line"> plugins: [</span><br><span class="line"> imageminMozjpeg({ <span class="attr">quality</span>: <span class="number">70</span> }),</span><br><span class="line"> imageminPngquant({</span><br><span class="line"> quality: [<span class="number">0.6</span>, <span class="number">0.8</span>],</span><br><span class="line"> }),</span><br><span class="line"> ],</span><br><span class="line"> }</span><br><span class="line"> );</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> destinationPath = path.join(<span class="string">'./build'</span>, path.basename(sourcePath).toLowerCase());</span><br><span class="line"></span><br><span class="line"> <span class="keyword">await</span> fsPromises.mkdir(path.dirname(destinationPath), { <span class="attr">recursive</span>: <span class="literal">true</span> });</span><br><span class="line"></span><br><span class="line"> <span class="keyword">await</span> fsPromises.writeFile(destinationPath, buffer);</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// --- 纯粹的图片大小压缩 ---</span></span><br><span class="line"> <span class="keyword">await</span> imagemin([sourcePath], {</span><br><span class="line"> destination: <span class="string">'build'</span>, <span class="comment">// 结果输出到 build 目录</span></span><br><span class="line"> plugins: [</span><br><span class="line"> imageminMozjpeg({ <span class="attr">quality</span>: <span class="number">70</span> }), <span class="comment">// 压缩 jpg</span></span><br><span class="line"> imageminPngquant({</span><br><span class="line"> quality: [<span class="number">0.6</span>, <span class="number">0.8</span>],</span><br><span class="line"> }), <span class="comment">// 压缩 png</span></span><br><span class="line"> ],</span><br><span class="line"> });</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="comment">// 递归获取 images 目录下所有文件</span></span><br><span class="line">getAllFiles(<span class="string">'./images'</span>)</span><br><span class="line"> .toArray()</span><br><span class="line"> .then(<span class="function">(<span class="params">paths</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> paths</span><br><span class="line"> .map(<span class="function">(<span class="params">it</span>) =></span> convertToUnixPath(it)) <span class="comment">// 将 Windows 的 "\\" 路径转为 "/"</span></span><br><span class="line"> .filter(<span class="function">(<span class="params">it</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> ext = path.extname(it).toLowerCase();</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> [<span class="string">'.jpg'</span>, <span class="string">'.jpeg'</span>, <span class="string">'.png'</span>].includes(ext); <span class="comment">// 筛选出 .jpg, .jpeg, .png 后缀的文件</span></span><br><span class="line"> });</span><br><span class="line"> })</span><br><span class="line"> .then(<span class="function">(<span class="params">paths</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> paths.map(<span class="keyword">async</span> (p) => {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">await</span> handleFile(p);</span><br><span class="line"> } <span class="keyword">catch</span> (err) {</span><br><span class="line"> <span class="keyword">throw</span> err;</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> });</span><br></pre></td></tr></table></figure></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2022/04/15/umijs/">UmiJS</a></h1><div class="post-meta"> <span class="post-time">2022-04-15</span></div></header><div class="post-content"><h3 id="图片压缩"><a href="#图片压缩" class="headerlink" title="图片压缩"></a>图片压缩</h3><p>打包时使用 <code>image-webpack-loader</code> 压缩图片</p><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { defineConfig } <span class="keyword">from</span> <span class="string">'umi'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> defineConfig({</span><br><span class="line"> chainWebpack(memo, { env, webpack, createCSSRule }) {</span><br><span class="line"> <span class="comment">// 在默认的 images 规则上，添加 image-webpack-loader 来压缩图片</span></span><br><span class="line"> memo.<span class="keyword">module</span></span><br><span class="line"> .rule('images')</span><br><span class="line"> .use('image-webpack-loader')</span><br><span class="line"> .loader(require.resolve('image-webpack-loader'))</span><br><span class="line"> .options({</span><br><span class="line"> options: {</span><br><span class="line"> bypassOnDebug: <span class="literal">true</span>, <span class="comment">// [email protected]</span></span><br><span class="line"> disable: <span class="literal">true</span>, <span class="comment">// [email protected] and newer</span></span><br><span class="line"> },</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line">});</span><br></pre></td></tr></table></figure></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2022/04/06/bash/">bash/cmd 速记</a></h1><div class="post-meta"> <span class="post-time">2022-04-06</span></div></header><div class="post-content"><ul><li>windows 下查看端口占用</li></ul><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">netstat -ano|<span class="built_in">findstr</span> "<span class="number">13800</span>"</span><br></pre></td></tr></table></figure><ul><li>windows 下杀死占用端口的进程</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">taskkill /F /PID <pid></span><br></pre></td></tr></table></figure><ul><li>解决 git bash 中文显示乱码问题<ul><li><a href="https://zhuanlan.zhihu.com/p/133706032" target="_blank" rel="noopener">git 显示中文和解决中文乱码</a></li><li><a href="https://www.jianshu.com/p/6792dbc102d6" target="_blank" rel="noopener">git status 中文乱码问题</a></li></ul></li><li>刷新本地DNS缓存</li></ul><figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">ipconfig</span> /flushdns</span><br></pre></td></tr></table></figure></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2022/03/28/webpack/">Webpack 杂记</a></h1><div class="post-meta"> <span class="post-time">2022-03-28</span> <span class="post-category"><a href="/categories/webpack/">webpack</a></span></div></header><div class="post-content"><ol><li>关于为什么使用 <code>await import('@/common/themes/' + window.mode)</code> 时，会把 <code>@/common/themes</code> 目录下的其他文件（如，markdown 文件）也打包进 chunk！</li></ol><p>根据 <a href="https://webpack.docschina.org/guides/dependency-management/#require-with-expression" target="_blank" rel="noopener">webpack官方文档</a> 的解释：</p><p>当我们在使用 <code>import()</code> 或 <code>require()</code> 时，若其标识符参数中含有表达式，由于这种引入形式不能在打包编译阶段确定标识符参数的值，导致无法做静态分析、构建依赖图，因此会自动创建一个上下文（context）；</p><p>webpack 会解析<code>require()</code>调用中的字符串，提取出如下的一些信息，供 context 使用：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">从 '@/common/themes/' + window.mode 中提取出：</span><br><span class="line"></span><br><span class="line">Directory：@/common/themes</span><br><span class="line">Regular expression: /^.*/</span><br></pre></td></tr></table></figure><p>而后，webpack 会将目录（<code>@/common/themes</code>）下所有符合正则表达式（<code>/^.*/</code>）的模块都打包到一起；因此这种方式，可能会引入一些不必要的模块。</p><p>对于<code>require()</code>的引入方式，可通过设置<code>require.context()</code>解决；对于<code>import()</code>方式，可以使用 webpack 的<a href="https://webpack.docschina.org/api/module-methods/#magic-comments" target="_blank" rel="noopener">内联注释</a>解决该问题。</p><ol start="2"><li>less webpack 配置</li></ol><p>使用 <code>less-loader</code> 预编译 <code>*.less</code> 文件，而后使用 <code>cssnano</code> postcss 插件压缩 css，使用 <code>autoprefixer</code> 插件兼容各浏览器 css prefix。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line"> <span class="built_in">module</span>: {</span><br><span class="line"> rules: [</span><br><span class="line"> {</span><br><span class="line"> test: <span class="regexp">/\.less$/</span>,</span><br><span class="line"> exclude: <span class="regexp">/node_modules/</span>,</span><br><span class="line"> use: [</span><br><span class="line"> { <span class="attr">loader</span>: <span class="string">'style-loader'</span> },</span><br><span class="line"> { <span class="attr">loader</span>: <span class="string">'css-loader'</span> },</span><br><span class="line"> {</span><br><span class="line"> loader: <span class="string">'postcss-loader'</span>,</span><br><span class="line"> options: {</span><br><span class="line"> postcssOptions: process.env.NODE_ENV === <span class="string">'production'</span> ? {</span><br><span class="line"> plugins: [</span><br><span class="line"> <span class="built_in">require</span>(<span class="string">'cssnano'</span>)({</span><br><span class="line"> preset: <span class="string">'default'</span>,</span><br><span class="line"> }),</span><br><span class="line"> <span class="string">'autoprefixer'</span></span><br><span class="line"> ]</span><br><span class="line"> } : <span class="literal">undefined</span>,</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> { <span class="attr">loader</span>: <span class="string">'less-loader'</span> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line">};</span><br></pre></td></tr></table></figure></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2022/03/01/algorithm/binary-search/">二分查找</a></h1><div class="post-meta"> <span class="post-time">2022-03-01</span> <span class="post-category"><a href="/categories/algorithm/">algorithm</a></span></div></header><div class="post-content"><h3 id="基本的二分搜索"><a href="#基本的二分搜索" class="headerlink" title="基本的二分搜索"></a>基本的二分搜索</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// nums 递增</span></span><br><span class="line"><span class="keyword">let</span> binarySearch = <span class="function"><span class="keyword">function</span> (<span class="params">nums, target</span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> left = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">let</span> right = nums.length - <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">while</span> (left <= right) {</span><br><span class="line"> <span class="keyword">let</span> mid = left + ((right - left) >> <span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (nums[mid] == target) {</span><br><span class="line"> <span class="keyword">return</span> mid;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (nums[mid] < target) {</span><br><span class="line"> left = mid + <span class="number">1</span>;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> right = mid - <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>因为我们是要查找一个数存不存在，所以当 <code>left == right</code> 时，我们也应该继续执行 <code>while</code> 查找。</p><h3 id="寻找左侧边界的二分搜索"><a href="#寻找左侧边界的二分搜索" class="headerlink" title="寻找左侧边界的二分搜索"></a>寻找左侧边界的二分搜索</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> searchLeftBound = <span class="function"><span class="keyword">function</span> (<span class="params">nums, target</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (nums.length == <span class="number">0</span>) <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line"> <span class="keyword">let</span> left = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">let</span> right = nums.length;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">while</span> (left < right) {</span><br><span class="line"> <span class="keyword">let</span> mid = left + ((right - left) >> <span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (nums[mid] == target) {</span><br><span class="line"> right = mid;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (nums[mid] > target) {</span><br><span class="line"> right = mid;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (nums[mid] < target) {</span><br><span class="line"> left = mid + <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> nums[left] == target ? left : <span class="number">-1</span>;</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>对于 <code>nums = [1, 2, 2, 2, 3]</code> 和 <code>target = 2</code> 而言，<code>left</code> 的结果为 <code>1</code>，可以理解为 <code>nums</code> 中小于 <code>2</code> 的个数有 1 个。<br>当 <code>target</code> 大于 <code>nums</code> 所有数时，<code>left</code> 的结果为 <code>nums.length</code>；此时 <code>nums[left]</code> 即 <code>nums[nums.length]</code> 为 <code>undefined</code>，必然不等于 <code>target</code>。</p><h3 id="寻找右侧边界的二分搜索"><a href="#寻找右侧边界的二分搜索" class="headerlink" title="寻找右侧边界的二分搜索"></a>寻找右侧边界的二分搜索</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> searchRightBound = <span class="function"><span class="keyword">function</span> (<span class="params">nums, target</span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> left = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">let</span> right = nums.length - <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">while</span> (left <= right) {</span><br><span class="line"> <span class="keyword">let</span> mid = left + ((right - left) >> <span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (nums[mid] == target) {</span><br><span class="line"> left = mid + <span class="number">1</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (nums[mid] > target) {</span><br><span class="line"> right = mid - <span class="number">1</span>;</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (nums[mid] < target) {</span><br><span class="line"> left = mid + <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">if</span> (right < <span class="number">0</span> || nums[right] != target) <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> right;</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p>当 <code>nums</code> 为非递减顺序时，<code>right < 0</code> 表示 <code>target</code> 比所有元素都小，即算法不断在执行 <code>right = mid - 1</code>；</p></div></article><article class="post"><header class="post-header"><h1 class="post-title"><a class="post-link" href="/2022/02/27/algorithm/javascript/">JavaScript 算法常用语法</a></h1><div class="post-meta"> <span class="post-time">2022-02-27</span> <span class="post-category"><a href="/categories/algorithm/">algorithm</a></span></div></header><div class="post-content"><ol><li>除2取整</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> num = <span class="number">5</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// let res = Math.floor(num / 2);</span></span><br><span class="line"><span class="keyword">let</span> res = num >> <span class="number">1</span>;</span><br></pre></td></tr></table></figure><ol start="2"><li>拼接字符串 <code>String.prototype.concat()</code></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> s1 = <span class="string">'abc'</span>;</span><br><span class="line"><span class="keyword">var</span> s2 = <span class="string">'def'</span>;</span><br><span class="line"></span><br><span class="line">s1.concat(s2) <span class="comment">// "abcdef"</span></span><br><span class="line">s1 <span class="comment">// "abc"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 可以接受多个参数</span></span><br><span class="line"><span class="string">'a'</span>.concat(<span class="string">'b'</span>, <span class="string">'c'</span>) <span class="comment">// "abc"</span></span><br></pre></td></tr></table></figure><ol start="3"><li>截取子字符串 <code>String.prototype.slice()</code></li></ol><p><code>slice</code> 方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（<strong>不含该位置</strong>）。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'JavaScript'</span>.slice(<span class="number">0</span>, <span class="number">4</span>) <span class="comment">// "Java"</span></span><br></pre></td></tr></table></figure><p>如果省略第二个参数，则表示子字符串一直到原字符串结束。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'JavaScript'</span>.slice(<span class="number">4</span>) <span class="comment">// "Script"</span></span><br></pre></td></tr></table></figure><p>如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'JavaScript'</span>.slice(<span class="number">-6</span>) <span class="comment">// "Script"</span></span><br><span class="line"><span class="string">'JavaScript'</span>.slice(<span class="number">0</span>, <span class="number">-6</span>) <span class="comment">// "Java"</span></span><br><span class="line"><span class="string">'JavaScript'</span>.slice(<span class="number">-2</span>, <span class="number">-1</span>) <span class="comment">// "p"</span></span><br></pre></td></tr></table></figure><ol start="4"><li>Unicode 字符串比较</li></ol><p>字符串按照<strong>字典顺序</strong>进行比较。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'a'</span> > <span class="string">'z'</span> <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="string">'abc'</span> < <span class="string">'abd'</span> <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="string">'abc'</span> < <span class="string">'abcd'</span> <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="string">'a0b1'</span> < <span class="string">'a1b1'</span> <span class="comment">// true</span></span><br></pre></td></tr></table></figure><ol start="5"><li>截取子数组 <code>Array.prototype.slice()</code></li></ol><p><code>slice</code> 方法用于提取目标数组的一部分，返回一个新数组，原数组不变。<br>第一个参数为起始位置（从0开始），第二个参数为终止位置（<strong>但该位置的元素本身不包括在内</strong>）。<br>如果省略第二个参数，则一直返回到原数组的最后一个成员。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</span><br><span class="line"></span><br><span class="line">a.slice(<span class="number">0</span>) <span class="comment">// ["a", "b", "c"]</span></span><br><span class="line">a.slice(<span class="number">1</span>) <span class="comment">// ["b", "c"]</span></span><br><span class="line">a.slice(<span class="number">1</span>, <span class="number">2</span>) <span class="comment">// ["b"]</span></span><br><span class="line">a.slice(<span class="number">2</span>, <span class="number">6</span>) <span class="comment">// ["c"]</span></span><br><span class="line">a.slice() <span class="comment">// ["a", "b", "c"]</span></span><br></pre></td></tr></table></figure><p>如果 <code>slice</code> 方法的参数是负数，则表示倒数计算的位置。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</span><br><span class="line">a.slice(<span class="number">-2</span>) <span class="comment">// ["b", "c"]</span></span><br><span class="line">a.slice(<span class="number">-2</span>, <span class="number">-1</span>) <span class="comment">// ["b"]</span></span><br></pre></td></tr></table></figure><ol start="6"><li>删除原数组元素 <code>Array.prototype.splice()</code></li></ol><p><code>splice</code> 方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。<strong>注意，该方法会改变原数组。</strong></p><p><code>splice</code> 的第一个参数是删除的起始位置（从0开始），第二个参数是<strong>被删除的元素个数</strong>。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'d'</span>, <span class="string">'e'</span>, <span class="string">'f'</span>];</span><br><span class="line">a.splice(<span class="number">4</span>, <span class="number">2</span>) <span class="comment">// ["e", "f"]</span></span><br><span class="line">a <span class="comment">// ["a", "b", "c", "d"]</span></span><br></pre></td></tr></table></figure><ol start="7"><li>数组排序 <code>Array.prototype.sort()</code></li></ol><p><code>sort</code> 方法对数组成员进行排序，默认是按照<strong>字典顺序</strong>排序。排序后，<strong>原数组将被改变</strong>。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="string">'d'</span>, <span class="string">'c'</span>, <span class="string">'b'</span>, <span class="string">'a'</span>];</span><br><span class="line"></span><br><span class="line">arr.sort(); <span class="comment">// ['a', 'b', 'c', 'd']</span></span><br><span class="line"></span><br><span class="line">arr <span class="comment">// ['a', 'b', 'c', 'd']</span></span><br></pre></td></tr></table></figure><ul><li><code>number[]</code> 升序排序</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">numbers.sort(<span class="function">(<span class="params">a, b</span>) =></span> a - b);</span><br></pre></td></tr></table></figure><ul><li><code>number[]</code> 降序排序</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">numbers.sort(<span class="function">(<span class="params">a, b</span>) =></span> b - a);</span><br></pre></td></tr></table></figure><ol start="8"><li><code>Array.prototype.reverse()</code></li></ol><p><code>reverse</code> 方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将<strong>改变原数组</strong>。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>];</span><br><span class="line"></span><br><span class="line">a.reverse() <span class="comment">// ["c", "b", "a"]</span></span><br><span class="line">a <span class="comment">// ["c", "b", "a"]</span></span><br></pre></td></tr></table></figure><ol start="9"><li>合并数组 <code>Array.prototype.concat()</code></li></ol><p><code>concat</code> 方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，<strong>原数组不变</strong>。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'hello'</span>];</span><br><span class="line"></span><br><span class="line">arr.concat([<span class="string">'world'</span>], [<span class="string">'!'</span>]) <span class="comment">// ["hello", "world", "!"]</span></span><br><span class="line"></span><br><span class="line">arr <span class="comment">// ['hello']</span></span><br><span class="line"></span><br><span class="line">[<span class="number">2</span>].concat({<span class="attr">a</span>: <span class="number">1</span>}, {<span class="attr">b</span>: <span class="number">2</span>}) <span class="comment">// [2, {a: 1}, {b: 2}]</span></span><br></pre></td></tr></table></figure><ol start="10"><li>易混淆知识点</li></ol><ul><li><code>in</code> 和 <code>hasOwnProperty</code></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = {};</span><br><span class="line"></span><br><span class="line"><span class="string">'toString'</span> <span class="keyword">in</span> obj <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line">obj.hasOwnProperty(<span class="string">'toString'</span>) <span class="comment">// false</span></span><br></pre></td></tr></table></figure><ul><li><code>typeof</code></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span> <span class="number">1</span> <span class="comment">// 'number'</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">false</span> <span class="comment">// 'boolean'</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="string">'abbc'</span> <span class="comment">// 'string'</span></span><br><span class="line"><span class="keyword">typeof</span> [] <span class="comment">// 'object'</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">null</span> <span class="comment">// 'object'</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{} <span class="comment">// 'function'</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">undefined</span> <span class="comment">// 'undefined'</span></span><br></pre></td></tr></table></figure></div></article><nav class="pagination"> <a class="next" href="/page/2/"><span class="next-text">Next</span><i class="iconfont icon-right"></i></a></nav></section></div></div></main><footer id="footer" class="footer"><div class="social-links"><a href="https://github.com/FredZeng" class="iconfont icon-github" title="github"></a></div><div class="copyright"> <span class="power-by">Powered by <a class="hexo-link" href="https://hexo.io/">Hexo</a></span> <span class="division">|</span> <span class="theme-info">Theme - <a class="theme-link" href="https://github.com/ahonn/hexo-theme-even">Even</a></span> <span class="copyright-year">©2019 - 2024<span class="heart"><i class="iconfont icon-heart"></i></span> <span class="author">FredTsang</span></span></div></footer><div class="back-to-top" id="back-to-top"><i class="iconfont icon-up"></i></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/lib/jquery/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/lib/slideout/slideout.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/js/src/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/js/src/clipboard-use.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/FredZeng/FredZeng.github.io@master/js/src/even.js?v="></script></body></html>