作者：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. 算法 - 排序数组中与x最近一点

    条件: a[j] + a[j+1] < x*2 int findClosestPoint(int x,int a []) { int res = 0; int j = 0; while(j< ...

  2. redux、immutablejs和mobx性能对比（一）

    一.前言 关于react的性能优化,有很多方面可以去做,而其中避免重复渲染又是比较重要的一点,那么为什么react会重复渲染,我们又该如何避免重复渲染呢,关于这方面官方其实早有说明:避免重复渲染,这里 ...

  3. div实现返回符,倒三角,椭圆+小知识收集

    收集: 1,返回符(伪类元素): .back:before {content: "";width: .3rem;height: .3rem;border-left: .04rem ...

  4. CSS样式之a标签（原文网址http://www.divcss5.com/shili/s57.shtml）

    这是个人在做网站的时候整理的关于a标签的使用方法,整理一下,方便下次使用. 一.a超链接的代码 <a href="http://www.baidu.com" target=& ...

  5. How To Improve Deep Learning Performance

    如何提高深度学习性能 20 Tips, Tricks and Techniques That You Can Use ToFight Overfitting and Get Better Genera ...

  6. C# Base64Helper

    public static class Base64Helper { /// <summary> /// base64字符保存图片到本 /// </summary> /// & ...

  7. mysql 字符串函数、分组函数

    字符串函数 1.concat 函数 drop table test;create table test(id int(4), name varchar(10), sex char(2));insert ...

  8. Django之modelform修改数据库

    工程包目录:https://github.com/kongzhagen/python/tree/master/Django 目的: 客户信息表Customer在前端以表单形式展示 提交Customer ...

  9. 去除Xcode6创建工程时自带的storyboard

    去除Xcode6创建工程时自带的storyboard 1. 删除storyboard文件,并在setting里面清空加载storyboard: 2. 导入ViewController到appDeleg ...

  10. Linux zip命令详解

    zip常见命令参数 Usage: zip [-options] [-b path] [-t mmddyyyy] [-n suffixes] [zipfile list] [-xi list] The ...