zoukankan      html  css  js  c++  java
  • 征服缓存引发的难题

    如何平衡的使用浏览器缓存?平时我们借助缓存来减少用户加载页面文件(比如js,css,image等)的时间和带宽,同时我们要确保用户访问的上述文件时最新的。而后者是我们常常头疼的问题。
    本文主要介绍一些小的技巧来确保在网站文件被缓存的同时,又可以得到良好的性能和最新的更新的网站内容。
    问题描述
    比如我们在某页面加载了css文件,
    <link rel="stylesheet" href="/css/styles.css" type="text/css" />
    如何优化页面访问的性能呢?
    手段1、使用缓存。通常我们希望此文件被浏览器缓存一定的时间,这样可以用户访问此页面的时候不必每次都向服务器请求下载此文件。我们也可以配置服务器在页面添加”Expires”头信息,从而告诉浏览器缓存此文件的时间。
    手段2、我们使用yuicompressor等压缩工具对css文件进行压缩,减小文件的大小。
    问题是当因版面风格的更新,此css已经做了更新,但是用户可能仍然使用的是旧的页面主题,甚至错乱的页面。这样对用户的体验非常不好。
    解决之道:
    根本原理:欺骗浏览器,让它认为它加载的文件跟缓存的文件不一样。
    方法一、修改文件名
    <link rel="stylesheet" href="/css/styles.1234.css" type="text/css" />
    方法二、增加Query string
    <link rel="stylesheet" href="/css/styles.css?v=1234" type="text/css" />
    方法三、修改引用文件路径
    这里最好的是在服务器配置文件中进行配置来实现文件路径映射(url mapping)。
    <link rel="stylesheet" href="/css.1234/styles.css" type="text/css" />
    以上我们以css为例进行了说明,我们来看看图片和js文件。
    Images
    由于图片的引用一般写在css文件中,并采用相对路径,所以当css的引用路径发生变化的时候,根据重写规则,图片被解析的路径自然会同步发生更新。
    JS
    适用于css的方法同样都适用于JS。
    结束语
    当然web站点性能的优化,除了缓存之外,还有许多的方法。比如我们可以借助YSlow来帮助用户得到最好的体验。

  • 相关阅读:
    006——VUE中的内容与属性中使用javascript表达式的方法
    005——VUE中的v-text与v-html的使用
    Source Insight 4.0 文件类型、编码格式、tab转空格、tab键自动补全设置。。。
    1-安装MQTT服务器(Windows),并连接测试
    Windows环境下搭建MosQuitto服务器
    c语言条件编译#ifdef与#if defined
    source insight 保存时删除多余空格,去除多余空格 space tab键
    环形数组逆向遍历
    电脑破解wifi密码(至少连过1次的才可以)
    cJSON结构体构建
  • 原文地址:https://www.cnblogs.com/mingle/p/1596041.html
Copyright © 2011-2022 走看看