余兵兵-中高级资料

call\apply\bind 模拟实现

// 模拟实现call
// ES6实现
Function.prototype.mycall = function (context) {
  context = context ? Object(context) : window;
  var fn = Symbol();
  context[fn] = this;
  let args = [...arguments].slice(1);
  let result = context[fn](...args);
  delete context[fn]
  return result;
}
// 模拟实现bind
Function.prototype.mybind = function (context) {
  if (typeof this !== "function") {
    throw new Error("请使用函数对象调用我，谢谢！");
  }
  var self = this;
  var args = Array.prototype.slice.call(arguments, 1);
  var fNOP = function () { };
  var fBound = function () {
    var bindArgs = Array.prototype.slice.call(arguments);
    return self.myapply(this instanceof fNOP ? this : context, args.concat(bindArgs));
  }
  fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();
  return fBound;
}
// 模拟实现apply
// ES6实现
Function.prototype.myApply = function(context,arg){//apply的第二个参数是数组
   context = context ? Object(context) : Window;//强制转化成对象，方便后续在上面添加属性
   const symbol = Symbol();//创建唯一标示;
   context[symbol] = this;//{name:'a',symbol:function(){...}},这样子symbol默认就能拿到name值了
   const result = context[symbol](...arg);//由于参数是数组，所以要解构执行
   delete context[symbol];//删除
   return result;
}
var c = function(a,b){
   return a*(a+b)*(this.c)
}
c.myApply({c:10},[1,1]);

Cookie的属性:domain和path属性,如果想要实现单点登录，可以设置Domain,子域名都能拿到cookie了，

https://juejin.im/post/6886437516698714120?utm_source=gold_browser_extension
domain 指定了该 Cookie 所属的域名，默认情况下，domain 会被设置为创建该 Cookie 时所在的域名。如果不指定，默认为 origin，不包含子域名。如果指定了Domain，则一般包含子域名。 例如，如果设置 Domain=mozilla.org，则 Cookie 也包含在子域名中（如developer.mozilla.org）。而 path 则指定了该 Cookie 所属的路径，注意子路径也会被匹配。例如，设置 Path=/docs，则/docs/Web/ 这个地址也会匹配。domain 和 path 两者一起来限制了该 Cookie 允许被哪些 URL 访问。

Map和Object的区别：

不要将「Map」作为普通「Object」的替代品，而应该是普通对象的补充

https://juejin.im/post/6846687604042104845

什么是BFC？

BFC 全称为 块格式化上下文 (Block Formatting Context) 。

页面渲染过程：

1. PureComponent

2. 深度copy:函数、日期、正则，这些无法准确拷贝

3. ES6 class ES5实现

https://www.cnblogs.com/lmyt/p/7446800.html

https://blog.csdn.net/qq_37653449/article/details/83306769

4. node 读取文件权限

5. css + ~

6. css 圆角计算方法

7. es6

8. es6 this

9. 严格模式和非严格模式的区别

'use strict'
const object1 = {};
Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false//通过Object.defineProperty定义了只读属性
});
object1.property1 = 77;//只有严格模式才会报错，这就是严格和非严格区别
// throws an error in strict mode
console.log(object1.property1);
// expected output: 42

10. 页面渲染过程-重绘和重排

Reflow （重排）

当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫 回流（Reflow）。

Repaint（重绘）

当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为 重绘（Repaint)。因此重排必然会引起重绘。

造成重排

调整窗口大小
字体大小
样式表变动
元素内容变化，尤其是输入控件
CSS伪类激活，在用户交互过程中发生
DOM操作，DOM元素增删、修改
width, clientWidth, scrollTop等布局宽高的计算

Repaint和Reflow是不可避免的，只能说对性能的影响减到最小，给出下面几条建议：

1. 避免逐条更改样式。建议集中修改样式，例如操作className。
2. 避免频繁操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后添加到文档里。设置display:none的元素上操作，最后显示出来。
3. 避免频繁读取元素几何属性（例如scrollTop）。
4. 绝对定位具有复杂动画的元素。绝对定位使它脱离文档流，避免引起父元素及后续元素大量的回流

11. 跨域

12. DNS（Domain Name Server）域名服务器

13. HTTP请求发起和响应

14. CommonJs,AMD,CMD, ES6 的Module && web components, UMD，SystemJS

UMD

https://zhuanlan.zhihu.com/p/54927867

CommonJs,AMD,CMD, ES6

https://juejin.im/post/5bea425751882508851b45d6#heading-4
Babel 只是把 ES6 模块语法转为 CommonJS 模块语法，然而浏览器是不支持这种模块语法的，所以直接跑在浏览器会报错的，如果想要在浏览器中运行，还是需要使用打包工具将代码打包，webpack把CommonJs模块，包裹一层，注入modules，exports，require，打包成自执行函数。

// 自执行函数
(function(modules) {
    // 用于储存已经加载过的模块
    window.installedModules = {};
    function require(moduleName) {
        if (installedModules[moduleName]) {
            return installedModules[moduleName].exports;
        }
        var module = installedModules[moduleName] = {
            exports: {}
        };
        modules[moduleName](module, module.exports, require);
        return module.exports;
    }
    // 加载主模块
    return require("main");
})({
    "main": function(module, exports, require) {
        console.log(JSON.stringify(module));
        var addModule = require("./add");
console.log(addModule);
        console.log(addModule.add(1, 1))
    },
    "./add": function(module, exports, require) {
        console.log('加载了 add 模块');
       // console.log(JSON.stringify(module));
        module.exports = {
            add: function(x, y) {
                return x + y;
            }
        };
    }
})

SystemJS

https://segmentfault.com/a/1190000008563619

15. object.defineproperty

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

16. 移动端适配

17. WebGL SVG CA

18. 设计模式 define module widget

19. H5 performance 性能

http://www.cnblogs.com/CraryPrimitiveMan/p/3795086.html

20. 高阶组件

1.Props Proxy： HOC 对传给 WrappedComponent W 的 porps 进行操作，

2.Inheritance Inversion： HOC 继承 WrappedComponent W。

21. ES6 this

使用注意点

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。

1.箭头函数有作用域（词法作用域），词法作用域简单来讲就是，一切变量（包括this）都根据作用域链来查找。

2.箭头函数中的this因为绑定了词法作用域，所以始终指向自身外的第一个this（由于自身没有声明this，所以会去作用域链上找this），也就是始终等于调用它的函数的this（以为这个this离它最近）。

3.严格模式下不允许使用arguments（规定），并且，普通函数里 arguments 代表了调用时传入的参数，但是箭头函数不是，箭头函数会把 arguments 当成一个普通的变量，顺着作用域链由内而外地查询（词法作用域）

4.arguments可以用…rest取代，所以完全没必要追求argument。

react 生命周期

init:

porpsType

getDefaultPorps

getInitialState

componentWillMount

reder

componentDidMount

componentWillUnmount

props

componentWillReceiveProps

shouldComonentUpdate

componentWillUpadta

reder

componentDidUpadta

componentWillUnmount

state

sholdComponentUpdata

componentWillUpdate

reder

compontenDidUpdate

componentWillUnmount

react 源码相关

https://blog.kisnows.com/categories/技术/

源码课程：https://react.jokcy.me/book/api/react.html

网页资源缓存机制

promise、async和await之执行顺序的那点事

https://lvdingjin.github.io/tech/2018/05/27/async-and-await.html

Generator 详解（使用场景，babel 转译，协程，异步，上层应用，async/await）
https://segmentfault.com/a/1190000017370622

https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with.md

setTimeout

https://blog.csdn.net/yun_hou/article/details/88697954

defer和async的区别

https://segmentfault.com/q/1010000000640869
https://segmentfault.com/a/1190000015057278?utm_source=index-hottest

JavaScript 运行机制详解：再谈Event Loop

http://www.ruanyifeng.com/blog/2014/10/event-loop.html

js中的隐式转换

函数节流和函数去抖

函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下一样。
函数防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次，会执行只不过要延迟
防抖
函数防抖(debounce): 事件在触发后的 t 时刻执行，如果在这个时间间隔 t 内，又一次触发事件，则重新计算时间。
函数节流(throttle): 在时间间隔 t 内，无论触发多少次事件，最终只执行一次。

var debounce = (fn,delay)=>{
   let time = null;
   return function(){
     const arg = arguments;
     const context = this;
     clearTimeout(time);
     time = setTimeout(()=>{ //这里用箭头函数其实没必要把this传递给context，直接传递this也有效果
        fn.apply(context,arg);//传递执行主体和参数，用apply就不用解构arg了，arg本身就是类数组结构
     },delay)//延迟执行
   }
}
var add = function(c){
   console.log(this.a+c);//函数体内部有this，所以这里一定不能用箭头函数，否则this会变成定义时而不是运行时
}
var dAdd = debounce(add,5000);
dAdd.call({a:1},1);//2

节流

const debounce = (fn,wait)=>{
  let time  = new Date().getTime();//记录当前时间
  let timeout = null;
  return (...arg)=>{
    const content = this;
    if(new Date().getTime() - time > wait){
      fn.apply(content,arg);//apply 第二个是数组
      time = new Date().getTime();//更新time
    }
  }
}
const b = (x,y)=>console.log(x+y);
const c = debounce(b,5500);

https://www.cnblogs.com/caizhenbo/p/6378202.html

js常见算法(二)：从给定的无序、不重复的数组 A 中，取出 N 个数，使其相加和 为 M

https://segmentfault.com/a/1190000015068723

整理面试题：

https://juejin.im/post/5b03e79951882542891913e8

Class

class Person {
 constructor (name) {
   this.name = name;
 }
 height(){
     console.log(1);
 }
 static weight(){
     console.log(2);
 }
}
class Student extends Person {
 constructor (name, age) {
   super();  //代表父类的构造函数
   this.age = age;
 }
 height(){
     super.height(); //指向父类的原型对象
 }
 static weight(){
     super.weight(); //指向父类
 }
}

"use strict";
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var Person =
/*#__PURE__*/
function () {
 function Person(name) {
   _classCallCheck(this, Person);
   this.name = name;
 }
 _createClass(Person, [{
   key: "height",
   value: function height() {
     console.log(1);
   }
 }, {
   key: "css",
   value: function css() {
     console.log(3);
   }
 }], [{
   key: "weight",
   value: function weight() {
     console.log(2);
   }
 }]);
 return Person;
}();
var Student =
/*#__PURE__*/
function (_Person) {
 _inherits(Student, _Person);
 function Student(name, age) {
   var _this;
   _classCallCheck(this, Student);
   _this = _possibleConstructorReturn(this, _getPrototypeOf(Student).call(this)); //代表父类的构造函数
   _this.age = age;
   return _this;
 }
 _createClass(Student, [{
   key: "height",
   value: function height() {
     _get(_getPrototypeOf(Student.prototype), "height", this).call(this); //指向父类的原型对象
   }
 }], [{
   key: "weight",
   value: function weight() {
     _get(_getPrototypeOf(Student), "weight", this).call(this); //指向父类
   }
 }]);
 return Student;
}(Person);

一起学react(4) 史上最详细react-redux 源码分析

https://www.jianshu.com/p/b039a062e021

http://cn.redux.js.org/docs/faq/ImmutableData.html#how-react-redux-uses-shallow-checking

多版本并存

NPM & git

BEBAL

Taro 技术揭秘之taro-cli

https://segmentfault.com/a/1190000015340294?utm_source=tag-newest

https://uniapp.dcloud.io/snippet

requestIdleCallback-后台任务调度

http://www.zhangyunling.com/702.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback

函数编程

React 中创建 Components 的方式有两种：Function and Class

• 在需要 内部state 或是 生命周期的时候需要用Class
• Class类继承的生命周期 componentDidMount 和 componentWillUnmount 实现类的销毁组件和释放资源很重要。
• componentDidMount componentWillUnmount 是生命周期的钩子。

CSS 选择器权重计算规则

https://www.cnblogs.com/dq-Leung/p/4213375.html

• 
  
  1. 选择器类型

1、ID　　#id

2、class　　.class

3、标签　　p

4、通用　　*

5、属性　　[type=”text”]

6、伪类　　：hover

7、伪元素　　::first-line

8、子选择器、相邻选择器

• 
  
  1. 权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。

• 3.比较规则

1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。

无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。

在权重相同的情况下，后面的样式会覆盖掉前面的样式。

通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。

• 4.！important

在Javascript中，获取到数字超出长度问题

JS中5种原始数据类型

原生类型

• number：整数/小数/NaN
• string：
• boolean：
• null：
• undefined：
• Symbol

引用类型

• Object

工程化工具的使用（Webpack、ESLint、Yarn、Git、……）

-. git log、git fork、git rebase、git reset、git reverse、git stash、git blame

我来回答饿了么大前端的问题（1）

https://www.jianshu.com/p/85634c6c1cd9

深入剖析 JavaScript 的深复制

https://jerryzou.com/posts/dive-into-deep-clone-in-javascript/

使用 React.Suspense 替换 react-loadable

https://www.youtube.com/watch?v=v6iR3Zk4oDY
https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

• React 16.x的两大新特性 Time Slicing, Suspense
• React 16.6：支持代码拆分的 Suspense 组件（已经发布）
• React 16.8：React Hooks（~ 2019 年 Q1）
• React 16.9：支持数据提取的 Suspense 组件（~ 2019 年年中）

https://www.zhihu.com/question/268028123/answer/332182059

react 开发者大会

react Virtual DOM diff 算法

将Virtual DOM树转换成real DOM树的最少操作的过程 称为 调和 。

diff策略

React用 三大策略 将O(n^3)复杂度 转化为 O(n)复杂度

策略一（tree diff）：
Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。

策略二（component diff）：
拥有相同类的两个组件 生成相似的树形结构，
拥有不同类的两个组件 生成不同的树形结构。

策略三（element diff）：
对于同一层级的一组子节点，通过唯一id区分。

tree diff

（1）React通过updateDepth对Virtual DOM树进行层级控制。

（2）对树分层比较，两棵树 只对同一层次节点
进行比较。如果该节点不存在时，则该节点及其子节点会被完全删除，不会再进一步比较。

（3）只需遍历一次，就能完成整棵DOM树的比较。

component diff

（1）同一类型的两个组件，按原策略（层级比较）继续比较Virtual DOM树即可。

（2）同一类型的两个组件，组件A变化为组件B时，可能Virtual DOM没有任何变化，如果知道这点（变换的过程中，Virtual DOM没有改变），可节省大量计算时间，所以 用户 可以通过 shouldComponentUpdate() 来判断是否需要 判断计算。

（3）不同类型的组件，将一个（将被改变的）组件判断为dirty component（脏组件），从而替换 整个组件的所有节点。

element diff

插入

删除

移动

https://www.jianshu.com/p/3ba0822018cf

redux-saga实现与原理

https://segmentfault.com/a/1190000013660033?utm_source=channel-hottest

redux 的原理

react-router 原理

javascript内存管理（堆和栈）和javascript运行机制

https://www.cnblogs.com/web-easy/p/7889184.html

HTTPS和HTTP的区别

• https需要认证证书，http不需要
• https是安全加密SSL安全协议，http是明文传输
• http和https 用的是不同链接方式，http是80 https是443
• http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

https://www.cnblogs.com/wqhwe/p/5407468.html

https://blog.csdn.net/qq_29695087/article/details/52138454

arguments转换为数组

[].slice.apply(arguments);

[…arguments]

array.from

原生实现bind方法

https://juejin.im/post/59093b1fa0bb9f006517b906

JavaScript深入之call和apply的模拟实现

https://github.com/mqyqingfeng/Blog/issues/11

JavaScript深入之从原型到原型链

https://github.com/mqyqingfeng/Blog/issues/2

instanceof, Symbol.hasInstance, Constructor

Symbol.hasInstance 用于判断某对象是否为某构造器的实例。 FooSymbol.hasInstance == foo instanceof Foo

constructor 属性返回对创建此对象的数组函数的引用。

https://blog.csdn.net/mevicky/article/details/50353881

Babel 用户手册

babel执行顺序

Plugin 会运行在 Preset 之前。
Plugin 会从前到后顺序执行。
Preset 的顺序则 刚好相反(从后向前

babel7.x变化

preset 的变更：淘汰 es201x，删除 stage-x，强推 env (重点)
淘汰 es201x 的目的是把选择环境的工作交给 env 自动进行，而stage-x 就没那么好运了，它们直接被删了。这是因为 babel 团队认为为这些 “不稳定的草案” 花费精力去更新 preset 相当浪费。stage-x 虽然删除了，但它包含的插件并没有删除，我们依然可以显式地声明这些插件来获得等价的效果。
为了减少开发者替换配置文件的机械工作，babel 开发了一款 babel-upgrade 的工具，它会检测 babel 配置中的 stage-x 并且替换成对应的 plugins。除此之外它还有其他功能，(总之目的就是让你更加平滑地迁移到 babel 7)，babel-upgrade 工具本身也还在开发中，还列出了许多 TODO 没有完成，因此之后的功能可能会更加丰富
把所有 babel- 重命名为 @babel/

https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md

https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md

https://blog.csdn.net/qq_40171039/article/details/78326344

babel-polyfill VS babel-runtime VS babel-preset-env

https://juejin.im/post/5aefe0a6f265da0b9e64fa54

你真的会用 Babel 吗?

https://juejin.im/post/59b9ffa8f265da06710d8e89#heading-10

判断数据类型

typeof、instanceof、 constructor、 prototype

https://www.cnblogs.com/dushao/p/5999563.html

理解运用JS的闭包、高阶函数、柯里化

https://cloud.tencent.com/developer/article/1326958

深入浅出webpack

https://github.com/gwuhaolin/web-webpack-plugin/blob/master/readme_zh.md#自动探测html入口-demo

http://webpack.wuhaolin.cn/

regenerator

https://segmentfault.com/a/1190000017370622
https://segmentfault.com/a/1190000000515173

web generator:

http://facebook.github.io/regenerator/

co generator:

https://github.com/xiaoxiangdaiyu/co/tree/master

Generator 详解（使用场景，babel 转译，协程，异步，上层应用，async/await）

https://segmentfault.com/a/1190000017370622

proto 、prototype

事件机制

浏览器盒模型的计算方法

CROS 的探测

ruter hash 产生机制

关于javascript函数式编程中compose的实现

https://segmentfault.com/a/1190000008394749

JS数组reduce()方法详解及高级技巧

https://www.jianshu.com/p/e375ba1cfc47

面试题

Expo大作战(一)—什么是expo，如何安装expo clinet和xde，xde如何使用

https://www.cnblogs.com/gdsblog/p/8537594.html

Preload，Prefetch 和它们在 Chrome 之中的优先级著作权归作者所有。

https://www.w3cplus.com/performance/reloading/preload-prefetch-and-priorities-in-chrome.html

webpack

Webpack 加快打包速度的方法

使用 include 或 exclude 加快文件查找速度
使用 HappyPack 开启多进程 Loader 转换
使用 ParallelUglifyPlugin 开启多进程 JS 压缩
使用 DllPlugin + DllReferencePlugin 分离打包
将 库 和 项目代码 分离打包
配置缓存（插件自带 loader，不支持的可以用 cache-loader）

Webpack 加快代码运行速度方法

代码压缩
抽离公共模块
懒加载模块
将小图片转成 base64 以减少请求
预取(prefetch) || 预加载(preload)
精灵图
webpack-bundle-analyzer 代码分析

https://www.jianshu.com/p/1a775dcfe957
http://webpack.wuhaolin.cn/1入门/

webpack plugin

https://blog.51cto.com/13869008/2166334
https://github.com/webpack/docs/wiki/plugins

webpack4.0各个击破（7）—— plugin篇

https://blog.51cto.com/13869008/2166334

https://fengmiaosen.github.io/2017/03/21/webpack-core-code/

React Native 三端同构实战

https://www.ibm.com/developerworks/cn/web/wa-universal-react-native/index.html

浩麟

http://resume.wuhaolin.cn/
https://github.com/gwuhaolin

Vue CLI 3 配置中 Modern mode 是什么

https://www.uis.cc/2018/06/29/What-is-Modern-mode-in-the-Vue-CLI-3-configuration/

为什么用Object.prototype.toString.call(obj)检测对象类型?

https://www.cnblogs.com/youhong/p/6209054.html

btoa和atob

#!/usr/bin/env node

https://blog.csdn.net/weixin_33714884/article/details/91416289

react-router-dom 的 HashRouter 也就这么回事儿

https://juejin.im/post/5ac6f4a7f265da237314b08c?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com

语义化版本 2.0.0

https://semver.org/lang/zh-CN/

/ eslint-disable /

BEM

react-modal

http://reactcommunity.org/react-modal/examples/css_classes.html

SplitChunksPlugin

https://blog.csdn.net/napoleonxxx/article/details/81975186

antd规划

https://github.com/sorrycc/blog/issues/85

https://createapp.dev/

基础知识： https://github.com/ljianshu/Blog

如何优化页面，加快页面的加载速度

（1）优化图片格式和大小；
（2）开启网络压缩；
（3）使用浏览器缓存；
（4）减少重定向请求；
（5）使用CDN存储静态资源；
（6）减少DNS查询次数；
（7）压缩css和js内容

谈谈以前端角度出发做好SEO需要考虑什么？

a. 了解搜索引擎如何抓取网页和如何索引网页
b. meta标签优化
c. 关键词分析
d. 付费给搜索引擎
e. 链接交换和链接广泛度（Link Popularity）
f. 合理的标签使用

call和apply区别

func1.call(this, arg1, arg2); func1.apply(this, [arg1, arg2])