按钮应在 dom 就绪且业务条件满足时显示，初始必须用 css 隐藏（如 display: none），避免闪屏；优先用 document.readystate === 'complete' 判断，而非 window.onload 或 settimeout；需同步校验依赖（如 api、sdk、全局变量）是否就绪。
按钮在页面加载完毕后才显示，本质是控制 DOM 渲染时机和初始可见性。不是靠“延迟显示”，而是靠“默认隐藏 + 条件触发显示”。关键在于：别让按钮在 HTML 里就可见，也别依赖 JS 加载完再 document.getElementById(...).style.display = 'block' —— 这样容易闪屏或触发重排。
按钮初始状态必须用 CSS 隐藏，而不是靠 JS 控制
很多人把按钮写在 HTML 里，然后用 JS 在 window.onload 或 $(document).ready() 里设 style.display = 'block'，结果首屏会先看到按钮一闪再消失，再出现——这是典型渲染抖动。
- 正确做法：按钮元素从一开始就加
class="hidden"或内联style="display: none" - CSS 中定义
.hidden { display: none; }，确保它在 CSSOM 构建阶段就被隐藏，不参与首次绘制 - 避免用
visibility: hidden或opacity: 0，它们仍占布局空间，且无法解决“首次渲染可见”的问题
用 document.readyState === 'complete' 判断加载完成更轻量
window.onload 等待所有资源（图片、CSS、字体）下载完毕，而 document.readyState 只关注 DOM 解析完成。对“按钮显示”这种只需 DOM 就绪的场景，document.readyState 更快、更可控。
- 直接在
<script></script>标签里检查：if (document.readyState === 'complete') { showButton(); } else { document.addEventListener('readystatechange', () => { if (document.readyState === 'complete') showButton(); }); } - 不用 jQuery 的
$(document).ready()—— 如果项目没引入 jQuery，为一个按钮引入整库不划算；即使已引入，也要注意它内部仍基于DOMContentLoaded，和readyState行为基本一致 - 不要用
setTimeout延迟几秒再显示——网络波动下不可靠，且违背“加载完即显示”的本意
按钮显示逻辑要和真实业务就绪状态绑定
单纯等 DOM 加载完就显示按钮，可能造成用户点击后报错。比如按钮功能依赖某个 API 初始化、某个第三方 SDK 就绪、或某个全局变量未定义。
- 如果按钮用于触发
fetch请求，确保fetch在当前环境可用（检查typeof fetch !== 'undefined'） - 如果按钮调用
gtag或fbq，得等对应脚本加载完成，可监听load事件：document.querySelector('script[src*="gtag"]').addEventListener('load', showButton) - 最稳妥的方式是组合判断：
if (document.readyState === 'complete' && typeof myApp !== 'undefined' && myApp.isReady) { showButton(); }
真正难的不是“怎么让按钮晚点出现”，而是“怎么确定它该出现的那一刻”。DOM 就绪只是起点，业务上下文就绪才是终点。漏掉后者，按钮亮了也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
