但是为什么很多网站不支持呢？主要原因有几个方面：首先要做好还是需要一些基础设施和技术支持的，另外也需要一些额外的服务器资源。所以一些网站，尤其是传统的网站大多不支持，比如一些新闻站点、公告/公示、内容发布网站等等。
技术实现方案有很多种:
最简单的就是每个一段时间（比如3秒）请求接口更新数据并重新渲染，这么做对服务器压力较大。
其次是通过长连接，就是网页发起一个HTTP请求，服务器端一直不响应，等到有数据更新的时候再吧新数据返回，网页拿到数据后重新渲染，然后再次发起一个HTTP请求，不断这么循环，网页就可以实时拿到最新数据。
更好的方案是通过websocket建立长连接，这样web端和服务器端就可以实时的双向通讯，及时拿到最新数据，看起来与HTTP长连接区别不大，但是因为实现机制不一样，websocket会有更低的资源消耗。
网站不支持并不意味着用户不需要，比如公告/公示网站，商品信息，动态的用户行为、销售等数据，对很多人就非常重要，需要实时关注。这个时候可以通过一些辅助工具完成信息的监控和管理，比如：网页更新提醒浏览器插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title></title>
<script type="text/javascript">
var RollAd=(function() {
var _extend=function(desitination,source) {
for (var m in source) {
desitination[m]=source[m]
}
return desitination
}
var constructor=function(
container, /*需要绑定的marquee容器，可以传id，也可以也直接传dom 元素*/
freq, /*滚动的时间，单位秒*/
delay, /*两次滚动的间隔时间，单位秒*/
style /*marquee元素的样式*/
) {
var self=this
var stoped=false
var rollTimeoutId=null
container=(typeof container=='string'?document.getElementById(container):container)
style=_extend({
width:'100%',
height:'15px'
},style || {})
for (var s in style) {
container.style.s=style[s]
}
var _roll=function() {
if (!stoped) {
rollTimeoutId=setTimeout(_stop,freq*1000)
} else {
rollTimeoutId=setTimeout(_start,delay*1000)
}
}
var _start=function() {
stoped=false
container.start()
_roll()
}
var _stop=function() {
stoped=true
container.stop()
_roll()
}
_roll()
}
return constructor
})()
/*示例代码*/
window.onload=function() {
new RollAd('rollAd',3,4)
}
</script>
</head>
<body>
<marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="15" id="rollAd">
dfdfasfdsa <br />
dfdfd<br />
dfdfdf<br />
dfdfdf<br />
</marquee>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）