前端知识点查缺补漏

# JavaScript基础

## 变量和类型

1.JavaScript规定了几种语言类型（http://www.mamicode.com/info-detail-2347949.html）
    
    在 JavaScript 规范中，共定义了七种数据类型，分为 “基本类型” 和 “引用类型” 两大类，如下所示：

    基本类型：String、Number、Boolean、Symbol、Undefined、Null
    引用类型：Object

2.JavaScript对象的底层数据结构是什么

3.Symbol类型在实际开发中的应用、可手动实现一个简单的Symbol（https://www.jianshu.com/p/f40a77bbd74e）

    Symbol是由ES6规范引入的一项新特性，它的功能类似于一种标识唯一性的ID。

4.JavaScript中的变量在内存中的具体存储形式

5.基本类型对应的内置对象，以及他们之间的装箱拆箱操作（https://www.jianshu.com/p/d66cf6f711a1）

    1）所谓装箱，就是把基本类型转变为对应的对象。装箱分为隐式和显示。
    2）拆箱与装箱相反，把对象转变为基本类型的值。拆箱过程内部调用了抽象操作 ToPrimitive 。该操作接受两个参数，第一个参数是要转变的对象，第二个参数  PreferredType 是对象被期待转成的类型。第二个参数不是必须的，默认该参数为 number，即对象被期待转为数字类型。有些操作如 String(obj) 会传入 PreferredType 参数。有些操作如 obj + " " 不会传入 PreferredType。

6.理解值类型和引用类型（https://www.cnblogs.com/leezhxing/p/4105069.html）

    值类型：也称为原始数据或原始值（primitive value）。

        这类值存储在栈（stack）中，栈是内存中一种特殊的数据结构，也称为线性表，栈按照后进先出的原则存储数据，先进入的数据被压入栈底，最后插入（push）的数据放在栈顶，需要读取数据时从栈顶开始弹出（pop）数据，即最后一个数据被第一个读出来。因此说，值类型都是简单的数据段。变量的位置和变量值的位置是重叠的，也就是说值类型的数据被存储在变量被访问的位置。

    引用类型：这类值存储在堆（heap）中，堆是内存中的动态区域，相当于自留空间，在程序运行期间会动态分配给代码和堆栈。

        堆中存储的一般都是对象，然后通过一个编号传递给栈内变量，这个编号就是所谓的引用指针（point），这样变量和变量值之间是分离的，它们通过指针相联系。当读写数据时，计算机通过变量的指针找到堆中的数据块，并进行操作。

7.null和undefined的区别（https://blog.csdn.net/zxy9602/article/details/70243531）

    1）、定义
        （1）undefined：是所有没有赋值变量的默认值，自动赋值
        （2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址
    2）、何时使用null?
        当使用完一个比较大的对象时，需要对其进行释放内存时，设置为null
    3）、null与undefined的异同点是什么呢？
        共同点：都是原始类型，保存在栈中变量本地
        不同点：
           （1）undefined——表示变量声明过但并未赋过值。
        它是所有未赋值变量默认值。
        例如：var a;    //a自动被赋值为undefined
           （2）null——表示一个变量将来可能指向一个对象。
        一般用于主动释放指向对象的引用。
        例如：var emps = ['ss','nn'];
                      emps = null;     //释放指向数组的引用
    4）、延伸——垃圾回收站
        它是专门释放对象内存的一个程序。
       （1）在底层，后台伴随当前程序同时运行；引擎会定时自动调用垃圾回收期；
       （2）总有一个对象不再被任何变量引用时，才释放。

8.至少可以说出三种判断JavaScript数据类型的方式，以及他们的优缺点，如何准确的判断数组类型（https://www.cnblogs.com/onepixel/p/5126046.html）

    （1）typeof     （2）instanceof    （3）constructor     （4）toString

9.可能发生隐式类型转换的场景以及转换原则，应如何避免或巧妙应用（https://blog.csdn.net/baibaider/article/details/79938342）
    
    （1）运算符的转换：
        -，*，/，%会将操作数转换为数字去计算，但+不一样，两边纯数字会按数字相加，纯字符串会拼接，但数字和字符串也会将字符串和数字拼接起来。
    （2）双等号的隐式转换：
        1) 双等号两边只要有以便是NaN，便返回false，且他自身不相等
        2) 布尔值会转换为数字，false转换为0，true转换为1
        3) 对象的转换

10.出现小数精度丢失的原因，JavaScript可以存储的最大数字、最大安全数字，JavaScript处理大数字的方法、避免精度丢失的方法（https://www.cnblogs.com/thinkingthigh/p/8073526.html）

## 原型和原型链

1.理解原型设计模式以及JavaScript中的原型规则

- javascript里面的原型设计模式：（https://blog.csdn.net/shaowei828/article/details/81779418）
    
        设计模式（design pattern）是一套反复使用、思想成熟、经过分类和无数实战设计经验的总结。
        
        是为了代码可重用、可扩展、可解耦、更容易被人理解和保证代码可靠性。
        
        原型模式，就是创建一个共享的原型，通过拷贝这个原型来创建新的类，用于创建重复的对象，带来性能上的提升。

- JavaScript中的原型规则：（https://blog.csdn.net/shan1991fei/article/details/82669608）
        
        1）所有的引用类型（对象、数组、函数），都具有对象特性，既可以自由扩展属性（除了 null 以外）
            var obj = {};
            obj.a = 100;
            var arr = [];
            arr.a = 100;
            function fn(){}
            fn.a = 100;
        2）所有的引用类型（对象、数组、函数），都有一个__proto__属性，属性值是一个普通对象。（__proto__称为 隐式原型）（除了 null 以外）
            console.log(obj.__proto__);
            console.log(arr.__proto__);
            console.log(fn.__proto__);
        3）所有的函数，都有一个prototype属性，属性值也是一个普通对象。（prototype 称为 显示原型）
            console.log(fn.prototype);
        4）所有的引用类型（对象、数组、函数），__proto__（隐式原型）属性值指向它的构造函数的 prototype （显示原型）属性值
            console.log(obj.__proto__ === Object.prototype);
        5）当试图得到一个 引用类型（对象、数组、函数）的某个属性时，如果这个对象本身没有这个属性，那么会去它的 __proto__（即它的构造函数的 prototype ）中寻找
        （构造函数的 prototype 显示原型和它自身的 __proto__ 隐式原型是一回事）
            //构造函数
            function Fn (name,age){
              this.name = name;  
            }
            //显示原型
            Fn.prototype.alertName = function(){
            　　alert(this.name);
            }
            //创建实力
            var f = new Fn('clm');
            f.printName = function(){
            　　console.log(this.name);
            }
            f.printName();// clm
            //f 没有 alertName 这时候会去它的 __proto__ 隐式原型中寻找 当前的隐式原型指向它的构造函数 prototype 显示原型中寻找
            //this 补充 通过对象属性去执行函数的时候，无论函数是一个自身的属性，还是从它的原型中得到的属性，它这个函数在执行当中这个this永远指向它本身。
            //在执行f.alertName()时候，alert(this.name); 这个this就是f
            f.alertName();// clm

2.instanceof的底层实现原理，手动实现一个instanceof

- （https://blog.csdn.net/sinat_17775997/article/details/89330468）---原理+实现
- （https://blog.csdn.net/Picking_up_stones/article/details/70050086）---原理详解（配图帮助理解）

4.实现继承的几种方式以及他们的优缺点（https://blog.csdn.net/ll_0801xyz/article/details/78278993）

    https://blog.csdn.net/zwli96/article/details/89515124
    https://blog.csdn.net/zwli96/article/details/89515193
    
    插入：面向对象+原型+继承+作用域链+闭包+this使用（https://blog.csdn.net/Monster_man/article/details/77455323）

5.至少说出一种开源项目(如Node)中应用原型继承的案例（）

6.可以描述new一个对象的详细过程，手动实现一个new操作符（）

7.理解es6 class构造以及继承的底层实现原理
（https://blog.csdn.net/qq_34149805/article/details/86105123）

## 作用域和闭包

1.理解词法作用域和动态作用域

    作用域共有两种主要工作模型--词法作用域和动态作用域，js采用词法作用域。

    词法作用域就是定义在词法阶段的作用域。词法作用域由写代码时将变量和块作用域书写位置来决定。
    
    词法作用域的创建发生在预编译阶段，词法阶段属于预编译的一个过程。
        
        eg.
        function foo(a) {
            var b = a * 2;
            function bar(c) {
                console.log( a, b, c );
            }
            bar( b * 3 );
        }
        foo( 2 ); // 2, 4, 12
    
![avatar][base64str-zyy-01]
    
        - 1包含着整个全局作用域，其中只有一个标识符：foo
        - 2包含着foo 所创建的作用域，其中有三个标识符：a、bar 和b
        - 3包含着bar 所创建的作用域，其中只有一个标识符：c
    
    无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定
    
        function foo(){
            var a = 200;
            bar();
        }
        function bar(){
            console.log(a);//100
        }
        var a = 100;
        foo();
    
    虽然函数bar在foo中被调用，但是bar是定义在全局的，也就是说，bar的词法作用域嵌套关系为(由内到外)：bar本身的词法作用域–>全局作用域。所以foo中的a并不影响输出结果。


2.理解JavaScript的作用域和作用域链

![avatar][base64str-zyy-04]

3.理解JavaScript的执行上下文栈，可以应用堆栈信息快速定位问题

![avatar][base64str-zyy-03]

4.this的原理以及几种不同使用场景的取值
（https://blog.csdn.net/w_q_1025/article/details/64227429）

>因为 this 的取值是函数执行上下文(context)的一部分，每次调用函数，都会产生一个新的执行上下文环境。当代码中使用了 this，这个 this 的值就直接从执行的上下文中获取了，而不会从作用域链中搜寻。

关于 this 的取值，大体上可以分为以下七种情况：

>由于严格模式下，禁止this指向全局对象，所以以下示例均运行在非严格模式下

5.闭包的实现原理和作用，可以列举几个开发中闭包的实际应用
（https://www.cnblogs.com/taodan/articles/4042682.html）

>闭包的概念：**闭包**是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。（https://www.imooc.com/article/16915）

    在理解闭包之前有一些关于函数的基本概念需要先了解：
    
    作用域是程序中定义的一个变量的有效区域，作用域链规定了函数中调用一个变量时查找变量的顺序，作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。
    
    执行环境定义了变量或函数有权访问的其他数据，每个执行环境都有一个与之关联的变量对象，里面保存了执行环境中定义的所有变量和函数。每个函数都有自己的执行环境，当执行流进入一个函数时，函数的环境就被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。
    
    仅仅看概念几乎无法理解闭包，所以还是通过代码来实际看看闭包起到的作用。

6.理解堆栈溢出和内存泄漏的原理，如何防止

>1，内存泄漏（memory leak）：是指程序在申请内存后，无法释放已申请的内存空间，导致系统无法及时回收内存并且分配给其他进程使用。通常少次数的内存无法及时回收并不会到程序造成什么影响，但是如果在内存本身就比较少获取多次导致内存无法正常回收时，就会导致内存不够用，最终导致内存溢出。
    
>2、内存溢出 （out of memory）：:指程序申请内存时，没有足够的内存供申请者使用，导致数据无法正常存储到内存中。也就是说给你个int类型的存储数据大小的空间，但是却存储一个long类型的数据，这样就会导致内存溢出。

    内存泄漏：
    
    以发生的方式来分类，内存泄漏可以分为4类：
        1.常发性内存泄漏。发生内存泄漏的代码会被多次执行到，每次执行都会导致一块内存泄漏。
        
        2.偶发性内存泄漏。发生内存泄漏只有在某些特定环境或操作过程下才会发生。常发性和偶发性是相对的。对于特定的环境，偶发性也许变成了常发性的。所以测试环境和测试方法对检测内存泄漏至关重要。
        
        3.一次性内存泄漏。发生内存泄漏的代码只会执行一次，由于算法上的缺陷，导致总会有一块仅且一块内存发生泄漏。比如在类的构造函数中分配内存，在析构函数中却没有释放该内存，所以内存泄漏只会发生一次。
        
        4.隐式内存泄漏。程序在运行中不停的分配内存，但是知道结束时在释放内存。严格的说这里并没有发生内存泄漏，因为最终释放了所有申请的内存。但对于一个服务器程序，需要运行几天，几周甚至几个月，不及时释放内存也可能导致耗尽系统的所有内存。所以我们称这类内存泄漏为隐式内存泄漏。

    内存溢出的原因以及解决办法：
        1.内存中加载的数据量过于庞大，如一次从数据库中取出过多数据；
        2.集合类中有对对象的引用，使用后未清空，是的JVM不能回收；
        3.代码中存在死循环或者循环产生过多重复的对象实体；
        4.使用第三方软件中的BUG；
        5.启动参数内存值设定的过小
    
    内存溢出的解决方案：
        1.修改JVM启动参数，直接增加内存。（-Xms,-Xms参数一定不要忘记加）
        
        2.检查错误日志，查看“OutOfMemory”错误前是否有其他异常或错误。
        
        3.对代码进行走查和分析，找出可能发生内存溢出的位置。
        
        重点排查以下几点：
            
            1）检查对数据库查询中，是否有一次获得全部数据的查询。一般来说，如果一次取十万条记录到内存，就可能引起内存溢出。这个问题比较隐蔽，在上线前，数据库中数据较少，不容易出问题，上线后，数据库中数据多了，一次查询就有可能引起内存溢出。对数据库查询尽量采用分页查询。
            
            2）检查代码是否有死循环或递归调用。
            
            3）检查是否有大循环重复产生新对象实体。
            
            4）检查List、Map等集合对象是否有使用后，未清除的问题。List、Map等集合对象会始终存有对对象的引用，使得这些对象不能被GC回收。
        
        4.使用内存查看工具动态查看内存使用情况。

7.如何处理循环的异步操作
(https://www.cnblogs.com/YikaJ/p/4133516.html)

8.理解模块化解决的实际问题，可列举几个模块化方案并理解其中原理


    
## 执行机制

1.为何try里面放return，finally还会执行，理解其内部机制
(https://www.cnblogs.com/lc5910/p/6438074.html)


2.JavaScript如何实现异步编程，可以详细描述EventLoop机制
(http://www.ruanyifeng.com/blog/2014/10/event-loop.html)
(https://blog.csdn.net/Rnger/article/details/81908070)


3.宏任务和微任务分别有哪些
(https://blog.csdn.net/weixin_42420703/article/details/82790942)

    宏任务、微任务有哪些

    宏任务包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
    
    微任务包括： Promises, Object.observe, MutationObserver

    宏任务、微任务的执行顺序

    执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。


4.可以快速分析一个复杂的异步嵌套逻辑，并掌握分析方法


5.使用Promise实现串行
(https://blog.csdn.net/zuoyiran520081/article/details/85068301)


6.Node与浏览器EventLoop的差异
（https://blog.csdn.net/Fundebug/article/details/86487117）


7.如何在保证页面运行流畅的情况下处理海量数据
（https://blog.csdn.net/ken_ding/article/details/86601844）
（https://www.askhtml5.com/question/3）


## 语法和API

1.理解ECMAScript和JavaScript的关系
(https://blog.csdn.net/liuk10/article/details/50829399)

>ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现


    JavaScript由三部分组成：ECMAScript、BOM以及DOM
    (https://blog.csdn.net/zhouziyu2011/article/details/52837040)


2.熟练运用es5、es6提供的语法规范



3.熟练掌握JavaScript提供的全局对象（例如Date、Math）、全局函数（例如decodeURI、isNaN）、全局属性（例如Infinity、undefined）
(https://www.bbsmax.com/A/rV57nR4aJP/)


4.熟练应用map、reduce、filter 等高阶函数解决问题
(https://blog.csdn.net/xiao_shutong/article/details/77941560)


5.setInterval需要注意的点，使用settimeout实现setInterval
(https://www.jianshu.com/p/32479bdfd851)


6.JavaScript提供的正则表达式API、可以使用正则表达式（邮箱校验、URL解析、去重等）解决常见问题


7.JavaScript异常处理的方式，统一的异常处理方案
(https://blog.csdn.net/hulk_oh/article/details/52957962)


# 二 HTML和CSS

## HTML

1.从规范的角度理解HTML，从分类和语义的角度使用标签


2.常用页面标签的默认样式、自带属性、不同浏览器的差异、处理浏览器兼容问题的方式


3.元信息类标签(head、title、meta)的使用目的和配置方法


4.HTML5离线缓存原理


5.可以使用Canvas API、SVG等绘制高性能的动画


## CSS

1.CSS盒模型，在不同浏览器的差异


2.CSS所有选择器及其优先级、使用场景，哪些可以继承，如何运用at规则


3.CSS伪类和伪元素有哪些，它们的区别和实际应用


4.HTML文档流的排版规则，CSS几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式，雪碧图实现原理


5.水平垂直居中的方案、可以实现6种以上并对比它们的优缺点


6.BFC实现原理，可以解决的问题，如何创建BFC


7.可使用CSS函数复用代码，实现特殊效果


8.PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种


9.CSS模块化方案、如何配置按需加载、如何防止CSS阻塞渲染


10.熟练使用CSS实现常见动画，如渐变、移动、旋转、缩放等等


11.CSS浏览器兼容性写法，了解不同API在不同浏览器下的兼容性情况


12.掌握一套完整的响应式布局方案


## 手写

1.手写图片瀑布流效果

2.使用CSS绘制几何图形（圆形、三角形、扇形、菱形等）

3.使用纯CSS实现曲线运动（贝塞尔曲线）

4.实现常用布局（三栏、圣杯、双飞翼、吸顶），可是说出多种方式并理解其优缺点


# 三 计算机基础

## 编译原理

1.理解代码到底是什么，计算机如何将代码转换为可以运行的目标程序


2.正则表达式的匹配原理和性能优化


3.如何将JavaScript代码解析成抽象语法树(AST)


4.base64的编码原理


5.几种进制的相互转换计算方法，在JavaScript中如何表示和转换

## 网络协议

1.理解什么是协议，了解TCP/IP网络协议族的构成，每层协议在应用程序中发挥的作用


2.三次握手和四次挥手详细原理，为什么要使用这种机制


3.有哪些协议是可靠，TCP有哪些手段保证可靠交付


4.DNS的作用、DNS解析的详细过程，DNS优化原理


5.CDN的作用和原理


6.HTTP请求报文和响应报文的具体组成，能理解常见请求头的含义，有几种请求方式，区别是什么


7.HTTP所有状态码的具体含义，看到异常状态码能快速定位问题


8.HTTP1.1、HTTP2.0带来的改变


9.HTTPS的加密原理，如何开启HTTPS，如何劫持HTTPS请求


10.理解WebSocket协议的底层原理、与HTTP的区别

## 设计模式

1.熟练使用前端常用的设计模式编写代码，如单例模式、装饰器模式、代理模式等

2.发布订阅模式和观察者模式的异同以及实际应用

3.可以说出几种设计模式在开发中的实际应用，理解框架源码中对设计模式的应用


# 四 数据结构和算法

## JavaScript编码能力

1.多种方式实现数组去重、扁平化、对比优缺点

2.多种方式实现深拷贝、对比优缺点

3.手写函数柯里化工具函数、并理解其应用场景和优势

4.手写防抖和节流工具函数、并理解其内部原理和应用场景

5.实现一个sleep函数

## 手动实现前端轮子

1.手动实现call、apply、bind


2.手动实现符合Promise/A+规范的Promise、手动实现async await


3.手写一个EventEmitter实现事件发布、订阅


4.可以说出两种实现双向绑定的方案、可以手动实现


5.手写JSON.stringify、JSON.parse


6.手写一个模版引擎，并能解释其中原理


7.手写懒加载、下拉刷新、上拉加载、预加载等效果

## 数据结构

1.理解常见数据结构的特点，以及他们在不同场景下使用的优缺点

2.理解数组、字符串的存储原理，并熟练应用他们解决问题

3.理解二叉树、栈、队列、哈希表的基本结构和特点，并可以应用它解决问题

4.了解图、堆的基本结构和使用场景

## 算法

1.可计算一个算法的时间复杂度和空间复杂度，可估计业务逻辑代码的耗时和内存消耗


2.至少理解五种排序算法的实现原理、应用场景、优缺点，可快速说出时间、空间复杂度


3.了解递归和循环的优缺点、应用场景、并可在开发中熟练应用


4.可应用回溯算法、贪心算法、分治算法、动态规划等解决复杂问题


5.前端处理海量数据的算法方案


#五 运行环境
我们需要理清语言和环境的关系：

>ECMAScript描述了JavaScript语言的语法和基本对象规范

>浏览器作为JavaScript的一种运行环境，为它提供了：文档对象模型（DOM），描述处理网页内容的方法和接口、浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

>Node也是JavaScript的一种运行环境，为它提供了操作I/O、网络等API

## 浏览器API

1.浏览器提供的符合W3C标准的DOM操作API、浏览器差异、兼容性


2.浏览器提供的浏览器对象模型 (BOM)提供的所有全局API、浏览器差异、兼容性


3.大量DOM操作、海量数据的性能优化(合并操作、Diff、requestAnimationFrame等)


4.浏览器海量数据存储、操作性能优化


5.DOM事件流的具体实现机制、不同浏览器的差异、事件代理


6.前端发起网络请求的几种方式及其底层实现、可以手写原生ajax、fetch、可以熟练使用第三方库


7.浏览器的同源策略，如何避免同源策略，几种方式的异同点以及如何选型


8.浏览器提供的几种存储机制、优缺点、开发中正确的选择


9.浏览器跨标签通信

## 浏览器原理

1.各浏览器使用的JavaScript引擎以及它们的异同点、如何在代码中进行区分


2.请求数据到请求结束与服务器进行了几次交互


3.可详细描述浏览器从输入URL到页面展现的详细过程


4.浏览器解析HTML代码的原理，以及构建DOM树的流程


5.浏览器如何解析CSS规则，并将其应用到DOM树上


6.浏览器如何将解析好的带有样式的DOM树进行绘制


7.浏览器的运行机制，如何配置资源异步同步加载


8.浏览器回流与重绘的底层原理，引发原因，如何有效避免


9.浏览器的垃圾回收机制，如何避免内存泄漏


10.浏览器采用的缓存方案，如何选择和控制合适的缓存方案


## Node

1.理解Node在应用程序中的作用，可以使用Node搭建前端运行环境、使用Node操作文件、操作数据库等等


2.掌握一种Node开发框架，如Express，Express和Koa的区别


3.熟练使用Node提供的API如Path、Http、Child Process等并理解其实现原理


4.Node的底层运行原理、和浏览器的异同


5.Node事件驱动、非阻塞机制的实现原理


# 六 框架和类库

>轮子层出不穷，从原理上理解才是正道

## TypeScript

1.理解泛型、接口等面向对象的相关概念，TypeScript对面向对象理念的实现


2.理解使用TypeScript的好处，掌握TypeScript基础语法


3.TypeScript的规则检测原理


4.可以在React、Vue等框架中使用TypeScript进行开发


## React
1.React和vue选型和优缺点、核心架构的区别


2.React中setState的执行机制，如何有效的管理状态


3.React的事件底层实现机制


4.React的虚拟DOM和Diff算法的内部实现


5.React的Fiber工作原理，解决了什么问题


6.React Router和Vue Router的底层实现原理、动态加载实现原理


7.可熟练应用React API、生命周期等，可应用HOC、render props、Hooks等高阶用法解决问题


8.基于React的特性和原理，可以手动实现一个简单的React


## Vue

1.熟练使用Vue的API、生命周期、钩子函数

2.MVVM框架设计理念

3.Vue双向绑定实现原理、Diff算法的内部实现

4.Vue的事件机制

5.从template转换成真实DOM的实现机制

## 多端开发


1.单页面应用（SPA）的原理和优缺点，掌握一种快速开发SPA的方案


2.理解Viewport、em、rem的原理和用法，分辨率、px、ppi、dpi、dp的区别和实际应用


3.移动端页面适配解决方案、不同机型适配方案


4.掌握一种JavaScript移动客户端开发技术，如React Native：可以搭建React Native开发环境，熟练进行开发，可理解React Native的运作原理，不同端适配


5.掌握一种JavaScript PC客户端开发技术，如Electron：可搭建Electron开发环境，熟练进行开发，可理解Electron的运作原理


6.掌握一种小程序开发框架或原生小程序开发


7.理解多端框架的内部实现原理，至少了解一个多端框架的使用


## 数据流管理


1.掌握React和Vue传统的跨组件通信方案，对比采用数据流管理框架的异同


2.熟练使用Redux管理数据流，并理解其实现原理，中间件实现原理


3.熟练使用Mobx管理数据流，并理解其实现原理，相比Redux有什么优势


4.熟练使用Vuex管理数据流，并理解其实现原理


5.以上数据流方案的异同和优缺点，不情况下的技术选型


## 实用库


1.至少掌握一种UI组件框架，如antd design，理解其设计理念、底层实现


2.掌握一种图表绘制框架，如Echart，理解其设计理念、底层实现，可以自己实现图表


3.掌握一种GIS开发框架，如百度地图API


4.掌握一种可视化开发框架，如Three.js、D3


5.工具函数库，如lodash、underscore、moment等，理解使用的工具类或工具函数的具体实现原理


## 开发和调试

1.熟练使用各浏览器提供的调试工具

2.熟练使用一种代理工具实现请求代理、抓包，如charls

3.可以使用Android、IOS模拟器进行调试，并掌握一种真机调试方案

4.了解Vue、React等框架调试工具的使用


# 七 前端工程

>前端工程化：以工程化方法和工具提高开发生产效率、降低维护难度

## 项目构建

1.理解npm、yarn依赖包管理的原理，两者的区别


2.可以使用npm运行自定义脚本


3.理解Babel、ESLint、webpack等工具在项目中承担的作用


4.ESLint规则检测原理，常用的ESLint配置


5.Babel的核心原理，可以自己编写一个Babel插件


6.可以配置一种前端代码兼容方案，如Polyfill


7.Webpack的编译原理、构建流程、热更新原理，chunk、bundle和module的区别和应用


8.可熟练配置已有的loaders和plugins解决问题，可以自己编写loaders和plugins


## nginx

1.正向代理与反向代理的特点和实例

2.可手动搭建一个简单的nginx服务器、

3.熟练应用常用的nginx内置变量，掌握常用的匹配规则写法

4.可以用nginx实现请求过滤、配置gzip、负载均衡等，并能解释其内部原理


## 开发提速

1.熟练掌握一种接口管理、接口mock工具的使用，如yapi

2.掌握一种高效的日志埋点方案，可快速使用日志查询工具定位线上问题

3.理解TDD与BDD模式，至少会使用一种前端单元测试框架


## 版本控制

1.理解Git的核心原理、工作流程、和SVN的区别

2.熟练使用常规的Git命令、git rebase、git stash等进阶命令

3.可以快速解决线上分支回滚、线上分支错误合并等复杂问题


## 持续集成


1.理解CI/CD技术的意义，至少熟练掌握一种CI/CD工具的使用，如Jenkins


2.可以独自完成架构设计、技术选型、环境搭建、全流程开发、部署上线等一套完整的开发流程（包括Web应用、移动客户端应用、PC客户端应用、小程序、H5等等）


# 八 项目和业务

## 后端技能

1.了解后端的开发方式，在应用程序中的作用，至少会使用一种后端语言

2.掌握数据最终在数据库中是如何落地存储的，能看懂表结构设计、表之间的关联，至少会使用一种数据库


## 性能优化

1.了解前端性能衡量指标、性能监控要点，掌握一种前端性能监控方案


2.了解常见的Web、App性能优化方案


3.SEO排名规则、SEO优化方案、前后端分离的SEO


4.SSR实现方案、优缺点、及其性能优化


5.Webpack的性能优化方案


6.Canvas性能优化方案


7.React、Vue等框架使用性能优化方案

## 前端安全

1.XSS攻击的原理、分类、具体案例，前端如何防御

2.CSRF攻击的原理、具体案例，前端如何防御

3.HTTP劫持、页面劫持的原理、防御措施

## 业务相关


1.能理解所开发项目的整体业务形态、业务目标、业务架构，可以快速定位线上业务问题


2.能理解所开发项目整体的技术架构、能快读的根据新需求进行开发规划、能快速根据业务报警、线上日志等定位并解决线上技术问题


3.可以将自己的想法或新技术在业务中落地实践，尽量在团队中拥有一定的不可替代性