作者：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协议

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

  1. 解决加载WEB页面时，由于JS文件引用过多影响页面打开速度的问题

    1.一般做法 一般我们会把所有的<script>元素都应该放在页面的<head>标签里,但由于是顺序加载,因此只有当所有JavaScript代码都被依次下载.解析和执行完之后, ...

  2. 解决HTML加载时，外部js文件引用较多，影响页面打开速度问题

    解决HTML加载时,外部js文件引用较多,影响页面打开速度问题   通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的j ...

  3. js文件需要jsp页面中的div时，此js文件必须在div之后才能获得值，否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  4. 当页面有多个js文件时，应如何引入？

    1. 我们知道如果一个页面有多个js文件,并且这些js文件有的还有依赖关系的时候,我们就要特别注意他们之间的引入顺序,否则就会报错. 如:一个js文件依赖jquery,我们就要先引入jquery,然后 ...

  5. 同一页面引入多个JS文件的编码问题

    原来只是觉得IE解析HTML文件的时候,需要知道其传输编码,才能正确处理,而从来没有在意过JavaScript文件的编码问题.结果今天发现同一页面中的多个JavaScript文件如果保存编码不同,也会 ...

  6. 360浏览器兼容模式下jsp页面访问不到js文件

    360浏览器兼容模式下jsp页面访问不到js文件 查看自己js中的语法问题,不要用ES6的语法,编译不了故找不到js文件 const var of 码出高效 java 比较 所有整型包装类对象之间值的 ...

  7. 将w3cplus网站中的文章页面提取并导出为pdf文档

    最近在看一些关于CSS3方面的知识,主要是平时看到网页中有很多用CSS3实现的很炫的效果,所以就打算系统的学习一下.在网上找到很多的文章,但都没有一个好的整理性,比较凌乱.昨天看到w3cplus网站中 ...

  8. 打开一个网站,加载顺序是什么?先加载HTML然后JS然后CSS?还是什么?

    HTML页面加载和解析流程 : 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...

  9. ecplise中创建jsp页面时默认的编码格式为ISO-8859-1，这里我们将其编码格式设置为utf-8

    我们在创建jsp页面时,默认的编码格式为ISO-8859-1,我们如果想要将其改为utf-8还要自己手动去更改. 因此可以设置Jsp默认的编码为utf-8,具体步骤如下: 启动Eclipse,点击菜单 ...

随机推荐

  1. Oracle ORA12514 监听程序当前无法识别连接描述符中请求的服务

    在连接数据库的时候,有时会遇到一个“ORA12514:监听程序当前无法识别连接描述符中请求的服务”的错误,这个错误其实就是数据库动态注册(关于动态注册会在稍后讲解)不生效,导致监听器无法识别客户端连接 ...

  2. Java8简明学习之新时间日期API

    由于历史原因,在之前的版本里无论Date还是Calendar都非常难用,尤其在涉及到日期计算方面,而且其中日期转换的类DateForamt还是非线程安全的.也正因为难用,一般项目里面都引入第三方的类库 ...

  3. C# 设计模式·行为型模式

    这里列举行为型模式·到此23种就列完了···这里是看着菜鸟教程来实现··,他里边列了25种,其中过滤器模式和空对象模式应该不属于所谓的23种模式责任链模式:为请求创建一个接收者对象的链,对请求的发送者 ...

  4. 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题

    最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...

  5. vue父与子通信

    个人理解并整理如下 一.父传子 prop传参 父组件传递参数<x-scoll :class="red"></x-scoll> 子组件props:[" ...

  6. android中的ellipsize

    textview中有个内容过长加省略号的属性,即ellipsize 用法如下: 在xml中 android:ellipsize = "end" 省略号在结尾 android:ell ...

  7. Android的onCreateOptionsMenu()创建菜单Menu

    android一共有三种形式的菜单:             1.选项菜单(optinosMenu)             2.上下文菜单(ContextMenu)             3.子菜 ...

  8. 分页函数 pager.py

    #!/usr/bin/python env # coding:utf-8 class Pagination(object): # 数据总条数 当前页 每页显示条数 最多显示页面 def __init_ ...

  9. 一个Interface 继承多个Interface 的总结

    我们知道在Java中的继承都是单继承的,就是说一个父类可以被多个子类继承但是一个子类只能有一个父类.但是一个接口可以被不同实现类去实现,这就是我们说的Java中的多态的概念.下面我们再来说一下接口的多 ...

  10. AIX用裸设备给表空间添加数据文件

    近期在对生产数据库表空间进行扩容,目的是春节期间保证表空间的使用率,不会出现紧急告警信息. 1.查看表空间使用率的SQL语句 col tablespace_name for a16 col SUM_S ...