加载webview内核设置缓存webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);webSettings.setDatabaseEnabled(true);webSettings.setDomStorageEnabled(true);webSettings.setAppCacheEnabled(true);在Android 4.2到Android N之间系统为了组件切换的流程性考虑setDrawDuringWindowsAnimating为false反射成trueandroid n以上 android 4.1以下不存在此问题无须处理4.2不存在setDrawDuringWindowsAnimating需要特殊处理。可以反射handleDispatchDoneAnimating来解决4.3及以上反射setDrawDuringWindowsAnimating来实现动画过程中渲染Chrome Custom Tabs允许 App 直接调用 Chrome 渲染网页需要用户有安装 chrome并且被设置为默认浏览器系统的要求是 4.3API 18以上Chrome 版本 45可以在 APP 启动时预先初始化一个 webview 然后释放这样等用户真正走到 H5 模块去加载 webview时就变快了。全局WebView约10M左右的内存占用在客户端刚启动时就初始化一个全局的WebView待用并隐藏当用户访问了WebView时直接使用这个WebView加载对应网页并展示。页面间跳转需要清空上一个页面的痕迹更容易内存泄露在 APP 运行期间都无法释放。客户端代理数据请求在客户端初始化WebView的同时直接由native开始网络请求数据当页面初始化完成后向native获取其代理请求的数据。Webview在Android 4.0上已经默认开启硬件加速硬件加速如果导致页面渲染问题可以关闭硬件加速。内核渲染优化三个线程IOThread、MainThread、ParserThreadIOThread会从网络端或者本地获取html数据并把数据交给MainThread渲染线程十分繁忙用于JS执行页面布局等为了保证MainThread不被阻塞需要额外起一个后台线程ParserThread用来做html的解析工作。ParserThread每解析到落地页html中带有特殊class标记的一个div标签或者P标签图中的first、second时就会触发一次MainThread的layout工作并把layout后得到的高度与屏幕高度进行对比如果当前layout高度已经大于屏幕高度认为首屏内容已经完成布局可以触发渲染上屏逻辑建立连接/服务器处理DNS采用和客户端API相同的域名可以直接使用缓存的DNS而不用再发起请求图片。静态资源同理。跨域请求移除非必要自定义header避免该请求发出预检请求。预读取DNS新增 dns-prefetch标签用 meta 信息来告知浏览器当前页面要做 DNS 预解析在页面 header 中使用 link 标签来强制对 DNS 预解析通过 CDN 向用户分发传输相关库的静态资源文件多域名备份。服务端会下发多个 CDN 链接当用户访问当前 CDN 节点的出异常时可以快速自动切换到下个 CDN 节点。快速超时策略minify / gzip 压缩HTTP 协议缓存静态文件HTML 和 JS/CSS/image询问是否有更新根据 If-Modified-Since / ETag 等协议向后端请求询问是否有更新没有更新返回304浏览器使用本地缓存。直接使用本地缓存根据协议里的 Cache-Control / Expires 字段去确定多长时间内可以不去发请求询问更新直接使用本地缓存。同步渲染时如果后端请求时间过长可以考虑采用chunk编码将数据放在最后并优先将静态内容flush。可以让后端的API请求和前端的资源加载同时进行。在HTTP协议中我们可以在header中设置 transfer-encoding:chunked 使得页面可以分块输出。让head部分都是确定的静态资源版本相关内容而body部分是业务数据相关内容那么我们可以在用户请求的时候首先将Web API可以确定的部分先输出给浏览器然后等API完全获取后再将API数据传输给浏览器。页面框架渲染DOM下载、DOM解析、CSS请求下载、CSS解析、渲染、绘制、合成CSS不会阻止页面显示内联的JS很快执行完成。当这两部分同时出现的时候CSS加载阻塞下面的内联JS而被阻塞的内联JS则阻塞HTML的解析。如果必须要在头部增加内联脚本一定要放在CSS标签之前。避免重排增加或删除 DOM 节点display:none重排并重绘visibility:hidden重绘移动页面中的元素改变元素尺寸宽、高、内外边距、边框等用户改变窗口大小滚动页面等页面初始渲染改变元素内容文本或图片等。离线包将 JS 和 CSS 还有一些图片都内联到一个文件中这样就只需要一次 IO 操作高性能要求页面还是需要后端渲染(smarty)。相关推荐、广告等可以在内核渲染完后执行JS并利用preact进行异步渲染。首屏静态资源预取缓存资源内容的变化就一定会引起资源路径变化给每个资源文件一个版本号或hash值若资源文件有更新版本号和 hash 值变化这个资源请求的 URL 就变化了同时对应的 HTML 页面更新变成请求新的资源URLJS解析、编译、执行JS代码的编译和执行会有缓存同App中网页尽量统一框架。脚本执行慢就让脚本在最后运行不阻塞页面解析。脚本执行慢可以把框架代码拆分出来在请求页面之前就执行好。图片WebP 格式会将图片和视频等非文字内容通过原生组件的方式放在客户端进行渲染借由内核的shouldInterceptRequest回调拦截落地页图片请求由客户端调用图片下载框架进行下载并以管道方式填充到内核的WebResourceResponse中