AppFreeze Issue with ImageAnimator Resource References

#harmonyos #appfreeze #imageanimator #performanceoptimization

Read the original article：AppFreeze Issue with ImageAnimator Resource References

Context

When users experience unresponsive clicks or application freezes that persist beyond a certain time limit, it is defined as AppFreeze (application freeze or hang). The system detects application unresponsiveness and generates AppFreeze logs for developers to analyze.

Description

Third-party test package running stability tests in app store reports AppFreeze issue. Error logs show ArkUIImageAnimatedPostPlayTask abnormality, indicating improper calls in image loading tasks.

From trace analysis, abnormal trace appears before THREAD_BLOCK_3S, including webContentObserverList anomalies. Combined with ArkUIImageAnimatedPostPlayTask exception logs, this blocks normal web execution causing trace location anomalies and length display issues.

Original problematic code:

export class BNRoutRouteDetailsImgData {
  private ic0 = $r('app.media.bnavi_map_route_turn_back');
  private ic1 = $r('app.media.bnavi_map_route_turn_branch_center');
  private ic2 = $r('app.media.bnavi_map_route_turn_branch_left_straight');
  private ic3 = $r('app.media.bnavi_map_route_turn_branch_left');
  private ic4 = $r('app.media.bnavi_map_route_turn_branch_right_straight');
  private ic5 = $r('app.media.bnavi_map_route_turn_branch_right');
  private ic6 = $r('app.media.bnavi_map_route_turn_ferry');
  private ic7 = $r('app.media.bnavi_map_route_turn_front');
  private ic8 = $r('app.media.bnavi_map_route_turn_inferry');
  private ic9 = $r('app.media.bnavi_map_route_turn_left_back');
  private ic10 = $r('app.media.bnavi_map_route_turn_left_front');
  private ic11 = $r('app.media.bnavi_map_route_turn_left_side_ic');
  private ic12 = $r('app.media.bnavi_map_route_turn_left_side_main');
  private ic13 = $r('app.media.bnavi_map_route_turn_left_side');
  private ic14 = $r('app.media.bnavi_map_route_turn_left');
  private ic15 = $r('app.media.bnavi_map_route_turn_right_back');
  private ic16 = $r('app.media.bnavi_map_route_turn_right_front');
  private ic17 = $r('app.media.bnavi_map_route_turn_right_side_ic');
  private ic18 = $r('app.media.bnavi_map_route_turn_right_side_main');
  private ic19 = $r('app.media.bnavi_map_route_turn_right_side');
  private ic20 = $r('app.media.bnavi_map_route_turn_right');
  private ic21 = $r('app.media.bnavi_map_route_turn_ring_out');
  private ic22 = $r('app.media.bnavi_map_route_turn_ring');
  private ic23 = $r('app.media.bnavi_map_route_turn_tollgate');
  private ic24 = $r('app.media.bnavi_map_route_turn_undefine');
}

Problem analysis:

ImageAnimator abnormal usage with animation count up to 54 images
Animation image resources use $r resource references, especially avoiding this approach in image arrays
$r resource address references affect performance when used extensively

Solution

Performance Optimization Methods:

Use monitorInvisibleArea(true) setting to avoid high-frequency imageAnimator refreshes
Change image addresses from $r() to direct string values for better performance

Corrected code:

export class BNRoutRouteDetailsImgData {
  private ic0 = 'app.media.bnavi_map_route_turn_back';
  private ic1 = 'app.media.bnavi_map_route_turn_branch_center';
  private ic2 = 'app.media.bnavi_map_route_turn_branch_left_straight';
  private ic3 = 'app.media.bnavi_map_route_turn_branch_left';
  private ic4 = 'app.media.bnavi_map_route_turn_branch_right_straight';
  private ic5 = 'app.media.bnavi_map_route_turn_branch_right';
  private ic6 = 'app.media.bnavi_map_route_turn_ferry';
  private ic7 = 'app.media.bnavi_map_route_turn_front';
  private ic8 = 'app.media.bnavi_map_route_turn_inferry';
  private ic9 = 'app.media.bnavi_map_route_turn_left_back';
  private ic10 = 'app.media.bnavi_map_route_turn_left_front';
  private ic11 = 'app.media.bnavi_map_route_turn_left_side_ic';
  private ic12 = 'app.media.bnavi_map_route_turn_left_side_main';
  private ic13 = 'app.media.bnavi_map_route_turn_left_side';
  private ic14 = 'app.media.bnavi_map_route_turn_left';
  private ic15 = 'app.media.bnavi_map_route_turn_right_back';
  private ic16 = 'app.media.bnavi_map_route_turn_right_front';
  private ic17 = 'app.media.bnavi_map_route_turn_right_side_ic';
  private ic18 = 'app.media.bnavi_map_route_turn_right_side_main';
  private ic19 = 'app.media.bnavi_map_route_turn_right_side';
  private ic20 = 'app.media.bnavi_map_route_turn_right';
  private ic21 = 'app.media.bnavi_map_route_turn_ring_out';
  private ic22 = 'app.media.bnavi_map_route_turn_ring';
  private ic23 = 'app.media.bnavi_map_route_turn_tollgate';
  private ic24 = 'app.media.bnavi_map_route_turn_undefine';
}

Key Takeaways

AppFreeze Diagnosis: Use AppFreeze logs for initial error location judgment combined with trace analysis
Resource Reference Performance: Extensive use of $r() resource references impacts performance, especially in image arrays
ImageAnimator Optimization: Avoid high-frequency refreshes and excessive animation frame counts (54+ images)
Debugging Strategy: Obtain complete logs to accurately determine error locations
Performance Best Practices: Use direct string references instead of $r() for better resource loading performance

DEV Community