前言：我们在做一些native+H5应用开发时， 常常会遇到Webview的性能问题 ， 所谓Webview性能问题，就是从打开Webview页面开始到可以和用户交互，这期间花费的时间相对于原生页面来说过长， 从而导致用户等待应用的时间变长。一丶为什么要优化？1.而用户的耐心是有限的，如果几秒钟之内页面仍是白屏，很有可能就会关闭此页面，那么可能会造成用户损失。2.通常情况下，公司的活动页往往都用H5来实现，因此如果页面展现速度过慢的话，还会造成公司损失。所以， Webview优化做好是很有必要的。二丶分析H5页面慢及优化图下是webview加载的过程：1.WebView初始化当App首次打开时，默认是并不初始化浏览器内核的；只有当创建WebView实例的时候，才会创建WebView的基础框架。所以与浏览器不同，App中打开WebView的第一步并不是建立连接，而是启动浏览器内核。分析：针对WebView的初始化时间，我们可以定义两个指标：首次初始化时间：客户端冷启动后，第一次打开WebView，从开始创建WebView到开始建立网络连接之间的时间。 二次初始化时间：在打开过WebView后，退出WebView，再重新打开WebView，从开始创建WebView到开始建立网络连接之间的时间。经过测试后得出：以网页做对比，页面打开时间都是以网络连接开始作为起点的。而WebView中用户体验到的打开时间需要再增加70~700ms。WebView慢的原因：在浏览器中，我们输入地址时（甚至在之前），浏览器就可以开始加载页面。而在客户端中，客户端需要先花费时间初始化WebView完成后，才开始加载。优化方法：1.全局WebView在客户端刚启动时，就初始化一个全局的WebView待用，并隐藏。当用户访问了WebView时，直接使用这个WebView加载对应网页，并展示。这种方法可以比较有效的减少WebView在App中的首次打开时间。当用户访问页面时，不需要初始化WebView的时间。2.客户端代理数据请求在客户端初始化WebView的同时，直接由native开始网络请求数据；当页面初始化完成后，向native获取其代理请求的数据。此方法虽然不能减小WebView初始化时间，但数据请求和WebView初始化可以并行进行，总体的页面加载时间就缩短了；缩短总体的页面加载时间。2.建立连接/服务器处理页面请求的数据返回之前，会有DNS；connection；服务器处理等耗费时间。优化方法：1.同步渲染采用chunk编码：同步渲染时如果后端请求时间过长，可以考虑采用chunk编码，将数据放在最后，并优先将静态内容flush。对于传统的后端渲染页面，往往都是使用的【浏览器】–> 【Web API】 –> 【业务 API】的加载模式，其中后端时间就指的是Web API的处理时间了。在这里Web API一般有两个作用：确定静态资源的版本。根据用户的请求，去业务API获取数据。而一般确定静态资源的版本往往是直接读取代码版本，基本无耗时；而主要的后端时间都花费在了业务API请求上面。那么怎么优化利用这段时间呢？在HTTP协议中，我们可以在header中设置 transfer-encoding:chunked 使得页面可以分块输出。如果合理设计页面，让head部分都是确定的静态资源版本相关内容，而body部分是业务数据相关内容，那么我们可以在用户请求的时候，首先将Web API可以确定的部分先输出给浏览器，然后等API完全获取后，再将API数据传输给浏览器。chunk输出和一起输出的区别：如果采用普通方式输出页面，则页面会在服务器请求完所有API并处理完成后开始传输。浏览器要在后端所有API都加载完成后才能开始解析。如果采用chunk-encoding: chunked，并优先将页面的静态部分输出；然后处理API请求，并最终返回页面，可以让后端的API请求和前端的资源加载同时进行。两者的总共后端时间并没有区别，但是可以提升首字节速度，从而让前端加载资源和后端加载API不互相阻塞3. H5动态数据拉取并行正常的顺序是在html，css，js拉取下来之后，才开始由js发起前端的ajax请求，获取到数据后才开始进行填充。优化：其实我们可以把前端的ajax请求提前到和页面加载同时进行，由客户端请求数据，等到H5加载完毕，直接向客户端索要即可，如此一来，便缩短了总体的页面加载时间。4.H5页面拉取优化：我们可以把html，css，js，image等资源预置在客户端本地，并和服务端协商好前端的版本控制和增量更新策略，如此一来Webview就可以先快速加载本地缓存页面资源，剩下的就只需要拉取那些需要更新的增量资源即可。而针对这些需要拉取的增量资源，可以对它们进行webpack+gzip数据压缩和CDN加速处理，以提升拉取速度。并且在建立网络连接时，可以让前端请求的域名和客户端API接口域名一致，以减少DNS解析时间。最后，对于H5页面来说，图片资源的拉取是最为耗时的，一个比较好的解决方案就是先加载并展示非图片内容，延迟这些图片的加载，以提升用户体验。WebView有一个setBlockNetworkImage(boolean)方法，该方法的作用是是否屏蔽图片的加载。可以利用这个方法来实现图片的延迟加载：在onPageStarted时屏蔽图片加载，在onPageFinished时开启图片加载。5.JS解析、编译、执行在PC互联网时代，人们似乎都快忘记了JS的解析和执行还需要消耗时间。确实，在几年前网速还在用kb衡量的时代里，JS的解析时间在整个页面的打开时间里只能算是九牛一毛。然而，随着网速越来越快，而CPU的速度反而没有提升（从PC到手机），JS的时间开销就成为问题了。优化：高性能要求页面还是需要后端渲染的。React还是太重了，面向用户写系统需要谨慎考虑。JS代码的编译和执行会有缓存，同App中网页尽量统一框架。三丶结尾：除了以上所叙述的优化方法外，还有许多的方式方法。而Webview优化是一个长期的、综合性的工作，有许多细节可以考虑，需要根据业务需求来不断升级优化策略。有关更多面经、核心技术笔记；自己也是从事Android开发5年有余了；整理了一些Android开发技术核心笔记和面经题纲，如有需要的同学请私信我回复“核心笔记”或“面试”领取！