为何在HTML中设置viewport可提升移动端浏览器页面响应速度？

测试代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    </head>
    <body>
        <div x-data="{ open: false }">
            <button @click="open = ! open">Toggle</button>

            <div x-show="open" @click.outside="open = false" style="display: none;">Contents...</div>
        </div>
    </body>
</html>

问题现象 #

在移动端Chrome浏览器中查看上述页面时，点击按钮后内容会立即显示；但移除<meta name="viewport" content="width=device-width, initial-scale=1.0">标签后，按钮点击与内容显示之间会出现明显的小延迟，该延迟仅出现在手机端，桌面浏览器无此问题。

原因解析 #

• 未添加viewport标签时，移动端浏览器会默认把页面当作桌面端页面渲染，视口宽度设为980px左右（不同浏览器略有差异），再将页面缩小适配手机屏幕。这时候浏览器会触发300ms点击延迟——它需要等待一段时间，判断你是要执行单次点击，还是双击缩放页面，避免误操作。这就是你感受到的延迟来源。
• 添加正确的viewport标签后，相当于明确告诉浏览器：这个页面是为移动端设计的，视口宽度等于设备宽度，初始缩放比例为1。此时浏览器无需处理双击缩放逻辑，会直接响应点击事件，去掉了300ms的等待时间，所以点击响应变得即时。
• 另外，AlpineJS这类前端框架的DOM状态更新（比如open = !open）依赖事件触发时机，没有viewport时的延迟会让框架状态更新也被延后，进一步放大了延迟的感知。

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