ExternalInterface

• 如果同源，浏览器发送数据请求，否则发送跨域请求
• 浏览器收到跨域请求后，返回自身配置的是否含有Access-control-Allow-origin字段
• 浏览器收到这个header后，匹配看是否允许，允许的话则发送数据请求。

• Promise先执行
• 主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。
• Promise.resolve() 是微任务，本轮事件循环结束时执行
• setTimeout(fn,0)是宏任务，在下一轮“事件循环”event loop开始时执行

• prototype是函数才有的属性,__proto__是每个对象都有的属性
• 对象的__proto__等于生成这个对象的函数的prototype
• ES6类的底层还是通过原型链构造函数去创建

• function组件没有state状态，删除了生命周期，速度会很快
• class组件适合有状态组件

1. HTML 解析成 DOM 树
2. CSS 构造成 CSS 对象模型
3. DOM 和 CSS 模型合并为渲染树，渲染树每个元素的内容都是计算好的 layout.
4. 将渲染树的节点绘制到屏幕上。

1. script放在 body后面
2. script 加defer属性
3. 减少 head里的css资源
4. gzip压缩文件体积

1. GET、POST、PUT、DELETE、PATCH
2. HEAD、CONECTION、OPTIONS、TRACE

1. 首先建立 WebSocket 连接
2. 文件发生变化，Webpack Dev Server 通知应用程序
3. HMR Runtime 通过 HTTP 请求模块更新清单
4. script 标签下载模块更新
5. 插入新模块、进行局部刷新。

1. Loader 缩小文件搜索范围
2. 对编译文件使用缓存
3. 多线程打包 happypack
4. image-webpack-loader 压缩图片
5. 删除无用的 css 样式
6. CDN 加载资源

① 根据构造函数的原型，创建一个新对象

2、函数防抖与节流都可以使用setTimeout实现，目标都是降低执行频率。

function isPromise(obj) {return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';
}const myPromiseAll = (arr)=>{let result = [];return new Promise((resolve,reject)=>{for(let i = 0;i < arr.length;i++){if(isPromise(arr[i])){arr[i].then((data)=>{result[i] = data;if(result.length === arr.length){resolve(result)}},reject)}else{result[i] = arr[i];}}    })
}

• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
• image-loader：加载并且压缩图片
• babel-loader：把 ES67 转换成 ES5, jsx 转换成 js
• css-loader：加载 CSS，支持模块化、压缩、文件导入等功能
• eslint-loader：通过 ESLint 检查 JavaScript 代码

• 解析: 将代码(其实就是字符串)转换成 AST( 抽象语法树)
• 转换: 访问 AST 的节点进行变换操作生成新的 AST
• 生成: 以新的 AST 为基础生成代码

• 动态脚本加载
• defer: html 解析后按加载顺序执行
• async: 加载完后立即执行，与加载顺序无关

中文是事件循环，Javascript 代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列来搞定另外一些代码的执行，整个执行的过程我们称为事件循环。

function myInstanceOf(left, right) {let type = right.prototypeleft = left.__proto__while (left) {if (left == type) {return true}left = left.__proto__}return false
}

• 强缓存：直接使用缓存，HTTP 头有（Expires: 服务器过期时间，Cache-Control: 相对过期时间，在这个时间内不会去服务器请求）
• 协商缓存：浏览器与服务器协商，如果资源没有变化，直接返回 304 Not Modified, 否则返回 200 Ok。过程是之前服务器返回一个 Last-Modified 上次修改时间，然后第二次请求时浏览器发送 If-Modified-Since 携带这个时间。更高优先级的是服务器返回一个 ETag 作为 hash，然后浏览器发送 If-Non-Match 携带这个 hash。

• Loader：单一原则，每个 Loader 只做一种工作，拿到源文件处理后返回，也可以通过 callback 返回。
• Plugin: 监听事件，在合适的时机通过 webpack 提供的 API 改变输出结果。

• 压缩代码：删除多余的代码、注释、简化代码的写法。
• CDN 加速：将静态资源修改为 CDN 路径
• 删除死代码：将永远不会走到的代码删除掉。
• 提取公共代码。

• componentWillMount(): 在渲染之前执行。
• Render: 渲染组件
• componentDidMount(): 仅在第一次渲染后执行。

• componentWillReceiveProps(): 当从父类接收到 props 并且在调用另一个渲染器之前调用。
• shouldComponentUpdate(): 根据特定条件返回 true 或 false。如果希望更新组件，请返回true， 否则返回 false。默认情况下，它返回 false。
• componentWillUpdate(): 在 DOM 中进行渲染之前调用。
• componentDidUpdate(): 在渲染发生后立即调用。

• componentWillUnmount(): 从 DOM 卸载组件后调用。用于清理内存空间。

Redux 是 JavaScript 中的一个应用状态管理框架，整个应用的状态存储在单个 Store 的状态树里。

② 原因分析：有的观点认为在componentWillMount中可以提前进⾏异步请求,避免⽩屏,其实这个观点是有问题的。React 渲染⼀个组件时，它不会等待componentWillMount，而是会继续 render，而且在服务器渲染时，fetch data会执行两次，同时经过React Filber优化后，可能会执行多次。

• content
• padding
• margin
• border

• 标准模型：宽高，box-sizing: content-box
• IE 模型：包括 border，box-sizing: border-box

• Connection: Upgrade, Upgrade: websocket，告知服务器使用的是 websocket

• 一个随机数、协议名称、协议版本

1. 代码结构清晰，方便阅读与合作开发
2. 方便其他设备解析，如屏幕阅读器
3. 有利于搜索引擎优化

• 给 setTimeout 的函数传递参数
• 函数防抖与函数节流
• 函数柯里化

• left、center、right三种都设置左浮动
• 设置center宽度为100%
• 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
• 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

• CPU 节能，setTimeout 会在后台执行，而rAF 页面未激活的时候会暂停，节省 CPU 开销。
• 函数节流：可以使用 rAF 实现函数节流，将函数作为 rAF 的参数。

• none 不显示
• inline 行内元素
• list-item 列表元素，如 li
• inherit 继承
• block / inline-block 块级元素、行内块元素，可以设置宽高度
• table / inline-table 块级表格
• flex / inline-flex 弹性布局

• 去掉这个文档节点
• font-size: 父元素 font-size: 0, 子元素设置自己的 font-size
• margin 负值
• 父元素 display: table, word-spacing: 0

• width ： 设置viewport 的宽度
• height： 设置viewport 的高度
• initial-scale ： 设置页面的初始缩放值
• minimum-scale ：允许用户的最小缩放值
• maximum-scale：允许用户的最大缩放值
• user-scalable： 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

• for ... in : 迭代的是 key
• for ... of : 迭代的是 value

• forEach 中的一个参数，每次都是创建的一个新变量
• forEach 不能 break、continue
• forEach 一次只能循环一个数组

• forEach, map, filter,reduce, reduceRight
• every 是否所有的都满足条件
• some 是否有一个满足条件
• indexOf, lastIndexOf

② Provider：将 store 通过 Context 传给后代组件，注册对 store 的监听
③ connect：一旦 store 变化就会执行 mapStateToProps 和 mapDispatchToProps 获取最新的 props 后，将其传给子组件。

① 启动一个 node 服务
② 把 react 根组件用 reanderToString 渲染成字符串返回给前端
③ 前端再渲染一次：恢复生命周期、给组件绑定事件以响应用户操作

多种方式
① 通过反向代理分派到对应的应用上。
② 通过路由管理器和应用管理器动态加载子应用。劫持 window.history, 如果是不同的子应用，卸载之前的 bundle，然后加载新的 bundle。

① 前端后端化：前端全栈化、Serverless

• HashRouter: 带有 #，通过 hash 值对路由进行控制
• BrowserRouter: 不带 #，传统的斜杠分割，原理是使用 history 对象，方法有 pushState, replaceState, popState.

const { Provider, Consumer } = React.createContext(defaultvalue)

• resolve: 如果状态为 pending，则设置值，设置状态为完成，成功队列回调当前值
• reject: 如果状态为 pending，则设置值，设置状态为失败，失败队列回调当前值
• then: 如果状态为 pending，将传入参数分别 push 到两个队列；如果状态为完成，第一个参数去处理；如果状态为失败，第二个参数去处理。

• then / catch / resolve / reject
• all
• race

• get: 第一个参数为地址，第二个参数为携带的参数
• post：第一个参数为地址，第二个参数为 body
• all：多个请求并发，先 all, 然后.then 中用 spread 确保两个请求都成功
• 一开始还可以进行配置、创建实例、添加拦截器 interceptors

• window.location.hash
• window.history.pushState()

• AMD: require.js 实现。中文是异步模块定义，API 是 define, require, 异步加载，但是不能按需加载。
• CMD: sea.js 实现，能够按需加载。

Object.assign(target, ...sources)

• tuple 元祖
• enum 枚举
• any, never 任意值
• void 没有返回值

• link 标签：<link rel="dns-prefetch" href="//example.com" />
• meta 标签，可强制开启 HTTPS 下的预解析：<meta http-equiv="x-dns-prefetch-control" content="on" />

• timers 阶段：这个阶段执行 timer（setTimeout、setInterval）的回调
• I/O callbacks 阶段：处理一些上一轮循环中的少数未执行的 I/O 回调
• idle, prepare 阶段：仅 node 内部使用
• poll 阶段：获取新的 I/O 事件, 适当的条件下 node 将阻塞在这里
• check 阶段：执行 setImmediate() 的回调
• close callbacks 阶段：执行 socket 的 close 事件回调

• Node 端，microtask 在事件循环的各个阶段之间执行
• 浏览器端，microtask 在事件循环的 macrotask 执行完之后执行

• 1.0: (Strict, Transitional, Frameset)
• 4.01: (Strict, Transitional, Frameset)
• 5.0: 只有一种

• Strict: 不允许过时标签，不允许框架集。

• Transitional: 允许过时标签，不允许框架集

• Frameset: 允许过时标签，允许框架集

• 获取属性：Reflect.get(obj, 'key')
• 设置属性：Reflect.set(obj, 'key', value)

const  p1 =  new Promise(resolve => {const a =b;resolve(a);}).catch(()=>{// 直接返回这个return Promise.resolve('aaab')});​const  p2 =  new Promise(resolve => {const a =1;return resolve(a);}).catch(()=>{return Promise.resolve('aaa')});Promise.all([p1,p2]).then((data)=>{console.log('then 成功',data);}).catch((err)=>{console.log('333');console.log('errr',err);})

function createThunkMiddleware(extraArgument) {return ({ dispatch, getState }) => next => action => {if (typeof action === 'function') {return action(dispatch, getState, extraArgument);}​return next(action);};}​const thunk = createThunkMiddleware();thunk.withExtraArgument = createThunkMiddleware;​export default thunk;

// 从右到左function compose() {var fns = [].slice.call(arguments)return function (initialArg) {var res = initialArgfor (var i = fns.length - 1; i > -1; i--) {res = fns[i](res)}return res}}​// 从左到右function pipe() {var fns = [].slice.call(arguments)return function (initialAgr) {var res = initialAgrfor (var i = 0; i < fns.length; i++) {res = fns[i](res)}return res}}​// 测试var greet = function (name) { return 'hi:' + name }var exclaim = function (statement) { return statement.toUpperCase() + '!' }var transform = function (str) { return str.replace(/[dD]/, 'DDDDD') }var welcome1 = compose(greet, exclaim, transform)var welcome2 = pipe(greet, exclaim, transform)console.log(welcome1('dot'))//hi:DDDDDOT!console.log(welcome2('dolb'))//HI:DDDDDOLB!

• 每个页面都有公共的代码，可以将这些代码抽离出来，避免重复的加载。比如，每个页面都引用了同一套css样式表
• 随着业务的不断扩展，页面可能会不断的追加，所以一定要让入口的配置足够灵活，避免每次添加新页面还需要修改构建配置

1. CommonJS模块化规范的解决方案： 设置output.libraryTarget='commonjs2'使输出的代码符合CommonJS2 模块化规范，以供给其它模块导入使用
2. 输出ES5代码的解决方案：使用babel-loader把 ES6 代码转换成 ES5 的代码。再通过开启devtool: 'source-map'输出SourceMap以发布调试。
3. Npm包大小尽量小的解决方案：Babel 在把 ES6 代码转换成 ES5 代码时会注入一些辅助函数，最终导致每个输出的文件中都包含这段辅助函数的代码，造成了代码的冗余。解决方法是修改.babelrc文件，为其加入transform-runtime插件
4. 不能将依赖模块打包到NPM模块中的解决方案：使用externals配置项来告诉webpack哪些模块不需要打包。
5. 对于依赖的资源文件打包的解决方案：通过css-loader和extract-text-webpack-plugin来实现

• 没有 DSL 限制：无论是是 React 还是 Vue 技术栈，都能够使用 Taro 开发
• 模版动态构建：和之前模版通过编译生成的不同，Taro Next 的模版是固定的，然后基于组件的 template，动态 “递归” 渲染整棵 Taro DOM 树。
• 新特性无缝支持：由于 Taro Next 本质上是将 React/Vue 运行在小程序上，因此，各种新特性也就无缝支持了。
• 社区贡献更简单：错误栈将和 React/Vue 一致，团队只需要维护核心的 taro-runtime。
• 基于 Webpack：Taro Next 基于 Webpack 实现了多端的工程化，提供了插件功能。

• 创建一个 taro-runtime 包，实现了一套高效、精简的 BOM/DOM API
• 通过 Webpack 的 ProvidePlugin 插件，注入到小程序的逻辑层
• React 精简：React-DOM 含有大量浏览器兼容的代码，去除了这部分的代码。
• React 三部分核心：核心 react-core, 与虚拟 DOM 有关的 react-reconciler, 与渲染有关的 Renderer，Taro 实现了 taro-react 包，替换掉 Renderer 用来连接 react-reconciler 和 taro-runtime.
• 具体这样做：在 hostConfig 配置中调用Taro的 api，实现一个创建 DOM 树的 render。

• 基于真正 React 开发，无缝使用 Redux/Mobx 等状态管理库。
• 完全支持 TypeScript，为组件和 API 提供完整的类型支持。
• 跨平台，使用一套代码同时开发小程序和 H5 应用。

• 使用abstract关键字定义抽象类和抽象方法
• 抽象类不允许被实例化
• 抽象类中的抽象方法必须被实现

• 基本类型： string

• 联合类型：TypeA | TypeB

• 元祖类型：具体定位到每个位置的类型：[TypeA, TypeB]

• 编译时主要是将 Taro 代码通过 Babel[11] 转换成 小程序的代码，如：JS、WXML、WXSS、JSON
• 运行时：生命周期、事件、data 等部分的处理和对接

• 重编译时，轻运行时：这从两边代码行数的对比就可见一斑。
• 编译后代码与 React 无关：Taro 只是在开发时遵循了 React 的语法。
• 直接使用 Babel 进行编译：这也导致当前 Taro 在工程化和插件方面的羸弱。

• 半编译时，半运行时
• WXML 模板通过编译生成
• 将 Vue 运行在小程序上，实现 Vue@2.4.1 绝大部分特性
• 基于 wevpack

• First Contentful Paint（FCP）：第一次有内容绘制。
• Time to Interactive (TTI)：可交互时间
• Speed Index (SI)：页面内容填充速度。 how quickly the contents of a page are visibly populated.
• Total Blocking Time (TBT): 总阻塞时间
• Largest Contentful Paint (LCP): 大内容绘制
• Cumulative Layout Shift (CLS): 衡量可视窗口内元素的移动

• 对比度
• 代码可读性

• HTTPS
• 跨域安全
• JS 安全

• 各种标签是否语义化等

• 速度是否够快

1. 首先经过本地的dns解析，请求cname指向的那台cdn专用的dns服务器。
2. dns服务器返回全局负载均衡的服务器ip给用户
3. 用户请求全局负载均衡服务器，服务器根据ip返回所在区域的负载均衡服务器ip给用户
4. 用户请求区域负载均衡服务器，负载均衡服务器根据用户ip选择距离近的，并且存在用户所需内容的，负载比较合适的一台缓存服务器ip给用户。当没有对应内容的时候，会去上一级缓存服务器去找，直到找到资源所在的源站服务器，并且缓存在缓存服务器中。用户下一次在请求该资源，就可以就近拿缓存了。

① 模块化：将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协作的可能。

• offline-plugin: https://segmentfault.com/a/1190000010669126
• https://segmentfault.com/a/1190000011072073

• 通过stdin/stdout传递json：最直接的方式，适用于能够拿到“子”进程handle的场景，适用于关联进程之间通信，无法跨机器
• Node原生IPC支持：最native（地道？）的方式，比上一种“正规”一些，具有同样的局限性
• 通过sockets：最通用的方式，有良好的跨环境能力，但存在网络的性能损耗
• 借助message queue：最强大的方式，既然要通信，场景还复杂，不妨扩展出一层消息中间件，漂亮地解决各种通信问题

Ant Design 介于Material Design 和 Bootstrap之间：给出框架的同时，也给出了设计规范。

• Servlet 通过调用 init () 方法进行初始化。
• Servlet 调用 service() 方法来处理客户端的请求。
• Servlet 通过调用 destroy() 方法终止（结束）。
• 最后，Servlet 是由 JVM 的垃圾回收器进行垃圾回收的。

• FP: 首次绘制
• FCP: 首次有内容绘制
• FMP: 首次有意义绘制
• TTI: 可交互时间

FP

含义

统计逻辑

FCP

含义

统计逻辑

注意

FMP

含义

统计逻辑

注意

• javascript直接实现；
• SVG（可伸缩矢量图形）；
• CSS3 transition；
• CSS3 animation；
• Canvas动画；
• requestAnimationFrame；

var arr = ['a', 'b', 'c', 'd', 'e'];var eArr = arr[Symbol.iterator]();console.log(eArr.next().value); // aconsole.log(eArr.next().value); // bconsole.log(eArr.next().value); // cconsole.log(eArr.next().value); // dconsole.log(eArr.next().value); // e

• next(): 返回 yield 生成的值
• return()：返回给定的值并结束生成器
• throw(): 抛出一个错误

• next(): 新版的 next()
• close(): 新版的 return
• send(): 将值发送给生成器，用 yield 返回，对应于新版的 next(x)
• throw(): 抛出错误，新版的 throw()

• 主线程到渲染线程：BrowerWindow.webContents.send()发送消息。
• 渲染线程到主线程：，借助ipcRender和ipcMain发送/接收消息。