zoukankan      html  css  js  c++  java
  • 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来共享信息避免重发请求,也可以关掉前一个请求,在当前页面重新发起一个请求
    
  • 相关阅读:
    转载: RAID详解[RAID0/RAID1/RAID10/RAID5]
    用户交互式命令:read
    linux下fdisk分区管理、文件系统管理、挂载文件系统等
    linux文件系统下的特殊权限
    find命令详解
    python3中 getpass模块使用
    个人shell积累
    手把手教你利用爬虫爬网页(Python代码)
    数通HCIP-ospf知识点
    HCIE之路--超全ospf思维导图
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/6130460.html
Copyright © 2011-2022 走看看