html文件直接可以浏览器打开，为什么很多人选择本地服务器localhost打开？有什么不一样吗？

Question

html文件直接可以浏览器打开，为什么很多人选择本地服务器localhost打开？有什么不一样吗？除了脚本文件，感觉没必要本地服务器打开，有什么原因吗？

Answer 1

最直接的区别，很容易注意到，一个是file协议，另一个是http协议。file协议更多的是将该请求视为一个本地资源访问请求，和你使用资源管理器打开是一样的，是纯粹的请求本地文件。而http请求方式则是通过假架设一个web服务器，解析http协议的请求然后向浏览器返回资源信息。我们所开发的html文件最后必定是会以网页的形式部署在服务器上，通过http协议访问，所以我们开发中也尽可能模拟线上环境，架设本地服务器，来避免file协议与http协议实现过程中的某些差异性，如某些API的差异、跨域请求的差异等。举个最容易验证的例子：在页面引入一张绝对路径的图片，即'/image/example.png'，然后分别通过这两种方式打开页面，file协议会将资源请求到根路径，而http协议虽然也会请求到根路径，但是是相对本地架设的服务器的根路径，一般也就是项目文件夹的路径。

Answer 2

尽量简单解释，希望能看懂：

是否需要用本地服务器打开 html 分几种情况：

• html 中是否是纯静态模板页

  纯静态模板页指页面内没有“请求服务器”获取数据，展示的是为了布局占位临时写的“假”数据。比如，“姓名”、“年龄”，后端数据还没完成，前端先写模板页，随便写“姓名： 张三”、“年龄：18”，先把页面布局和样式完成。这个阶段不需要开启本地服务器
  

• html 中引用的静态资源是否需要构建工具打包编译

  比如 js 使用了 ES6 新特性、css 使用了 less 编写等，这时可能需要使用 Webpack 等工具进行编译。这时，一般需要启动一个本地 node.js 服务去执行编译和预览

•  开发中是否用到“实时刷新，同步预览”

  如果开发中修改文件不想每次都点击刷新或按 F5，保存时自动刷新，可以借助一些工具，比如 livereload、browserSync 等。用这些工具，需要启动一个本地服务
  

• 开发中是否用到多终端调试

  如果开发的静态页面想在某品牌手机真机上看显示效果，调试兼容性问题，除了最笨的把页面和静态资源发送到手机上，还以可以起一个本地服务，电脑与手机连接到同一 Wifi 下，用手机访问本地服务 loalhost 对应的内网 ip 地址即可