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列表分批执行或将词组分批执行都可。