Skip to content

Latest commit

 

History

History
762 lines (560 loc) · 31.6 KB

20180823.md

File metadata and controls

762 lines (560 loc) · 31.6 KB
Raw

20180823-第四期

本期内容主要包括

  1. c++虚继承（郑雨薇）
  2. c++指针和引用的区别（许云华）
  3. 前端跨域方案总结（张艳强）
  4. 古老的cgi和c++编程（冯树勋）
  5. FFMPEG重要结构体入门（陈伟）
  6. 视频压缩小知识（张辰）
  7. vue 响应式编程介绍（许佳佳）
  8. WebSocket简介（江丁魁）
  9. 总结本期知识点

c++虚继承

虚继承是解决C++多重继承问题的一种手段，从不同途径继承来的同一基类，会在子类中存在多份拷贝。这将存在两个问题：其一，浪费存储空间；第二，存在二义性问题，通常可以将派生类对象的地址赋值给基类对象，实现的具体方式是，将基类指针指向继承类（继承类有基类的拷贝）中的基类对象的地址，但是多重继承可能存在一个基类的多份拷贝，这就出现了二义性。

虚继承可以解决多重继承导致的子类中可能存在同一个基类对象的多份拷贝问题，保证同一个基类出现且只出现一次。

xujicheng

虚继承底层实现原理与编译器相关，一般通过虚基类指针和虚基类表实现，每个虚继承的子类都有一个虚基类指针（占用一个指针的存储空间，4字节）和虚基类表（不占用类对象的存储空间）。

bptr指的是虚基类表指针（virtual base table pointer），该指针指向了一个虚基类表（virtual table），虚表中记录了虚基类与本类的偏移地址；通过偏移地址，这样就找到了虚基类成员，而虚继承也不用像普通多继承那样维持着公共基类（虚基类）的两份同样的拷贝，节省了存储空间。

Origin A;

Origin *B = &A;

A.a 和 B->a 有何不同？

如果Origin虚继承自某个基类，a为从基类对象继承的属性。由于父类指针可以指向子类对象，子类中会修改父类虚基类表中的偏移地址，因此在使用B->a属性的地址无法在编译时确定下来，需要在运行时从对象中取出虚基类表的地址，再从虚基类表中取出基类在对象中的索引地址，然后通过B指针地址加便宜地址，得到B->a的地址，而A.a可以在编译时即可确定，速度明显要快。

c++指针和引用的区别、

1，32位平台下，指针是4个字节，而引用的字节数与其引用对象本身有关系。 例如

#include<iostream>
int main(){

    int   a		=  	1;
    char  b		= 	'a';
    int  *p1	=	&a;
    char *p2	=	&b;
    int	 &q1	=	a;	
    char &q2	=	b;
    
    std::cout<<sizeof(p1)<<" "<<sizeof(p2)<<std::endl; //4 4
    std::cout<<sizeof(q1)<<" "<<sizeof(q2)<<std::endl; //4 1
    return 0;

}

2, 引用要进行初始化，并且一经初始化无法再改用，而指针可以更换指向，引用的底层实现是const ; 3,指针要配合使用，才能取值，而引用则不需要，直接自带解引用功能; 4,指针存在多级指针，而引用只有一级引用（在C++11标准中，支持二级引用);

int main(){
    int a = 10;
    int b = 20;
    int *p1;
    //int &q1; error because:引用必须要初始化
    int &q1 = a;
    //&q1 = b; error because：一经引用不可更改
    p1 = &a;
    p1 = &b;//ok 指针可以指向不同对象的地址
     
    int **pp1 = &p1;//存在多级指针 不存在多级引用
    cout<<*p1<<endl; //20  指针要配合*使用，才能取值
    cout<<q1<<endl;  //10  引用则不需要，直接就可以解引用
    return 0;
}

5,定义引用和指针的汇编是一样的，都是先把该变量的地址放到寄存器里面，再把寄存器的值交给指针或者引用变量的地址里。使用指针和引用的汇编也是一样的，先从变量中取地址值，然后根据地址值找到里面存放的值。 6,指针和引用的自增(++)运算意义不一样(指针移动的是地址，引用移动的是对象本身)

前端跨域方案总结

什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

广义的跨域：

1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

什么是同源策略？ 同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

常见跨域场景

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

跨域解决方案

  • JSONP跨域
  • window.name + iframe跨域
  • document.domain + iframe跨域
  • location.hash + iframe
  • postMessage跨域
  • 跨域资源共享（CORS）
  • WebSocket协议跨域
  • 服务端代理跨域

JSONP跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

1.）原生实现：

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);

    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>

服务端返回如下（返回时即执行全局函数）：

onBack({"status": true, "user": "admin"})

2.）jquery ajax：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

window.name + iframe跨域

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。那么我们可以在页面 A中用iframe加载其他域的页面B，而页面B中用JavaScript把需要传递的数据赋值给window.name，iframe加载完成之后（iframe.onload），页面A修改iframe的地址，将其变成同域的一个地址，然后就可以读出iframe的window.name的值了（因为A中的window.name和iframe中的window.name互相独立的，所以不能直接在A中获取window.name，而要通过iframe获取其window.name）。这个方式非常适合单向的数据请求，而且协议简单、安全。不会像JSONP那样不做限制地执行外部脚本

1.）a.html：(www.domain1.com/a.html))

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');
    // 加载跨域页面
    iframe.src = url;
    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);
    // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});

2.）proxy.html：(www.domain1.com/proxy....) 中间代理页，与a.html同域，内容为空即可。

3.）b.html：(www.domain2.com/b.html))

<script>
    window.name = 'This is domain2 data!';
</script>

**总结：**通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

1.）父窗口：(www.domain.com/a.html))

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

2.）子窗口：(child.domain.com/b.html))

<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

PS:我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同

location.hash + iframe跨域

又称FIM，Fragment Identitier Messaging的简写

因为父窗口可以对iframe进行URL读写，iframe也可以读写父窗口的URL，URL有一部分被称为hash，就是#号及其后面的字符，它一般用于浏览器锚点定位，Server端并不关心这部分，应该说HTTP请求过程中不会携带hash，所以这部分的修改不会产生HTTP请求，但是会产生浏览器历史记录。此方法的原理就是改变URL的hash部分来进行双向通信。每个window通过改变其他 window的location来发送消息（由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于父窗口域名下的一个代理iframe），并通过监听自己的URL的变化来接收消息。这个方式的通信会造成一些不必要的浏览器历史记录，而且有些浏览器不支持onhashchange事件，需要轮询来获知URL的改变，最后，这样做也存在缺点，诸如数据直接暴露在了url中，数据容量和类型都有限等

实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

1.）a.html：(www.domain1.com/a.html))

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 向b.html传hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    
    // 开放给同域c.html的回调方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    }
</script>

2.）b.html：(www.domain2.com/b.html))

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 监听a.html传来的hash值，再传给c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>

3.）c.html：(www.domain1.com/c.html))

<script>
    // 监听b.html传来的hash值
    window.onhashchange = function () {
        // 再通过操作同域a.html的js回调，将结果传回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>

postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题： a.） 页面和其打开的新窗口的数据传递 b.） 多窗口之间消息传递 c.） 页面与嵌套的iframe消息传递 d.） 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数 data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。 origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

1.）a.html：(www.domain1.com/a.html))

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };

    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);
</script>

2.）b.html：(www.domain2.com/b.html))

<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

高级浏览器Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都将支持这个功能。

跨域资源共享（CORS）

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置。 带cookie请求：前后端都需要设置字段，另外需注意：所带cookie为跨域请求接口所在域的cookie，而非当前页。

1.）原生ajax

// 前端设置是否带cookie
xhr.withCredentials = true;

示例代码：

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

2.）jQuery ajax

$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
});

WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

1.）前端代码：

<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');

// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });

    // 监听服务端关闭
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

服务端代理

主要是后端做一个代理,跟前端没关系。

通过在同域名的web服务器端创建一个代理：

北京服务器（域名：www.beijing.com）

上海服务器（域名：www.shanghai.com）

比如在北京的web服务器的后台

(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/service.php)的服务，然后把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

总结

纯前端方式的有：window.name 、document.domain、 location.hash、postMessage

前后端结合的方式：JSONP、CORS、websocket

纯后端方式: 服务器代理

单向通信的有： JSONP、服务器代理、window.name

双向通信的有： document.domain、 location.hash、postMessage、CORS

***推荐开发中使用方式：CORS/JSONP

古老的cgi和c++编程

  1. 基本介绍 CGI 定义了 Web服务器 与外部应用程序之间的通信接口标准，因此 Web服务器 可以通过 CGI执行外部程序，让外部程序根据Web请求内容生成动态的内容。Perl 因为跨操作系统和易于修改的特性成为 CGI 的主要编写语言。当然，CGI 可以用任何支持标准输入输出和环境变量的语言编写，比如 Shell 脚本, C/C++ 语言，只要符合接口标准即可。比如你用C 语言编写 CGI 程序，你把希望返回的 HTML 内容通过 printf 输出就可以发送给Web服务器，进而返回给用户。

  2. 工作流程

  • 浏览器通过HTML表单或超链接请求指向一个 CGI 应用程序的 URL。
  • 服务器收发到请求。
  • 服务器执行所指定的 CGI 应用程序。
  • CGI 应用程序执行所需要的操作，（去执行外部应用程序如PHP）,通常是基于浏览者输入的内容。
  • CGI 应用程序把结果格式化为网络服务器和浏览器能够理解的文档（通常是 HTML网页）。
  • web 服务器 把结果返回到浏览器中。

  1. 性能 CGI 的跨平台性能极佳，几乎可以在任何操作系统上实现。CGI 方式在遇到连接请求（用户请求）先要创建 CGI 的子进程，激活一个 CGI 进程，然后处理请求，处理完后结束这个子进程。这就是 fork-and-execute 模式。所以用 CGI 方式的服务器有多少连接请求就会有多少 CGI 子进程，子进程反复加载是 CGI 性能低下的主要原因。当用户请求数量非常多时，会大量挤占系统的资源如内存，CPU 时间等，造成效能低下。

  2. c++编程环境 cgicc: c++辅助库 源码: ftp://ftp.gnu.org/gnu/cgicc/ 执行： tar xzf cgicc-X.X.X.tar.gz(用最新版本) cd cgicc-X.X.X ./configure --prefix=/usr make sudo make install

配置好工程的include和lib的search路径即可。

  1. c++编写cgi程序 常用头文件：
#include <cgicc/CgiDefs.h>
#include <cgicc/Cgicc.h>
#include <cgicc/HTTPHTMLHeader.h>
#include <cgicc/HTMLClasses.h>
//解析类：Cgicc
Cgicc formData;
//获取输入参数：
form_iterator fi = formData.getElement("first_name");  
//获取Checkbox: 
formData.queryCheckbox
//获取cookie:
const_cookie_iterator cci;
const CgiEnvironment& env = cgi.getEnvironment();
for( cci = env.getCookieList().begin();
        cci != env.getCookieList().end(); 
        ++cci )
   {
      cout << "<tr><td>" << cci->getName() << "</td><td>";
      cout << cci->getValue();                                 
      cout << "</td></tr>\n";
   }
//获取上传的文件：
const_file_iterator file = cgi.getFile("userfile");

FFMPEG重要结构体入门

ffmpeg

//对文件的抽象，解封装(flv,mp4,rmbv)功能的结构体
struct AVFormatContext
{
    struct AVInputFormat *iformat;  //输入数据的封装格式
    unsigned int nb_streams;        //音视频流的数目
    AVStream **streams;             //音视频流
    char filename[1024];            //文件名
    int64_t duration;               //时长 us
    int bit_rate;                   //比特率bps
    AVDictionary *metadata          //元数据
};

//对编解码格式的抽象
struct AVCodecContext
{
    enum AVMediaType codec_type;    //视频、音频 编解码器的类型   
    struct ACCodec *codec;          //采用的解码器(H264...)
    uint8_t *extradata;             //针对特定编码器包含的信息
    int bit_rate;                   //平均比特率
    AVRational time_base;           //根据该参数，可以把PTS转化为实际的时间
    int width, height;              //视频的宽高
    int refs;                       //运动估计参考帧的个数  H264有多个
    int sample_rate;                //音频采样率  44100Hz
    int channels;                   //声道数  1，2
    enum AVSampleFormat sample_fmt; //音频采样格式

};

//管理输入输出
struct AVIOContext
{
    unsigned char *buffer;           //缓存开始位置
    int buffer_size;                 //缓存大小（默认32768）
    unsigned char *buf_ptr;          //当前指针读取到的位置
    unsigned char *buf_end;          //缓存结束的位置
};

//对编解码器的抽象
struct AVCodec
{
    const char* name;                           //编解码器的名字，比较短
    const char* long_name;                      //全称
    enum AVMediaType type;                      //类型：视频、音频、字幕、标题
    enum AVCodecID id;                          //ID
    const AVRational *supported_framerates;     //视频 支持的帧率
    const enum AVPixelFormat *pix_fmts;         //视频 支持的像素格式 YUV420
    const int *supported_samplerates;           //音频 支持的采样率
    const enum AVSampleFormat *sample_fmts;     //音频 支持的采样格式
    const uint64_t *channel_layouts;            //音频 支持的声道数

};

//对压缩编码数据的抽象
struct AVPacket
{
    uint8_t *data;                              //压缩编码的数据
    int size;                                   //data的大小
    int64_t pts;                                //presentation timestamps
    int64_t dts;                                //decoding timestamps
    int stream_index;                           //标识该AVPacket属于视频还是音频
};

//对解码后音频/视频流信息的抽象
struct AVStream
{
    int index;                       //标识该视频/音频数
    AVCodecContext *codec;           //指向该音/视频流的AVCodecContext
    AVRational time_base;            //时基，通过该值可以把PTS、DTS转化成真正的时间
    int64_t duration;                //音视频时长
    AVDictionary *metadata           //元数据
    AVRational avg_frame_rate        //帧率
    AVPacket attached_pic            //附带的图片，不如封面
};

//存储原始数据（YUV，PCM）相关信息
struct AVFrame
{
    uint8_t *data;                  //YUV PCM解码后的信息
    int linesize;                   //data中一行数据的大小
    int width,height;               //视频宽高
    int ns_samples;                 //包含1个视频帧 多个音频帧
    int format;                     //解码后原始数据类型 YUV420
    int key_frame;                  //是否关键帧
    enum AVPictureType pict_type;   //帧类型 IBP
    AVRational sample_aspect_ratio; //宽高比
    int64_t pts;                    //presentation
    int coded_picture_number;       //编码帧序号
    int display_picture_number;     //显示帧序号

};

视频压缩小知识

对于算法研究而言，本身就是要先知道哪个地方可以努力，哪些地方行不通。这些原理，就是指明方向的。 一.视频压缩的可行性 1.空间冗余 一幅静态图像，比如人脸。背景，人脸，头发等处的亮度，颜色，都是平缓变化的。相邻的像素和色度信号值比较接近。具有强相关性，如果直接用采样数来表示亮度和色度信息，数据中存在较多的空间冗余。如果先去除冗余数据再编码，表示每个像素的平均比特数就会下降，这就是通常说的图像的帧内编码，即以减少空间冗余进行数据压缩。 2.时间冗余 视频是时间轴方向的帧图像序列，相邻帧图像的相关性也很强。通常用降低帧间的方法来减少时间冗余。采用运动估计和运动补偿的技术满足解码重建图像的质量要求。 3.符号冗余 用相同码表示概率不同的符号，会造成比特数的浪费。比如10，11，13三个数，如果我们都用1bytes来表示，就是3bytes(即3×8 = 24bits)，但是如果我们表00b表示10，01b表示11，02b表示13，这样，三个数合起来才用了6bits，较之前可以节省18bits。 可变长编码技术的原理就如此，概论大的用较短的码字，概率小的用较长的码字。 4.结构冗余 对于图像内部，各个部分也存在某种关系。我们可以通过这种关系，减少信息的码字表达。比如:分形图像编码 5.视觉冗余 1），人眼对彩色信号的亮度分辨率高于色彩分辨率，比如rgb-->yuv就是这个原理 2），人眼对静止图像的空间的分辨率大于运动图像的分辨率。 3），人眼对亮度的细小变化不敏感 4），中心敏感，四周不敏感。

vue 响应式编程介绍

响应式编程，例子：

A=1;

B=2;

C=A+B;

A=3;

在一般情况下，C=3。在响应式编程下，C=5。

vue的响应式编程，例子;

<div>
{{testData}}
</div>

testData为JS中的一个对象，如果在JS中更改的testData的值，那么在界面显示上也会自动更新，而不是界面上一直为它初始化时候的值。

vue响应式编程原理：

xiangyinshibiancheng

当有一个data数据时，它会在内部被转化为getter何setter，每次有setter调用更新数据时，会通知watcher发出重新渲染的通知，让组件得以更新。

WebSocket简介

什么是WebSocket

WebSocket是通信协议，属于应用层，与Http、Htpps属于同一层，支持双向通信。

为什么会有WebSocket

当你的应用需要支持双向通信的时候，比如即时聊天，在没有WebSocket的时候，一般的做法有两种，分别是Ajax轮询和长轮询，Ajax轮询的方式是由客户端不断的发送请求给服务端，直到自己不再需要消息为止。而长轮询的方式是客户端发送请求给服务端，服务端收到客户端请求之后，直到有客户端需要的消息才返回Response给客户端，客户端收到消息后，再次建立连接，如此周而复始。从上面的两种方式可以看出，服务端是一直被动的通信，即不能主动发消息给客户端，上面的两种轮询方式都有着比较大的缺陷，Ajax轮询需要服务器有着快速的响应能力，长轮询则要求服务器有高并发的能力，即一次能够响应多个客户端。其实问题的根源在于Http协议本来就是一个状态协议，是一个非长连接协议，而我们知道TCP是一种长连接协议，那我们能不能使用TCP协议呢，答案是可以的，WebSocket就是如此，确切的说是通过Http协议建立连接，使用TCP协议进行通信。这样就从根本上支持了双向通信。

WebSocket优点

1.解决了上述两种方式中消息同步延迟的问题。 2.上述两种方式都是需要不断的建立http连接，而http是非状态性的，每次建立链接都需要传输identity info（鉴别信息）来告诉服务器你是谁，这样是比较浪费资源和时间的，而WebSocket只需要建立一次http连接。

总结

c++虚继承

虚继承是解决C++多重继承问题的一种手段，多重继承主要两个问题，一，浪费存储空间；二，存在二义性。虚继承可以解决多重继承导致的子类中可能存在同一个基类对象的多份拷贝问题，保证同一个基类出现且只出现一次。

c++指针和引用的区别

32位平台下，指针是4个字节，而引用的字节数与其引用对象本身有关系

引用要进行初始化，并且一经初始化无法再改用，而指针可以更换指向，引用的底层实现是const *

指针要配合*使用，才能取值，而引用则不需要，直接自带解引用功能;

指针存在多级指针，而引用只有一级引用（在C++11标准中，支持二级引用)

定义引用和指针的汇编是一样的

指针和引用的自增(++)运算意义不一样(指针移动的是地址，引用移动的是对象本身)

前端跨域方案总结

JSONP跨域

window.name + iframe跨域

document.domain + iframe跨域

location.hash + iframe

postMessage跨域

跨域资源共享（CORS）

WebSocket协议跨域

服务端代理跨域

古老的cgi和c++编程

CGI 定义了 Web服务器 与外部应用程序之间的通信接口标准，因此 Web服务器 可以通过 CGI执行外部程序，让外部程序根据Web请求内容生成动态的内容

FFMPEG重要结构体入门

介绍了FFMPEG的具体用法

视频压缩小知识

对于算法研究而言，本身就是要先知道哪个地方可以努力，哪些地方行不通。这些原理，就是指明方向的

视频压缩的可行性包括：空间冗余、时间冗余、符号冗余、结构冗余、视觉冗余

vue 响应式编程介绍

vue响应式编程原理：当有一个data数据时，它会在内部被转化为getter何setter，每次有setter调用更新数据时，会通知watcher发出重新渲染的通知，让组件得以更新。

WebSocket简介

WebSocket是通信协议，属于应用层，与Http、Htpps属于同一层，支持双向通信。