浏览器下使用 websocket.onmessage 不断的往 textarea 里添加内容，模拟终端下的 tail -f logfile 滚动效果，有几个问题请教一下

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3836 天前的主题，其中的信息可能已经有所发展或是发生改变。

1. 如何使 textarea 的滚动条自动滚动呢？最好的效果是：滚动条触底则自动滚动；

选用 textarea 呈现数据是因为数据里很多空格和 TAB 开头，其他元素内这些都不会被渲染（除非用 js 转换成 …… ）

2. 假设服务器发送速度稍快的话，浏览器就会很卡……何解……

第 1 条附言 · 2014-05-16 12:00:59 +08:00

测试发现，使用 textarea.value += data 来更新数据，textarea.value 会越变越大，然后就会耗费大量的 CPU 资源。在我的电脑上 700 行日志出现后就基本假死了，Chrome 进程 CPU 50%+

使用添加节点的方式来增加数据就不卡了，每次增加一个 <span>text</span>，增加到 10000+ 行左右是才能发觉略有卡顿……

显示数据并自动滚动的代码发出来给大家看下

------------------------------------------------------------------------------------
socket.onmessage = function(event) {

var ta = document.getElementById('rollingLog');

if ( window.scrollY + document.body.clientHeight == document.body.scrollHeight){
at_bottom = true;
}
else{
at_bottom = false;
}
data = event.data.replace("\t"," ")
tmp = document.createElement("span");
tmp.innerHTML = data + "<br>";
ta.appendChild(tmp);

if ( at_bottom ) { window.scrollTo(0,document.body.scrollHeight - document.body.clientHeight) }

};

---------------------------------------------------------------------------------

不会写 js ，边请教边 Google 弄出来的，尽情吐槽(指点）

现在还有一个问题：
当页面很长的时候，假如滚动条不在底部，此时手动拖动滚动条到底部是很困难的……于是就不能『拖到底部又开始自动滚动了』，显示数据少的时候很好用。
如何解决？

textarea

滚动

滚动条

4 条回复 • 2014-05-15 19:22:37 +08:00

66beta

2014-05-15 17:53:34 +08:00

1. 滚到底
var e = document.getElementById('box');
e.scrollTop = e.scrollHeight;
$("#box").scrollTop($("#box").scrollHeight);

2. 没玩过websocket，不懂，但不是说是异步的么，除非同时开启了好多的进程

zzNucker

2014-05-15 18:00:33 +08:00

你慢点触发onmessage事件嘛，更改DOM要消耗的。

rrfeng

2014-05-15 19:22:01 +08:00

@zzNucker
意思是一次多发数据，少操作 DOM ？

rrfeng

2014-05-15 19:22:37 +08:00

@66beta
滚动的问题解决了，现在就是卡的问题

刷 700 行进去就开始卡了，CPU 爆高……