文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

H5 缓存机制浅析 移动端 Web 加载性能优化

一般浏览器会将缓存记录及缓存文件存在本地 Cache 文件夹中。Android 下 App 如果使用 Webview，缓存的文件记录及文件内容会存在当前 app 的 data 目录中。...而 localStorage 则持久存在，在页面关闭后也可以使用。...只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。...没有缓存的资源在已经缓存的 HTML 中不能加载，即使有网络。...但 Webview 也有一些不可忽视的问题，比较突出的就是加载相对较慢，会相对消耗较多流量。 通过对一些 H5页面进行调试及抓包发现，每次加载一个 H5页面，都会有较多的请求。

2.9K20

H5缓存机制浅析

一般浏览器会将缓存记录及缓存文件存在本地 Cache 文件夹中。Android 下 App 如果使用 Webview，缓存的文件记录及文件内容会存在当前 app 的 data 目录中。...而 localStorage 则持久存在，在页面关闭后也可以使用。...只要浏览器开着，页面会话周期就会一直持续。当页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。...没有缓存的资源在已经缓存的 HTML 中不能加载，即使有网络。...现在 Android App(包括手 Q 和 WX)大多嵌入了 Webview 的组件(系统 Webview 或 QQ 浏览器的 X5组件)，通过内嵌Webview 来加载一些H5的运营活动页面或资讯页

2.3K80
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Carson带你学Android：手把手构建WebView缓存机制及资源预加载方案

    1.2 耗费流量 每次使用 H5页面时，用户都需要重新加载 Android WebView的H5 页面 每加载一个 H5页面，都会产生较多网络请求（上面提到） 每一个请求都串行的，这么多请求串起来，这导致消耗的流量也会越多...2.1 前端H5的缓存机制 定义 缓存，即离线存储 这意味着 H5网页 加载后会存储在缓存区域，在无网络连接时也可访问 WebView的本质 = 在 Android中嵌入 H5页面，所以，Android...作用 离线浏览：用户可在没有网络连接时进行H5页面访问 提高页面加载速度 & 减少流量消耗：直接使用已缓存的资源，不需要重新加载 具体应用 此处讲解主要讲解 前端H5的缓存机制 的缓存机制 &...方面：首次使用的WebView对象 & 后续使用的WebView对象 具体如下图 2.2.2 预加载H5资源 原理 在应用启动、初始化第一个WebView对象时，直接开始网络请求加载H5页面 后续需打开这些...H5页面时就直接从该本地对象中获取 a.

    3.3K10

    H5开屏从龟速到闪电，企微是如何做到的

    我们调研了业内相关方案，从渲染链路的视角来看下常见方案的优化思路。 传统离线包 在加载渲染过程中，网络IO是很明显的一个耗时瓶颈。...离线包的更新机制：客户端加载时根据offid检测到本地离线包的存在，则直接使用拉起，同时启动异步版本检测和更新。...第二，业务：preUrl页面在加载时会拉取相应的业务数据存到localStorage，实际的数据预拉取请求放到业务方发起，也可以很好地兼容已有的技术栈。...而相应的不同入口切换页面时，不同于复用预热WebView重新reload页面，为了保留app初始化的效果，我们采取了一套Native通知Web SDK，页面切换交给WebView控制的方案。...只有当preUrl成功加载和SDK执行成功上屏时，两个状态才会置true，此时的预热WebView才是可用的，否则会回退到普通容器模式进行load url来加载页面。

    3.4K162

    腾讯祭出大招 VasSonic，让你的 H5 页面首屏秒开！

    从当初立项优化页面加载速度，到不断摸索、优化，再到整理代码、文档，最终在Github上开源，并且在24小时内获取star数超过1600。...页面发起CGI请求对应的数据或者通过localStorage获取数据，数据回来后再对DOM进行操作更新。...可以看出上述流程存在着几个问题： 从外网统计数据来看，用户的终端耗时在1s以上，这意味着在这1s多的时间里，网络完全是空闲在等待的，非常浪费； 页面的资源和数据完全依赖于网络，特别是用户在弱网络场景下...于是我们在思考，是否能够将用户的已经加载的页面内容缓存下来，等用户下此点击页面的时候，我们先加载展示页面缓存，第一时间让用户看到内容，然后同时去请求新的页面数据，等新的页面数据拉取下来之后，我们再重新加载一遍即可...预加载 实际上整个SonicSession在没有WebView的情况下，也是可以独立完成所有逻辑的，当用户点击页面的时候，我们在将WebView和SonicSession绑定起来即可。

    2.8K00

    腾讯祭出大招VasSonic，让你的H5页面首屏秒开！

    从当初立项优化页面加载速度，到不断摸索、优化，再到整理代码、文档，最终在Github上开源，并且在24小时内获取star数超过1600。...启动子线程请求页面主资源，子线程中不断讲网络数据读取到内存中，也就是网络流(NetStream)和内存流(MemStream)之间的转换； 当WebView初始化完成的时候，提供一个中间层BridgeStream...于是我们在思考，是否能够将用户的已经加载的页面内容缓存下来，等用户下此点击页面的时候，我们先加载展示页面缓存，第一时间让用户看到内容，然后同时去请求新的页面数据，等新的页面数据拉取下来之后，我们再重新加载一遍即可...用户打开页面之后，先是看到历史页面，等用户准备去操作的时候，突然页面白闪一下，重新加载了一遍，这种体验非常差，特别在一些低端机器上，这个白闪的过程太明显，非常影响体验，这是用户和产品经理都不能接受的。...预加载 实际上整个SonicSession在没有WebView的情况下，也是可以独立完成所有逻辑的，当用户点击页面的时候，我们在将WebView和SonicSession绑定起来即可。

    1.2K60

    双11主会场性能体验提升 - 秒开优化

    WebView白屏 上图中的WebView的白屏就是在页面加载过程中，实时创建WebView、loadURL、建立连接、页面所需的HTML/JS/CSS等资源。...NO.4 客户端的核心手段 Web应用对比Native存在一些差异，在于WebView容器的创建、资源加载速度、渲染速度等方面存在差距。这部分也是我们的突破口。...NO.5 前端的核心手段 在客户端容器的帮助下，主会场的H5页面可以提前在客户端首页通过离屏的WebView进行加载和渲染、并在用户实际访问时“即开即用”。...除了上面介绍的客户端的部分策略，前端也利用了端侧能力在资源提前加载、页面提前渲染上实现了一定的优化。 预渲染适配 在提前创建的离屏WebView中，为了做到真正的秒开，会场页面可以提前进行渲染。...数据快照 为了能够做到真正的“秒开”，让用户不再有白屏的等待体感，本次的主会场仿照手淘客户端首页的渲染策略，将用户的上次访问数据进行了本地缓存，在预创建的WebView内渲染时，优先使用上次的数据作为打底数据进行占位渲染

    2.8K20

    腾讯 VasSonic 框架，让你的 H5 页面首屏秒开

    从当初立项优化页面加载速度，到不断摸索、优化，再到整理代码、文档，最终在Github上开源，并且在24小时内获取star数超过1600。...完成初始化后，WebView开始去CDN上面请求Html加载页面； 3. 页面发起CGI请求对应的数据或者通过localStorage获取数据，数据回来后再对DOM进行操作更新。...于是我们在思考，是否能够将用户的已经加载的页面内容缓存下来，等用户下此点击页面的时候，我们先加载展示页面缓存，第一时间让用户看到内容，然后同时去请求新的页面数据，等新的页面数据拉取下来之后，我们再重新加载一遍即可...用户打开页面之后，先是看到历史页面，等用户准备去操作的时候，突然页面白闪一下，重新加载了一遍，这种体验非常差，特别在一些低端机器上，这个白闪的过程太明显，非常影响体验，这是用户和产品经理都不能接受的。...预加载 实际上整个SonicSession在没有WebView的情况下，也是可以独立完成所有逻辑的，当用户点击页面的时候，我们在将WebView和SonicSession绑定起来即可。

    4.5K80

    WKWebView

    可以使用stopLoading方法来停止页面的加载，使用loading属性来查看是否正在加载。 要允许用户在Web历史页面中前进或者后退，要为按钮设置goBack或者goForward的动作。...重新加载当前页面。 - reloadFromOrigin。重新加载当前页面，如果可能，使用缓存验证条件执行端到端重新验证。 - stopLoading。停止加载当前页面所有资源。...导航到后退列表的后退项中。 - goForward。导航到后退列表的前进项中。 - reload。重新加载当前页面。 - reloadFromOrigin。...重新加载当前页面，如果可能，使用缓存验证条件执行端到端重新验证。 - stopLoading。停止加载当前页面所有资源。...内容进程终止时调用，可在该函数中重新创建新的WKWebView，然后自动重新加载页面。

    7.7K20

    微前端框架qiankun项目实战（二）--踩坑与部署篇

    token放进本地缓存 这个过程中我们要不断地修改项目，一刷新就要重新登录实在太烦了，下面我们改造一下主应用，把登录后的token存到localStorage中 在src/store/index.js中...: [storagePlugin] 这里在setToken方法中添加了把token存到localStorage的逻辑，并编写了一个Vuex的storagePlugin插件，该插件主要功能是在应用加载的时候去获取...localStorage中的token，如果有的话直接commit到我们的store中，这样一来我们只要登录了，再刷新也不需要重新登录 接下来，准备开始踩坑了 坑1：样式冲突问题 首先遇到的样式冲突，不是什么...到了第三天的时候，我差不多想放弃微前端改造方案了，突然我发现，我们点击菜单的时候，url是有变化的，但是页面没有跳转，所以我又大胆猜测，是不是路由的问题，而且可以看到，每次我们在主微应用之间切换的时候，...可以看到，这次部署是真的成功了 PS:在vue3中如果直接监听整个route对象，也会出现页面无法跳转的情况 欢迎指出不足和交流，踩坑不易，如果对你有帮助的话，点个赞吧~(#^.^#) 参考文献 明源云的

    2.6K40

    移动 H5 首屏秒开优化方案探讨

    json 数据的缓存可以用 localStorage 缓存请求下来的数据，可以在首次显示时先用本地数据，再请求更新，这都由前端 JS 控制。...所以 HTML 文件的“缓存”和跟“更新”间存在矛盾。...我们可以在 APP 启动时预先初始化一个 webview 然后释放，这样等用户真正走到 H5 模块去加载 webview时就变快了。...预加载数据 理想情况下离线包的方案第一次打开时所有 HTML/JS/CSS 都使用本地缓存，无需等待网络请求，但页面上的用户数据还是需要实时拉，这里可以做个优化，在 webview 初始化的同时并行去请求数据...具体实现上，首先可以在配置表注明某个离线包需要预加载的 URL，客户端在 webview 初始化同时发起请求，请求由一个管理器管理，请求完成时缓存结果，然后 webview 在初始化完毕后开始请求刚才预加载的

    3.9K50

    重生之我在大学自学鸿蒙开发第四天-《ArkWeb页面适配》

    ，可以直接进行跳转，只不过链接地址不存在了，影响不大，不影响我们的使用 这是打开后的页面展示，这是在虚拟集中展示出来的样式 2.1、引入course_learning文件夹 这里直接去官网下载即可 下载完成后放入...这里要在json文件夹下放入以下字段 2.4、导出页面 官方解释：根目录下找到Index.ets，这个文件的作用是统一导出该模块内，需要导出的UI组件或者类等内容 这里在index中将页面导出 2.5、...引用页面 这里要将之前的那个页面注释掉，以免冲突 三、测试 可以看到在虚拟机上正常展示出来了 这里虽然可以跳转但是跳转的页面显示下架了 四、总结 本章内容挺简单的，其实主要就是使用对ArkUI框架（HarmonyOS...的声明式开发框架）实现的简易WebView组件，用于加载本地HTML文件并显示在应用中。...# 被加载的网页文件 注意事项 需要确保index.html文件存在于指定路径 若需网络访问，需在module.json5中声明ohos.permission.INTERNET权限 Web组件默认不支持

    19610

    WebView 常见 Crash 分析及解决方案

    缓存目录中的 webview_data.lock 文件在 for 循环中尝试加锁 16 次，如注释解释：可能出现的极端情况是一个旧进程正在被杀死时一个新的进程启动了，如果加载成功会将该进程 id 和进程名写入到文件...，如果加锁失败则会抛出异常，在 Android P 及更高版本检测应用是否存在多进程公用 WebView 数据目录的原理就是进程持有 WebView 数据目录中的 webview_ data.lock...WebView 数据目录，每次加锁成功都会重新写入对应进程信息，那么我们可以在应用启动时对该文件尝试加锁，如果加锁失败就删除该文件并重新创建，加锁成功就立即释放锁，这样当系统尝试加锁时理论上是可以加锁成功的...，可以正常使用，结合上面日志里面出现的 data/data/ 应用包名 /lib/***.so，由此推断系统在覆盖安装或升级新版本的时候如果老版本和新版本存在相同库文件并不会重新加载进系统导致新版本安装之后用的还是老版本加载的库文件...长期有效的方案是在 WebView 页面加载图片的时候，校验图片的分辨率和大小，对不符合规范的图片做响应的压缩，像 Glide 一样。这项内容我们还在有条不紊的规划开发中，待成熟后及时输出给大家。

    6.6K20

    如何全链路进行前端性能优化

    合理使用web fonts 可以将字体文件部署到cdn上，加快用户端的加载速度，也可以将字体以base64的形式保存在css中，并通过localStorage进行缓存。...简单来说就是讲所需要的资源提前加载到浏览器本地，后面在需要的时候可以直接从浏览器的缓存中获取，而不用再重新开始加载。好处是减少用户后续加载资源等待的时间。...-- 提前加载需要的资源 --> 另一种预加载组件的方式就是提前渲染它，在页面中渲染组件，但是并不在页面中展示，也就是渲染好后先隐藏起来，用的时候再直接展示。...本地缓存，异步接口数据优先使用本地localStorage中缓存的数据。...最终这个包会解压释放在内存里面，当webview在加载url的时候会直接从内存里面读取，如果能读取到就加载内存中的页面数据进行展示，假设读取不到也就是说本地没有这个业务就会使用线上的url地址让页面加载就可以了

    1.6K30

    QQ 会员基于 hybrid 的高质量 H5 架构实践

    个性张扬是年轻的代名词，QQ 会员用户在好友列表中的名字是红色，而且排名靠前，这些都达成了用户的炫耀心理，就连发红包时都拥有右图中的专属的皮肤。...雅虎的一项研究表明，页面打开每慢 400 毫秒，将带来 5%-9%的用户流失；让页面更快呈现给用户是前端工程师们的不懈追求，在 hybrid 模式下借助于终端的能力我们有了更大的想象空间！...2、在之前版本的手 Q 中我们时常可以看到类似左边的白屏，虽然加上了卖萌的文案"别闹，加载是件正经事"让用户感觉萌萌哒，但这掩盖不了曾经 webview 初始化慢的事实。...2、H5 标准中也有一个 localstorage 特性，我们通过扩展 seajs 的缓存插件实现在 localstorage 中缓存 JS 文件，加快了 HTML 依赖的 JS 的加载速度。...第一种场景是用户首次或者缓存失效时加载页面，用户点击终端入口后，在初始化 webview 的同时并行发起 http 链接，在 webview 初始化好之后会在内核和 http 流之间建立桥接。

    2.7K00

    QQ会员基于 Hybrid 的高质量 H5 架构实践

    雅虎的一项研究表明，页面打开每慢400毫秒，将带来5%-9%的用户流失；让页面更快呈现给用户是前端工程师们的不懈追求，在hybrid模式下借助于终端的能力我们有了更大的想象空间！...1、要打开页面，在PC端需要先打开一个浏览器（chrome或者火狐），在android或者IOS应用中必须先有一个webview（图中橙色部分）；出于性能考虑手Q并未在后台常驻一个webview进程，所以要打开页面需要先初始化...2、在之前版本的手Q中我们时常可以看到类似左边的白屏，虽然加上了卖萌的文案“别闹，加载是件正经事”让用户感觉萌萌哒，但这掩盖不了曾经webview初始化慢的事实。...2、H5标准中也有一个localstorage特性，我们通过扩展seajs的缓存插件实现在localstorage中缓存JS文件，加快了HTML依赖的JS的加载速度。...第一种场景是用户首次或者缓存失效时加载页面，用户点击终端入口后，在初始化webview的同时并行发起http链接，在webview初始化好之后会在内核和http流之间建立桥接。

    1.1K20

    【HarmonyOS】Web 组件的 PDF 文档预览功能详解

    【HarmonyOS】Web 组件的 PDF 文档预览功能详解一、前言应用开发中，PDF 文档预览是一项常见需求。虽然官方提供了预览组件，但是在H5业务场景下，如何加载PDF呢？...此时就需要Web 组件提供了便捷的 PDF 预览能力。目前官方的ArkWeb，支持加载网络、应用沙箱内、本地资源等多种来源的 PDF 文档。...本文将详细介绍如何使用 Web 组件实现 PDF 预览功能，包括不同场景下的加载方法、配置要点及动态切换技巧，帮助开发者快速集成 PDF 预览功能到自己的应用中。二、使用步骤1....基础配置使用 Web 组件预览 PDF 需要注意以下基础配置：开启 DOM 存储权限：由于 PDF 预览页面会使用window.localStorage记录侧导航栏状态，必须设置domStorageAccess...(true)网络访问权限：若需加载网络 PDF，需在module.json5中配置互联网权限"requestPermissions":[ { "name" : "ohos.permission.INTERNET

    42500
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券