应该是根据Response Header里面的Cache-Control和Expires这两个属性，当两个都存在时，Cache-Control优先级较高。 浏览器缓存分为：强缓存和协商缓存。...1、强缓存：浏览器加载资源时，第一步先判断它是否是强缓存，如果是，浏览器将直接从自己的缓存中读取，不会向服务器发送请求。...2、浏览器接收资源，把资源和相应头缓存起来。 3、待到再次请求这个资源时，先在缓存中找，找到了看Expires字段，判断是否过期。若没过期直接从缓存加载。若过期了，再向服务器请求。...2、浏览器接收资源，把资源和相应头缓存下来。 3、待到浏览器再次请求这个资源时，先在缓存找，根据第一次的请求时间和Cache-Control相对时间算出过期时间。若没过期，直接从缓存加载。...ETag、If-None-Match： 但有时候服务器上资源有变化，单最后修改时间没更新，则引出下面两个字段。
考核内容:HTML5应用及理解 题发散度: ★★ 试题难度: ★★ 解题思路: 新的HTML5规范允许浏览器在连接客户端时预取一些或全部网站资产，如HTML文件、图像、CSS、JavaScript等。...换句话说，应用程序缓存可以预取完全未被访问的页面，从而在常规浏览器缓存中不可用。预取文件可以加速站点的性能，尽管您最初使用带宽下载这些文件。
NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。...在线的情况下浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。...如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源...对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的...浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
直接跳到末尾 获取完整源码 今天我将带着大家使用 HTML、CSS 和 JS创建 音乐播放器，没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。...❤️使用 HTML、CSS 和 JS 创建在线音乐播放器❤️ 在线演示地址 完整代码结构 home-section 首页部分 player-section 播放器部分 playlist-section...home-section 首页部分 打开index.html和内部从编写基本的 HTML 结构开始。还链接style.css和两个 JS 文件。记得data.js在app.js....希望通过本文，您已经学会了如何使用 HTML、CSS 和 JS 的在线音乐播放器。我之前使用 HTML、CSS 和 JavaScript 制作了更多类型的小工具，如果您愿意，可以查看这些设计。...使用 HTML、CSS 和 JS 的简单倒数计时器 使用 HTML、CSS 和 JavaScript 制作的随机密码生成器 使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
Manifest文件 manifest的典型结构: CACHE MANIFEST # 注释：需要缓存的文件，无论在线与否，均从缓存里读取 CACHE: chched.js cached.css # 注释...：不缓存的文件，无论缓存中存在与否，均从新获取 NETWORK: uncached.js uncached.css # 注释：获取不到资源时的备选路径，如index.html访问失败，则返回404页面...在线的情况下，浏览器发现html头部有manifest属性,会请求manifest文件，如果是第一次访问应用，浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。...注意事项 1、如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源...3、浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
所以urlencode来保证URL不会发生编码问题. from urllib.parse import quote, unquote print(quote("鼠标")) print(unquote(...静态页面和动态页面 静态页面 纯粹的HTML文件, 简单地说当前的页面文件就存储在服务端, 我们请求的静态页面实际上就是请求对方服务器中的文件. 通过返回不同的HTML文件来完成不同请求的显示效果...., CSS和JS html和js决定了显示的内容, css决定了怎么显示....HTML(HyperTextMarkup Language 超文本标记语言) HTML的作用 定义网页的内容的含义和结构. tag(标签) 表示当前是一个HTML文档对象 <head...浏览器渲染的过程 接收到HTML文件后开始构建DOM(Doucment Object Model)树. CSS来计算DOM树各个节点的坐标, 大小等CSS属性, 开始布局.
如何进行html压缩使用在线网站进行压缩；nodejs提供的html-minifier工具；后端模板引擎渲染压缩；2.css代码压缩分为两部分：无效代码的压缩；css语义合并；如何进行css压缩使用在线网站进行压缩...；使用html-minifier对html中的css进行压缩；使用clean-css对css进行压缩；3.js压缩与混乱（丑化）包括：无效字符的删除（空格，回车等）；剔除注释；代码语义的缩减和优化；代码保护...用途当无法使用CSS3制作动画的情况下，使用这种方法替代定时器制作动画；由于重绘就调用的机制，制作的动画频率与浏览器的刷新频率一致，不会出现闪动，保证了动画的流畅；示例<!...如何进行html压缩使用在线网站进行压缩；nodejs提供的html-minifier工具；后端模板引擎渲染压缩；2.css代码压缩分为两部分：无效代码的压缩；css语义合并；如何进行css压缩使用在线网站进行压缩...用途当无法使用CSS3制作动画的情况下，使用这种方法替代定时器制作动画；由于重绘就调用的机制，制作的动画频率与浏览器的刷新频率一致，不会出现闪动，保证了动画的流畅；示例<!
如何进行html压缩使用在线网站进行压缩；nodejs提供的html-minifier工具；后端模板引擎渲染压缩；2.css代码压缩分为两部分：无效代码的压缩；css语义合并；如何进行css压缩使用在线网站进行压缩...；使用html-minifier对html中的css进行压缩；使用clean-css对css进行压缩；3.js压缩与混乱（丑化）包括：无效字符的删除（空格，回车等）；剔除注释；代码语义的缩减和优化；代码保护...>使用top属性改变正方形位置时，存在重绘和回流Layout：而使用translate属性改变正方形位置时，并不会引起重绘和回流：比如有的网站会有一些左右飘动的浮窗，由于这些浮窗是采用定时器来实现的，如果每经过...用途当无法使用CSS3制作动画的情况下，使用这种方法替代定时器制作动画；由于重绘就调用的机制，制作的动画频率与浏览器的刷新频率一致，不会出现闪动，保证了动画的流畅；示例<!...由于是从本地缓存中读取的资源，所以资源读取的速度和整体的性能都会有一个明显的提升。
如何进行html压缩 使用在线网站进行压缩； nodejs提供的html-minifier工具； 后端模板引擎渲染压缩； 2.css代码压缩 分为两部分： 无效代码的压缩； css语义合并； 如何进行css...压缩 使用在线网站进行压缩； 使用html-minifier对html中的css进行压缩； 使用clean-css对css进行压缩； 3.js压缩与混乱（丑化） 包括： 无效字符的删除（空格，回车等）；...剔除注释； 代码语义的缩减和优化； 代码保护（如果代码不经处理，客户端可直接窥探代码漏洞）； JS压缩与混乱（丑化） 使用在线网站进行压缩 使用html-minifier对html中的js进行压缩；...用途 当无法使用CSS3制作动画的情况下，使用这种方法替代定时器制作动画； 由于重绘就调用的机制，制作的动画频率与浏览器的刷新频率一致，不会出现闪动，保证了动画的流畅； 示例 <!...由于是从本地缓存中读取的资源，所以资源读取的速度和整体的性能都会有一个明显的提升。
原理和环境 如上面提到的HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。...更新缓存 一旦应用被缓存，它就会保持缓存直到发生下列情况： 用户清空浏览器缓存 manifest 文件被修改 由程序来更新应用缓存 Demo case/ |-- index.html | |...除了CACHE MANIFEST文件其它都采用在线模式。查资料得知：引入manifest的页面,即使没有被列入缓存清单中，仍然会被用户代理缓存。...注意事项 站点离线存储的容量限制是5M 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存 引用manifest的html必须与manifest...文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面 FALLBACK中的资源必须和manifest文件同源 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源
当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求。而不会再去源服务器中重新下载。这样可以「缓解服务的压力，提升性能」。...，浏览器缓存直接使用本地副本来回应请求，而不会产生真实的网络请求，从而节省了时间。...浏览器渲染流程 接下来我们从一个简单的html页面来谈浏览器的渲染流程： 5.1 构建 DOM 树 DOM解析的特点，是不会被阻塞的。...5.2.1 把CSS转换为浏览器内容理解的结构 CSS来源有： 外部样式表：通过link引用的CSS文件 内部样式表：style标签内的CSS 内联样式：元素的style属性内嵌的CSS 和HTML文件一样...因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
应用程序缓存为应用带来三个优势 离线浏览—用户可在离线时使用 速度—已经缓存的资源加载的更快 减少服务器负载—浏览器将只从服务器下载更改过的资源 原理和环境 如上面提到的HTML5的离线存储是基于一个新建的...manifest 文件可分为三个部分： CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存 FALLBACK...更新缓存 一旦应用被缓存，它就会保持缓存直到发生下列情况： 用户清空浏览器缓存 manifest 文件被修改 由程序来更新应用缓存 对于浏览器来说,manifest的加载是要晚于其他资源的....这就导致check manifest的过程是滞后的.发现manifest改变.所有浏览器的实现都是紧随这做静默更新资源.以保证下次pv,应用到更新....系统会自动缓存引用清单文件的 HTML 文件 manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面 FALLBACK中的资源必须和manifest
正文 在web项目开发中，我们可能都曾碰到过这样一个棘手的问题： 线上项目需要更新一个有问题的资源（可能是图片，js，css,json数据等）,这个资源已经发布了很长一段时间，为什么页面在浏览器里打开还是没有看到更新...在接下来600秒内，如果有请求这个资源，浏览器不会发出 HTTP 请求，而是直接使用本地缓存的文件。 Last-Modified 是标识文件在服务器上的最新更新时间。...其后，每一行列出一个需要缓存的资源文件名。 可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问。声明白名单使用 NETWORK：标识符。...而 cache manifest 中的资源文件发生变化并不会触发更新。 2、手动更新 开发者也可以使用 window.applicationCache 的接口更新缓存。...同时，在移动端webView层，对html缓存机制做了支持（从笔者接触过的手游和相关APP来看，目前使用默认缓存机制的比较多），项目开发过程中缓存更新和清理方式也需要有针对性地选择使用。
Cache-Control/Expires的作用是在缓存时间内，正常进入页面，浏览器不会发出请求，直接读取浏览器缓存资源。...依然是直接将html和资源文件丢到线上，直接访问页面地址，咦？怎么没生效？哦，原来是缓存作祟。html更新了，但是读取的a.css和a.js还是浏览器缓存里面的内容，没有更新到最新。...v=0.01"> 下次更新的时候，升级版本就行了。恩，浏览器缓存导致更新不生效的问题终于解决了。...上面问题的原因是由于资源是覆盖式发布，如果将资源文件变成非覆盖式发布，新版和旧版资源文件共存，就可以有效解决了。...再对css和js hash值处理，处理完后，在html文件中替换新的资源路径。
如何进行html压缩： 使用在线网站进行压缩(开发过程中一般不用) nodejs 提供了 html-minifier 工具 后端模板引擎渲染压缩 2.css 代码压缩： css 代码压缩简单来说就是无效代码删除和...css 语义合并 如何进行 css 压缩： 使用在线网站进行压缩(开发过程中一般不用) 使用 html-minifier 工具 使用 clean-css 对 css 压缩 ?...使用在线网站进行压缩(开发过程中一般不用) 使用 html-minifier 工具 使用 uglifyjs2 对 js 进行压缩 其实 css 压缩与 js 的压缩和混乱比 html 压缩收益要大得多，...浏览器缓存类型 1.强缓存：不会向服务器发送请求，直接从缓存中读取资源，在 chrome 控制台的 network 选项中可以看到该请求返回 200 的状态码，并且 size 显示from disk cache...我会保持在 7 到 10 天更新一篇。
###如何进行html压缩： 使用在线网站进行压缩(开发过程中一般不用) nodejs 提供了html-minifier工具 后端模板引擎渲染压缩 ##2.css代码压缩： css代码压缩简单来说就是无效代码删除和...css语义合并 ###如何进行css压缩： 使用在线网站进行压缩(开发过程中一般不用) 使用html-minifier工具 使用clean-css对css压缩 [image.png] ##3.js的压缩和混乱...(开发过程中一般不用) 2.使用html-minifier工具 3.使用uglifyjs2对js进行压缩 其实css压缩与js的压缩和混乱比html压缩收益要大得多，同时css代码和js代码比html代码多得多...所以对大公司来说，html压缩可有可无，但css压缩与js的压缩和混乱必须要有！...##浏览器缓存类型 ###1.强缓存： 不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码，并且size显示from disk cache
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
