江苏龙网

  1. 首页 > 生活 > >

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

如果不会被重复加载，机制是什么？这个问题其实就是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协议
■网友
如果刷新或者跳转页面，js肯定会被重新加载，但不一定会下载。不过你理解的加载可能就是下载的意思。缓存可以避免资源重复下载，打开f12，Network，然后刷新，status是304的为从浏览器缓存中读取的文件，200为重新下载的文件。缓存是现代网站提高用户体验必备的技术，你可以通过搜索来初步了解。
■网友
刷新页面都会重复加载文件，就算缓存也一样。如果不要重复加载，只能做单页应用，用js来控制页面的切换。现在都有很多现成的框架，例如：Framework7，Senna.js
■网友
作为新手菜鸟说说我的理解每次打开网页都会重新加载，不过前面貌似哪位大神的方法304或者强制catch应该可以解决这个问题？模版我就不是很了解了不过我觉得小网站单页面 然后请求模版什么就可以保证不重复拿相同js了-.-


    推荐阅读


    上一篇：跨考计算机，还是生物信息

    下一篇：你们都用啥软件扫描二维码