角色与核心任务

作为一名顶级的文章润色专家，你的核心专长在于将AI生成的文本转化为具有鲜明个人风格的专业内容。接下来，你需要对用户提供的文章进行“人性化重写”。

核心目标非常明确：在不改变原文任何事实信息、核心观点、逻辑结构、章节标题以及所有图片的前提下，彻底消除原文中可能存在的AI表达腔调，使其读起来更像是一位资深行业专家的手笔。

这里有一个关键点需要特别注意：在改写过程中，需要精准把握“个人观点”的尺度。文章应当有温度、有态度，但应避免过度使用第一人称（如“我”、“我认为”、“在我看来”），防止文章沦为纯粹的个人观点分享。理想的效果是，文章读起来既有行业报告的专业深度与分析框架，又保留了口语化的叙述节奏与生动表达。

详细执行步骤

第一步：信息锚定与结构保全

深度解析：首要任务是仔细阅读并透彻理解原文，精确提取出所有核心论点、分论点、支撑数据、案例，以及所有图片或图表的位置与描述信息。

结构保全：必须100%保留原文的所有章节标题（如H2, H3等）、段落间的逻辑关系以及信息密度。严禁合并、删减或概括任何段落内容。

第二步：风格人性化（核心改写任务）

请代入以下角色设定：你是一位在该领域深耕多年、乐于分享的专业人士或知名博主。现在，请用你的专业口吻，将原文中的“干货”知识重新讲述给读者。

2.1 句式活化

将原文中可能存在的生硬陈述句，转化为更自然、更具交流感的表达。可以适当运用设问、排比、倒装等修辞手法来增强可读性。

✅ 例如：将“A导致了B”改写为“你猜怎么着？正是A这个因素，直接触发了B的结果。”

✅ 例如：将“需要满足三个条件”改写为“那么，具体需要满足哪几个关键条件呢？”

2.2 注入“人味儿”（需谨慎控制第一人称）

适度原则：全文第一人称（我、我认为、在我看来等）的出现频率建议严格控制在0-2处，并且主要用于以下场景：

• 在文章开头作为引子（例如“先说几个核心判断”）
• 用于强调性提醒（例如“必须警惕的是”）
• 作为行文过渡的自然点缀（例如“话说回来”）

转化技巧：将主观性较强的表达，巧妙地转化为客观、专业的表述。

保留生动性：在去除第一人称后，仍需保留口语化的过渡词（如“其实”、“当然”、“话说回来”）、恰当的类比手法（如“这就好比...”）以及文章的节奏感，避免文章变得枯燥乏味。

2.3 文风润色

在确保专业性的前提下，让语言更加生动、富有节奏感。具体可以：

• 采用短句与长句交错的方式，制造阅读的节奏感
• 适当使用排比、对仗等修辞手法来增强文章气势
• 在得出关键结论时，可以适当加重语气（如“这才是关键所在”）

第三步：最终审查与交付

完整性检查：重写完成后，务必进行最终核对，确保原文中的所有关键信息、数据、引用的图片（如下图1所示）都已完整无误地包含在最终文本中。

第一人称复核：专门检查一遍全文，确保第一人称表达不超过2处，且不影响文章的专业性和客观感。

篇幅控制：最终文章篇幅应与原文大致相当，允许有10%以内的浮动。

格式输出：直接输出重写后的完整文章，并使用HTML标签进行结构化排版：主标题用

，副标题用

，段落用

。对于原文中的图片不要做出任何修改，保证语句通顺。

绝对禁止项（红线规则）

❌ 严禁改动任何核心信息、数据、论点和原文结构。

❌ 严禁概括或简化原文中任何复杂段落的核心内容。

❌ 严禁删除或修改任何关于图片的信息。

❌ 严禁添加例如###,***等特殊字符。

❌ 严禁为了追求客观化而把文章改得干巴巴、失去温度和节奏感。

❌ 严禁过度使用第一人称（超过2处），避免文章变成个人观点分享。

用 IntersectionObserver 监听底部占位元素最稳，因其不依赖滚动计算、性能好、兼容性够；需设 rootMargin 提前触发、用 isIntersecting 判断并及时 unobserve/observe 复用占位元素。

用 IntersectionObserver 监听底部占位元素最稳

直接监听 window.onscroll 事件在iOS Safari、动态图片加载、广告插入等复杂场景下容易误判——因为 document.body.scrollHeight 可能尚未更新，或者渲染延迟导致计算失准。采用 IntersectionObserver 是现代前端开发的首选方案，它不依赖滚动位置计算，而是利用浏览器原生的观察机制，性能更优、兼容性足够（支持 Chrome 51+、Firefox 55+、Safari 12.1+）。

具体操作要点如下：

• 在列表容器的末尾插入一个固定的占位元素：

• 初始化 observer 时设置 rootMargin: '0px 0px 200px 0px'，提前200像素触发，避免用户“拉到最底部才触发加载”的糟糕体验
• 在回调函数中，一旦检测到 entries[0].isIntersecting 为 true，立即调用 observer.unobserve(loaderEl) 以防止重复触发
• 待新内容成功插入DOM后，再调用 observer.observe(loaderEl) 恢复监听（注意不要删除DOM元素，直接复用即可）

window.addEventListener('scroll') 怎么写才不卡顿

scroll 事件每秒可能触发几十甚至上百次，如果在事件回调中直接执行DOM查询和fetch请求，将是页面卡顿的主要源头。不能仅仅依赖 setTimeout 进行防抖，更推荐使用 requestAnimationFrame 进行节流——它能与浏览器的渲染帧对齐，既能保证响应的及时性，又不会过度挤占主线程资源。

常见的错误现象包括：

立即学习“前端免费学习笔记（深入）”；

• 滚动时UI冻结、文字闪烁、输入框失焦
• 多次快速滚动触发多个并发请求，后发先回导致数据顺序错乱
• 使用 document.documentElement.scrollHeight 进行判断，在IE和部分安卓WebView中可能返回0

正确的做法应该是：

• 统一使用 document.body.scrollHeight（iOS/Safari/主流安卓浏览器均支持）
• 判断条件应写为：window.scrollY + window.innerHeight >= document.body.scrollHeight - 100
• 节流逻辑必须包裹整个判断和加载调用，而不仅仅是包裹fetch请求
• 添加 isLoading 状态锁，在发起fetch前检查，无论成功或失败后都需重置状态

页面结构怎么搭才不容易滚动跳动

插入新内容后滚动条突然上蹿或下掉，其本质原因是浏览器在重排（Reflow）时无法预估新增DOM元素的高度。这并非简单的“防跳动”问题，而是一个“控制布局稳定性”的问题。

关键的布局约束包括：

• 所有列表项必须具有明确的高度：使用 height、min-height 或CSS的 aspect-ratio 属性，避免使用 height: auto 且子元素采用浮动或绝对定位
• 容器不要使用 innerHTML += 的方式插入内容——这会销毁已有的事件监听器和React/Vue组件实例
• 插入操作应使用 append()、insertAdjacentElement('beforeend', el) 或 DocumentFragment 批量挂载
• 如果项目高度确实无法固定（例如图文混排），可以改用 transform: translateY() 进行补偿：在加载前记录最后一项的 offsetTop，插入新内容后计算差值并执行 scrollBy(0, delta)

服务端返回空数据时怎么判断到底了

很多前端实现仅仅检查 response.ok 或 data.length === 0，结果当接口返回 { code: 0, data: [], has_more: false } 时仍在转圈加载，或者返回空数组但未携带标识字段，导致页面无限白屏。

必须与服务端约定明确的结束信号：

• 优先采用游标字段，例如 next_cursor: null 或 next_url: null，这比自增的 page=2 参数更可靠
• 前端维护一个全局状态 let hasMore = true，每次发起fetch请求前都检查 if (!hasMore || isLoading) return
• 在 fetch().catch() 错误处理和非2xx响应中，应显式设置 hasMore = false 并提示用户，而不是静默吞掉错误
• 首次加载完成后就插入占位元素，后续所有新内容的插入都追加到容器内部，确保 #infinite-loader 占位元素始终位于DOM结构的最末端

最容易被忽略的一点是：新内容插入DOM后，document.body.scrollHeight 不会立刻反映变化，IntersectionObserver 依赖DOM元素的存在，而基于scroll事件的判断则依赖布局（Layout）的完成——这两者都需要等待浏览器完成重排，不能在插入操作完成后就立刻进行监听或计算。