chrome
文章平均质量分 75
wuyulkl
这个作者很懒,什么都没留下…
展开
-
浏览器的前进后退时,页面的缓存机制
后退/前进缓存(Back/forwardcache,以下简称bfcache)是一种浏览器优化,可实现即时的后退和前进导航。它显著改善了用户的浏览体验,尤其是那些网络或设备速度较慢的用户。作为web开发人员,了解如何在所有浏览器上基于bfcache优化页面非常重要。这样可以提高用户体验。...原创 2022-07-15 19:13:26 · 1782 阅读 · 0 评论 -
no-cache、max-age=0、must-revalidate区别
在执行must-revalidate时,若浏览器第二次去请求服务器来做新鲜度验证,结果服务器挂了,无法访问,那么缓存需要返回一个504GatewayTimeout的错误(这里应该是像nginx这样的代理来返回,若是浏览器如chrome,将直接是ERR_CONNECTION_REFUSED,即无法访问,连接被拒绝)。而如果是no-cache,当验证新鲜度时,服务器扑街,则会照样使用本地缓存显示给用户(有的总比没的好,当然有可能显示的就是旧的文档了)。这里对no-cache较新的定义。...原创 2022-07-15 19:04:45 · 817 阅读 · 0 评论 -
HTTP中缓存相关的字段(Cache-Control, Expires, Last-Modified, ETag)介绍 以及浏览器前进后退行为的缓存特点
字段(即上次缓存的Last-Modified值),服务端比较If-Modified-Since的值和资源的实际修改时间,如果未修改,则返回304,不返回资源的实际内容,表示资源未改动,则浏览器使用缓存中的资源。但是html资源除外,由于在前进后退的时候,html资源默认都会使用上一次的资源,如果在前进、后退期间服务端更新了资源,若想要新资源立即生效,可以把html资源设置成no-cache。html中的js资源即使设置成no-cache,前进后退的时候,结果也是fromdiskcache。...原创 2022-07-15 16:57:30 · 1040 阅读 · 0 评论 -
window.open()的奇妙冒险
前言一个简单的优化需求,竟然引发了window.open()的奇妙化学反应☠️背景项目X的A页面需要点击一个区域后,跳转到对应的页面B,这个页面需要新开窗口来展示。B页面成功打开后再起接口还在loading的时候关闭,会造成当前浏览器中所有项目X的页面卡死;反之当B页面所有接口loading完成后再关闭就不会卡死😅。这里跳转尝试了多种方式——window.open();React的标签;react-router的useHistory等等,除了useHistory正常外其他均以卡死阵亡,...转载 2022-06-28 18:53:21 · 275 阅读 · 0 评论 -
window.open 卡死
最近公司里开发了一个低代码平台,使用的react技术栈。这个平台顶部有一个预览按钮,当点击时,会使用window.open打开一个新的浏览器tab,显示预览页的内容。开发的时候,发现一个奇怪的现象,如果打开之后的页面,资源没加载完(页面内有不少ajax交互),就快速关闭掉了,父页面就会卡死。另一个同事对这个事情进行了排查,最后发现是window.open的问题,这个看似不起眼的api,其实暗藏玄机最终发现问题和chrome的进程机制有关系。原因:谷歌浏览器在给新开窗口分配进程时,看是否同源,非同源页面会单独原创 2022-06-28 18:50:43 · 2450 阅读 · 0 评论