作者：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. Java的工厂模式（二）

    除了上文提到的方法之外,还可以使用Java的反射机制,这样就能使用类名称来加载所需要的类.我们只需改变工厂类和驱动类就可以了. FruitFactory.java package com.muggle ...

  2. Microservices与DDD的关系

    Microservices(微服务架构)和DDD(领域驱动设计)是时下最炙手可热的两个技术词汇.在最近两年的咨询工作中总是会被不同的团队和角色询问,由此也促使我思考为什么这两个技术词汇被这么深入人心的 ...

  3. java-单例详解

    java单例模式(Singleton)以及实现 一. 什么是单例模式 因程序需要,有时我们只需要某个类同时保留一个对象,不希望有更多对象,此时,我们则应考虑单例模式的设计. 二. 单例模式的特点 1. ...

  4. 小程序视图层（xx.xml)和逻辑层(xx.js)

    整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新. 通过这个简单的例子来 ...

  5. linux解压tar.gz

    gnuzip或者tar -zxvf file.tar.gz unzip file.zip

  6. excel的列生成算法

    echo '<pre>'; $i = 1; while($i < 703){ $char1 = floor($i / 26); $char2 = $i % 26; if($i % 2 ...

  7. pipenv虚拟环境和依赖管理工具

    一.pipenv用来干嘛 每门编程语言发展到现在,都需要一个工具,能够管理代码版本和控制生产环境和测试环境依赖一致的,这样减少不可代码上线之后不可控的问题出现.Php有Composer.Nodejs有 ...

  8. content-box与border-box区别

    理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型. 正常盒模型 正常盒模型,是指块元素box-sizing属性为content-box的盒模 ...

  9. 微信小程序为什么不被看好?

    我自认为对新技术还是比较有热情的,可对于小程序这个“新技术”,我却完全是被动的.去年9月份的时候,微信小程序开始内测,瞬间引爆朋友圈.知乎等一众分享平台.当时我大概了解了一下,觉得从技术角度上来说没啥 ...

  10. 深入理解abstract class和interface

    摘自:http://www.ibm.com/developerworks/cn/java/l-javainterface-abstract/ (如有侵权,请留言,版主将立即删除) abstract c ...