首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浏览器缓存机制详解

当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作 Firefox 3.5 IE 8 Chrome 3 Safari 4 内容没有失效 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面 浏览器重新发送请求到服务器...当用户按 F5 键刷新页面时的失效操作 Firefox 3.5 IE 8 Chrome 3 Safari 4 内容没有失效 浏览器重新发送请求到服务器。...当用户单击 Back 或 Forward 按钮时的失效操作 Firefox 3.5 IE 8 Chrome 3 Safari 4 内容没有失效 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面 浏览器呈现来自缓存的页面...当用户在原始浏览器窗口中单击 Enter 按钮时的 Last-Modified E-Tag 操作 Firefox 3.5 IE 8 Chrome 3 Safari 4 内容自上次访问以来没有被修改 浏览器呈现来自缓存的页面...当用户按 F5 键刷新页面时的 Last-Modified E-Tag 操作 Firefox 3.5 IE 8 Chrome 3 Safari 4 内容自上次访问以来没有被修改 浏览器重新发送请求到服务器

66920
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    浅谈浏览器HTTP的缓存机制

    点击被拦截的请求,可以在右栏直接修改报文内容(上半区域是请求报文,下半区域是响应报文),点击黄色的“Break on Response”按钮可以执行下一步(把请求发给服务器),点击绿色的按钮“Run to...浏览器的强制策略 如上述,当下大多数浏览器在点击刷新按钮或按F5时会自行加上“Cache-Control:max-age=0”请求字段,所以我们先约定成俗——后文提及的“刷新”多指的是选中url地址栏并按回车键...例如在IE我们可以使用 no-cache 来防止点击“后退”按钮时页面资源从缓存加载,但在 Firefox 中,需要使用 no-store 才能防止历史回退时浏览器不从缓存中去读取数据,故我们在响应报头加上如下组合值即可做兼容处理...然而这并不是问题的全部答案,我们前面提到过,在Chrome中如果点击“刷新”按钮,Chrome会强制给所有资源加上“Cache-Control: max-age=0”的请求首部并向服务器发送验证请求的,...关于这个问题其实在组内跟小伙伴们讨论过,通过Fiddler抓包发现,如果关闭Chrome的开发者面板再点击“刷新”按钮,浏览器是会按预期发送验证请求且接收返回的304响应的,另外这个奇怪的情况在不同的网站甚至不同的电脑下出现频率都不一致

    72420

    如何使用浏览器工具调试PWA

    Chrome使用这个主题颜色来着色浏览器的一些UI部分,比如地址栏。可以使用meta标签来自定义每个页面的颜色,但是当应用从主屏启动时,在清单中指定的主题颜色提供站点范围的主题颜色。 ?...在设备模式屏幕下,离线也是强制的,除网络节流。 重新加载更新:当调试时,这个非常有用。Service Workers首次加载时会将其安装在设备上。...绕过网络可以完全关闭Service Worker启用的缓存。 当您希望从网络直接访问时,这会阻止应用程序使用缓存的资源。调试时也非常有用。...通过Google Chrome缓存存储演示项目可以更清楚看到具发生了什么,当把内容添加到缓存时。 ? 首先,先不使用缓存。 ? 按住创建WNDT62缓存按钮触发缓存的创建: ?...像Chrome一样,当用Cache API使用被“开发工具”的“网络”面板中的Service Worker缓存的资源时,在Transferred列下列出了『Service Worker』: ?

    3.7K40

    如何测试你做的项目的可访问性

    input 框 通过 通过 按Enter可执行搜索 “搜一下”按钮 通过 通过 按Enter可执行搜索 筛选区 课程 通过 不通过 1....首先简单介绍下它的键盘操作,更多信息可查看上面截图里的“使用指南”。 在运行 VoiceOver 时,普通的键盘操作保持不变。...比如: 按“页面结构”导航时,信息有点单薄。比如我想告诉屏幕阅读器用户,页面有搜索区域、筛选区域、列表区域和翻页区域 按“页面结构”导航时,有混入不恰当的信息。...比如“导航”,它其实是按钮式的翻页区域 按“表单空间”导航时,不够全面。页面应该告诉用户还有个“筛选”区 按“链接”导航时,呃...里面就有点一言难尽了。...因为它混入了“筛选”区的表单信息,也混入了“翻页”区的按钮区 当用户第一次登录他们不熟悉的页面时,更倾向于用标题导航和页面结构导航;当他们熟悉了之后,按表单控件和按链接导航有利于提高他们的导航效率。

    1.9K10

    【译】Chrome77 Devtools有哪些新功能?

    衡量用户的首页交互与浏览器对该交互的响应之间的最大潜在时间,简单讲就是用户首次与站点交互时(即单击链接,点击按钮或使用自定义的由JavaScript驱动的控件)到浏览器实际能够做出响应的最大时长。...Maximum Potential First Input Delay 打开断点编辑器的键盘快捷键 在开发者工具Sources面板的编辑器中鼠标聚焦时按Control + Alt + B或Command...breakpointeditor Network面板预缓存 当从prefetch cache加载一个资源时,Network面板的Size列将会显示(prefetch cache)。...当前页面完成加载后,且带宽可用的情况下,这些资源将在 Chrome 中以 Lowest 优先级被提取。...这意味着,prefetch 最适合抢占用户下一步可能进行的操作并为其做好准备,例如检索结果列表中首个产品的详情页面或检索分页内容的下一页。 ?

    87750

    分享几个实用的Chrome扩展程序

    AdBlock 最受欢迎的 Chrome 扩展,拥有超过 6000 万用户!拦截网页上的广告。...这个插件在我看来是自己使用谷歌浏览器时必须安装的,能拦截掉网页上的各种乱七八糟的广告,也可以屏蔽掉搜索引擎根据你的喜好展示的推荐。...运行效果如下: Restlet 一款能在浏览器里测试接口的工具。特别适合在测试一些内部接口时,还必须要在用户登录的情况下才能测试的情况。...或是按快捷键ctrl+alt+delete,进入清除浏览数据页面。但是通过clear cache工具设置好了要清除的缓存,点击一下按钮即可清除缓存和浏览数据。...最后 最后推荐一下,我一直都装着的一个小工具,Start Today,这个Chrome插件可以让每次打开新的标签页时都是展示一个随机的背景图,图片的来源都是从unsplash上精心挑选出来的,每次打开都是不同风格的背景美图

    1.9K20

    【说站】win10系统打开网页不是私密连接怎么解决?

    我们平时上网在浏览器内打开某个网址时可能会遇到页面报错提示:“您的连接不是私密连接”,这种情况多是电脑上的时间日期设置的有问题导致证书过期失效或是网站不安全导致的。...要登录门户网站,只需访问任何网站并输入您的登录信息即可。完成后,检查问题是否已解决。 方法二:使用隐身模式 1、许多Web浏览器都具有隐身模式,允许您在不在计算机上存储任何历史记录或缓存的情况下上网。...方法七:清理浏览缓存 您的连接不是私人错误可能由于您的缓存而发生,但是您可以通过清除它来解决问题。这是一个简单的过程,您可以按照以下步骤操作: 1、按右上角的菜单按钮,然后从菜单中选择设置。...检查浏览历史记录,Cookie,缓存的图像和文件以及托管的应用程序数据。现在,单击“清除浏览数据”按钮。 5、在Chrome删除所选数据并重新启动浏览器时,请稍候。...方法八:将Chrome重置为默认设置 在某些情况下,您的设置可能导致发生“您的连接不是私人”错误。要解决此问题,最好将Chrome重置为默认设置。

    10.6K20

    【实践】Chrome浏览器客户端调试从入门到奔溃

    CHROME调试总体 CHROME下按"Ctrl + Shift + I"即可调出CHROME调试窗口。...1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态 2.设备图标:点击它可以切换到不同的终端进行开发模式,移动端和...,所以推荐使用Sources下面的左侧的Sinppets代码片段按钮,这时候点击创建一个新的片段文件,写完测试代码后把鼠标放在新建文件上run,再结合控制台查看相关信息(新建了一个名叫:app.js的片段代码...会走很多底层的封装方法,需要很多步骤才能真正进入这个函数块,此时将鼠标放在此函数上,会出现相关提示,会告诉你在该文件的哪一行代码处,点击即可直接看到这个函数,然后临时打上断点,按F10或者点击右上角的第二个按钮即可直接进入此函数的断点处...Profiles:如果你需要Timeline所能提供的更多信息时,可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。

    3.8K30

    一文速学-selenium高阶性能优化技巧

    不使用GUI界面也就是我们常见的selenium的无头模式,适用于不需要交互的界面测试,尤其是在不需要与页面交互或不关心可视化内容时。...使用 eager 或 none 加载策略时,页面上的某些元素可能尚未加载完成,因此在执行与这些元素相关的操作之前,可能需要实施额外的等待策略或检查元素的存在性:# 初始化 Chrome 选项options...每次与 DOM 的交互都会消耗时间,尤其是在复杂或大型的网页上。因此,尽量减少不必要的元素查找和交互。缓存已查找的元素对于频繁操作的元素,可以将其存储在变量中,避免重复查找。...# 第一次定位按钮并缓存它cached_button = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, "...myButton")))# 第一次点击按钮cached_button.click()需要注意的是,这种方法只适用于页面结构在整个会话中保持不变的情况。

    1.1K23

    关于如何做一个“优秀网站”的清单——规范篇

    按返回,确保列表视图滚动到与细节链接/按钮被点击之前相同的位置。 改善方法:当用户按“返回”时,恢复列表中的滚动位置。有些路由库可以帮你完成这个功能。...如果是通用按钮,您可能希望在点击时将URL直接复制到用户的剪贴板,提供他们的社交网络来分享,或尝试新的Web Share API与Android上的本机共享系统集成。...■您可以通过使用WebPageTest上的Pagespeed Insights(目标为85分)和SpeedIndex(目标是移动3G Nexus 5 Chrome上的的表现...■还可以在服务器上查看使用PRPL模式和工具,如PageSpeed Module。 缓存 网站使用缓存优先的原则加载 确认方法: ■将网络仿真设置为最慢的设置并浏览应用程序。...当Chrome显示权限请求时,请确保该页面“暗淡”(覆盖上一层),所有内容与解释网站需要推送通知的原因无关。

    3.2K70

    0CTF h4x0rs.club12 复现

    然后分析network,发现引入了一个外域的东东, ? 进一步发现主页是通过引入一个iframe来加载的这个页面。 ? 然后发现这个引入的页面里有一堆的js代码。...而且network那里还有不断发送的请求。 ? 所以猜测,游戏是在与一个其他服务器上通信,所有的游戏资源都在那里。 仔细分析引入的js可以发现。他是在和另一个页面,即socket进行通信。...【正解】几天后的今天 wp出来后,第一时间去看了一下。发现出题大佬真心6。膜一下。 主要考点有一个csp中的strict-dynamic。...了解了csp的strict-dynamic属性。 弥补了一个误区,之前以为csp都是按站设的,没太注意,还可以按不同页面设置不同的。...对iframe框架的一些通信有了些了解(postMessage)。 对绕过nonce有了进一步的认识。 对Chrome XSS auditor的拦截规则有了进一步的了解。

    1.6K70

    WorkBox 之底层逻辑Service Worker

    而在之前的 Web性能优化之Worker线程(上) Web性能优化之Worker线程(下), 其实已经写过相关的文章,但是由于当时的技术所限,其中的内容只是单纯的从实现逻辑上,也就是API层面做了一次不完整归纳总结...例如: 在「首次请求静态资源时」将其存储在缓存中,然后在「后续请求中从缓存中获取」。 将页面结构存储在缓存中,但在「离线情况下」从缓存中获取。...客户端 当说一个service worker正在控制一个页面时,实际上「是在控制一个客户端」。客户端是指URL位于该service worker作用域内的「任何打开的页面」。...这些开关非常有帮助,特别是Bypass for network,当我们正在开发一个具有活动Service Worker的项目时,同时还希望确保体验在没有Service Worker的情况下也能按预期工作...一旦生效,Chrome 将执行自定义存储配额以进行测试。 这个子面板还包含一个清除站点数据按钮以及一整套相关的复选框,用于在单击按钮时清除哪些内容。

    44120

    插件实现12306网站“按预填信息”自动抢票

    当我以为等着页面上的倒计时结束,“按预填信息购票”按钮出现后,立马点击一下就能开始抢票,然而并不是,当时的我心中真的是一万匹**马在崩腾。...所以决定研究一下怎么搞一个google chrome插件,实现一键自动化,节省两次点击按钮的时间,毕竟抢票的时间是很宝贵的,哪怕节约哪怕1毫秒,可能我们就已经排在很多人前面了。...希望达到的效果是,通过chrome插件,自动监听页面上的按钮控件,一是当出现“按预填信息购票”按钮时,自动触发点击;二是当出现“提交订单”按钮时,自动触发点击。...模式12306的页面写一个页面,模拟12306页面上的从“1月9日09点 起售”到“按预填信息购票”按钮出现的过程,再模拟当用户点击“按预填信息购票”按钮时,弹出“购票信息确认”窗口,显示“提交订单”按钮...演示使用利用我们前面写的模拟页面,来演示一下插件的使用:显然,我们开发的这个插件非常的简陋,还有报错信息没有处理,另外每隔5毫秒检查一次DOM元素对浏览器性能有一定影响,不过足以满足我们的自动化需求。

    30400

    除了Selenium,介绍一款新的网页自动化工具来爬虫

    打开百度搜索; 搜索相关图片; 跳转到图片页面; 打开图片; 点击下载按钮; 下面,就通过Helium来逐步完成上述5步。...搜索图片&跳转到图片页面 搜索图片过程中,首先需要在搜索框输出想要的目标图片,然后点击百度一下或者按下ENTER键。...但是,我们在这里跳转到图片页面时,发现每幅图片并没有标签,那么我们该怎么确定点击哪一幅图呢?...好在Helium兼容了Selenium的接口,我们可以通过Selenium来获取页面的元素,然后结合Helium的点击就可以实现打开图片这一步骤。...点击下载按钮 最后一步就是点击下载按钮,这一步和上一步类似,我们先通过Selenium的接口来获取Web元素,然后点击即可。

    2.1K20

    渐进式Web应用清单(翻译转载)

    首次加载流畅,即使是在3G下 测试 在Nexus 5(或者类似的机器)上使用Lighthouse验证在模拟3G网络下,首次访问时可交互时间是否小于10S。 修复 有许多提升性能的方法。...页面跨浏览器兼容性 测试 在Chrome, Edge, Firefox和Safari中测试页面 修复 修复应用跨浏览器运行时的问题 页面过渡不要表现得像网络阻塞 当你四处触碰时过渡应该表现顺畅点,哪怕在弱网络下...测试 在很慢的模拟网络下打开app。每次你在app中触碰一个链接或者按钮,页面应该立即响应,可以使用以下方案: 立即过渡到下一屏,同时在等待网络内容时展示一个占位加载。...内容在独立或全屏模式下分享毫无难度 测试 确保独立模式(也就是把应用添加到主屏后)下,你可以从应用的界面把内容分享出来。 修复 提供社交分享按钮,或者界面的通用分享按钮。...缓存 站点网络请求优先使用缓存 测试 把网络模拟调至最低值,开始运行应用 然后,把网络模拟调制离线,再运行。在离线状态下,相比于慢连接应用应该不会有太大差别 修复 在可行的地方使用缓存优先响应。

    1.6K20

    Chrome开发者工具指北

    Chrome Dev Tools,Chrome 开发者工具,俗称 F12。其实不仅在 Chrome 上有,基本上所有的现代浏览器都带这个工具。它是调整样式、调试 JS、查看前后端收发数据的不二神器。...在 Chrome 浏览器中呼出 F12 有三种方法: 右上角三个点按钮调出菜单——更多工具——开发者工具(Ctrl + Shift + I) 顾名思义,键盘快捷键F12一键呼出 在页面元素上右键点击——...审查元素,或者叫检查 呼出以后会显示在页面的下方,如果觉得这样太扁不方便看信息,可以点右上角三个点的按钮调整布局,分别是新窗口打开、靠在左侧、靠在下方,靠在右侧: 可以看到工具的顶栏有很多标签:本文先介绍最常用也是最重要的...如果请求的数据是对的而行为不正确,那肯定是服务器的问题;反之如果发的数据就是错的,那就是页面的问题。这样一下就可以把排查的范围缩小一半。所以不要再出了问题一个劲盯着无关的地方大眼瞪小眼。...那么打开 Network 面板,在页面中添加一条评论并提交,在 Network 中就应该能看到一条请求的记录,为防止页面刷新记录丢失,可以勾选上 Preserve 框: 如果列表已经太多内容可以点击清空按钮

    41520

    你真的知道如何正确清除 DNS 缓存吗?( 附全平台详细教程 )

    DNS 缓存是一个临时数据库,用于存储有关以前的 DNS 查找的信息。换句话说,每当你访问网站时,你的操作系统和网络浏览器都会保留该域和相应 IP 地址的记录。...但是在某些情况下,例如:对网络问题进行故障排除,或者在更改 DNS 解析器之后,你将需要刷新 DNS 缓存。这将清除缓存的 DNS 条目,并根据新配置的 DNS 设置执行后续查找以解析域。...本指南提供有关如何在不同的操作系统和 Web 浏览器上刷新 DNS 缓存的说明。 在 Windows 上清除/刷新 DNS 缓存 对于所有 Windows 版本,清除 DNS 缓存的过程都是相同的。...谷歌浏览器 Chrome 要清除 Google Chrome 的 DNS 缓存,请执行以下步骤: 打开一个新标签,然后在地址栏输入 chrome://net-internals/#dnsChrome。...点击 “清除主机缓存” 按钮。 如果那对你不起作用,请尝试清除缓存和 Cookie。 按下 CTRL+Shift+Del 以打开 “清除浏览数据” 对话框窗口。 选择一个时间范围。

    46.3K20

    JavaScript 开发者需要了解的15个 DevTools 技巧

    使用命令面板 Chrome 的 DevTools 提供了类似编辑器的命令面板。在任何 DevTools 面板中,按 Ctrl | Cmd + Shift + P,然后按名称搜索选项: ? 4....网速节流 在快速,可靠的网络上使用高性能的设备测试你的站点可能并不能表示实际使用情况。你的用户可能处在慢速的网络环境下。...输入一个表达式,例如 "The value of x is", x 每当执行该行代码时,消息就会出现在 DevTools 控制台中。logpoints 通常将在页面刷新之间保持不变。 10....启用本地文件替代 Chrome 允许任何 HTTP 请求使用你的设备上的本地文件,而不是通过网络获取它。...可以在 Chrome 中或使用任何代码编辑器来编辑文件,每当重新加载页面时,都将使用更新的版本。 14. 管理客户端存储 网页可以使用多种技术将数据存储在客户端上。

    4.9K20
    领券