H5是HTML5的缩写,它是“ HTML”的第五版,即“网页标准语言的描述”的第五版。通过URL.REFERS访问网页到网页。
Android Native WebView的磁盘缓存最大上限为20m。对于经常使用H5业务的项目,它仍然太小。HTTP的缓存部分使用LRU缓存算法。它很容易导致页面缓存被清除并重新加载。不仅是浪费用户的流量,还会引起不良的用户体验。通过自定义本地缓存方法,本文中断了本文,通过本机WebView缓存限制,提供了各种缓存模式,支持预载和离线加载,并提供友好的支持脱机Pre -Push,这可以大大提高H5加载速度。
包括引入3-party CSS,JS,图片等。
JS本身的分析过程很复杂,分析速度是不愉快的。&HTML涉及更多的JS代码文件,并且可能会遇到很多要加载的资源。这次,CSS和PNG资源将打开异步线程以加载,并且不会中断HTML分析。JS文件将阻止HTML分析,HTML分析,HTML分析,
每次加载H5页面时,都会有更多的网络请求。除了HTML内部业务的业务要求;JS,CSS,字体文件也有外部引用,图片也是独立的HTTP请求。每个请求都是串行。Somake更多请求,这会导致H5页面加载缓慢
首次创建WebView大约需要500毫秒,大约需要500ms,第二次大约需要20毫秒
MPAAS是一个平台,在平台中具有许多稳定且功能强大的组件,例如:H5容器组件库,ApeRay Code库,推送库,热更新库等。我们只需要按需集成。H5容器组件提供会话页面管理加载了快速且功能更高的UCWebView,离线软件包和其他功能。有关详细信息,您可以查看官方网站介绍,并且不会描述本文。
它不建议使用,并且已经多年没有更新。该库的实现位于WebView内核的上层,以支持本机WebView和Tencent X5内核。MPAAS中的X5内核和UCWebView是为了解决Android System WebView严重分散的问题。
该文件放置在HTML的底部,因为它是从上到下解析的。当js文件引用到头部时,浏览器将开始下载此JS文件,然后在下载后执行该文件,然后在执行后继续进行分析。如果此文件很大并且需要两秒钟才能下载,则浏览器将停止两秒钟,这将不可避免地影响用户体验。因此,原则是使第一个屏幕显示尽可能快地显示,然后加载其他资源。大多数前端学生将放下底部。
2.拦截页面的图片请求,并通过Android的Glide图片库缓存。
WebView的本质是加载H5页面,因此WebView随附的缓存机制是H5页面的缓存机制。
Android WebView随附了6种缓存机制:
5.1.1,(OR)和(或)在原理协议的头部控制文件缓存的高速缓存的字段
5.1.2。简介和它用于控制本地缓存中缓存的有效时间。如果服务器响应标头包含:,则表示该文件应在本地缓存,并且有效时间为600秒(从请求中)。在接下来的600秒中,如果有此资源的请求,则浏览器将不会发出HTTP请求,但直接使用本地缓存文件。这是标准中的字段和标准中的新字段。当这两个字段同时出现时,优先级就更高
服务器上文件文件的最新更新时间。下次请求,如果文件缓存到期,则浏览器将通过字段发送到服务器并发送到服务器。服务器比较时间戳以确定文件是否已修改。如果未经修改,服务器将返回304,以告诉浏览器继续使用缓存;如果有修改,请返回200并同时返回最新文件。该值的值是标识文件的特征字符串。当文件更新到服务器时,浏览器将通过字段发送特征字符串到服务器。是否有更新:无更新返回304,更新返回200.可以根据需要同时使用。当同时使用两者时,只要满足基数中的一个条件,就可以认为文件未更新文件。
5.1.3。一起实施并一起使用;一起使用;一种用于控制缓存的有效时间,一个用于在缓存失败后对服务查询进行服务查询。请特别注意:浏览器缓存机制是浏览器内核的机制。从本质上讲,标准的实现不必担心。
优点:支持协议层,不足:需要首次执行缓存文件;WebView缓存的存储空间有限,并且可以清除缓存;缓存文件未经验证。静态资源文件(例如,字体,图片等)的存储。缓存文件记录和文件内容将存在于当前应用程序的数据目录中。4.4:4之后浏览器版本的核心。它已自动实施。
5.3.1。该原理通过存储字符串对提供DOM存储,并将其分为SessionStorage&LocalStorage。使用两者的方法基本上是相同的,区别在于,操作范围是不同的。SessesseStorage:它具有暂时的,即与页面相关的存储数据。页面关闭后,它不能使用localstorage:它是耐用的,也就是说,在关闭页面后,保存的数据也可以使用。
5.3.2。大型存储空间(5MB):对于不同的浏览器,存储空间不同。例如,cookie仅是4KB存储安全且方便的:DOM存储数据是本地的。一个页面将向服务器发送网络请求
5.3.3。应用程序方案存储临时和简单数据取代了不需要存储在cookie中的传统方法DOM存储机制。
5.4.1,基于原则的数据库存储机制,Android正式放弃了
5.4.2。功能充分利用数据库的优势,可以轻松增加,删除,修改和查询数据可以促进数据
5.4.3。应用程序方案存储结构化数据适合数据库
5.4.4,特殊说明
类似的存储方法
5.5.2。功能5.5.3。应用程序场景缓存模式是加载网页时的一种缓存以及读取缓存的方法。有4个缓冲区缓存模式
例如:
www.taobao.com缓存控制是无缓存的。在模式LOAD_DEFAULT下,无论如何都会从Internet获取数据。如果没有网络,将有一个错误页面;本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地的本地本地,否则本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地,请在本地本地本地本地本地本地本地本地本地本地本地本地,该公司本地本地本地本地本地本地本地本地本地本地本地本地本地本地本地,否则使用缓存。它是从Internet获得的。
www.360.com的缓存控制是max-age = 60,并且在两种模式中均使用本地缓存数据。
摘要:根据上述两种模式,建议的缓存策略是确定是否存在网络。
从用户到内容,您将经历一个阶段
如果您不使用第三方H5容器解决方案,则应用程序侧由H5容器优化,以提高WebView的负载效率:如下:
Tencent提供的X5内核和上述优化的使用并不相互冲突。用于解决不同版本的Android Native WebView的零散问题的引擎。加载速度更快,塌陷率较低,并且有很多优势。
如果您在使用过程中优化了H5中的图片和静态资源,则应用程序的加载速度可以更快,并为用户带来更好的体验。
对于上述代码,将库封装为纯本机Kotlin代码,而没有任何第三方库来介绍。是加载带有滑行的图片还是毕加索缓存由呼叫者确定。该库仅提供接口。
参考:
Baidu App Android H5首先屏幕优化实践Android:教您构建全面的WebView缓存机制和资源加载解决方案WebView缓存原理分析和应用程序H5和移动WebView Cache机制分析和实际战斗潮流,让您的HirH5页面第一屏幕秒!”移动本地H5秒开放计划探索和实施“移动H5第一屏幕屏幕第二开放优化计划,讨论公众评论混合动力的公众评论,H5缓存机制对移动终端Web Load Performance Optimation QQ成员进行了基于Hybrid的High -high -high -high-高质量的H5体系结构实践Beautygroup:WebView性能,经验分析和优化
链接:https://juejin.cn/post/6986951532742705159作者:路上的LX版权所有属于作者。