frontEnd

一.websocket

原文链接

• http协议中，服务器具有被动性，只有当客户端发送http请求时才开始服务
• 由于http是状态协议，所以，每次发送请求时，都要重新传输identity info（鉴别信息），来告诉服务端你是谁。
• 为了实现实时信息传递，目前的ajax轮询和long poll都不能很好的实现
  
  • ajax轮询需要服务器有强大的处理能力和资源
  • long poll由于在没有信息要传送时，http的链接是不会断掉的，所以对并发能力的要求很高

• 
  
• ajax轮询 需要服务器有很快的处理速度和资源。(速度)
• long poll 需要有很高的并发，也就是说同时接待客户的能力。（场地大小）
  所以ajax轮询 和long poll 都有可能发生这种情况。
  

客户端：啦啦啦啦，有新信息么？
服务端：月线正忙，请稍后再试（503 Server Unavailable）
客户端：。。。。好吧，啦啦啦，有新信息么？
服务端：月线正忙，请稍后再试（503 Server Unavailable）

二.visibili api

参考文章

VisibilityChange事件 可以监听窗口从不可见到可见或者从可见到不可见的变化

document.addEventListener('visibilitychange', function() {
  var isHidden = document.hidden;
  if (isHidden) {
    // 动画停止
    // 服务器轮询停止 等等
  } else {
    // 动画开始
    // 服务器轮询
  }
});

三.ajax

1.ajax的原生写法

    var XHR = null;
    if(window.XMLHttpRequest){
        //非IE
        XHR = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        //IE
        XHR = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        XHR = null;
    }

    if(XHR){
        XHR.open("GEt",url);
        XHR.onreadystatechange = function(){
             // readyState值说明  
            // 0,初始化,XHR对象已经创建,还未执行open  
            // 1,载入,已经调用open方法,但是还没发送请求  
            // 2,载入完成,请求已经发送完成  
            // 3,交互,可以接收到部分数据  

            // status值说明  
            // 200:成功  
            // 404:没有发现文件、查询或URl  
            // 500:服务器产生内部错误 
            if(XHR.readyState == 4 && XHR.status == 200){
                console.log(XHR.responseTxt);
                XHR = null;
            }
        }
    }

    XHR.send();

2.ajax的readyState 以及 status
参考文章
readyState 是ajax的发送是否成功的状态
status 是http的返回数据的状态

3.jq中使用ajax的四种方法

1. $.ajax()
   async属性是将ajax请求设置为异步（true）/同步
   或者直接使用$.ajaxSettings.async = true/false;

       $.ajax({
           type:"post",
           data:submitData,
           url:url,
           dataType:'json',
           async:true,
           success:function(data){},
           error:functiong(data){}
       })

   以下几种方式都是只会在请求成功返回时调用回调函数，如果需要在请求失败时调用函数就是用第一种方法

2. $.get(url,submitData,function(data){})
   通过get方式发送

3. $.getJSON(url,submitData,function(data){})
   跟第二种不一样的地方是，设置了返回的数据格式是json的

4. $.post(url,submitData,function(){})
   通过post方式发送

如果ajax的请求是同步的，那么浏览器在发送请求的同时不会处理其他时间
在发送请求时，浏览器是阻塞的
即只有等ajax请求处理完毕之后，才会继续执行其他操作

四.重绘和重排

重排也叫回流，是指浏览器在根据样式和dom tree生成render tree的过程。并且，当render tree发生改变的时候，就会引起重排。
重绘就是在render tree中更新了一些属性，一些只影响外观的属性，而不会对布局产生影响，就是在重绘。
重排必定会影响重绘，而重绘不一定影响重排。

会引起浏览器回流的操作：

1、添加或者删除可见的DOM元素；

2、元素位置改变；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时

参考文章
css 页面重绘和回流(重排)以及优化
高性能JavaScript 重排与重绘

五. Data Url

在学习webpack中，有一个loader叫做url-loader，官方文档中说可以将不超过某个大小的图片转换成base64编码的字符串形式。之前都没听过这个词，故专门去查了下。

data url给我们一种很巧妙的将图片“插入”到html中的方法。跟传统的img标记将图片引到页面中不一样，在data url协议中，图片被转换成base64编码的字符串形式，并存储在url中，冠以mine-type。

1. 基本形式

   一般图片的引入方式为<img src="./myimage.gif">，这种方式中，img标记的src 属性指定了一个远程服务器上的资源。当网页加载到浏览器中时，浏览器会对每个外部资源都向服务器发送一次资源请求，占用网络资源，并且大多数浏览器都对并发请求最大数有限制。所以，如果引入过多的资源的话，将延迟加载。而是用data url技术，图片数据以base64字符串格式嵌入到页面中

   
     <img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
   yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
   ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
   LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
   k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
   ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">

   （而url形式的是，服务器发送一个二进制流给客户端，进而显示图片）

2. data url 的好处与坏处

   好处：

   • 当访问外部资源很麻烦或受限时
   • 当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时
   • 当图片的体积太小，会占用一个http会话不是很值得

   坏处：

   • base64编码的数据体积通常是原数据的4/3，也就是，data url形式的图片会比二进制格式的图片体积大1/3
   • data url形式的图片不会被浏览器缓存，这意味着每次访问这样的页面时都被下载一次

参考文章： Data URL和图片