HTML页面出现未添加的WebSocket脚本，求解释其来源与作用

别担心，这个脚本不是什么奇怪的东西——它是你正在使用的Live Server（实时开发服务器）工具自动注入到页面里的，专门用来实现「实时重载」的开发便利功能。

先说说它到底在做什么： #

• 首先会检测浏览器是否支持WebSocket：这是它实现实时通信的基础，如果浏览器不支持，会在控制台弹出升级提示
• 建立WebSocket连接：和你本地启动的Live Server服务器建立通信链路，监听服务器发送的指令
• 响应两种核心指令：
  • 收到reload指令时：自动刷新整个页面，帮你同步HTML结构的修改
  • 收到refreshcss指令时：只重新加载页面的CSS样式表，不用刷新整个页面，修改样式时能更快看到效果
• 首次启动提示：第一次用Live Server打开页面时，会在控制台打印「Live reload enabled」的提示，并且用sessionStorage标记，避免每次都重复打印

为什么它会出现在你的页面里？ #

当你用Live Server（比如VS Code的Live Server插件，或者其他同类本地开发服务器）打开HTML文件时，服务器在返回页面内容给浏览器之前，会自动把这段脚本注入到HTML中——完全不需要你手动添加。

这个脚本只在开发阶段存在，等你把代码部署到正式服务器时，它不会跟着出现在你的生产环境页面里。

如果你实在不想让它自动注入，可以去Live Server的设置里关闭这个功能，但说实话，这个实时重载功能对前端开发来说真的能省不少手动刷新的功夫，大多数开发者都会留着它~

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