问题:
websocket发送大量数据并不会造成卡顿 , 如果不停的 渲染页面 , 那可能会造成浏览器卡顿
解决:
给页面设置展示数据行数,限制页面渲染内容
如果推送数据大于展示行数(比如100行),截取最新的100条数据展示
如果推送数据小于展示行数,那么当前的数据渲染即可
- onmessage(event) {
- this.datalog("MESSAGE: " + event.data);
- },
- datalog(msg) {
- var log = document.getElementById("log");
- log.scrollTop = log.scrollHeight;
- this.messageArr.push(msg)
- if(this.messageArr.length > this.Form.showline){
- this.messageArr = this.messageArr.slice(Number(-this.Form.showline))
- }
-
- },
- <ul id="log" :style="{'height': clientHeight+'px'}">
- <li v-for="(item,index) in messageArr" :key="index + new Date()">{{item}}</li>
- </ul>
btw. 数据从末尾截取 arr.slice(-100)