打开一个网站中的不同页面时，相同的js文件会被重复加载吗？

作者：JasonYang
链接：https://www.zhihu.com/question/41184156/answer/135195798
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

如果不会被重复加载，机制是什么？
这个问题其实就是web的cache问题，首先加载是肯定的，但是接下来的过程会有不同，
我们看看加载的时候发生了什么：
1. 客户端请求一个js文件（a.js）。
2. 服务器返回a.js，并在给它加上一个Last-Modified/ETag。
3. 客户端获取到a.js，并将它连同Last-Modified/ETag一起缓存。
4. 客户再次请求该文件（比如说刷新页面，或是同站跳转），并将上次请求时服务器返回的Last-Modified/ETag 作为请求头的If-Modified-Since/If-None-Match一起传递给服务器。
5. 服务器检查该If-Modified-Since/If-None-Match(即前一次响应头中的Last-Modified或ETag），并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。
由上面可以看出，虽然在客户端还是发起了一次请求，但是可以避免接下来更多的服务器操作，并且没有返回该文件而只是一个 HTTP Header，从而大大的降低带宽的消耗，提高用户体验。

这里的讲下304状态码。304状态码表示客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。如果客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Last Modified 。服务器只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。对于静态文件，例如：CSS、图片，服务器会自动完成 Last Modified 和 If Modified Since 的比较，完成缓存或者更新。

还有一种情况：
对于动态页面，就是动态产生的页面，往往没有包含 Last Modified 信息，这样浏览器、网关等都不会做缓存，也就是在每次请求的时候都完成一个 200 的请求。因此，对于动态页面做缓存加速，首先要在 Response 的 HTTP Header 中增加 Last Modified 定义，其次根据 Request 中的 If Modified Since 和被请求内容的更新时间来返回 200 或者 304 。

这里还要注意：在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别 - 沫鱼 - 博客园

最后建议看下http协议