css/js(工作中遇到的问题)-4

JS生成随机的由字母数字组合的字符串

Math.random().toString(36).substr(2)

移动端自适应方案

XSS跨站脚本

使用ReactCSSTransitionGroup

使用google analytics进行分析

页面之间跨域通信

文件下载

  • 前端
1.直接使用ajax,ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的发送,接受都只能是string字符串,不能流类型,所以无法实现文件下载,强用会出现response冲突。
2.可以在ajax接受中使用Blob,注意兼容性

.then(function (response) {
  var headers = response.headers();
  var blob = new Blob([response.data],{type:headers['content-type']});
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = "Filename";
  link.click();
});

3.使用隐藏form

function post(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}
  • 后端
1. express API: res.download(path, fiilename);

2. 设置头信息
    res.set({
       'Content-Type': 'application/octet-stream',
       'Content-Disposition': 'attachment; filename='+fileName,
       'Content-Length': stats.size
    });
    fs.createReadStream(filePath).pipe(res);  // res.send(data)

轮询和Web Socket

  • 传统轮询
取setInterval或者setTimeout和ajax实现;
前者保证轮询时间间隔一致,但无法保证返回顺序
后者保证返回顺序,但轮询间隔不能保证;


传统轮询方式存在一个严重缺陷:程序在每次请求时都会新建一个HTTP请求,然而并不是每次都能返回所需的新数据。当同时发起的请求达到一定数目时,会对服务器造成较大负担。
  • 长轮询
长轮询的基本思想是在每次客户端发出请求后,服务器检查上次返回的数据与此次请求时的数据之间是否有更新,如果有更新则返回新数据并结束此次连接,否则服务器“hold”住此次连接,直到有新数据时再返回相应。参考comet模式,需要修改服务器端;

长轮询可以有效地解决传统轮询带来的带宽浪费,但是每次连接的保持是以消耗服务器资源为代价的; 由于有默认的“worker threads”数目的限制,当长连接较多时,服务器便无法对新请求进行相应。
  • websocket
轮询与长轮询都是基于HTTP的,两者本身存在着缺陷:轮询需要更快的处理速度;长轮询则更要求处理并发的能力;两者都是“被动型服务器”的体现:服务器不会主动推送信息;

websocket实现主动推送,无需循环等待(长轮询),CPU和内存资源不以客户端数量衡量,而是以客户端事件数衡量;

  • 前端注意
第一个事情是由于http是短连接,一般浏览器都会设置一个超时时间,所以前端这个连接如果超过一定时间没有返回,需要abort掉,重新发起,推荐30秒;
第二个事情是每次服务器有数据返回后,这个请求就结束了,你需要发起一个新的请求做监听;
第三个事情是多页面请求冲突问题,比较麻烦,不过如果你们是小游戏,应该是单页面应用就不用处理了,一般多页面应用或者WEB网站这类的,是通过localstorage来共享信息避免重发请求,也可以关掉前一个请求,在当前页面重新发起一个请求
posted @ 2016-12-04 11:30  JinksPeng  阅读(224)  评论(0编辑  收藏  举报