Angular 9排序功能在Chrome正常，Edge卡顿无响应问题求助

环境与问题现象 #

• 系统：Windows 10（已安装全部系统更新）
• 浏览器：MS Edge 131版本（已修复/更新至最新）
• 问题：Angular组件的列排序功能在Edge中表现异常——点击排序后10-15秒弹出“页面无响应”提示，等待后约30秒才完成排序；但在Chrome和Safari中仅需2-3秒即可完成，无任何异常。通过F12开发者工具对比，Edge与Chrome的请求头一致。

原实现代码 #

组件排序方法 #

columnSort(colName: string): void {
  if (this.sortedAsc) {   // 升序排序
    this.sortedAsc = false;
    this.members =
      this.members.sort((m1, m2) => {
        return m1[colName].toLowerCase() < m2[colName].toLowerCase() ? -1 :
          (m1[colName].toLowerCase() > m2[colName].toLowerCase() ? 1 : 0);
      });
  } else {  // 降序排序
    this.sortedAsc = true;
    this.members =
      this.members.sort((m1, m2) => {
        return m1[colName].toLowerCase() > m2[colName].toLowerCase() ? -1 :
          (m1[colName].toLowerCase() < m2[colName].toLowerCase() ? 1 : 0);
      });
}

HTML模板代码 #

<th class="freezecol3 fixed-header" (click)="columnSort('last_Name')">Last Name &uarr;&darr;</th>
<th class="freezecol4 fixed-header" (click)="columnSort('first_Name')">First Name &uarr;&darr;</th>

2025.01.30 更新内容 #

1. Edge卡顿问题解决：卸载SQLite DBBrowser应用后，Edge的排序功能恢复正常，速度与Chrome、Safari一致。
2. 新排序方案实现：开发了一个Angular可注入的二分插入排序服务，替换了数组默认的sort()方法。

二分插入排序服务代码 #

import { Injectable } from "@angular/core";
import { Member } from "../model/member.model";

@Injectable()
export class BinarySortService {

  member: Member = new Member();
  members: Member[] = new Array<Member>();

  constructor() { }

  binarySearch(arr: Member[], item: Member, low: number, high: number, comparator: (a: Member, b: Member) => number): number {
    if (high <= low) {
      return (comparator(item, arr[low]) > 0) ? (low + 1) : low;
    }

    const mid = Math.floor((low + high) / 2);

    if (comparator(item, arr[mid]) === 0) {
      return mid + 1;
    }

    if (comparator(item, arr[mid]) > 0) {
      return this.binarySearch(arr, item, mid + 1, high, comparator);
    }

    return this.binarySearch(arr, item, low, mid - 1, comparator);
  }

  public binaryInsertionSort(arr: Member[], columnName: string, sortOrder: 'asc' | 'desc'): void {
    const comparator = sortOrder === 'asc'
        ? (a: Member, b: Member) => a[columnName].localeCompare(b[columnName]) 
        : (a: Member, b: Member) => b[columnName].localeCompare(a[columnName]);  

    for (let i = 1; i < arr.length; i++) {
        const key = arr[i];
        const position = this.binarySearch(arr, key, 0, i - 1, comparator);

        // 将position右侧的元素全部右移
        let j = i - 1;
        while (j >= position) {
          arr[j + 1] = arr[j];
          j--;
        }
        arr[j + 1] = key;
      }
    }
}

组件调用新排序逻辑 #

// 2025.01.30: 新排序方法，二分插入排序
columnSort(colName: string): void {
  if (this.sortedAsc) {
    this.bsrt.binaryInsertionSort(this.members, colName, 'asc');
    this.sortedAsc = false;
  }
  else {
    this.bsrt.binaryInsertionSort(this.members, colName, 'desc');
    this.sortedAsc = true;
  }
}

当前疑问 #

新的二分插入排序方法可正常运行，但无法判断其是否比原数组默认sort()方法更高效。

内容的提问来源于stack exchange，提问作者Cwinds