https://June6699.github.io/tags/%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF/Recent content in 技术/前端 on June's BlogHugozh-cnWed, 08 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-2--%E5%AF%B9%E8%B1%A1/Wed, 08 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-2--%E5%AF%B9%E8%B1%A1/<h2 id="0一些链接">0、一些链接</h2> <div class="callout callout-important" data-callout="important" role="note" aria-label="重要"> <div class="callout-head"> <span class="callout-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 10h8"/><path d="M8 14h5"/><path d="M6 19h8a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4H10a4 4 0 0 0-4 4z"/><path d="m6 19-2 2v-5"/></svg></span> <span class="callout-title">重要</span> </div> <div class="callout-body"><p>文档手册：<a href="https://www.runoob.com/jsref/jsref-tutorial.html">JavaScript 和 HTML DOM 参考手册 | 菜鸟教程</a></p> <p>廖雪峰（本笔记来源）：<a href="https://liaoxuefeng.com/books/javascript">廖雪峰 JavaScript教程</a></p>https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-2--%E5%AF%B9%E8%B1%A1/Wed, 08 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-2--%E5%AF%B9%E8%B1%A1/<h2 id="0一些链接">0、一些链接</h2> <div class="callout callout-important" data-callout="important" role="note" aria-label="重要"> <div class="callout-head"> <span class="callout-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 10h8"/><path d="M8 14h5"/><path d="M6 19h8a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4H10a4 4 0 0 0-4 4z"/><path d="m6 19-2 2v-5"/></svg></span> <span class="callout-title">重要</span> </div> <div class="callout-body"><p>文档手册：<a href="https://www.runoob.com/jsref/jsref-tutorial.html">JavaScript 和 HTML DOM 参考手册 | 菜鸟教程</a></p> <p>廖雪峰（本笔记来源）：<a href="https://liaoxuefeng.com/books/javascript">廖雪峰 JavaScript教程</a></p>https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-1--%E5%85%A5%E9%97%A8+%E5%87%BD%E6%95%B0/Mon, 06 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-1--%E5%85%A5%E9%97%A8+%E5%87%BD%E6%95%B0/<h2 id="0一些链接">0、一些链接</h2> <div class="callout callout-important" data-callout="important" role="note" aria-label="重要"> <div class="callout-head"> <span class="callout-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 10h8"/><path d="M8 14h5"/><path d="M6 19h8a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4H10a4 4 0 0 0-4 4z"/><path d="m6 19-2 2v-5"/></svg></span> <span class="callout-title">重要</span> </div> <div class="callout-body"><p>文档手册：<a href="https://www.runoob.com/jsref/jsref-tutorial.html">JavaScript 和 HTML DOM 参考手册 | 菜鸟教程</a></p> <p>廖雪峰（本笔记来源）：<a href="https://liaoxuefeng.com/books/javascript">廖雪峰 JavaScript教程</a></p>https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-1--%E5%85%A5%E9%97%A8+%E5%87%BD%E6%95%B0/Mon, 06 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-1--%E5%85%A5%E9%97%A8+%E5%87%BD%E6%95%B0/<h2 id="0一些链接">0、一些链接</h2> <div class="callout callout-important" data-callout="important" role="note" aria-label="重要"> <div class="callout-head"> <span class="callout-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 10h8"/><path d="M8 14h5"/><path d="M6 19h8a4 4 0 0 0 4-4V9a4 4 0 0 0-4-4H10a4 4 0 0 0-4 4z"/><path d="m6 19-2 2v-5"/></svg></span> <span class="callout-title">重要</span> </div> <div class="callout-body"><p>文档手册：<a href="https://www.runoob.com/jsref/jsref-tutorial.html">JavaScript 和 HTML DOM 参考手册 | 菜鸟教程</a></p> <p>廖雪峰（本笔记来源）：<a href="https://liaoxuefeng.com/books/javascript">廖雪峰 JavaScript教程</a></p>https://June6699.github.io/posts/pretext-demo/Fri, 03 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/pretext-demo/<p>这个页面不再只是“换背景色”，而是做成真正可交互的 <a href="https://github.com/chenglou/pretext">pretext</a> 实验：你可以拖动滑块，实时改变文本容器宽度，观察行数和高度的动态变化。</p> <h3 id="pretext-demo-扩展展示">Pretext Demo 扩展展示</h3> <h4 id="shrinkwrap-showdown紧凑宽度">Shrinkwrap Showdown（紧凑宽度）</h4> <h5 id="演示效果">演示效果</h5> <div class="pretext-demo"> <section class="pretext-page"> <div class="pretext-card"> <p class="pretext-intro">左侧是普通块级文本，右侧启用 pretext 的气泡收紧，行数尽量保持一致但宽度更紧凑。</p>https://June6699.github.io/posts/pretext-demo/Fri, 03 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/pretext-demo/<p>这个页面不再只是“换背景色”，而是做成真正可交互的 <a href="https://github.com/chenglou/pretext">pretext</a> 实验：你可以拖动滑块，实时改变文本容器宽度，观察行数和高度的动态变化。</p> <h3 id="pretext-demo-扩展展示">Pretext Demo 扩展展示</h3> <h4 id="shrinkwrap-showdown紧凑宽度">Shrinkwrap Showdown（紧凑宽度）</h4> <h5 id="演示效果">演示效果</h5> <div class="pretext-demo"> <section class="pretext-page"> <div class="pretext-card"> <p class="pretext-intro">左侧是普通块级文本，右侧启用 pretext 的气泡收紧，行数尽量保持一致但宽度更紧凑。</p>https://June6699.github.io/posts/vid2ascii-gif%E6%9E%84%E5%BB%BA%E6%97%A5%E5%BF%97/Fri, 03 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/vid2ascii-gif%E6%9E%84%E5%BB%BA%E6%97%A5%E5%BF%97/<h2 id="本地化动态字符视频渲染系统开发与迭代实录">本地化动态字符视频渲染系统：开发与迭代实录</h2> <p>本文档完整记录了“本地化动态 ASCII 字符视频渲染系统”从最初的构想、踩坑、架构推翻到最终实现纯前端视频压制、字幕解析完全体的全过程。</p> <hr> <h2 id="项目起源与初探基于-pretext-的构想">项目起源与初探：基于 Pretext 的构想</h2> <p>在项目初期，我们的核心诉求是将视频的每一帧转化为 ASCII 字符并在浏览器中高帧率播放。前端渲染大量长文本换行时，极易触发 DOM 回流（Reflow），导致页面卡顿甚至崩溃。</p>https://June6699.github.io/posts/vid2ascii-gif%E6%9E%84%E5%BB%BA%E6%97%A5%E5%BF%97/Fri, 03 Apr 2026 00:00:00 +0000https://June6699.github.io/posts/vid2ascii-gif%E6%9E%84%E5%BB%BA%E6%97%A5%E5%BF%97/<h2 id="本地化动态字符视频渲染系统开发与迭代实录">本地化动态字符视频渲染系统：开发与迭代实录</h2> <p>本文档完整记录了“本地化动态 ASCII 字符视频渲染系统”从最初的构想、踩坑、架构推翻到最终实现纯前端视频压制、字幕解析完全体的全过程。</p> <hr> <h2 id="项目起源与初探基于-pretext-的构想">项目起源与初探：基于 Pretext 的构想</h2> <p>在项目初期，我们的核心诉求是将视频的每一帧转化为 ASCII 字符并在浏览器中高帧率播放。前端渲染大量长文本换行时，极易触发 DOM 回流（Reflow），导致页面卡顿甚至崩溃。</p>https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-0.1--%E6%95%B0%E5%AD%97%E7%B2%BE%E5%BA%A6/Sun, 15 Mar 2026 00:00:00 +0000https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-0.1--%E6%95%B0%E5%AD%97%E7%B2%BE%E5%BA%A6/<h2 id="1-为什么整数安全范围是-2而不是-2">1. 为什么整数安全范围是 ±2⁵³，而不是 ±2⁶³？</h2> <p>因为 JavaScript 里的 <code>Number</code> <strong>不是整数类型</strong>，而是 <strong>64 位双精度浮点数</strong>（IEEE 754 double）。</p> <p>这两种&quot;64 位&quot;的本质区别是：</p>https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-0.1--%E6%95%B0%E5%AD%97%E7%B2%BE%E5%BA%A6/Sun, 15 Mar 2026 00:00:00 +0000https://June6699.github.io/posts/%E5%BB%96%E9%9B%AA%E5%B3%B0-javascript-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-0.1--%E6%95%B0%E5%AD%97%E7%B2%BE%E5%BA%A6/<h2 id="1-为什么整数安全范围是-2而不是-2">1. 为什么整数安全范围是 ±2⁵³，而不是 ±2⁶³？</h2> <p>因为 JavaScript 里的 <code>Number</code> <strong>不是整数类型</strong>，而是 <strong>64 位双精度浮点数</strong>（IEEE 754 double）。</p> <p>这两种&quot;64 位&quot;的本质区别是：</p>