JS单页面应用如何实现

单页面应用(spa)相比传统多页面应用具有更流畅的用户体验、前后端分离、易于构建移动应用和减少服务器压力等优点,但也存在首屏加载时间长、seo优化困难、复杂性高和依赖javascript等缺点;为解决首屏加载慢的问题,可通过代码分割、懒加载、资源压缩、cdn加速、tree shaking、预渲染和服务器端渲染(ssr)等方式优化;针对seo,可采用ssr、预渲染、动态更新meta标签、使用history api、生成站点地图、添加结构化数据、利用fetch as google工具及提升可访问性来改善;在选择react、vue或angular框架时,应根据团队经验、项目规模和需求权衡,react适合大型复杂应用,vue适合快速开发中小型项目,angular适用于企业级应用,各框架均有优劣,需结合实际情况选择,最终答案取决于具体场景与团队能力。

JS单页面应用如何实现

JS单页面应用(SPA)通过动态更新页面内容,而非每次都向服务器请求新页面,从而提供更流畅的用户体验。其核心在于利用JavaScript操控DOM,配合路由管理和数据交互,模拟传统多页面应用的导航效果。

解决方案:

前端路由: 使用如

vue-router

react-router

angular router

等库,或者手写简单的路由控制。路由负责监听URL变化,并根据URL加载对应的组件或视图。手写路由的一个简单示例如下:

const routes = {  '/home': () => { document.body.innerHTML = '

Home Page

'; }, '/about': () => { document.body.innerHTML = '

About Page

'; }, '/contact': () => { document.body.innerHTML = '

Contact Page

'; }};function router() { const path = location.hash.slice(1) || '/home'; // 获取URL hash const route = routes[path] || (() => { document.body.innerHTML = '

404 Not Found

'; }); // 找不到路由则显示404 route();}window.addEventListener('hashchange', router); // 监听hash变化window.addEventListener('load', router); // 页面加载时执行

组件化开发: 将页面拆分成独立的、可复用的组件。这有助于代码维护和复用。流行的框架都强调组件化。

数据管理: SPA通常需要管理复杂的状态。可以使用

Redux

Vuex

Context API

等工具来集中管理应用状态。

异步数据获取: 使用

fetch

axios

等工具与后端API进行交互,获取数据并更新页面。

SEO优化: 由于SPA的内容是动态生成的,搜索引擎可能无法正确抓取。可以使用服务器端渲染(SSR)或预渲染来解决这个问题。

SPA的核心挑战在于如何有效地管理状态、路由和异步操作,同时保证性能和可维护性。

单页面应用相比传统多页面应用有哪些优缺点?

优点:

更流畅的用户体验: 页面切换无需重新加载整个页面,响应速度更快。前后端分离: 前端专注于UI开发,后端提供API,职责分离。易于构建移动应用: SPA可以很容易地打包成原生移动应用。减少服务器压力: 减少了不必要的页面请求。

缺点:

首屏加载时间较长: 需要加载所有的JS和CSS资源。SEO优化困难: 搜索引擎爬虫难以抓取动态生成的内容。复杂性较高: 需要处理路由、状态管理、异步操作等问题。JavaScript依赖: 如果禁用JavaScript,SPA将无法正常工作。

如何解决SPA的首屏加载速度慢的问题?

代码分割(Code Splitting): 将应用拆分成多个小的chunk,按需加载。Webpack等工具可以实现代码分割。懒加载(Lazy Loading): 延迟加载非必要的资源,例如图片、组件等。压缩资源: 使用Gzip或Brotli压缩JS、CSS和HTML文件。CDN加速: 将静态资源部署到CDN上,加快访问速度。Tree Shaking: 移除未使用的代码,减小bundle体积。预渲染(Prerendering): 在构建时生成静态HTML页面,提高首屏加载速度。服务器端渲染(SSR): 在服务器端渲染页面,返回完整的HTML,有利于SEO。

SPA如何进行SEO优化?

服务器端渲染(SSR): 这是最有效的SEO优化方式。在服务器端执行JavaScript代码,生成完整的HTML页面,搜索引擎可以直接抓取。预渲染(Prerendering): 在构建时生成静态HTML页面,提供给搜索引擎。适用于内容变化不频繁的SPA。Meta标签: 动态更新

</pre>
<div class="contentsignin"></div>
</div>
<p>、</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;"></pre>
<div class="contentsignin"></div>
</div>
<p>等标签,提供更准确的页面信息。<strong>使用History API:</strong> 使用HTML5 History API(</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">pushState</pre>
<div class="contentsignin"></div>
</div>
<p>和</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">replaceState</pre>
<div class="contentsignin"></div>
</div>
<p>)来管理URL,而不是hash。这可以使URL更友好,有利于SEO。<strong>站点地图(Sitemap):</strong> 创建站点地图,帮助搜索引擎发现和索引页面。<strong>结构化数据(Structu<span class="wpcom_tag_link"><a href="https://www.chuangxiangniao.com/p/tag/red" title="red" target="_blank">red</a></span> Data):</strong> 使用JSON-LD等格式添加结构化数据,帮助搜索引擎理解页面内容。<strong>使用Fetch As Google工具:</strong> 使用Google Search Console的Fetch As Google工具,检查搜索引擎如何抓取你的页面。<strong>确保页面可访问性:</strong> 确保页面对所有用户都可访问,包括使用屏幕阅读器的用户。</p>
<p>选择哪个前端框架(React、Vue、Angular)来构建SPA?</p>
<p>选择框架取决于团队的经验、项目需求和个人偏好。</p>
<p><strong>React:</strong> 灵活性高,生态系统庞大,适合构建大型、复杂的应用。需要自行选择状态管理、路由等库。学习曲线适中。<strong>Vue:</strong> 易于学习和使用,适合快速开发中小型应用。官方提供了</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">vue-router</pre>
<div class="contentsignin"></div>
</div>
<p>和</p>
<div class="code" style="position:relative;padding:0px;margin:0px">
<pre class="brush:php;toolbar:false;">Vuex</pre>
<div class="contentsignin"></div>
</div>
<p>等库。<strong>Angular:</strong> 功能强大,提供了一整套解决方案,适合构建企业级应用。学习曲线较陡峭。</p>
<p>没有绝对的最佳选择,每个框架都有其优缺点。可以根据具体情况进行选择。例如,如果团队熟悉React,并且需要构建一个大型应用,那么React可能是一个不错的选择。如果需要快速开发一个小型应用,Vue可能更适合。Angular适合构建大型企业级应用,但需要投入更多的时间学习。</p>
<p>以上就是JS单页面应用如何实现的详细内容,更多请关注创想鸟其它相关文章!</p>
<div class="entry-readmore"><div class="entry-readmore-btn"></div></div>                                                        <div class="entry-copyright"><p>版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。<br>
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。<br>
发布者:程序猿,转转请注明出处:<span>https://www.chuangxiangniao.com/p/1515781.html</span></p></div>                        </div>

                        <div class="entry-tag"><a href="https://www.chuangxiangniao.com/p/tag/abiaoqian" rel="tag">a标签</a><a href="https://www.chuangxiangniao.com/p/tag/css" rel="tag">css</a><a href="https://www.chuangxiangniao.com/p/tag/jsdanyemianyingyong" rel="tag">js单页面应用</a><a href="https://www.chuangxiangniao.com/p/tag/red" rel="tag">red</a><a href="https://www.chuangxiangniao.com/p/tag/vue" rel="tag">vue</a><a href="https://www.chuangxiangniao.com/p/tag/shixian" rel="tag">实现</a><a href="https://www.chuangxiangniao.com/p/tag/gongju" rel="tag">工具</a><a href="https://www.chuangxiangniao.com/p/tag/yanchijiazai" rel="tag">延迟加载</a></div>
                        <div class="entry-action">
                            <div class="btn-zan" data-id="1515781"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up-fill"></use></svg></i> 赞 <span class="entry-action-num">(0)</span></div>
                                                            <div class="btn-dashang">
                                    <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-cny-circle-fill"></use></svg></i> 打赏                                    <span class="dashang-img dashang-img2">
                                                                                    <span>
                                                <img src="//cdn.chuangxiangniao.com/me/2025/10/wx.jpg" alt="微信扫一扫"/>
                                                    微信扫一扫                                            </span>
                                                                                                                            <span>
                                                <img src="//cdn.chuangxiangniao.com/me/2025/10/zfb.jpg" alt="支付宝扫一扫"/>
                                                    支付宝扫一扫                                            </span>
                                                                            </span>
                                </div>
                                                    </div>

                        <div class="entry-bar">
                            <div class="entry-bar-inner">
                                                                <div class="entry-bar-info entry-bar-info2">
                                    <div class="info-item meta">
                                                                                    <a class="meta-item j-heart" href="javascript:;" data-id="1515781"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i> <span class="data">0</span></a>                                        <a class="meta-item" href="#comments"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i> <span class="data">0</span></a>                                                                            </div>
                                    <div class="info-item share">
                                                                                    <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="1515781" data-qrcode="https://www.chuangxiangniao.com/p/1515781.html">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> 生成海报                                            </a>
                                                                                    <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg></i>                                            </a>
                                                                                    <a class="meta-item douban" data-share="douban" target="_blank" rel="nofollow noopener noreferrer" href="#">
                                                <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-douban"></use></svg></i>                                            </a>
                                                                            </div>
                                    <div class="info-item act">
                                        <a href="javascript:;" id="j-reading"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="entry-author">
    <h3 class="entry-author-title">关于作者</h3>    <div class="entry-author-inner">
        <div class="entry-author-avatar">
            <a class="avatar j-user-card" href="https://www.chuangxiangniao.com/user/3" target="_blank" data-user="3"><img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-120 photo' height='120' width='120' /></a>
        </div>
        <div class="entry-author-content">
            <div class="entry-author-info">
                <h4 class="entry-author-name">
                    <a class="j-user-card" href="https://www.chuangxiangniao.com/user/3" target="_blank" data-user="3">程序猿<span class="user-group">签约作者</span></a>
                </h4>
                <div class="entry-author-action">
                    <button type="button" class="wpcom-btn btn-xs btn-follow j-follow btn-primary" data-user="3"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-add"></use></svg></i>关注</button><button type="button" class="wpcom-btn btn-primary btn-xs btn-message j-message" data-user="3"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-mail-fill"></use></svg></i>私信</button>                </div>
            </div>
                            <div class="entry-author-stats">            <div class="user-stats-item">
                <b>371.9K</b>
                <span>文章</span>
            </div>
                    <div class="user-stats-item">
                <b>0</b>
                <span>评论</span>
            </div>
                    <div class="user-stats-item">
                <b>1</b>
                <span>粉丝</span>
            </div>
        </div>
                        <div class="entry-author-description">这个人很懒,什么都没有留下~</div>        </div>
    </div>
</div>                        <div class="entry-page">
                    <div class="entry-page-prev j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541352979052.jpg?imageMogr2/crop/480x300/gravity/center">
                <a href="https://www.chuangxiangniao.com/p/1515779.html" title="掌握JavaScript字符串模式匹配与数据结构优化" rel="prev">
                    <span>掌握JavaScript字符串模式匹配与数据结构优化</span>
                </a>
                <div class="entry-page-info">
                    <span class="pull-left"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-left-double"></use></svg></i> 上一篇</span>
                    <span class="pull-right">2025年12月20日 09:34:21</span>
                </div>
            </div>
                            <div class="entry-page-next j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://img.php.cn/upload/article/001/246/273/175541306965253.jpg">
                <a href="https://www.chuangxiangniao.com/p/1515783.html" title="解决Ably授权连接拒绝错误:API_ROOT配置深度解析" rel="next">
                    <span>解决Ably授权连接拒绝错误:API_ROOT配置深度解析</span>
                </a>
                <div class="entry-page-info">
                    <span class="pull-right">下一篇 <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-arrow-right-double"></use></svg></i></span>
                    <span class="pull-left">2025年12月20日 09:34:28</span>
                </div>
            </div>
            </div>
                                                                <div class="entry-related-posts">
                            <h3 class="entry-related-title">相关推荐</h3><ul class="entry-related cols-3 post-loop post-loop-default"><li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515779.html" title="掌握JavaScript字符串模式匹配与数据结构优化" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="掌握JavaScript字符串模式匹配与数据结构优化" decoding="async" fetchpriority="high" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541352979052.jpg?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515779.html" target="_blank" rel="bookmark">
                                 掌握JavaScript字符串模式匹配与数据结构优化            </a>
        </h3>
        <div class="item-excerpt">
            <p>本文旨在解决JavaScript中字符串包含特定范围数字的判断问题。首先,揭示includes()方法与逻辑或运算符||结合使用时的常见误区,解释其仅检查第一个真值的问题。随后,重点介绍如何利用正则表达式RegExp.test()进行精确的模式匹配,以判断字符串中是否存在特定数字范围。最后,提出更优…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515779.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515771.html" title="什么是Portal?Portal的使用场景" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="什么是Portal?Portal的使用场景" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541430253847.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515771.html" target="_blank" rel="bookmark">
                                 什么是Portal?Portal的使用场景            </a>
        </h3>
        <div class="item-excerpt">
            <p>portal是一种高度集成、个性化的信息与应用入口,其本质是为用户提供“单一事实来源”和“单一操作界面”。它不同于传统网站的信息广播模式,而是基于用户身份、角色和偏好动态呈现内容,实现“千人千面”的定制化服务。传统网站重在“看”,面向大众展示固定内容;而portal重在“用”,支持登录、操作、交互,…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515771.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515767.html" title="什么是RAF?requestAnimationFrame" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="什么是RAF?requestAnimationFrame" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541454427311.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515767.html" target="_blank" rel="bookmark">
                                 什么是RAF?requestAnimationFrame            </a>
        </h3>
        <div class="item-excerpt">
            <p>requestAnimationFrame(RAF)是浏览器提供的API,用于在下一次重绘前执行动画代码,确保动画与屏幕刷新率同步,提升流畅性。它基于浏览器渲染机制,在每帧刷新前调用回调函数,避免了setTimeout或setInterval可能造成的掉帧问题。RAF在页面后台时会自动暂停,节省资源…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515767.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515763.html" title="JavaScript字符串中特定数字范围的匹配与验证" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JavaScript字符串中特定数字范围的匹配与验证" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541484423284.jpg?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515763.html" target="_blank" rel="bookmark">
                                 JavaScript字符串中特定数字范围的匹配与验证            </a>
        </h3>
        <div class="item-excerpt">
            <p>本文旨在详细阐述如何在JavaScript字符串中准确地判断是否包含特定范围内的数字。文章首先揭示了使用String.prototype.includes()配合逻辑或操作符进行多条件判断时常见的陷阱及其原理,随后深入讲解了如何利用正则表达式及其test()方法高效、精确地匹配字符串中的数字范围,并…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515763.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515761.html" title="JavaScript字符串数字范围匹配:从常见误区到正则表达式与最佳实践" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JavaScript字符串数字范围匹配:从常见误区到正则表达式与最佳实践" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541532560138.jpg?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515761.html" target="_blank" rel="bookmark">
                                 JavaScript字符串数字范围匹配:从常见误区到正则表达式与最佳实践            </a>
        </h3>
        <div class="item-excerpt">
            <p>本文深入探讨了在JavaScript中如何高效且准确地判断字符串中是否包含特定范围内的数字。针对常见的includes方法误用,文章揭示了其原理并提供了基于正则表达式/Galley[1-7]$/的解决方案,详细解释了正则表达式的匹配逻辑。此外,还提出了优化数据结构的设计建议,以避免复杂的字符串解析,…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515761.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item3">
    <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515757.html" target="_blank" rel="bookmark">
                                 js如何实现原型链的寄生继承            </a>
        </h3>
        <a class="item-images" href="https://www.chuangxiangniao.com/p/1515757.html" title="js如何实现原型链的寄生继承" target="_blank">
            <span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541581039898.png"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541581039898.png"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541581134386.png"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541581116886.png"></i></span>        </a>
        <div class="item-excerpt">
            <p>寄生继承是一种在原型继承基础上增强对象并返回新对象的继承方式,1. 它通过创建父类原型的副本并添加constructor属性来实现继承;2. 子类可扩展方法而不影响父类原型;3. 相比组合继承,它避免了两次调用父类构造函数,提升了性能;4. 适用于需定制化继承的场景,如组件或模型扩展;5. 为避免性…</p>
        </div>
        <div class="item-meta">
                            <div class="item-meta-li author">
                                        <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                        <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                        <span>程序猿</span>
                    </a>
                </div>
                        <span class="item-meta-li date">2025年12月20日</span>
                            <span class="item-meta-li dot">•</span>
                <a class="item-meta-li" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
                        <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515757.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515755.html" title="CommonJS和ES模块有什么区别" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="CommonJS和ES模块有什么区别" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541587190651.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515755.html" target="_blank" rel="bookmark">
                                 CommonJS和ES模块有什么区别            </a>
        </h3>
        <div class="item-excerpt">
            <p>commonjs采用同步加载,es模块采用异步加载;2. commonjs使用require和module.exports,es模块使用import和export;3. commonjs适用于node.js环境,es模块适用于浏览器及现代node.js环境;4. commonjs处理循环依赖时可能获…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515755.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515753.html" title="一致性哈希是什么?分布式系统中的应用" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="一致性哈希是什么?分布式系统中的应用" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541610816972.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515753.html" target="_blank" rel="bookmark">
                                 一致性哈希是什么?分布式系统中的应用            </a>
        </h3>
        <div class="item-excerpt">
            <p>一致性哈希通过环形空间和虚拟节点减少节点变动时的数据迁移,解决传统哈希在分布式系统中因节点增减导致大量数据重映射的问题,广泛应用于缓存、分布式数据库等场景。 一致性哈希,简单来说,就是一种特殊的哈希算法,它在分布式系统中用来解决节点动态增减带来的数据迁移问题。核心思想是尽量减少节点变化时需要迁移的数…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515753.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item3">
    <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515748.html" target="_blank" rel="bookmark">
                                 js怎么实现原型链的动态继承            </a>
        </h3>
        <a class="item-images" href="https://www.chuangxiangniao.com/p/1515748.html" title="js怎么实现原型链的动态继承" target="_blank">
            <span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540626657340.png"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540626687227.png"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540626792646.png"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540626747695.png"></i></span>        </a>
        <div class="item-excerpt">
            <p>javascript中的动态继承主要通过object.setprototypeof()、__proto__属性和object.create()实现;2. object.setprototypeof()是标准推荐方法,用于运行时修改对象原型,但可能影响性能和可维护性;3. __proto__为非标准且…</p>
        </div>
        <div class="item-meta">
                            <div class="item-meta-li author">
                                        <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                        <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                        <span>程序猿</span>
                    </a>
                </div>
                        <span class="item-meta-li date">2025年12月20日</span>
                            <span class="item-meta-li dot">•</span>
                <a class="item-meta-li" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
                        <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515748.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515746.html" title="JS如何实现Hook测试?Hook的测试方案" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JS如何实现Hook测试?Hook的测试方案" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540795237546.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515746.html" target="_blank" rel="bookmark">
                                 JS如何实现Hook测试?Hook的测试方案            </a>
        </h3>
        <div class="item-excerpt">
            <p>javascript中实现hook测试的核心方法包括猴子补丁、proxy对象、测试框架的mock/spy功能和装饰器,其中最推荐的是使用jest等现代测试框架提供的mock/spy功能,因其封装了底层机制,提供了安全、可维护的api,并能自动管理生命周期;猴子补丁虽简单直接但易污染全局环境,需手动恢…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515746.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515744.html" title="JS如何实现图表展示" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JS如何实现图表展示" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540866263587.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515744.html" target="_blank" rel="bookmark">
                                 JS如何实现图表展示            </a>
        </h3>
        <div class="item-excerpt">
            <p>选择合适的JS图表库需根据项目需求、易用性、性能、定制性和授权等因素综合考虑。Chart.js轻量易用,适合简单图表;ECharts功能强大,适合复杂可视化;D3.js灵活但学习成本高;Highcharts适合商业项目但需付费。数据准备通常为JSON或数组格式,通过配置选项在canvas中渲染图表。…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515744.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515742.html" title="js怎么获取屏幕分辨率" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="js怎么获取屏幕分辨率" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540914271719.jpg?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515742.html" target="_blank" rel="bookmark">
                                 js怎么获取屏幕分辨率            </a>
        </h3>
        <div class="item-excerpt">
            <p>获取屏幕分辨率应使用window.screen.width和window.screen.height,它们返回显示器的物理像素尺寸;而浏览器视口尺寸则通过window.innerwidth/window.innerheight或document.documentelement.clientwidth…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515742.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515740.html" title="什么是性能分析?Profiler的工具" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="什么是性能分析?Profiler的工具" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540950297840.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515740.html" target="_blank" rel="bookmark">
                                 什么是性能分析?Profiler的工具            </a>
        </h3>
        <div class="item-excerpt">
            <p>性能分析的核心在于通过Profiler工具从宏观到微观定位软件性能瓶颈,首先明确性能目标,再利用工具收集CPU、内存、I/O等运行数据,分析热点函数或资源消耗点,进而优化代码并反复验证,形成迭代优化过程;其重要性体现在提升用户体验、降低服务器成本、增强系统可伸缩性,并反映代码质量;常见的Profil…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515740.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515738.html" title="JS如何实现预加载?资源的预加载" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JS如何实现预加载?资源的预加载" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540974351989.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515738.html" target="_blank" rel="bookmark">
                                 JS如何实现预加载?资源的预加载            </a>
        </h3>
        <div class="item-excerpt">
            <p>答案:JS通过动态创建link标签或Image对象等方式实现资源预加载,核心依赖浏览器的preload、prefetch等机制,结合用户行为与关键资源优先级,精准提升页面加载速度与用户体验。 JS实现资源预加载,核心在于提前获取用户可能需要但当前页面尚未完全加载的资源,从而在实际使用时减少等待时间,…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515738.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item3">
    <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515733.html" target="_blank" rel="bookmark">
                                 如何利用事件循环优化CPU密集型任务?            </a>
        </h3>
        <a class="item-images" href="https://www.chuangxiangniao.com/p/1515733.html" title="如何利用事件循环优化CPU密集型任务?" target="_blank">
            <span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540986647719.png"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540986692640.png"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540986640938.png"></i></span><span><i class="item-images-el j-lazy" style="background-image: url('https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png');" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175540986782908.png"></i></span>        </a>
        <div class="item-excerpt">
            <p>利用事件循环优化cpu密集型任务的核心是将其从主线程剥离,避免阻塞事件循环导致应用无响应;2. 浏览器中使用web workers在后台线程执行计算,通过postmessage通信,保持主线程流畅;3. node.js中可选worker threads(轻量、高效、适合频繁交互的计算任务)或chil…</p>
        </div>
        <div class="item-meta">
                            <div class="item-meta-li author">
                                        <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                        <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                        <span>程序猿</span>
                    </a>
                </div>
                        <span class="item-meta-li date">2025年12月20日</span>
                            <span class="item-meta-li dot">•</span>
                <a class="item-meta-li" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
                        <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515733.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515727.html" title="JS如何实现完美哈希?完美哈希的构造" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JS如何实现完美哈希?完美哈希的构造" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541082369101.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515727.html" target="_blank" rel="bookmark">
                                 JS如何实现完美哈希?完美哈希的构造            </a>
        </h3>
        <div class="item-excerpt">
            <p>完美哈希是一种针对固定键集的无冲突哈希技术,通过预计算生成唯一索引映射,确保O(1)最坏情况查找性能。在JavaScript中,它通常以离线计算的查找表或映射对象形式使用,如{ “if”: 0, “else”: 1 },适用于编译器关键字匹配等静态场景…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515727.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515725.html" title="JS如何实现无限滚动" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JS如何实现无限滚动" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541100937910.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515725.html" target="_blank" rel="bookmark">
                                 JS如何实现无限滚动            </a>
        </h3>
        <div class="item-excerpt">
            <p>无限滚动的核心是监听滚动事件并在接近底部时动态加载内容;2. 通过判断scrollheight – scrolltop – clientheight是否小于阈值来触发加载;3. 使用isloading标志防止重复请求;4. 性能优化包括图片懒加载、节流/防抖、虚拟滚动和预加载…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515725.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515723.html" title="如何通过URL查询参数在不同HTML页面间传递数据" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="如何通过URL查询参数在不同HTML页面间传递数据" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541196765230.jpg?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515723.html" target="_blank" rel="bookmark">
                                 如何通过URL查询参数在不同HTML页面间传递数据            </a>
        </h3>
        <div class="item-excerpt">
            <p>本教程详细阐述了如何在不同HTML页面之间传递数据,特别聚焦于使用URL查询参数的方法。我们将通过一个点餐系统示例,演示如何从一个菜单页面获取商品名称和价格,并通过点击按钮将其安全地传递到支付页面,并在支付页面自动填充相应的表单输入框。文章涵盖了数据编码、URL构建以及在目标页面解析和使用这些数据,…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515723.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515721.html" title="js怎么判断两个对象是否相等" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="js怎么判断两个对象是否相等" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541220218158.jpg?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515721.html" target="_blank" rel="bookmark">
                                 js怎么判断两个对象是否相等            </a>
        </h3>
        <div class="item-excerpt">
            <p>javascript中直接使用==或===无法正确比较对象内容,因为它们只比较引用地址而非实际值;要实现内容相等判断,需进行深层比较。1. 首先检查引用是否相同,相同则返回true;2. 排除null或非对象类型,确保两者均为对象;3. 特殊处理date和regexp对象,分别比较时间戳和源码与标志…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515721.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
<li class="item item2">
        <div class="item-img">
        <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515719.html" title="JS如何实现图像识别" target="_blank" rel="bookmark">
            <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JS如何实现图像识别" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541268554642.png?imageMogr2/crop/480x300/gravity/center" />        </a>
                <a class="item-category" href="https://www.chuangxiangniao.com/news-2" target="_blank">好文分享</a>
            </div>
        <div class="item-content">
                <h3 class="item-title">
            <a href="https://www.chuangxiangniao.com/p/1515719.html" target="_blank" rel="bookmark">
                                 JS如何实现图像识别            </a>
        </h3>
        <div class="item-excerpt">
            <p>答案:JavaScript通过TensorFlow.js等库调用预训练模型实现图像识别,利用WebAssembly和WebGL加速,在浏览器端完成推理任务。这种方式保护用户隐私、降低服务器成本、支持离线使用,但受限于设备性能和模型大小,适合轻量级、实时性要求高的场景。 JavaScript(JS)实…</p>
        </div>
        <div class="item-meta">
                        <div class="item-meta-li author">
                                <a data-user="3" target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar j-user-card">
                    <img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-60 photo' height='60' width='60' />                    <span>程序猿</span>
                </a>
            </div>
                                    <span class="item-meta-li date">2025年12月20日</span>
            <div class="item-meta-right">
                <span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="https://www.chuangxiangniao.com/p/1515719.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span>            </div>
        </div>
    </div>
</li>
</ul>                        </div>
                    
<div id="comments" class="entry-comments">
    	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">发表回复 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/p/1515781.html#respond" style="display:none;"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-close"></use></svg></i></a></small></h3><div class="comment-form"><div class="comment-must-login">请登录后评论...</div><div class="form-submit"><div class="form-submit-text pull-left"><a href="https://www.chuangxiangniao.com/login?modal-type=login">登录</a>后才能评论</div> <button name="submit" type="submit" id="must-submit" class="wpcom-btn btn-primary btn-xs submit">提交</button></div></div>	</div><!-- #respond -->
		</div><!-- .comments-area -->
                </article>
                    </main>
            <aside class="sidebar">
        <div class="widget widget_html_myimg"><script id="w2898_19187">(function () {var zy = document.createElement("script");var flowExchange = window.location.protocol.split(":")[0];var http = flowExchange === "https"?"https":"http";zy.src = http+"://exchange.2898.com/index/flowexchange/getGoods?id=19187&sign=4de6b0e8762acf54f7fbff868909cdae";var s = document.getElementsByTagName("script");for(var i=0;i< s.length;i++){if(s[i].id){if(s[i].id == "w2898_19187"){s[i].parentNode.insertBefore(zy, s[i]);continue;}}}})();</script></div><div class="widget widget_profile"><div class="profile-cover"><img class="j-lazy" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="//bing.img.run/rand_uhd.php" alt="程序猿"></div>            <div class="avatar-wrap">
                <a target="_blank" href="https://www.chuangxiangniao.com/user/3" class="avatar-link"><img alt='程序猿的头像' src='//cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg' class='avatar avatar-120 photo' height='120' width='120' /></a></div>
            <div class="profile-info">
                <a target="_blank" href="https://www.chuangxiangniao.com/user/3" class="profile-name"><span class="author-name">程序猿</span><span class="user-group">签约作者</span></a>
                <p class="author-description">这个人很懒,什么都没有留下~</p>
                        <div class="profile-stats">
            <div class="profile-stats-inner">
                            <div class="user-stats-item">
                <b>371.9K</b>
                <span>文章</span>
            </div>
                    <div class="user-stats-item">
                <b>0</b>
                <span>评论</span>
            </div>
                    <div class="user-stats-item">
                <b>1</b>
                <span>粉丝</span>
            </div>
                    </div>
        </div>
    <button type="button" class="wpcom-btn btn-xs btn-follow j-follow btn-primary" data-user="3"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-add"></use></svg></i>关注</button><button type="button" class="wpcom-btn btn-primary btn-xs btn-message j-message" data-user="3"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-mail-fill"></use></svg></i>私信</button>            </div>
                        <div class="profile-posts">
                <h3 class="widget-title"><span>最近文章</span></h3>
                <ul>                    <li><a href="https://www.chuangxiangniao.com/p/1515783.html" title="解决Ably授权连接拒绝错误:API_ROOT配置深度解析">解决Ably授权连接拒绝错误:API_ROOT配置深度解析</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1515781.html" title="JS单页面应用如何实现">JS单页面应用如何实现</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1515779.html" title="掌握JavaScript字符串模式匹配与数据结构优化">掌握JavaScript字符串模式匹配与数据结构优化</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1515777.html" title="js 怎样解密数据">js 怎样解密数据</a></li>
                                    <li><a href="https://www.chuangxiangniao.com/p/1515775.html" title="JS如何实现迭代器模式">JS如何实现迭代器模式</a></li>
                </ul>            </div>
                        </div><div class="widget widget_post_thumb"><h3 class="widget-title"><span>最新发布</span></h3>            <ul>
                                    <li class="item">
                                                <div class="item-content item-no-thumb">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1515783.html" title="解决Ably授权连接拒绝错误:API_ROOT配置深度解析">解决Ably授权连接拒绝错误:API_ROOT配置深度解析</a></p>
                            <p class="item-date">2025年12月20日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515781.html" title="JS单页面应用如何实现">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JS单页面应用如何实现" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541322790921.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1515781.html" title="JS单页面应用如何实现">JS单页面应用如何实现</a></p>
                            <p class="item-date">2025年12月20日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515779.html" title="掌握JavaScript字符串模式匹配与数据结构优化">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="掌握JavaScript字符串模式匹配与数据结构优化" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541352979052.jpg?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1515779.html" title="掌握JavaScript字符串模式匹配与数据结构优化">掌握JavaScript字符串模式匹配与数据结构优化</a></p>
                            <p class="item-date">2025年12月20日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515777.html" title="js 怎样解密数据">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="js 怎样解密数据" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541364413151.jpg?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1515777.html" title="js 怎样解密数据">js 怎样解密数据</a></p>
                            <p class="item-date">2025年12月20日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515775.html" title="JS如何实现迭代器模式">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JS如何实现迭代器模式" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541376655891.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1515775.html" title="JS如何实现迭代器模式">JS如何实现迭代器模式</a></p>
                            <p class="item-date">2025年12月20日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515773.html" title="JS如何实现哈希集合?哈希冲突处理">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JS如何实现哈希集合?哈希冲突处理" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541412240446.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1515773.html" title="JS如何实现哈希集合?哈希冲突处理">JS如何实现哈希集合?哈希冲突处理</a></p>
                            <p class="item-date">2025年12月20日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515771.html" title="什么是Portal?Portal的使用场景">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="什么是Portal?Portal的使用场景" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541430253847.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1515771.html" title="什么是Portal?Portal的使用场景">什么是Portal?Portal的使用场景</a></p>
                            <p class="item-date">2025年12月20日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515769.html" title="JS中的变量如何声明">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="JS中的变量如何声明" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541442262900.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1515769.html" title="JS中的变量如何声明">JS中的变量如何声明</a></p>
                            <p class="item-date">2025年12月20日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515767.html" title="什么是RAF?requestAnimationFrame">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="什么是RAF?requestAnimationFrame" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541454427311.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1515767.html" title="什么是RAF?requestAnimationFrame">什么是RAF?requestAnimationFrame</a></p>
                            <p class="item-date">2025年12月20日</p>
                        </div>
                    </li>
                                    <li class="item">
                                                    <div class="item-img">
                                <a class="item-img-inner" href="https://www.chuangxiangniao.com/p/1515765.html" title="什么是A算法?A算法的启发式搜索">
                                    <img width="480" height="300" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="什么是A算法?A算法的启发式搜索" decoding="async" data-original="https://cdn.chuangxiangniao.com/www/2025/12/175541472428057.png?imageMogr2/crop/480x300/gravity/center" />                                </a>
                            </div>
                                                <div class="item-content">
                            <p class="item-title"><a href="https://www.chuangxiangniao.com/p/1515765.html" title="什么是A算法?A算法的启发式搜索">什么是A算法?A算法的启发式搜索</a></p>
                            <p class="item-date">2025年12月20日</p>
                        </div>
                    </li>
                            </ul>
        </div><div class="widget widget_tags"><h3 class="widget-title"><span>热门标签</span></h3>        <div class="tagcloud">
                            <a href="https://www.chuangxiangniao.com/p/tag/ai" title="ai">ai</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/gongju" title="工具">工具</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/app" title="app">app</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/php" title="php">php</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/liulanqi" title="浏览器">浏览器</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/windows" title="windows">windows</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/go" title="go">go</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/java" title="java">java</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/diannao" title="电脑">电脑</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/linux" title="linux">linux</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/win" title="win">win</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/python" title="python">python</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/c%20%20" title="c++">c++</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/o" title="o">o</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/red" title="red">red</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/js" title="js">js</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/mysql" title="mysql">mysql</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/a" title="a">a</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/2025" title="2025">2025</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/caozuoxitong" title="操作系统">操作系统</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/weishenme" title="为什么">为什么</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/css" title="css">css</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/html" title="html">html</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/git" title="git">git</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/jiaoyisuo" title="交易所">交易所</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/json" title="json">json</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/bian-4" title="币安">币安</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/jiamihuobi" title="加密货币">加密货币</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/binance" title="binance">binance</a>
                            <a href="https://www.chuangxiangniao.com/p/tag/qubie" title="区别">区别</a>
                    </div>
        </div><div class="widget widget_links"><h3 class="widget-title"><span>旗下站点</span></h3>
	<ul class='xoxo blogroll'>
<li><a href="https://www.chuangxiangniao.com/xin/" target="_blank">信用人生</a></li>
<li><a href="https://www.ankegu.com/" target="_blank">免费在线测八字</a></li>
<li><a href="https://www.chuangxiangniao.com/" target="_blank">创想鸟</a></li>
<li><a href="https://www.chuangxiangniao.com/pay/">复利引擎</a></li>
<li><a href="https://www.chuangxiangniao.com/she/" target="_blank">奢社</a></li>
<li><a href="https://www.chuangxiangniao.com/law/" target="_blank">法外狂徒</a></li>
<li><a href="https://www.chuangxiangniao.com/wifi/" target="_blank">玩转路由网</a></li>

	</ul>
</div>
    </aside>
    </div>
</div>
<footer class="footer">
    <div class="container">
        <div class="footer-col-wrap footer-with-icon">
                        <div class="footer-col footer-col-copy">
                <ul class="footer-nav hidden-xs"><li id="menu-item-4095" class="menu-item menu-item-4095"><a target="1" href="https://www.chuangxiangniao.com/falyushengming">法律声明</a></li>
<li id="menu-item-4099" class="menu-item menu-item-4099"><a target="1" href="https://www.chuangxiangniao.com/about">关于我们</a></li>
<li id="menu-item-4098" class="menu-item menu-item-4098"><a target="1" href="https://www.chuangxiangniao.com/contact">联系我们</a></li>
<li id="menu-item-4097" class="menu-item menu-item-4097"><a target="1" href="https://www.chuangxiangniao.com/yonghuxieyi">用户协议</a></li>
<li id="menu-item-4094" class="menu-item menu-item-privacy-policy menu-item-4094"><a target="1" rel="privacy-policy" href="https://www.chuangxiangniao.com/yinsizhengce">隐私政策</a></li>
<li id="menu-item-4096" class="menu-item menu-item-4096"><a target="1" href="https://www.chuangxiangniao.com/mianzeshengming">版权及免责声明</a></li>
</ul>                <div class="copyright">
                    <p>版权声明:本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。</p>
<p>如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao#163.com (请把#更换@)举报,一经查实,本站将立刻删除。</p>
<p>Copyright © 2019-2025 <a href="https://www.chuangxiangniao.com/" target="_blank" rel="noopener noreferrer">创想鸟</a> 版权所有 <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer">皖ICP备2024035995号-1</a></p>
                </div>
            </div>
                        <div class="footer-col footer-col-sns">
                <div class="footer-sns">
                                                <a href="https://www.chuangxiangniao.com/sitemap/sitemap.xml" target="_blank" aria-label="icon">
                                <i class="wpcom-icon fa fa-sitemap sns-icon"></i>                                                            </a>
                                                    <a class="sns-wx" href="javascript:;" aria-label="icon">
                                <i class="wpcom-icon fa fa-wechat sns-icon"></i>                                <span style="background-image:url('//cdn.chuangxiangniao.com/me/2025/10/wechat.jpg');"></span>                            </a>
                                        </div>
            </div>
                    </div>
    </div>
</footer>
            <div class="action action-style-0 action-color-1 action-pos-1" style="bottom:450px;">
                                                <div class="action-item">
                                    <i class="wpcom-icon fa fa-wechat action-item-icon"></i>                                                                        <div class="action-item-inner action-item-type-1">
                                        <img class="action-item-img" src="//cdn.chuangxiangniao.com/me/2025/10/wechat.jpg" alt="关注微信">                                    </div>
                                </div>
                                                                                        <div class="action-item j-share">
                        <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i>                                            </div>
                                    <div class="action-item gotop j-top">
                        <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i>                                            </div>
                            </div>
        <script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/www/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/justnews/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="imwpf-this-page">
var g_this_page = {
    "type": "post",
    "id": 1515781,
    "terms": [{"id":49069,"tax":"category"},{"id":1064,"tax":"post_tag"},{"id":190,"tax":"post_tag"},{"id":60342,"tax":"post_tag"},{"id":111,"tax":"post_tag"},{"id":144,"tax":"post_tag"},{"id":1553,"tax":"post_tag"},{"id":118,"tax":"post_tag"},{"id":376,"tax":"post_tag"}]
};console.log(g_this_page);
</script><div class="imwpcache_status_ok"></div><script type="text/javascript" id="main-js-extra">
/* <![CDATA[ */
var _wpcom_js = {"webp":"","ajaxurl":"https://www.chuangxiangniao.com/wp-admin/admin-ajax.php","theme_url":"https://www.chuangxiangniao.com/wp-content/themes/justnews","slide_speed":"5000","is_admin":"0","lang":"zh_CN","js_lang":{"share_to":"\u5206\u4eab\u5230:","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"share":"1","share_items":{"weibo":{"title":"\u5fae\u535a","icon":"weibo"},"wechat":{"title":"\u5fae\u4fe1","icon":"wechat"},"qq":{"title":"QQ\u597d\u53cb","icon":"qq"},"qzone":{"title":"QQ\u7a7a\u95f4","icon":"qzone"},"douban":{"name":"douban","title":"\u8c46\u74e3","icon":"douban"},"mail":{"title":"\u90ae\u4ef6","icon":"mail-fill"}},"lightbox":"1","post_id":"1515781","user_card_height":"356","poster":{"notice":"\u8bf7\u300c\u70b9\u51fb\u4e0b\u8f7d\u300d\u6216\u300c\u957f\u6309\u4fdd\u5b58\u56fe\u7247\u300d\u540e\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"484","fixed_sidebar":"1","dark_style":"2","font_url":"//fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500&display=swap","follow_btn":"\u003Ci class=\"wpcom-icon wi\"\u003E\u003Csvg aria-hidden=\"true\"\u003E\u003Cuse xlink:href=\"#wi-add\"\u003E\u003C/use\u003E\u003C/svg\u003E\u003C/i\u003E\u5173\u6ce8","followed_btn":"\u5df2\u5173\u6ce8","user_card":"1"};
//# sourceURL=main-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/js/main.js?ver=6.21.2" id="main-js"></script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/js/icons-2.8.9.js?ver=2.8.9" id="wpcom-icons-js"></script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/themer/assets/js/comment-reply.js?ver=6.21.2" id="comment-reply-js"></script>
<script type="text/javascript" id="wwa-js-extra">
/* <![CDATA[ */
var _wwa_js = {"ajaxurl":"https://www.chuangxiangniao.com/wp-admin/admin-ajax.php","post_id":"1515781","rewarded":""};
//# sourceURL=wwa-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/plugins/justweapp/js/script.js?ver=3.16.1" id="wwa-js"></script>
<script type="text/javascript" id="wp-postviews-cache-js-extra">
/* <![CDATA[ */
var viewsCacheL10n = {"admin_ajax_url":"https://www.chuangxiangniao.com/wp-admin/admin-ajax.php","nonce":"981b92f89c","post_id":"1515781"};
//# sourceURL=wp-postviews-cache-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/plugins/wp-postviews/postviews-cache.js?ver=1.78" id="wp-postviews-cache-js"></script>
<script type="text/javascript" id="wp-postviews-cache-js-after">
/* <![CDATA[ */
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
jQuery(document).ready(function($) {
                $.get(viewsCacheL10n.admin_ajax_url + '?action=show_postviews&id=' + viewsCacheL10n.post_id, function(data) {
                    $('.ajax-views').html(data);
                });
            });
//# sourceURL=wp-postviews-cache-js-after
/* ]]> */
</script>
<script type="text/javascript" id="wpcom-member-js-extra">
/* <![CDATA[ */
var _wpmx_js = {"ajaxurl":"https://www.chuangxiangniao.com/wp-admin/admin-ajax.php","plugin_url":"https://www.chuangxiangniao.com/wp-content/plugins/wpcom-member/","max_upload_size":"52428800","post_id":"1515781","js_lang":{"login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c"},"login_url":"https://www.chuangxiangniao.com/login?modal-type=login","register_url":"https://www.chuangxiangniao.com/register?modal-type=register","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u624b\u673a\u53f7\u7801","terms":"\u8bf7\u9605\u8bfb\u5e76\u540c\u610f\u6761\u6b3e","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u4eba\u673a\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"},"hidden_content":"1","copy_post":"1","copy_post_text":"\u4ed8\u8d39\u89e3\u9501\u5f53\u524d\u6587\u7ae0\u590d\u5236\u6743\u9650","copy_post_container":".entry-content"};
//# sourceURL=wpcom-member-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/plugins/wpcom-member/js/index.js?ver=1.7.17" id="wpcom-member-js"></script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/plugins/wpcom-member-pro/js/index.js?ver=2.3.1" id="wpcom-member-pro-js"></script>
<script type="text/javascript" src="https://www.chuangxiangniao.com/wp-content/themes/justnews/js/wp-embed.js?ver=6.21.2" id="wp-embed-js"></script>
 <!--百度自动推送代码开始-->
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<!--百度自动推送代码结束-->
<!--360自动推送代码开始-->
<script>
(function(){
   var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?d7af82f5d5a7d431d4b53f4d0069f989":"https://jspassport.ssl.qhimg.com/11.0.1.js?d7af82f5d5a7d431d4b53f4d0069f989";
   document.write('<script src="' + src + '" id="sozz"><\/script>');
})();
</script>
<!--360自动推送代码结束-->
<!--头条自动推送代码开始-->
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?e1627df632cb7d8422ff5a171866ae673d0a9fd8a088d803a9d0f3c3bef0aa6adb92f43d4b1c8ff14071b55e1e71da09d918f66d1949fb3b81012c4e4e9e4a34644f149b0c276c07ebf664bf3622e408";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script>
<!--头条自动推送代码结束-->
<!--百度统计代码开始-->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?357b28aff465596d316075fdd7393426";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<!--百度统计代码结束-->
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","@id":"https://www.chuangxiangniao.com/p/1515781.html","url":"https://www.chuangxiangniao.com/p/1515781.html","headline":"JS单页面应用如何实现","description":"单页面应用(spa)相比传统多页面应用具有更流畅的用户体验、前后端分离、易于构建移动应用和减少服务器压力等优点,但也存在首屏加载时间长、seo优化困难、复杂性高和依赖javascript等缺点;为解决首屏加载慢的问题,可通过代码分割、懒加载、资源压缩、cdn加速、tree shaking、预渲染和服…","datePublished":"2025-12-20T09:34:24+08:00","dateModified":"2025-12-20T09:34:24+08:00","author":{"@type":"Person","name":"程序猿","url":"https://www.chuangxiangniao.com/user/3","image":"http://cdn.chuangxiangniao.com/www/2025/10/2025102208472691.jpg"},"image":["https://cdn.chuangxiangniao.com/www/2025/12/175541322790921.png"]}</script>
<script>console.log('命中缓存\n缓存页加载耗时: 0.0061s\n缓存页生成时间: 2025-12-20 11:39:49')</script></body>
</html><!--cached by imwpcache 2025-12-20 11:39:49-->