【Android高级工程师系统学习视频】百度APP（手机高级工程师）

总体来说，图像渲染时间取决于前端解析效率、端函数执行效率、下载速度、IO速度等因素。

通过分析，扩展了混合解决方案的一些思路。

为什么渲染这么慢？图像请求可以进行吗？WebView初始化时间可以优化吗？

三、Hybrid方案简述及性能瓶颈

（一）方案简述

基于我们之前的混合性能分析，我们启动了一个名为CloudHybrid 的内部项目来解决首屏登陆页面显示缓慢的问题。简而言之，CloudHybrid 解决方案使用后端直接输出。 + Prefetch + Intercept 简化了页面渲染过程并预先并行化了网络请求逻辑，提高了H5首屏的速度。

（二）性能瓶颈

四、百度App落地页优化方案

对于混合解决方案，最后预设并加载的HTML 文件只是一个模板文件，其中包含一些简单的JS 和CSS 文件。最后加载HTML后，需要运行JS并异步请求文本数据。数据生成后，内核需要执行一系列耗时的步骤才能最终将数据显示在屏幕上，包括解析JSON、构建DOM 和应用CSS 样式。可以使用后端渲染技术（Smarty）渲染文本数据，以匹配初始屏幕显示速度。与前端代码集成以直接在第一个屏幕上显示内容。直接导出后，HTML文件中包含了首屏显示所需的内容和样式，内核可以直接渲染。第一屏以外的内容（包括相关推荐、广告等）可以在内核中渲染。渲染第一个屏幕后，运行JS 并使用preact。用于异步渲染。

百度APP直接导出方案：

对于客户端来说，从CDN获取的HTML已经在服务器的首屏上渲染出来了，不需要二次处理，只是显示速度快了很多。 Feed 登陆页面针对小于2600 毫秒至2000 毫秒的首屏性能数据进行了优化。

（一）CloudHybrid

为了保证首屏渲染结果的准确性，除了需要在服务器端整合文本内容和前端代码之外，还需要一些影响页面渲染的客户端状态信息（首图地址、字体等）。尺寸、夜间模式等这里我们采用动态回填的方式。前端定义了一组特殊字符，这些字符在loadUrl 之前用作传出HTML 中的占位符。客户端使用正则匹配来查找这些占位符字符。 客户端回填的HTML内容包含首屏显示的所有条件。

1.后端直出-快速渲染首屏

我们来看看优化前后的效果。

优化前-图1

优化后——图2

通常，直接导出后的页面显示速度已经很快了，但在实际开发中，无论数据加载多快，在Activity切换过程中都可能会遇到H5页面无法渲染的问题。性别。这可以通过在开发者模式下减慢动画时间来看出），从而导致视觉上的白屏现象（参见上图1）。研究源码发现系统处理视图绘制时有一个属性。可以看到，这个属性是用来控制动画过程中窗口是否能够成功绘制的。在Android 4.2 和Android N 之间，系统假定该字段为false。您可以使用反射手动更改此属性。改进后的效果如上图2所示。

/**

确保页面在活动转换动画期间正常呈现

/

私有无效setDrawDuringWindowsAnimating（视图视图）{

如果（Build.VERSION.SDK_INT Build.VERSION_CODES.M

|| 构建.VERSION.SDK_INT 构建.VERSION_CODES.JELLY_BEAN_MR1) {

//1 Android n及以上和Android 4.1及以下版本没有此问题，不需要解决

返回；

}

//4.2 需要特殊处理，因为setDrawDuringWindowsAnimating不存在

如果（Build.VERSION.SDK_INT Build.VERSION_CODES.JELLY_BEAN_MR1）{

处理DispatchDoneAnimating（视图）；

返回；

}

尝试{

//从4.3开始，反射setDrawDuringWindowsAnimating实现动画时渲染

ViewParent rootParent=view.getRootView().getParent();

方法方法=rootParent.getClass()

.getDeclaredMethod(\”setDrawDuringWindowsAnimating\”, boolean.class);

方法.setAccessible(true);

方法.invoke(rootParent, true);

} catch (异常e) {

e.printStackTrace();

}

}

/*android4.2可以通过反射handleDispatchDoneAnimating来解决

*/

私人无效handleDispatchDoneAnimating（查看paramView）{

尝试{

ViewParent localViewParent=paramView.getRootView().getParent();

类localClass=localViewParent.getClass();

方法localMethod=localClass.getDeclaredMethod(\”handleDispatchDoneAnimating\”);

localMethod.setAccessible(true);

localMethod.invoke(localViewParent);

} catch (异常本地异常) {

localException.printStackTrace();

}

}

a. 页面静态直出

直接转换后，为了加快首屏渲染速度并减少过程中涉及的耗时的网络请求，可以从CDN预先请求一些着陆页的HTML，然后根据特定的策略和时机分发到本地。缓存。当用户点击查看新闻时，新闻只是从缓存中加载。

移动预取服务架构图

目前，移动预取服务支持图片、相册、视频、广告等多种业务方。您可以根据不同的业务场景自定义触发时机或者遵循默认的更新、滑动停止、点击等。此外，它还对预取的内容进行优先级排序（根据资源类型和触发时机），根据当前手机状态信息进行并发控制和流量控制，并且在某些降级场景下还可以控制您的服务器。控制是否通过云端预取以及预取数量。

b. 动态信息回填

除了文本之外，图像也是着陆页的重要组成部分。直接导出虽然解决了文本显示速度问题，但图像加载和渲染速度仍然不理想。特别是对于首屏有图像的文章，首图的渲染速度就是传统的实际首屏点。混合方案，前端页面通过客户端函数调用NA图片下载函数，对图片进行缓存和渲染。虽然客户端和前端图像缓存是共享的，但由于JS 执行时序较慢，导致图像渲染延迟。多个客户端函数调用还存在效率问题。

初步改进建议：将图片请求改为纯H5，提高图片加载速度，减少JS调用时间。它速度更快，但客户端和前端缓存不会在单击时共享。用图片启动NA图片查看器并不能提供沉浸式效果，而且会浪费流量，因为图片必须重复下载。最终的解决方案是使用内核的shouldInterceptRequest回调来拦截登陆页图片请求。然后客户端调用NA图像下载框架来下载它并将其填充到Kernel WebResourceResponse中。

该方案不仅满足图像渲染速度，而且将客户端和前端代码分离，充当请求和缓存图像的服务器，并允许前端和客户端共享图像缓存。如图所示流程，页面不卡顿，首屏第80个百分位值减少80ms到150ms。

效果是：

优化前的混合解决方案

优化的通用拦截方案

c. 动画间渲染

2.智能预取-提前化网络请求

3.通用拦截-缓存共享、请求并行

为了缓解WebView性能下降，您可以在适当的时候预先创建WebView，并在页面需要显示内容时根据性能直接从缓存池中检索创建的WebView。数据显示，WebView预创建减少首屏渲染时间超过200ms

4.整体方案流程

我希望有一天你能真正爱自己，善待自己。

（二）新的优化尝试

1.WebView预创建

为了缓解WebView性能下降，您可以在适当的时候预先创建WebView，并在页面需要显示内容时根据性能直接从缓存池中检索创建的WebView。数据显示，WebView预创建减少首屏渲染时间超过200ms

最后

我希望有一天你能真正爱自己，善待自己。

#【Android高级工程师系统学习视频】以上有关百度APP相关内容来源网络，仅供参考。相关信息请参见官方公告。