JavaScript能否在页面渲染前更新input输入框的初始值？

出现原始值闪现的核心原因是$(document).ready会等待整个DOM树完全解析完成后才触发执行，此时浏览器大概率已经完成了首次页面绘制，用户就会看到原始值再跳转的过程。可以通过以下方案解决：

方案1：脚本紧随input元素放置（最优） #

浏览器解析HTML是逐行顺序执行的，当input元素解析完成后，立刻执行紧随其后的脚本，此时还未触发页面首次绘制，值修改完成后才会渲染内容，完全不会出现闪现：

<input id="my_field" type="number" value="你的原始默认值">
<script>
// 无需包裹任何加载监听事件，此时input已经存在于DOM中
const myField = document.getElementById('my_field');
// parseInt添加第二个参数10，避免数字被错误解析为八进制
myField.value = parseInt(myField.value, 10) + 1;
</script>

如果需要使用jQuery实现，写法如下：

<input id="my_field" type="number" value="你的原始默认值">
<script>
$("#my_field").val(parseInt($("#my_field").val(), 10) + 1);
</script>

方案2：脚本必须放在头部的兼容方案 #

如果项目规范要求脚本必须放在<head>标签内，可以用原生DOMContentLoaded事件替代$(document).ready，它的触发时机远早于jQuery的ready事件，绝大多数场景下可以避免闪现：

document.addEventListener('DOMContentLoaded', function() {
  const myField = document.getElementById('my_field');
  myField.value = parseInt(myField.value, 10) + 1;
});

注意事项 #

• 外部引入的脚本不要添加defer/async属性，否则会导致脚本延迟执行，仍可能出现闪现问题
• 若input的原始值是服务端渲染生成的，优先直接在服务端完成值的计算输出，性能最好

内容的提问来源于stack exchange，提问作者John