html5新特性缓存 html页面缓存问题

转载

智能创新梦想家 2023-07-24 17:14:34

文章标签 html5新特性缓存 html cache 浏览器缓存 hdc 文章分类 HTML5 移动开发

html-disable-cache[HDC]

点击去往hdc使用介绍

这是一个解决html在移动端缓存的方案

方案的背景
方案的原理
实现
总结

方案背景

近期在做移动端活动H5时，需要测试H5页面，结果遇到页面刷新好几遍才能看到修改后的内容；这种情况在修改项目后，导致页面不能实时更新；在测试的时候可以通过清理缓存快速更新页面，但是在线上项目时就有点吃力了；需要用户手动不断刷新，或者清楚缓存等方法才能尽快看到更新的内容，这样导致页面更新延迟，用户体验不好，做不到实时更新；当然现在的框架CLI都已经在打包时建立添加上了hash值或者版本号达到避免缓存的效果，但是有时候浏览器会把html也缓存下来，这样还是加载原来的代码，并不是新的代码，渲染出来还是老数据；

方案原理

通过对HTML缓存进行调研，一般的浏览器以及app内嵌的webview（不算特殊处理的：例如人工设置浏览器或者webview不缓存或者离开清楚缓存等）都会在第一次请求文件时走服务器，所有的信息都是一手信息；当再次请求时；若浏览器判断该文件已经加载过，并且有缓存的话，会自动走缓存，这也就是经常看到的一个页面第一次加载那么慢，第二次加载却很快的原因；所以就利用这个规律来做一个检测是否需要更新的功能出来，这样就可以在需要更新的时候就可以更新；不需要更新的时候就直接走缓存；

方案实现

这个方案设计的原理就是让他动态加载css、js，从来达到不缓存的目的。

所以这个方案的所有程序就是一段动态加载css、js的函数

如下：

; (function () {
 ...
 // 思路主要是下面这个加载主程序
  function laodScript (obj, callback, version) {
    var done = false
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.language = 'javascript'
    script.charset = 'utf-8'
    // 看这里-加载的链接拼接以一个参数过来
    script.src = obj.url + '?HDC=' + version
    // script.setAttribute('src', url);
    script.onload = script.onreadystatechange = function () {
      if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'compvare')) {
        done = true
        script.onload = script.onreadystatechange = null
        if (callback) {
          callback(script)
        }
      }
    }
    putToHtml(obj, script)
  }
  ...
})()

通过动态拼接字符串，达到缓存可控的目的；把需要加载的js、css都写到一个js文件里面去加载;例如：

__loadFn([{ 'url': 'asad.js', 'type': 'js', 'position': 'head', 'id': '' }], 1550573427160)

只要字符串不变化；那就就是走缓存；字符串变化那就从新获取数据；这样操作后适用于各种浏览器（允许执行js脚本）环境；不受各种限制；达到修改即更新的效果；

另外，这一套逻辑写成了一个npm包（html-disable-cache）；内置一个可以快速处理文件的命令；只要执行命令就可以把html转为带有动态加载资源的的html（暂时只做了css、js）；自动生成一个存放需要加载资源的js文件；并且每次处理都会自动更换版本号，这个的版本号由一个时间戳来代替的；生成js后，也可以手动去处理该js内容；