浏览器下使用 websocket.onmessage 不断的往 textarea 里添加内容，模拟终端下的 tail -f logfile 滚动效果，有几个问题请教一下
By rrfeng at 2014 年 5 月 15 日 · 3388 次点击1. 如何使 textarea 的滚动条自动滚动呢？最好的效果是：滚动条触底则自动滚动；
选用 textarea 呈现数据是因为数据里很多空格和 TAB 开头，其他元素内这些都不会被渲染（除非用 js 转换成 …… ）
2. 假设服务器发送速度稍快的话，浏览器就会很卡……何解……
选用 textarea 呈现数据是因为数据里很多空格和 TAB 开头，其他元素内这些都不会被渲染（除非用 js 转换成 …… ）
2. 假设服务器发送速度稍快的话，浏览器就会很卡……何解……
第 1 条附言 · 2014 年 5 月 16 日
测试发现，使用 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 弄出来的，尽情吐槽(指点）
现在还有一个问题：
当页面很长的时候，假如滚动条不在底部，此时手动拖动滚动条到底部是很困难的……于是就不能『拖到底部又开始自动滚动了』，显示数据少的时候很好用。
如何解决？
使用添加节点的方式来增加数据就不卡了，每次增加一个 <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 弄出来的，尽情吐槽(指点）
现在还有一个问题：
当页面很长的时候，假如滚动条不在底部，此时手动拖动滚动条到底部是很困难的……于是就不能『拖到底部又开始自动滚动了』，显示数据少的时候很好用。
如何解决？
4 条回复 • 2014-05-15 19:22:37 +08:00
 |
1
66beta 2014 年 5 月 15 日
1. 滚到底
var e = document.getElementById('box'); e.scrollTop = e.scrollHeight; $("#box").scrollTop($("#box").scrollHeight); 2. 没玩过websocket，不懂，但不是说是异步的么，除非同时开启了好多的进程 |
 |
2
zzNucker 2014 年 5 月 15 日
你慢点触发onmessage事件嘛，更改DOM要消耗的。
|
