This is the 10th day of my participation in the August More Text Challenge

Recently I am doing the front end test summary series, interested friends can add attention, welcome to correct, exchange.

Strive for each knowledge point can sum up some more, at least to do in the interview, for each knowledge point can kan up, not dumb fire.

preface

There are two types of HTTP caches:

  • Strong cache
  • Negotiate the cache

And also know their control properties, summed up in the following figure:

Today we’ll take a hands-on look at how HTTP caching actually works.

Set up service

First, we use the Express module to build a simple static resource service. The code is as follows:

const express = require("express");
const app = express();

var options = {
    dotfiles: "ignore".etag: true.extensions: ["htm"."html"."js"."css"].index: false.maxAge: 1000 * 60.expires: 2000.redirect: false.setHeaders: function (res, path, stat) {
        res.set("x-timestamp".Date.now());
        // Set the resource expiration time
        res.set("Expires".new Date(Date.now() + 100000).toGMTString()); }}; app.use(express.static("./views", options));
app.listen(1991);
Copy the code

The static resource file structure is shown below:

Load the results

The first load results are as follows:

After a refresh, the result looks like this:

As you can see, the second result is consistent with our previous analysis of strong and negotiated caching.

What if I really want to retrieve resources from the server instead of using caching?

Forcibly obtain server resources

With a browser

Since cached resources are either stored in the browser cache or on the local hard disk, we can use the browser’s built-in functions to forcibly obtain server resources, for example, right-click the refresh icon and choose the latter two items as shown in the following figure:

Add an identity to the URL

For example, adding a random string of numbers to a normal URL yields something like this:

Because the string added after the URL needs to change each time, we generally choose to add a timestamp.

conclusion

This article is to do a verification of the previous few days of learning, I hope to help you!

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!

You come, with expectations, I have ink to welcome! You return, no matter gain or loss, only to yu Yun give each other!

Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!