2022-08-12 记一次mark.js使用优化

1、因多个页面需要使用高亮功能,且通过传递具体高亮的dom和传递需要高亮的大容器效率无大差。所以提取公共方法在vuex里。通过mutations封装同步方法。

2、此方法目前传了2个参数:
    1.是否需要初始化,如把高亮词a换成了b则需要全局重新执行高亮则传true。若局部渲染了一块itemDom需要高亮则执行渲染时不需要对itemDom外部执行则传false。
    2.高亮全部之后完的callback === done
    3.(未实现)是否只是修改样式调用,如果只是修改样式则不要调用mark方法,直接通过类名修改样式即可。

3、问题:页面有A、B、C三个板块需要进行高亮且三个板块为三个接口返回的数据。为使用户最短时间内看到展示内容所以不适用Promise.all。所以每个接口返回来时都要执行高亮方法,可能会重复执行相同任务只是传入的dom数量不同,也可能高亮过的元素重复高亮。
    解决方案:1、通过防抖的方式,防止相同任务重复执行。
                      2、将已高亮的元素记录,后续不获取。因为我是通过类名获取的dom集合,所以把高亮过的元素类名修改为class_end,将class删除。
4、整理高亮词:
    当前项目内高亮词有三处来源:检索词、用户自定义、除去(实现方式不做赘述)
    (如有对高亮词的特殊处理规则,也可再次处理。如空格切割,引号等)
    1.首先重复的词过滤掉,根据优先级自定义保留。
    2.如果是修改高亮词的情况,可将已高亮过的高亮词整理出来,在unmark的时候忽略掉。后将新添加进来的高亮词过滤出来作为本次需要高亮的内容。

5、※减少dom树渲染次数
    问题:如果一个需要执行高亮的dom中有100个元素会被高亮,则会触发100次dom渲染。
    解决方案:将需要高亮的dom克隆出来,进行高亮,高亮结束后将克隆的dom.innerHTML赋值给真正的dom。这样只需要渲染一次。

6、(未实现)如果还是卡顿,可以将高亮任务分批进行,如将dom列表分批执行或将词组分批执行都可。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容