首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

深入学习Cache-Control

2019年03月15日 翻译 阅读(265) 作者:懒炖

写在最前面,非常感谢Harry(不认识,哈哈)总结的这一篇文章,看了后对于Cache Control的理解是醍醐灌顶。


📊您对缓存和Cache-Control标头的了解程度如何?

- Harry Roberts(@csswizardry,2019年3月3日


Cache-Control

管理资源缓存的最常用和最有效的方法之一是通过 HTTP Header中的 Cache-ControlCache-Control Header头适用于单个资源,这意味着我们页面上的所有内容都可以具有非常精准的缓存策略。这授予的控制量使得非常复杂和强大的缓存策略成为可能。

一个 Cache-Control 头可能会是这个样子:

  1. Cache-Control: public, max-age=31536000

Cache-Control 是名称,publicmax-age=31536000指令Cache-Control 可以接受一个或多个指令,这些指令的真正意义,及最佳的使用场景,是我这篇文章要讲的。


publicprivate

public 意味着任何缓存都可以存储响应的副本。 这包括CDN,代理服务器等。 public 指令通常是多余的,因为其他指令(例如 max-age )的存在已经隐性的表示可以缓存副本了。

private 是一个显式指令,只有响应的最终接收者( 客户端浏览器 )可以存储该文件的副本。 虽然private本身并不是一个安全功能,它主要用于防止公共缓存(如cdn)存储包含一个用户敏感信息的的响应。


max-age

max-age 定义响应在一定时间内可以使用缓存(相对于请求的时间),而不是重新拉取最新文件。单位为

  1. Cache-Control: max-age=60

Cache-Control 告诉浏览器它可以在接下来的60秒内使用浏览器缓存中的此文件,而不用重新去服务器取。 60秒后再次访问,浏览器将从服务器拉取最新文件。

如果服务器有一个新文件供浏览器下载,它将响应 200 响应,下载新文件,旧文件将从HTTP缓存中弹出,新文件将替换它,并将遵循其缓存头(将继续使用Cache-Control: max-age=60)。

如果服务器没有需要下载的更新副本,则服务器会响应 304 响应,不需要下载任何新文件,并将使用新标头更新缓存副本。 这意味着,如果 Cache-Control: max-age=60 header头仍然存在,则缓存文件的60秒将再次启动。 一个文件的总缓存时间为120秒。

注意: 有一个非常大的警告 max-age 本身是告诉浏览器资源是过时的,但它并没有告诉浏览器,它绝对不能使用过时的版本。 浏览器可以使用自己的启发式方法来决定是否在不重新验证的情况下使用过时的版本。 这种行为有点不确定,因此很难确切知道浏览器实际上会做什么。 为此,我们有一系列更明确的指令,可以和max-age 一起使用。 感谢 Andy Davies 帮助我澄清这一点。

s-maxage

s-maxage (注意:maxage之间缺少的 -)在公共缓存中(如代理层、网关、CDN),将优先于 max-age 指令。 使用 max-ages-maxage 结合使您可以分别为私有和公共缓存提供不同的缓存持续时间。与max-age的区别是:max-age用于普通缓存,而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖max-ageExpires.

no-store

  1. Cache-Control: no-store

如果我们不想缓存文件怎么办? 如果文件包含敏感信息怎么办? 也许这是一个包含银行详细信息的HTML页面? 或许这些信息对时间至关重要? 也许是一个包含实时股票价格的页面? 我们不想在缓存中存储或提供这样的任何响应:我们总是希望丢弃敏感信息并获取最新的实时信息。 我们可以用 no-store

no-store 是一个非常强的指令,不会将任何信息持久存储在私有或其他任何缓存中。 带有no-store指令的请求,任何情况下都会向服务器拉取最新文件。

no-cache

  1. Cache-Control: no-cache

这是一个让大多数人感到困惑的地方…… no-cache 并不意味着“没有缓存”。 正直意思是“在服务器重新验证缓存副本并且服务器说可以使用缓存副本之前,不要使用缓存”。 这听起来应该叫 must-revalidate(必须重新验证) ! 但听起来也不是样。

no-cache 实际上是一种非常聪明的方式,始终保证最新的内容,但如果可能的话,还能够使用更快的缓存副本。 no-cache 将始终请求网络,因为它必须重新验证服务器才能释放浏览器的缓存副本(除非服务器响应更快的响应),但如果服务器响应良好,则网络传输只是一个文件的头:主体从缓存中获取,而不是重新下载。

因此,就像我说的,这是一种结合最新文件和从缓存中获取文件的可能性的智能方法,但是它至少会在网络上得到一个HTTP响应头。

no-cache 几乎任何动态HTML页面都是一个很好的用例 。 想想新闻网站的主页:它不是实时的,也不包含任何敏感信息,但理想情况下我们希望页面始终显示最新鲜的内容。 我们可以 cache-control: no-cache 用来指示浏览器首先检查服务器,如果服务器没有更新的提供( 304 ),让我们重用缓存版本。 如果服务器确实有一些更新的内容,它将作为这样的响应( 200 )并发送更新的文件。

提示:max-age 指令与指令一起 发送是没有用的, no-cache 因为重新验证的时间限制为零秒。


must-revalidate

更令人困惑的是,虽然上面的声音听起来应该被称为 must-revalidate ,但结果 must-revalidate 却是不同的东西(但仍然相似)。

  1. Cache-Control: must-revalidate, max-age=600

must-revalidate 需要一个相关的 max-age 指令; 上面,我们把它设置为十分钟。

前面讲的no-cache 会立即重新验证服务器,并且如果服务器说它可以用缓存副本才可以使用缓存 , must-revalidate 就像 no-cache 宽限期 一样 。 这里发生的事情是,在前十分钟,浏览器 不会 与服务器重新验证,但是在十分钟过去的那一刻,它又会向服务器重新验证。 如果服务器没有任何更新内容,它会响应304 并且更新 Cache-Control 头应用于缓存文件。然后再次开始十分钟,如果在十分钟之后,服务器上有一个较新的文件,我们会得到 200 响应及其正文,并且本地缓存会更新。

我的博客是must-revalidate很好的一个例子:很少改变的静态页面。 当然,最新的内容是可取的,但考虑到我的网站不经常发生变化,我们不需要像手一样笨重的东西 no-cache 。 相反,让我们假设一切都足够好十分钟,然后再重新验证。

proxy-revalidate

与此类似 s-maxageproxy-revalidate 是public-cache特定版本的 must-revalidate 。 它被私人缓存忽略了。


immutable

immutable 是一个非常新的非常整洁的指令,它告诉浏览器更多关于我们发送它的文件类型 - 它的内容是可变的还是不可变的? 但是,在我们看一下之前 immutable ,让 我们看看 它正在解决的问题:

用户刷新会导致浏览器重新验证文件,无论其新鲜度如何,因为用户刷新通常意味着以下两种情况之一:

  1. 页面看起来很破碎;
  2. 内容看起来过时了……

…所以让我们检查服务器上是否有更新的内容。

如果服务器上有更新的文件,我们肯定想下载它。 因此,我们将得到一个 200 响应,一个新文件,并且 - 希望 - 问题得到解决。 但是,如果服务器上没有新文件,我们将带回一个 304 响应头,没有新文件,但整个往返延迟。 如果我们重新验证导致许多 304的文件 ,那么可能会增加数百毫秒的不必要开销。

immutable 是一种告诉浏览器文件永远不会改变的方式 - 它是 不可变的 - 因此永远不会打扰重新验证它。 我们可以完全消除往返延迟的开销。 可变或不可变文件的含义是什么?

  • style.css :当我们更改此文件的内容时,我们根本不更改其名称。 该文件始终存在,其内容始终更改。 这个文件是可变的。
  • style.ae3f66.css :此文件是唯一的 - 它根据其内容以指纹命名,因此在内容更改的那一刻,我们将获得一个全新的文件。 这个文件是不可变的。

我们将在Cache Busting 部分中更详细地讨论这个问题。

如果我们能够以某种方式向浏览器传达我们的文件是不可变的 - 它的内容永远不会改变 - 那么我们也可以让浏览器知道它不需要检查更新版本:永远不会有更新鲜的版本作为文件当内容发生变化时,它就会停止存在。

这正是 immutable 指令的作用:

  1. Cache-Control: max-age=31536000, immutable

在支持的浏览器中使用 immutable ,用户刷新永远不会在31,536,000秒的缓存生命周期内导致向服务器重新验证。 这意味着没有不必要的往返花费在 304 响应上,这可能会在关键路径上节省大量的延迟( CSS阻止渲染 )。 在高延迟连接上,这种节省可能是有形的。

注意: 您不应该应用于 immutable 任何不可变的文件。 您还应该有一个非常强大的缓存清除策略,这样您就不会无意中缓慢地缓存 immutable 已应用 的文件 。


stale-while-revalidate

我真的,真的希望有更好的支持 stale-while-revalidate

到目前为止,我们已经谈了很多关于重新验证的内容:浏览器返回服务器以检查是否有更新的文件的过程。 在高延迟连接上,单独重新验证的持续时间可能是显而易见的,并且该时间只是死时间 - 直到我们从服务器听到,我们既不能释放缓存副本( 304 )也不能下载新文件( 200 )。

什么 stale-while-revalidate 提供的是在浏览器允许使用过时的缓存的同时,我们正在检查新版本的宽限期(由美国定义)。

  1. Cache-Control: max-age=31536000, stale-while-revalidate=86400

这告诉浏览器,“这个文件可以使用一年,但在那一年结束后,您还有一天时间可以继续为这个过时的资源提供服务,同时在后台向服务器重新验证它。”。

stale-while-revalidate 对于非关键资源来说,这是一个很好的指令,当然,我们想要最新的版本,但我们知道如果我们在检查更新时再次使用过时的响应,就不会造成任何损害。


stale-if-error

以类似的方式 stale-while-revalidatestale-if-error 允许浏览器在宽限期内,如果重新验证的资源返回 5xx -class错误 ,它可以允许返回陈旧的响应 。

  1. Cache-Control: max-age=2419200, stale-if-error=86400

在这里,我们指示缓存该文件28天(2,419,200秒),如果我们在那之后遇到错误,我们允许额外的一天(86,400秒),在此期间我们将允许过时的缓存文件。


no-transform

no-transform 与存储,提供或重新验证最新文件没有任何关系,但它确实指示中间件不能修改或 转换 任何响应。

中间件可能修改响应的一个常见场景是代表开发人员对用户进行优化:电信公司提供商可能通过其堆栈代理图像请求,并在通过移动连接将其传递给最终用户之前对其进行优化。

这里的问题是,开发人员开始失去对其资源展示的控制,电信公司所做的图像优化可能被认为过于激进和不可接受,或者我们可能已经将图像优化到了理想的程度,任何进一步的优化都是不必要的。

在这里,我们想要指示这个中间件不要转换我们的任何内容。

  1. Cache-Control: no-transform

no-transform头可以与任何其他指令一起,并且不需要其他指令来让它自己运行。

NB 一些转换是一个好主意:CDN为需要前者或可以使用后者的用户选择Gzip或Brotli编码; 图像转换服务自动转换为WebP; 等等

注意 如果您正在运行HTTPS(您应该这样做),那么中间件和代理无论如何都无法修改有效负载,因此 no-transform 无效。

使缓存失效

谈论缓存而不谈论缓存失效是不负责任的。我总是建议在考虑缓存策略之前先解决缓存占用策略。

缓存失效解决了这个问题:我只是告诉浏览器明年使用这个文件,但我只是更改了它,我不希望用户等一整年再得到新的副本!我如何干预?!

没有缓存崩溃 - style.css

这是最不受欢迎的事情:绝对没有任何缓存失效。 这是一个可变文件,我们真的很难缓存半身像。

你应该非常谨慎地缓存这些文件,因为一旦它们在用户的设备上,我们几乎失去了对它们的所有控制权。

尽管这个例子是一个样式表,但HTML页面正好落入这个阵营。 我们无法更改网页的文件名 - 想象一下会造成的破坏! - 这正是我们根本不会缓存它们的原因。

请求参数 - style.css?v=1.2.14

在这里,我们仍然有一个可变的文件,但是我们在它的文件路径中添加了一个查询字符串。虽然比什么都不做要好,但它仍然不完美。如果有任何东西要除去这个查询字符串,我们将回到前一类,即完全没有缓存总线。许多代理服务器和cdn都不会缓存任何带有查询字符串的内容,无论是通过配置(例如,来自CloudFlare自己的文档:……请求“style.css”?当从缓存中提供服务时,“某些内容”将被规范化为“style.css”),或者进行防御(查询字符串可能包含特定于某个特定响应的信息)。

指纹 - style.ae3f66.css

指纹识别是迄今为止缓存文件的首选方法。 通过在每次内容更改时逐字更改文件,我们在技术上不会缓存任何内容:我们最终得到一个全新的文件! 这是非常强大的,并允许使用 immutable 。 如果您可以在静态资产上实现此功能,请执行此操作! 一旦您设法实现这种非常可靠的缓存清除策略,您就可以使用最具侵略性的缓存形式:

  1. Cache-Control: max-age=31536000, immutable

实施细节

这种方法的关键是文件名的变化,但它不 具备 成为一个指纹。 以下所有示例都具有相同的效果:

  1. /assets/style.ae3f66.css :改变文件内容的哈希值。
  2. /assets/style.1.2.14.css :发布版本变化。
  3. /assets/1.2.14/style.css :通过更改URL中的目录来必变。

但是,最后一个示例 意味着 我们对每个版本进行版本控制而不是每个单独的文件。 这反过来意味着如果我们只需要缓存我们的样式表,我们还必须缓存该版本的所有静态文件。 这可能是浪费,所以更喜欢选项(1)或(2)。

Clear-Site-Data

使缓存失效是很难实现的— famously so—所以目前有一个规范正在进行中,它可以帮助开发人员在一瞬间彻底清除整个缓存: Clear-Site-Data

我不想在这篇文章中详细介绍,因为 Clear-Site-Data 它不是一个 Cache-Control 指令,但实际上是一个全新的HTTP头。

  1. Clear-Site-Data: "cache"

将此http header头应用于您的任何一个资源将清除整个网站的缓存,而不仅仅是它所附加的文件。 这意味着,如果您需要从所有访问者的缓存中强制清除整个站点,则可以将上述标题应用于HTML有效内容。

在撰写本文时, 浏览器支持 仅限于Chrome,Android Webview,Firefox和Opera。

提示: 有许多指令,它们的 Clear-Site-Data 将接受: "cookies""storage""executionContexts" ,和 "*" (其中,自然意味着“所有上述的”)。


例子和场景

好的,我们来看看一些场景以及 Cache-Control 我们可能采用 的 headaer头 类型 。

网上银行

类似于在线银行应用程序页面列出您最近的交易,您当前的余额以及可能敏感的银行帐户详细信息的内容需要是最新的(想象一下,这个页面列出了一周前出现的余额!)和也保持非常私密(您不希望您的银行详细信息存储在共享缓存(或任何缓存,真的))。

为此,让我们一起来:

  1. Request URL: /account/
  2. Cache-Control: no-store

根据规范,这足以阻止浏览器在私有和共享缓存中保持对磁盘的响应:

no-store 响应指令指示高速缓存必须不存储任一立即请求或响应的任何部分。 该指令适用于私有和共享缓存。 在此上下文中“不得存储”意味着缓存不得故意将信息存储在非易失性存储中,并且必须尽力尝试在转发后尽快从易失性存储中删除信息。

但如果你想要非常防守,也许你可以选择:

  1. Request URL: /account/
  2. Cache-Control: private, no-cache, no-store

这将明确指示不在公共缓存(例如CDN)中存储任何内容,以始终提供最新鲜的副本,而不是将任何内容保存到存储中。

直播列车时刻表

如果我们正在构建一个显示近乎实时信息的页面,我们希望保证用户始终能够看到我们可以提供的最新的信息(如果该信息存在)。 我们来使用:

  1. Request URL: /live-updates/
  2. Cache-Control: no-cache

这个简单的指令意味着浏览器不会直接使用缓存,需要去询问服务器是否有更新内容。这意味着用户永远不会显示过时的列车信息,但如果服务器指示缓存是最新信息,则直接从缓存中获取文件。

这通常是几乎所有网页的合理默认值:给我们提供最新的内容,但如果可能的话,让我们使用缓存。

常见问题页面

像FAQ这样的页面可能很少更新,其中的内容不太可能是时间敏感的。 它肯定不像实时运动得分或飞行状态那么重要。 我们可能会暂时缓存这样的HTML页面,并强制浏览器定期检查新内容,而不是每次访问。 我们这样做:

  1. Request URL: /faqs/
  2. Cache-Control: max-age=604800, must-revalidate

这告诉浏览器将HTML页面缓存一周(604,800秒),并且一周结束后,我们需要检查服务器是否有更新。

注意: 对于同一网站中的不同页面具有不同的缓存策略可能会导致您的 no-cache 主页请求 style.f4fa2b.css 其引用 的最新版本 的问题 ,但您的三天缓存的常见问题解答页面仍然指向 style.ae3f66.css 。 这种影响可能很小,但这是你应该注意的一个场景。

静态JS(或CSS)应用程序包

让我们说我们的 app.[fingerprint].js 更新很频繁 - 可能与我们每次发布的版本有关 - 但是我们也会在每次更改时指导文件(好工作!)然后我们可以做这样的事情:

  1. Request URL: /static/app.1be87a.js
  2. Cache-Control: max-age=31536000, immutable

我们经常更新我们的JS并不重要:因为我们能够可靠地缓存它,我们可以根据需要缓存它。 在这种情况下,我们选择将其缓存一年。 我选择了一年,因为首先,一年是很长一段时间,但其次,浏览器实际上不太可能持有这么久的文件(浏览器的存储空间有限,可用于HTTP缓存,所以他们自己定期清空部分内容;用户可以清除自己的缓存)。 超过一年的任何事情可能都不会有效。

此外,由于此文件的内容永远不会更改,我们可以向浏览器发出此文件不可变的信号。 即使用户刷新页面,我们也不需要重新验证它全年。 我们不仅可以获得使用缓存的速度优势,还可以避免重新验证的延迟损失。

装饰图像

想象一下伴随文章的纯装饰照片。 它不是信息图表或图表,它不包含任何对理解页面其余部分至关重要的内容,并且用户甚至都不会注意到它是否完全丢失。

图像通常是一个重要的资产下载,所以我们想要缓存它; 它对页面并不重要,因此我们不需要获取最新版本; 我们可能甚至可以在图像过时之后提供服务。 我们开工吧:

  1. Request URL: /content/masthead.jpg
  2. Cache-Control: max-age=2419200, must-revalidate, stale-while-revalidate=86400

这里我们告诉浏览器将图像存储28天(2,419,200秒),我们要在28天的时间限制后与服务器核对更新,如果图像少于一天(86,400秒)过时了,让我们在后台获取最新版本时使用那个。


要记住的关键事项

  • 缓存失效非常重要。 在开始执行缓存策略之前,请制定缓存清除策略。
  • 一般来说,缓存HTML内容是一个坏主意。 HTML网址不能被破坏,并且由于您的HTML页面通常是页面其余部分子资源的入口点,因此您最终也会缓存对静态资源的引用。 这将使您(和您的用户)感到沮丧。
  • 如果要缓存任何HTML,在站点上的不同类型的HTML页面上使用不同的缓存策略可能会导致不一致,如果一类页面总是新鲜的,而其他页面有时从缓存中获取。
  • 如果你可以可靠地缓存(带有指纹)你的静态资产,那么你也可以一次性全押并多次缓存多年的 immutable 指令以获得良好的衡量标准。
  • 非关键内容可以使用类似指令的陈旧宽限期 stale-while-revalidate
  • immutable 并且 stale-while-revalidate 不仅为我们提供了缓存的传统优势,而且还允许我们在重新验证时降低延迟成本。

尽可能避免使用网络可以为我们的用户带来更快的体验(并且我们的基础架构的吞吐量也大大降低)。 通过充分了解我们的资产,并概述我们可以使用的资产,我们可以开始设计针对我们自己的应用程序的非常精细,定制和有效的缓存策略。

缓存规则一切。


资源及相关阅读

© 本文著作权归原作者所有 翻译自:csswizardry 阅读原文(英文)

评论

  •  
  • Fetch进阶指南

    发布:2019-08-21 阅读(10)

  • JS包装对象

    对象是 JavaScript 语言最主要的数据类型,三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的“包装对象”

    发布:2019-08-20 阅读(15)

  • JavaScript数组去重(12种方法)

    JS数组去重的各种方法~

    发布:2019-08-07 阅读(86)

  • iviewui-admin框架的一些坑

    使用iviewui-admin框架构建管理系统时,遇到的各类问题

    发布:2019-08-01 阅读(87)

  • 使用es6的exports和import 进行模块化开发

    使用es6的exports和import 进行模块化开发

    发布:2019-06-14 阅读(332)

  • vue项目v-for中动态图片路径拼接

    vue项目中动态图片路径拼接

    发布:2019-04-04 阅读(628)

  • vue之js调用filter

    vue下filter方法的调用

    发布:2019-03-29 阅读(481)

  • 深入学习Cache-Control

    对于 HTTP头Cache-Control,我们经常使用,也非常"熟悉",然后经常会有问题,为什么我使用了"no-cache",然后为什么还有缓存? 看这个文章你就知道为什么了。

    发布:2019-03-15 阅读(265)

  • IntersectionObserver API

    在之前,我们要判断一个元素是否出现在视窗内,需要使用`scroll`或`setInterval`来不断计算元素的位置,这样非常损耗性能,Chrome在2016年的时候推出了IntersectionObserver APi,现在看看它是做什么的

    发布:2019-03-12 阅读(460)

  • 推荐21个顶级的Vue UI库!

    21个vue顶级UI框架: Vuetify,Quasar,Vue Material,Keen-UI,Buefy,Bootstrap Vue,Muse-UI,AT-UI,Vux,iView,Uiv,Vuikit,Onsen UI+Vue,Semantic UI+Vue,Fish-UI,Mint UI,Framework7 Vue,Cube UI,Vueblu,Ant Design Vue

    发布:2019-03-04 阅读(467)

  • 收集的一些轻量高效的开源JavaScript插件和库

    轻量高效的开源JavaScript插件和库

    发布:2019-02-25 阅读(493)

  • input输入时,实时格式化

    格式化input输入~

    发布:2019-02-25 阅读(421)

  • 什么是vue的sfc?怎么解析成SFCDescriptor?

    ".vue"文件是如何解析成js对象的~

    发布:2019-01-29 阅读(468)

  • vue源码阅读1--目录结构及package.json

    立个flag,看过年这段时间能不能把vue的源码读完?多年前看过jQuery的部分源码,如果想要更深入的了解vue,还是得从源码开始

    发布:2019-01-29 阅读(497)

  • Vue之源码解读

    vue源码阅读,慢慢学习

    发布:2019-01-29 来源:github

  • Vue的生命周期及相关问题

    vue的生命周期函数

    发布:2019-01-29 阅读(482)

  • react服务器端渲染之--nextjs

    Next.js 是一个轻量级的 React 服务端渲染应用框架。

    发布:2019-01-24

  • window.atob和btoa进行base64编码解码

    使用原生window.atob和btoa进行base64编码解码

    发布:2019-01-17 阅读(442)

  • nodejieba "结巴"中文分词安装使用

    NodeJieba是"结巴"中文分词的 Node.js 版本实现, 由CppJieba提供底层分词算法实现, 是兼具高性能和易用性两者的 Node.js 中文分词组件。

    发布:2019-01-16 阅读(807)

  • React的两种事件传参方式

    通过箭头函数或bind方式,对绑定事件传参

    发布:2019-01-09 阅读(418)

  • vue data为什么是函数?而不是对象

    vue组件的数据data为什么一定要是函数 ?

    发布:2019-01-07 阅读(777)

  • 回顾一下NaN,isNaN,Number.isNaN

    回顾一下NaN,isNaN,Number.isNaN

    发布:2018-12-28 阅读(457)

  • 利用react-hot-loader实现局部更新

    React Hot Loader是一个插件,允许React组件在不丢失状态的情况下进行实时重新加载。它适用于Webpack和其他支持热模块替换(HMR)和Babel插件的捆绑器

    发布:2018-12-27 阅读(518)

  • 前端码农之蜕变 — AST(抽象语法树)

    如果你查看目前任何主流的项目中的`devDependencies`,会发现前些年的不计其数的插件诞生。我们归纳一下有:javascript转译、代码压缩、css预处理器、elint、pretiier,等。有很多js模块我们不会在生产环境用到,但是它们在我们的开发过程中充当着重要的角色。所有的上述工具,不管怎样,都建立在了AST这个巨人的肩膀上

    发布:2018-12-25 阅读(399)

  • 为什么要在javascript中进行静态类型检查.Part2&3[译]

    在第一部分中我们了解了许多基础知识,结束了语法的学习,我们可以进入下一个更有趣的部分:使用静态类型的优势和劣势

    发布:2018-12-21 来源:AlienZHOU

  • 为什么要在javascript中进行静态类型检查.Part1[译]

    作为一个JavaScript开发者,你可以编写一整天编写也不会遇到任何静态类型检查得问题。那么为什么要自找麻烦得去学习它呢? 然而学习静态类型并不仅仅是一个思维拓展的训练。如果你愿意花点时间来学习一些静态类型的优势、劣势以及使用的案例,那将会极大的帮助你进行编码。 怎么样,有意思吧?要是你感兴趣的话,那接下来四个部分将会向你详细解释

    发布:2018-12-21 来源:AlienZHOU

  • Mint-ui this.$messagebox报 Uncaught (in promise) cancel

    Mint-ui this.$messagebox点取消时,报错:Uncaught (in promise) cancel

    发布:2018-11-16 阅读(589)

  • vue vee-validate验证插件使用

    vue-validate使用

    发布:2018-11-08 阅读(777)

  • vue之query和params,$router和$route

    这就是个vue的坑。。。

    发布:2018-11-08 阅读(516)

  • vue监听Enter事件

    vue如何监听enter事件?

    发布:2018-11-08 阅读(797)

  • vue使用axios进行form表单提交

    vue使用axios进行form表单提交

    发布:2018-11-07 阅读(718)

  • ECMA-262-5 详解 - 3.1 词法环境:通用理论 – ds.laboratory

    这一节,我们会讨论词法环境的细节,它是在一些编程语言中用于管理静态作用域的一种机制。为了确保能充分理解这一主题,我们会简要讨论下其对立面:动态作用域(并没有直接用于 ECMAScript)。我们会看到环境是如何管理代码中的词法嵌套结构,以及为闭包提供全面支持。

    发布:2018-11-03 阅读(307)

  • vue中如何改变title标题

    vue中如何改变title标题

    发布:2018-11-02 阅读(465)

  • vue2.0中使用NProgress进度条

    如果在vue2.0中使用NProgress进度条

    发布:2018-11-02 阅读(537)

  • vue2.0 Axios中文说明

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。也是vue2.0官方推荐的,同时不再对vue-resource(vue1.0使用)进行更新和维护

    发布:2018-11-01 阅读(507)

  • React资源、教程、案例

    React 的核心思想是:封装组件。 各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件。 基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素,然后操作 DOM 去更改 UI

    发布:2018-10-29 阅读(237)

  • ECMA-262-5详述 第一章. 属性和属性描述符

    这一章专门讨论了ECMA-262-5 规范的新概念之一 — 属性特性及其处理机制 — 属性描述符。 当我们说“一个对象有一些属性”的时候,通常指的是属性名和属性值之间的关联关系。但是,正如在ES3系列文章中分析的那样,一个属性不仅仅是一个字符串名,它还包括一系列特性—比如我们在ES3系列文章中已经讨论过的{ReadOnly},{DontEnum}等。因此从这个观点来看,一个属性本身就是一个对象

    发布:2018-10-26 阅读(271)

  • Vue.js 技术揭秘

    分析Vue.js源码

    发布:2018-10-25 来源:github.io

  • 运行npm run dev,vuejs二级路由,刷新页面静态资源404(路径不对)

    npm run dev模式下,webpack4+vue2项目下,类似'/user/login'二级路由,刷新时静态资源路径不对,静态资源返回404

    发布:2018-10-23 阅读(720)

  • vuejs报错:[Vue warn]: Error in render: TypeError: Cannot read property 'matched' of undefined

    [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"

    发布:2018-10-22 阅读(1005)

  • Unknown custom element:- did you register the component correctly

    did you register the component correctly? For recursive components, make sure to provide the "name" option

    发布:2018-10-22 阅读(1039)

  • vue.js查看注册了哪些基础组件

    vue.js如何查看注册了哪些组件,获取组件名称

    发布:2018-10-22 阅读(372)

  • [阮一峰]JavaScript 教程

    本教程全面介绍 JavaScript 核心语法,从最简单的讲起,循序渐进、由浅入深,力求清晰易懂。所有章节都带有大量的代码实例,便于理解和模仿,可以用到实际项目中,即学即用。

    发布:2018-10-19 来源:wangdoc.com

  • [阮一峰]ECMAScript 6 入门

    《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性。

    发布:2018-10-19

  • snabbdom——Virtual DOM实现

    vue底层的Virtual DOM就是基于snabbdom修改的

    发布:2018-06-29 来源:snabbdom

  • ECMA-262-3 in detail——第七章:OOP(第二部分:ECMAScript实现)

    这一章的第二部分是关于EMCAScript中的面向对象编程。在第一部分中我们讨论了OOP的基本理论并勾画出和ECMAScript的相似之处。在阅读第二部分之前,如果有必要,我还是建议首先阅读这一章的第一部分.基本理论,因为后面将会用到其中的一些术语。

    发布:2015-05-26 阅读(285)

  • ECMA-262-3 in detail——第七章:OOP(第一部分:一般理论)

    这一章我们讨论ECMAScript中面向对象编程(object-oriented programming)的几个主要方面。由于这一主题已经在许多文章中谈论过,本章并不打算“老调重弹”,而是试图更多地着眼于这些过程内在的理论方面。尤其是,我们将研究对象创建的算法,看看对象间的关系(包括最基本的关系——继承)是如何实现的,并且给出一些讨论中将用到的准确定义(我希望这样能够打消一些术语和思路上的疑惑以及一些关于Javascript文章中OOP部分的常见的混淆)。

    发布:2015-05-06 阅读(254)

  • ECMA-262-3 in detail——第六章:闭包

    在这一章中我们来谈谈Javascript中被讨论最多的话题之一——关于闭包(closures)。事实上这个主题并不是新鲜的。然而我们在这里将试着更多从理论的角度去分析和理解它,然后我们还会看一下ECMAScript内关于闭包的内容。

    发布:2015-04-28 阅读(255)

  • ECMA-262-3 in detail——第五章:函数

    在这章里我们讨论ECMAScript中的一个基本对象——函数。我们将会看到不同类型的函数如何影响一个上下文中的变量对象,以及这些函数的作用域链中都包含什么。我们将会回答像下面这样经常被问到的问题:“下面这两种创建函数的方式有什么区别吗(如果有的话,区别是什么呢)?”

    发布:2015-04-17 阅读(253)

  • ECMA-262-3 in detail——第四章:作用域链

    正如我们从第二章.变量对象中了解到的,执行上下文的数据(变量,函数声明,函数形参)以变量对象的属性的方式储存。

    发布:2015-04-07 阅读(239)

  • ECMA-262-3 in detail——第三章:this关键字

    许多程序员习惯于认为在编程语言中,this关键字是与面向对象编程紧密相关的,而且引用的是由构造式最新创建的对象。在ECMAScript中,这个概念也被实现了,然而我们将看到,在这里它不仅仅指向已创建的对象。

    发布:2015-03-25 阅读(243)

  • ECMA-262-3 in detail——第二章:变量对象

    在程序中我们总是声明变量和函数然后用它们来搭建我们的系统。但是解释器(interpreter)是在哪里和以什么方式来找到我们的数据(函数,变量)的呢?

    发布:2015-03-24 阅读(265)

  • ECMA-262-3 in detail——第一章:执行上下文

    第1章:在这一章里,我们将会讨论ECMAScript中的执行上下文(execution context)以及与它们相关的可执行代码(executable code)的类型。

    发布:2015-01-10 阅读(466)

  • javascript检测浏览器的缩放状态,页面放大了或缩小了

    检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放。这里提供javascript的方法来检测浏览器的缩放。

    发布:2014-10-13 阅读(477)

  • javascript判断是否有夏令时(Daylight Saving Time)

    当你的项目中的时间需要考虑时区,夏令时时,下面判断夏令时的方法就很有用了!

    发布:2014-07-22 阅读(205)

  • for in循环的输出顺序问题

    在以前的编码过程中,对for...in遍历对象的循环的,一直以为是没有顺序的。直到遇到有对象有的key值为纯数字时,发现现代浏览器对for...in循环是有顺序之分的。

    发布:2014-05-29 阅读(142)

  • 使用js禁用右键菜单、F5刷新和Ctrl+R刷新、backspace键、esc键

    有时候我们需要把网页的右键菜单禁用,然后启用自己模似的右键菜单。或者我们为了避免用户习惯性的使用F5刷新或使用Ctrl+r键刷新导致表单数据的丢失,我们还需要把F5键和ctrl+r键都屏蔽掉。甚至根据需要还可能会屏蔽退格键(Backspace)和退出键(Esc)。

    发布:2014-05-26 阅读(182)

  • js中preventDefault、stopPropagation、return false三者之间的区别及使用

    preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>,提交按钮<input type="submit">等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的

    发布:2014-05-26 阅读(241)

  • javascript检测是否联网,是否为脱机状态

    通过JS检测网络是否OK,最简单粗暴的方式就是加载网络资源,JS文件或者图片文件...

    发布:2014-05-19 阅读(195)

  • jQuery对象中类数组的概念及操作

    什么是类数组?相信我们对function方法的arguments很熟悉,arguments就像一个数组,但instanceof Array检测会返回false,可以称为“类数组”。

    发布:2014-04-10 阅读(218)

  • 利用iframe实现跨域访问

    利用iframe实现跨域

    发布:2014-03-19 阅读(189)

  • javascript方法setMonth设置2月份变成3月份的小问题

    项目使用了setMonth来设置时间,发现了一个问题,2月份设置下去,显示出来变成3月份了。

    发布:2013-12-22 阅读(194)

  • jquery使用不当导致内存泄漏

    jQuery是现在最流行的js库,一般情况下我们都会放心的使用它,不用考虑其内存泄漏的问题。 最近的项目是基于MVC模式的管理系统,期间要采用ajax不断轮询服务器,以获得最新的数据,这时候使用jQuery的时候就要注意了,一不小心俺们最可爱的IE内存就up up up了~~

    发布:2013-12-10 阅读(224)

  • javascript严格模式(use strict)

    除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。

    发布:2013-11-13 阅读(224)

  • IE提示expected 错误,如expected ';' expected '}' expected ')'等等

    IE提示expected 错误,如果语法没问题,不防检查下是不是文件编码问题,改为utf-8试试

    发布:2013-11-01 阅读(194)

  • javascript原始数据类型相互转换

    javascript原始数据类型相互转换示例,如字符串、数字、布尔类型的相互转换

    发布:2013-10-19 阅读(320)

  • javascript Arguments对象之length、callee属性

    arguments是调用对象的一个属性,它与形参及局部变量是一样的,它实际上是调用了一个Arguments对象,Arguments对象与数组相似,但它又不是数组,因为它不具备数组的一些常用方法,如push,sort,shift等等。Arguments对象有两个属性:

    发布:2013-09-30 阅读(215)

  • Javascript容错处理,window.onerror或try{}catch(err){}

    利用javascript开发WEB功能时,代码量小还OK,如果代码非常庞大,这就不可避免的出现一些未知的错误。如果web已经上线,这时却出现了js脚本错误,这对WEB的用户体验是致使的,因为一但出现js脚本错误,网页将停止加载,从而不能正常显示出页面,而失去用户。

    发布:2013-08-15 阅读(174)

  • 利用Object.prototype.toString判断javascript数据类型(数组,函数,类对象{},布尔类等)

    一般情况下,判断javasceript数据类型,使用typeof 或 instanceof 就够了,但偶觉得用起来还是别别扭扭的。这里介绍一个完美的方法,我们可以轻松的判断数组,对象(这里对象暂且指{}),函数(function),布尔(Boolean),null,undefined,number,时间对象(date),正则表达式(RegExp)。

    发布:2013-08-12 阅读(228)

  • 高效javascript模板引擎——doT.js原理及应用

    目前完成的一个基于MVC模式的管理系统,综合考虑后,选择了doT.js,这篇文章主要也是介绍下它的优势及使用方法。

    发布:2013-08-09 阅读(265)

  • js移动光标到文字末尾

    移动光标到文字末尾,如果使用<input><textarea>时,需要把光标定位在文字的后面

    发布:2013-07-28 阅读(163)

  • Javascript数字类型小数表示方式的三种方法:toFixed,toExponential,toPrecision

    javascript提供了三个方法来计算表示小数点的位数:toFixed,toExponential,toPrecision

    发布:2013-05-30 阅读(278)

  • jQuery.support源码分析(检测浏览器兼容)

    jquery.support主要是检测浏览器兼容性,支持力度的方法,用于展示不同浏览器各自特性和bug的属性集合。作为一个静态成员,提供给jquery内部函数,告诉他们某些功能是否能用。避免了以往通过检测浏览器版本做修改。

    发布:2013-05-08 阅读(34)

  • IE下javascript:void(0)触发onbeforeunload

    使用MVC模式开发一些项目时,我们一般会添加onbeforeunload方法,以防止客户无意识的跳出页面,丢失数据。

    发布:2013-03-22 阅读(137)

  • iframe跨域加载页面cookie丢失的问题

    利用iframe跨域加载页面,cookie失效的问题: 主要是浏览器不接受第三方cookie引发的

    发布:2013-03-05 阅读(206)

  • javascript typeof运算符

    typeof操作符,typeof是返回“表达式”的数据类型的字符串

    发布:2013-01-27 阅读(236)

  • javscript原始数据类型相互转换

    发布:2013-01-22 阅读(298)

  • Javascript基本数据类型[Undefined,null,String,Number,Boolean]

    Javascript有五种基本的数据类型:Undefined,null,String,Number,Boolean,这五种数据类型都可以用typeof来检测

    发布:2013-01-05 阅读(239)

  • javascript检测IE6/7/8,chrome,safari,firefox,opera等主流浏览器类型

    利用javascript检测浏览器的类别,网上也会有很多的代码,这里总结写了一下,主要检测主流的五款浏览器(IE,Chrome,Opera,Safari,Firefox)的类别,IE可以检测到IE6-IE9的本种版本,IE10没有检测过。

    发布:2012-11-27 阅读(243)

  • jQuery跳出each循环(替换break,continue)

    jQuery each循环中,如果要实现类似break或continue的功能,不用跟原生javascript for循环一样用break或continue了,而必须用reaturn false、return true

    发布:2012-11-14 阅读(305)

  • 理解javascript函数柯里化(Currying)

    在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术

    发布:2012-11-05 阅读(273)

  • IE6,IE7下onresize事件被执行多次的问题之解决方法

    IE下给window对象定义其onresize事件,在拉伸缩小窗口时,其onresize方法将被执行多次,并且其具体执行的次数在不同的电脑有不同的值,相当诡异,Firefox等其他浏览器则无此现象

    发布:2012-11-05 阅读(390)

  • javascript获取地址栏(url)QueryString(参数)值

    通过浏览器获取URL参数值

    发布:2012-10-30 阅读(323)

  • javascript获取浏览器窗口的宽度、高度

    通过原生js获取浏览器宽高、可视区域、滚动区域等等

    发布:2012-10-29 阅读(318)

  • iframe同域或异域下高度自动适应(兼容种浏览器)

    利用javascript来控制iframe的高度自动适应,介于javascript对不同域名权限的限制,分为两种情况

    发布:2012-10-25 阅读(351)

  • js添加收藏夹代码(兼容IE,firefox,其他浏览器弹信息提示)

    完全兼容IE和firefox的“添加收藏夹代码,chrome,safari会提示信息"添加收藏失败,请同时按"CTRL+D"添加“

    发布:2012-10-23 阅读(299)

  • 获取当前时间、日期、星期(兼容IE,Firefox,Chrome,Opera,Safari...)

    获取当前时间代码,用原生JS所写,兼容种浏览器

    发布:2012-10-22 阅读(454)