js实现NativeApp的框架可选项：

一、

var text = document.querySelector('#text'),
  timer = null,
  currentSearch = '';
text.addEventListener('keyup', () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    currentSearch = '书';
    $.ajax({
      url: `search.qq.com/${text}`,
      success: data => {
        if (data.search === currentSearch) {
          render(data);
        } else {

        }
      }
    });
  }, 250);
});

RxJs

var text = document.querySelector('#text');
var inputStream = Rx.Observable.fromEvent(text, 'keyup')
  .pluck('target', 'value')
  .flatMapLatest(url => Http.get(url))
  .subscribe(data => render(data))

二、Reactive Extensions(RxJs)，基于可观测数据流的项目。

三、

1、Observables(事件源，被观察者)。

2、Observer(响应者，观察者)。

四、基础组成：事件源（一个）、操作（可以有很多）、响应者（一个）。

1、操作：rx提供的多个接口

（1）创建：just(数据改成数据流)、fromEvent（监听事件产生的事件流）

（2）转变: map、flatMap、flatMapLatest，如下图。

（3）过滤：filter、debounce

（4）组合:  merge

（5）错误处理: catch

五、Rx是一个库，而不是一个框架。

一、aSuncat：这个章节不用看，画3d图(游戏)，与普通的前端业务关系不大。

二、软绘：cpu帮你画，硬绘：gpu帮你画。

三、GPU将图像分成2个三角形，进行上色。

四、WebGL & canvas

1、WebGL的api更加低层（光栅化api）。

2、WebGL能实现一套Canvas

3、canvas能做的，WebGL一定能做，WebGL能做的，canvas不一定能做。

一、vue & react

1、性能

（1）在开发中，vue每秒最高处理10帧，而react每秒最高处理不到1帧（react把大量性能用在检查机制上）。

（2）目前为止，针对现实情况的测试中，vue的性能优于react（2014年）。

（3）共同点：尽量减少dom操作。vue和react都使用虚拟dom来实现，并且两者工作的效果一样好。

（4）不同点：vue:尽量减少除DOM操作以外的其他操作。

（5）vue1.0更像react，vue2.0更像angular。

二、vue & angular 1

1、angular是vue早期开发的灵感来源。

2、在api与设计两方面上vue.js都比angular1简单得多。

3、vue.js是一个更加灵活的解决方案。vue可用原生js，angular要遵从angular语法。

4、angular1使用双向绑定，vue在不同组件间强调单向数据流。这使应用中的数据流更加清晰易懂。

5、在vue中指令和组件分得更清晰。

6、vue有更好的性能，并且非常非常容易优化，因为它不使用脏检查。

三、vue & angular2

1、typeScript

vue可以通过使用官方类型或用户贡献的装饰器来支持typeScript，angular2支持typeScript

2、大小：vue2(23kb) - angular2(50kb),

vue是全部打包进去，angular只是angular2.0的文件，如果依赖增多，文件就会变大。

3、学习曲线，vue比angular2.0更容易上手。

一、angular，官方推荐的语言是typeScript。

二、typeScript包括es6，es6包括es5。

typeScript是在es6的基础上加入type。

@-Decorator

三、RxJs：响应式编程。

一、webpack配置

1、entry:源文件。

2、output：生成文件。

3、loader：编译文件。

4、plugins；插件，比loader更强大，能使用更多webpack的api。

5、resolve：文件路径的指向。

二、webpack-stream，不建议使用，一处修改，全量更新。

三、哪些方法提高构建速度？

1、将大型库外链。

2、将库预先编译。（1）DllPlugin、DllReferencePlugin。（2）noParse。（3）PrefetchPlugin：stats-webpack-plugin(stats.json)、http://webpack.github.io/analyse、hints => long mubule build chains。

3、减少构建搜索及编译路径。

（1）resolve.alias、resolve.unsafeChache（保存搜索过的路径，下次启动编译，不再搜索）、exclude

（2）慎用：①resolve.root。②resolve.modulesDirectory。③resolve.fallback。

如果配置得不好的话，会增加webpack搜索时间。

4、缓存。

babel-loader:cacheDirectory: './webpack_cache/'

5、并行。

Happypack:系统多个核，能并行编译。

四、代码丑化：webpack.optimize.UglifyJsPlugin

webpack-uglify-parallel

五、提升开发体验

1、热刷新/热替换：（1）自建server。proxy-middleware，能多配几个代理，供产品经理查看。（2）react-hot-loader。（3）hotModuleReplacementPlugin

2、webpack的sourcemap能让你在几万行的代码里定位到报错的地方。

3、devtool

4、区分开发环境和生成环境。

（1）在package.json里面的script设置环境变量。

（2）在webpack.xx.js使用process.env.NODE_ENV进行判断。

六、webpack优化：webpack scalability

1、cdn&hash：publicPath:configWebapck.cdn,

（1）cdn of js/img => output.publicPatch

（2）cdn of  css => extract-text-webpack-plugin

（3）静态资源加hash。

（4）webpack-md5-hash.

2、减少首屏包大小。

require、require.ensure、router

3、减少总体包大小。

（1）离线包大影响下载/更新速度。

（2）CommonsChunkPlugin:①entry-chunk。②Explicit vendor chunk。③将被拆包公共部分提取到common chunk中。④同③，但将公共部分提到单独的文件中。

（3）CommonsChunkPlugin带来的问题：

①包含动态加载chunk，导致hash频繁变化。chunk-manifest-webpack-plugin.

②增量更新,commonChunk与chunk中module id对应不上

recordsPath, recordsInputPath, recordsOutputPath.

（4）tree-shaking

①babel-preset-es2015-loose-native-modules

②babel-preset-es2015-native-modules

去掉了transform-es2015-mudules-commonjs

(5)code split 拆包

①system.import

②返回promise

③捕获加载error

一、异步编程：

1、callback - promise - generator

2、推进器：co

二、1、中间件-基于koa

2、非中间件-工具类：（1） L5 负载均衡。

（2）TDW:上报。（3）ZMQ：远程调用。（4）ZK：读取配置。

三、中间件，而非工具类函数，类似console.group的树状结构。

四、日志：

app.use(function *() {
    let transaction = this.new Transaction('URL');
    transaction.addData(this.url);
    transaction.logEvent('xxx');
    yield next;
    transaction.complete();
});

五、进程管理：1、防假死，2、异常捕获、优雅退出，3、更可控，提供远程操作接口。

六、client /'klaɪənt/:客户，委托人。

yield /jiːld/:产生，收益。

一、玄武；

1、tnpm install @tencent/xw -g

2、xw miracle

3、tnpm install

4、xw start

5、open http://localhost:2280/index

一、性能对比

h5 - hybrid - reactNative - native

1、h5、hybrid：webview，易传播，性能差，功能弱。

2、reactNative、native：native，性能好，功能强，手感好。

二、微信小程序在开发者工具上是webview还是native：微信开发者工具 - console - openVendor()

三、优化方向：

1、减少Jsbundle的装载时间：（1）缓存。（2）预启动，提前创建reactContext，加快首次访问。

2、减少jsbundle的更新体积：（1）增量更新，基于二进制的差量算法，生成不同版本之间的补丁包。①第一次全量下载。②管理端维护的补丁包有限。（2）分包：①base.jsbundle，占70%。②biz.jsbundle，占30%，生成增量包，与base.jsbundle合并。

四、native端优化

1、js加载：（1）预装载。（2）增量更新。

2、离线包：（1）防篡改。（2）版本控制。

3、包精简：（1）体积大。（2）碎片化严重。

4、组件优化：（1）listview。（2）pull2refresh。（3）摄像头。

五、滚动优化。

大列表滚动加载。

1、shouldComponentUpdate (scu)

1、listView高效配置:(1)initialListSize：首次渲染绘制的行数。(2)pageSize：决定每一帧渲染的行数。(3)scrollRenderAheadDistance:延迟渲染的距离。（4）removeClippedSubviews:移除超出屏幕的子视图。

五、navigator，解决：

（1）interaction,优先动画，结束后再执行复杂逻辑。

（2）点击态响应慢：将复杂操作延迟到下一帧来执行。

（3）按钮响应慢：①直接操作dom(view)，不推荐。②setNativeProps。③将按钮剥离出来，独立成组件。

一、视频基础知识

1、帧率（frame rate）

2、码率（bit rate）

3、分辨率（bit rate）

4、图片群组（group of picture & GOP）

二、视频video标签

1、视频全屏：

（1）伪全屏：通过设置样式和布局将视频内容撑满屏幕，无法覆盖webview.

（2）真全屏：一般是调用系统的native播放器来大道全屏观看，覆盖在webview之上。

2、canplaythrough在android的兼容性不是很好，如果要监听视频变化，最好用timeupdate，ios和android兼容性都较高。

3、videojs：开源组件，增加很多兼容性处理。

三、直播结构

1、视频录制端：（1）native：①系统提供丰富的api接口可以调用。②提供丰富的编解码功能。③性能比web页面要好。

（2）webRTC(web real-time communication：①基于pc端：提供Js的api获取视频数据。②利用websocket数据交互)。

2、视频播放器：flash、<vedio></video>、native

3、视频服务器端:nginx

四、直播协议

1、基于hls协议（视频分割成一个个的ts文件）- 短链接http，跨平台，h5直播

（1）html5使用<video>

2、基于rtmp协议 - 长链接tcp，延时低，即时互动。：

（1）pc端使用flash。（2）native端使用系统播放器。

五、http请求：

（1）3次握手，4次挥手。

（2）优化：①二进制分帧。②多路复用。③头部压缩。④服务端推送。

使用system.import进行拆包

CommonsChunkPlugin使用方法2： explict verdor chunk

CommonsChunkPlugin使用方法1：entry chunk

webpack设置cdn

HappPack对js并行处理