jd-opensource / jd-opensource/taro-ui

noticebar性能优化相关

Open
#994 2 comments 0 reactions 1 assignee Claimed by @Garfield550 View on GitHub
Dominant language
TypeScript
Stars
4.7k
Forks
740
PR merge metrics
No merged PRs in 30d

Description

**问题描述**
测试noticebar的性能问题

**复现步骤**

```js
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtNoticebar } from 'taro-ui'
import DocsHeader from '../../components/doc-header'
import './index.scss'

export default class NoticebarPage extends Taro.Component {
public config: Taro.PageConfig = {
navigationBarTitleText: 'Taro UI'
}

private onGotoMore (): void {
if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
alert('您点击了更多!')
return
}

Taro.showModal({
content: '点击了更多!',
cancelText: '取消'
})
}

public render (): JSX.Element {
let arr = new Array(2000).fill(0)
return (

{/* S Header */}

{/* E Header */}

{/* S Body */}

{/* 文字 */}

{/* 跑马灯 */}

跑马灯


[超长文本]这是NoticeBar通告栏,这是NoticeBar通告栏,这是NoticeBar通告栏这是NoticeBar通告栏,这是NoticeBar通告栏,这是NoticeBar通告栏这是NoticeBar通告栏,这是NoticeBar通告栏,这是NoticeBar通告栏这是NoticeBar通告栏,这是NoticeBar通告栏,这是NoticeBar通告栏这是NoticeBar通告栏,这是NoticeBar通告栏,这是NoticeBar通告栏[结束]



{
arr.map((item) => {
return

{item}


})
}
{/* 图标 */}

{/* 查看更多 */}

{/* 关闭按钮 */}


{/* E Body */}

)
}
}

```

**期望行为**
性能表现良好
**报错信息**
出现卡顿,暂时贴上
![image](https://user-images.githubusercontent.com/27213108/77613404-8ca19080-6f65-11ea-9321-399f40831fc4.png)
noticebar不加z-index引起隐士合成,层爆炸:
![image](https://user-images.githubusercontent.com/27213108/77613552-eace7380-6f65-11ea-94cd-f83ac60a737b.png)
noticebar加z-index优化后内存只有82m,图上传不了。

**系统信息**

- Taro 版本 2.0.0
- Taro UI 版本 2.0.0
- 报错平台 [h5, weapp]

**补充信息**
请在at-noticebar类样式中添加合适的z-index,保证不会发生隐式合成,导致复合层过多引发内存消耗过多导致卡顿

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.