JavaScript基础

变量和类型

  • JavaScript规定了几种语言类型
    数据类型篇有讲到Post not found: js-数据类型
    JavaScript目前有八种内置类型:
    Number,String,Boolean,Null,Undefined,Object,Symbol,BigInt

    其中 Symbol是es6新加入的

    BigInt 是一种内置对象,它提供了一种方法来表示大于 2^53 - 1 的整数。这原本是 Javascript中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。
    可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ,如:10n,或者调用函数BigInt()。

    const theBiggestInt = 9007199254740991n;
    const alsoHuge = BigInt(9007199254740991);// ↪ 9007199254740991n
    const hugeString = BigInt("9007199254740991");// ↪ 9007199254740991n
    const hugeHex = BigInt("0x1fffffffffffff");// ↪ 9007199254740991n
    const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111"); // ↪ 9007199254740991n
  • JavaScript对象的底层数据结构是什么

    Post not found: 底层存储方式

    JavaScript使用的是 堆(Heap) 和 栈( Stack)

    1. JavaScript基本类型数据都是直接按值存储在栈中的(Undefined、Null、不是new出来的布尔、数字和字符串),每种类型的数据占用的内存空间的大小是确定的,并由系统自动分配和自动释放。这样带来的好处就是,内存可以及时得到回收,相对于堆来说 ,更加容易管理内存空间。

    2. JavaScript引用类型数据被存储于堆中 (如对象、数组、函数等,它们是通过拷贝和new出来的)。其实,说存储于堆中,也不太准确,因为,引用类型的数据的地址指针是存储于栈中的,当我们想要访问引用类型的值的时候,需要先从栈中获得对象的地址指针,然后,在通过地址指针找到堆中的所需要的数据。

  • Symbol类型在实际开发中的应用、可手动实现一个简单的Symbol

    • Symbol是一种基本类型,由Symbol函数生成
      var a = Symbol()
      var b = Symbol()
      a === b // false 
    • 不能new,会报错,返回一个值,不是对象
    • Symbol 函数可以接受一个字符串作为参数
    • Symbol 值可以作为标识符,用于对象的属性名,可以保证不会出现同名的属性。
        
  • JavaScript中的变量在内存中的具体存储形式

    let a = '1' // a存在栈内存中,‘1’也是在栈内存中
    let b = {b:'1'} // b 存在栈内存中,{b:'1'}存在堆内存中,在栈内b的值是{b:'1'}的地址
    let c = b // 其实是{b:'1'}存在堆内存中地址赋值给了c,也就是说在堆内存中他们是一个同一个{b:'1'}
    let d = a // 会直接在栈内存中重新创建一个‘1’给d,因为a的值是基本数据类型
    栈内存 堆内存
    存储基础数据类型 存储引用数据类型
    按值访问 按引用访问
    储存的值大小固定 储存的值大小不固定,可以动态调整
    由系统自动分配内存空间 由代码进行指定分配
    空间小运用效率高 空间大运用效率较低
    先进后出,后进先出 无序储存,根据引用地址直接获取
  • 基本类型对应的内置对象,以及他们之间的装箱拆箱操作

    • 内置对象
      Object是 JavaScript 中所有对象的父对象 数据封装类对象:Object、Array、Boolean、Number 和 String 其他对象:Function、Math、Date、RegExp、Error。
      特殊的基本包装类型(String、Number、Boolean)
      arguments: 只存在于函数内部的一个类数组对象
    • 装箱和拆箱
      1. 装箱:
        把基本数据类型转化为对应的引用数据类型的操作**,装箱分为隐式装箱和显示装箱
      • 隐式装箱:
        let a = 'abc'
        let b = a.indexOf('a') // 0
        // 上面的代码实现步骤为
        let a = new String('abc')
        let b = a.indexOf('a')
        a = null
        在上面的代码中,a是基本类型,它不是对象,不应该具有方法,js内部进行了一些列处理(装箱), 使得它能够调用方法。在这个基本类型上调用方法,其实是在这个基本类型对象上调用方法。这个基本类型的对象是临时的,它只存在于方法调用那一行代码执行的瞬间,执行方法后立刻被销毁。实现机制:
        创建String类型的一个实例;
        在实例上调用指定的方法;
        销毁这个实例;
      • 显示装箱
        let a = new String('abc')
      1. 拆箱:
        拆箱和装箱相反,就是把引用类型转化为基本类型的数据,通常通过引用类型的valueof()和toString()方法实现
        let name = new String('name')
        typeof name  // object
        name.toString() // 'name'
        name.valueOf() // 'name'
  • 强制类型转换

    var a = 100 + 10 //100
    var b = 100 + '10' //10010
    // == 运算符
    100 == '100' //true
    0 == '' //true
    null == undefined //true
    //  语句
    var a = true
    if(a){}
    var b = 100
    if(b){} // 把数字转换为true
    var c = ''
    if(c){} // 把空字符串转换为false
    // 逻辑运算
    console.log(10&&0); // 0 把10转换成true
    console.log('' || 'abc'); // 'abc' 把空字符串转换为false
    console.log(!window.abc); // window.abc是undefined 把非undefined转换成true
    
    //判断一个变量会被当做true还是false
    var a = 100
    console.log(!!a); // true
  • null和undefined的区别

    1995年JavaScript诞生时,最初像Java一样,只设置了null作为表示”无”的值。但是,JavaScript的设计者Brendan Eich,觉得这样做还不够,有两个原因。
    首先,null像在Java里一样,被当成一个对象。但是,JavaScript的数据类型分成原始类型(primitive)和合成类型(complex)两大类,Brendan Eich觉得表示”无”的值最好不是对象。
    其次,JavaScript的最初版本没有包括错误处理机制,发生数据类型不匹配时,往往是自动转换类型或者默默地失败。Brendan Eich觉得,如果null自动转为0,很不容易发现错误。
    因此,Brendan Eich又设计了一个undefined。

    • 相同点
      if(null || undefined ) // 在if判断中都会自动转化为 fasle
      undefined == null // 相等运算符甚至直接报告两者相等
    • 不同点
      null表示”没有对象”,即该处不应该有值。
      (1) 作为函数的参数,表示该函数的参数不是对象。
      (2) 作为对象原型链的终点。
      undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义
      (1)变量被声明了,但没有赋值时,就等于undefined。
      (2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
      (3)对象没有赋值的属性,该属性的值为undefined。
      (4)函数没有返回值时,默认返回undefined。
  • 至少可以说出三种判断JavaScript数据类型的方式,以及他们的优缺点,如何准确的判断数组类型

    1. typeof 判断数据类型 但是引用数据类型无法具体判断 null无法直接判断 new操作符返回的都是object 函数返回的都是function
    2. instanceof运算符用于检测实例对象(参数)的原型链上是否出现构造函数的prototype
      语法:object instanceof constructor
      参数:object 某个实例对象 constructor 某个构造函数
      描述:instanceof运算符用来检测constructor.propertype 是否存在于参数object的原型链上。
      // 定义构造函数
      function C() {
      }
      function D() {
      }
      var o = new C()
      console.log(o instanceof C) //true,因为Object.getPrototypeOf(0) === C.prototype
      console.log(o instanceof D) //false,D.prototype不在o的原型链上
      console.log(o instanceof Object) //true 同上
      
      C.prototype = {}
      var o2 = new C()
      console.log(o2 instanceof C) // true
      console.log(o instanceof C) // false C.prototype指向了一个空对象,这个空对象不在o的原型链上
      D.prototype = new C() // 继承
      var o3 = new D()
      console.log(o3 instanceof D) // true
      console.log(o3 instanceof C) // true C.prototype现在在o3的原型链上

      instanceof运算符的左边必须是一个对象,像”string” instanceof String,true instanceof Boolean这样的字面量都会返回false。也就是说虽然能判断出对象的原型链上是否有构造函数的原型,但是只能判断出对象类型变量,字面量是判断不出的。

    3. Object.prototype.toString()
      每个对象都有一个toString()方法,该对象被表示为一个文本字符串时,或一个对象以预期的字符串方式引用时自动调用。默认情况下,toString()方法被每个Object对象继承,如果此方法在自定义对象中未被覆盖,toString()返回“[object type]”,其中type是对象的类型
      // null undefined
      console.log(Object.prototype.toString.call(null)) //[object Null] 很给力
      console.log(Object.prototype.toString.call(undefined)) //[object Undefined] 很给力
      
      // Number
      console.log(Object.prototype.toString.call(Infinity)) //[object Number]
      console.log(Object.prototype.toString.call(Number.MAX_SAFE_INTEGER)) //[object Number]
      console.log(Object.prototype.toString.call(NaN)) //[object Number],NaN一般是数字运算得到的结果,返回Number还算可以接受
      console.log(Object.prototype.toString.call(1)) //[object Number]
      var n = 100
      console.log(Object.prototype.toString.call(n)) //[object Number]
      console.log(Object.prototype.toString.call(0)) // [object Number]
      console.log(Object.prototype.toString.call(Number(1))) //[object Number] 很给力
      console.log(Object.prototype.toString.call(new Number(1))) //[object Number] 很给力
      console.log(Object.prototype.toString.call('1')) //[object String]
      console.log(Object.prototype.toString.call(new String('2'))) // [object String]
      
      // Boolean
      console.log(Object.prototype.toString.call(true)) // [object Boolean]
      console.log(Object.prototype.toString.call(new Boolean(1))) //[object Boolean]
      
      // Array
      console.log(Object.prototype.toString.call(new Array(1))) // [object Array]
      console.log(Object.prototype.toString.call([])) // [object Array]
      
      // Object
      console.log(Object.prototype.toString.call(new Object())) // [object Object]
      function foo() {}
      let a = new foo()
      console.log(Object.prototype.toString.call(a)) // [object Object]
      
      // Function
      console.log(Object.prototype.toString.call(Math.floor)) //[object Function]
      console.log(Object.prototype.toString.call(foo)) //[object Function]
      
      // Symbol
      console.log(Object.prototype.toString.call(Symbol('222'))) //[object Symbol]
      
      // RegExp
      console.log(Object.prototype.toString.call(/sss/)) //[object RegExp]
      上面的结果,除了NaN返回Number稍微有点差池之外其他的都返回了意料之中的结果,都能满足实际开发的需求,于是我们可以写一个通用的函数来检测变量,字面量的类型。如下
      let Type = (function () {
          let type = {};
          let typeArr = ['String', 'Object', 'Number', 'Array', 'Undefined', 'Function', 'Null', 'Symbol', 'Boolean', 'RegExp', 'BigInt'];
          for (let i = 0; i < typeArr.length; i++) {
              (function (name) {
                  type['is' + name] = function (obj) {
                      return Object.prototype.toString.call(obj) === '[object ' + name + ']'
                  }
              })(typeArr[i])
          }
          return type
      })()
      let s = true
      console.log(Type.isBoolean(s)) // true
      console.log(Type.isRegExp(/22/)) // true
    4. JSON.stringify() 转成json也能根据开头结尾来判断
  • 可能发生隐式类型转换的场景以及转换原则,应如何避免或巧妙应用

    1. 转换为字符串
      使用toString() 需要注意的是数组会直接变成字符串 [1,2,3,4] => ‘1,2,3,4’
    2. 转换为数字
      ECMAScript 提供了两种把非数字的原始值转换成数字的方法,即 parseInt() 和 parseFloat() 。 只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN。
    3. 转换为 Boolean
      undefined null ‘’ NaN 0 会转化成fasle
      其他的是true
    4. 强制类型转换
      Boolean(value) - 把给定的值转换成 Boolean 型;
      Number(value) - 把给定的值转换成数字(可以是整数或浮点数); 如果转化不了就是NaN
      String(value) - 把给定的值转换成字符串
    5. Boolean() 函数
    6. Number() 函数
    7. 隐式类型转换
    8. 自动转换 Boolean
    9. 运算符
    10. 对象
  • 出现小数精度丢失的原因,JavaScript可以存储的最大数字、最大安全数字,JavaScript处理大数字的方法、避免精度丢失的方法
    1、JS 数字精度丢失的一些典型问题(前端遇小数计算概率大,要有这个精度丢失的意识)
    2、JS 数字精度丢失的原因(计算机用二进制存储数据,由于存储位置的限制有时会存在“舍去”。当模仿十进制进行四舍五入时,0舍1入,造成误差)
    3、解决方案(一个对象+一个函数)(解决方案:把小数乘以倍数变成整数计算,再除以倍数变成原来的数。其中根据此思想封装了一个方法)
    4、 BigInt BigInt目前是第3阶段提案, 一旦添加到规范中,它就是JS 第二个数字数据类型,也将是 JS 第8种基本数据类型

原型和原型链

  • 理解原型设计模式以及JavaScript中的原型规则
  • instanceof的底层实现原理,手动实现一个instanceof
  • 实现继承的几种方式以及他们的优缺点
  • 至少说出一种开源项目(如Node)中应用原型继承的案例
  • 可以描述new一个对象的详细过程,手动实现一个new操作符
  • 理解es6 class构造以及继承的底层实现原理

作用域和闭包

  • 理解词法作用域和动态作用域
  • 理解JavaScript的作用域和作用域链
  • 理解JavaScript的执行上下文栈,可以应用堆栈信息快速定位问题
  • this的原理以及几种不同使用场景的取值
  • 闭包的实现原理和作用,可以列举几个开发中闭包的实际应用
  • 理解堆栈溢出和内存泄漏的原理,如何防止
  • 如何处理循环的异步操作
  • 理解模块化解决的实际问题,可列举几个模块化方案并理解其中原理

执行机制

  • 为何try里面放return,finally还会执行,理解其内部机制
  • JavaScript如何实现异步编程,可以详细描述EventLoop机制
  • 宏任务和微任务分别有哪些
  • 可以快速分析一个复杂的异步嵌套逻辑,并掌握分析方法
  • 使用Promise实现串行
  • Node与浏览器EventLoop的差异
  • 如何在保证页面运行流畅的情况下处理海量数据

语法和API

  • 理解ECMAScript和JavaScript的关系
  • 熟练运用es5、es6提供的语法规范,
  • 熟练掌握JavaScript提供的全局对象(例如Date、Math)、全局函数(例如decodeURI、isNaN)、全局属性(例如Infinity、undefined)
  • 熟练应用map、reduce、filter 等高阶函数解决问题
  • setInterval需要注意的点,使用settimeout实现setInterval
  • JavaScript提供的正则表达式API、可以使用正则表达式(邮箱校验、URL解析、去重等)解决常见问题
  • JavaScript异常处理的方式,统一的异常处理方案

HTML和CSS

HTML

  • 从规范的角度理解HTML,从分类和语义的角度使用标签
  • 常用页面标签的默认样式、自带属性、不同浏览器的差异、处理浏览器兼容问题的方式
  • 元信息类标签(head、title、meta)的使用目的和配置方法
  • HTML5离线缓存原理
  • 可以使用Canvas API、SVG等绘制高性能的动画

CSS

  • CSS盒模型,在不同浏览器的差异
  • CSS所有选择器及其优先级、使用场景,哪些可以继承,如何运用at规则
  • CSS伪类和伪元素有哪些,它们的区别和实际应用
  • HTML文档流的排版规则,CSS几种定位的规则、定位参照物、对文档流的影响,如何选择最好的定位方式,雪碧图实现原理
  • 水平垂直居中的方案、可以实现6种以上并对比它们的优缺点
  • BFC实现原理,可以解决的问题,如何创建BFC
  • 可使用CSS函数复用代码,实现特殊效果
  • PostCSS、Sass、Less的异同,以及使用配置,至少掌握一种
  • CSS模块化方案、如何配置按需加载、如何防止CSS阻塞渲染
  • 熟练使用CSS实现常见动画,如渐变、移动、旋转、缩放等等
  • CSS浏览器兼容性写法,了解不同API在不同浏览器下的兼容性情况
  • 掌握一套完整的响应式布局方案

手写

  • 手写图片瀑布流效果
  • 使用CSS绘制几何图形(圆形、三角形、扇形、菱形等)
  • 使用纯CSS实现曲线运动(贝塞尔曲线)
  • 实现常用布局(三栏、圣杯、双飞翼、吸顶),可是说出多种方式并理解其优缺点

计算机基础

编译原理

  • 理解代码到底是什么,计算机如何将代码转换为可以运行的目标程序
  • 正则表达式的匹配原理和性能优化
  • 如何将JavaScript代码解析成抽象语法树(AST)
  • base64的编码原理
  • 几种进制的相互转换计算方法,在JavaScript中如何表示和转换

网络协议

  • 理解什么是协议,了解TCP/IP网络协议族的构成,每层协议在应用程序中发挥的作用
  • 三次握手和四次挥手详细原理,为什么要使用这种机制
  • 有哪些协议是可靠,TCP有哪些手段保证可靠交付
  • DNS的作用、DNS解析的详细过程,DNS优化原理
  • CDN的作用和原理
  • HTTP请求报文和响应报文的具体组成,能理解常见请求头的含义,有几种请求方式,区别是什么
  • HTTP所有状态码的具体含义,看到异常状态码能快速定位问题
  • HTTP1.1、HTTP2.0带来的改变
  • HTTPS的加密原理,如何开启HTTPS,如何劫持HTTPS请求
  • 理解WebSocket协议的底层原理、与HTTP的区别

设计模式

  • 熟练使用前端常用的设计模式编写代码,如单例模式、装饰器模式、代理模式等
  • 发布订阅模式和观察者模式的异同以及实际应用
  • 可以说出几种设计模式在开发中的实际应用,理解框架源码中对设计模式的应用

数据结构和算法

JavaScript编码能力

  • 多种方式实现数组去重、扁平化、对比优缺点
  • 多种方式实现深拷贝、对比优缺点
  • 手写函数柯里化工具函数、并理解其应用场景和优势
  • 手写防抖和节流工具函数、并理解其内部原理和应用场景
  • 实现一个sleep函数

手动实现前端轮子

  • 手动实现call、apply、bind
  • 手动实现符合Promise/A+规范的Promise、手动实现async await
  • 手写一个EventEmitter实现事件发布、订阅
  • 可以说出两种实现双向绑定的方案、可以手动实现
  • 手写JSON.stringify、JSON.parse
  • 手写一个模版引擎,并能解释其中原理
  • 手写懒加载、下拉刷新、上拉加载、预加载等效果

数据结构

  • 理解常见数据结构的特点,以及他们在不同场景下使用的优缺点
  • 理解数组、字符串的存储原理,并熟练应用他们解决问题
  • 理解二叉树、栈、队列、哈希表的基本结构和特点,并可以应用它解决问题
  • 了解图、堆的基本结构和使用场景

算法

  • 可计算一个算法的时间复杂度和空间复杂度,可估计业务逻辑代码的耗时和内存消耗
  • 至少理解五种排序算法的实现原理、应用场景、优缺点,可快速说出时间、空间复杂度
  • 了解递归和循环的优缺点、应用场景、并可在开发中熟练应用
  • 可应用回溯算法、贪心算法、分治算法、动态规划等解决复杂问题
  • 前端处理海量数据的算法方案

运行环境

浏览器API

  • 浏览器提供的符合W3C标准的DOM操作API、浏览器差异、兼容性
  • 浏览器提供的浏览器对象模型 (BOM)提供的所有全局API、浏览器差异、兼容性
  • 大量DOM操作、海量数据的性能优化(合并操作、Diff、requestAnimationFrame等)
  • 浏览器海量数据存储、操作性能优化
  • DOM事件流的具体实现机制、不同浏览器的差异、事件代理
  • 前端发起网络请求的几种方式及其底层实现、可以手写原生ajax、fetch、可以熟练使用第三方库
  • 浏览器的同源策略,如何避免同源策略,几种方式的异同点以及如何选型
  • 浏览器提供的几种存储机制、优缺点、开发中正确的选择
  • 浏览器跨标签通信

浏览器原理

  • 各浏览器使用的JavaScript引擎以及它们的异同点、如何在代码中进行区分
  • 请求数据到请求结束与服务器进行了几次交互
  • 可详细描述浏览器从输入URL到页面展现的详细过程
  • 浏览器解析HTML代码的原理,以及构建DOM树的流程
  • 浏览器如何解析CSS规则,并将其应用到DOM树上
  • 浏览器如何将解析好的带有样式的DOM树进行绘制
  • 浏览器的运行机制,如何配置资源异步同步加载
  • 浏览器回流与重绘的底层原理,引发原因,如何有效避免
  • 浏览器的垃圾回收机制,如何避免内存泄漏
  • 浏览器采用的缓存方案,如何选择和控制合适的缓存方案

Node

  • 理解Node在应用程序中的作用,可以使用Node搭建前端运行环境、使用Node操作文件、操作数据库等等
  • 掌握一种Node开发框架,如Express,Express和Koa的区别
  • 熟练使用Node提供的API如Path、Http、Child Process等并理解其实现原理
  • Node的底层运行原理、和浏览器的异同
  • Node事件驱动、非阻塞机制的实现原理

框架和类库

TypeScript

  • 理解泛型、接口等面向对象的相关概念,TypeScript对面向对象理念的实现
  • 理解使用TypeScript的好处,掌握TypeScript基础语法
  • TypeScript的规则检测原理
  • 可以在React、Vue等框架中使用TypeScript进行开发

React

  • React和vue 选型和优缺点、核心架构的区别
  • React中setState的执行机制,如何有效的管理状态
  • React的事件底层实现机制
  • React的虚拟DOM和Diff算法的内部实现
  • React的Fiber工作原理,解决了什么问题
  • React Router和Vue Router的底层实现原理、动态加载实现原理
  • 可熟练应用React API、生命周期等,可应用HOC、render props、Hooks等高阶用法解决问题
  • 基于React的特性和原理,可以手动实现一个简单的React

Vue

  • 熟练使用Vue的API、生命周期、钩子函数
  • MVVM框架设计理念
  • Vue双向绑定实现原理、Diff算法的内部实现
  • Vue的事件机制
  • 从template转换成真实DOM的实现机制

多端开发

  • 单页面应用(SPA)的原理和优缺点,掌握一种快速开发SPA的方案
  • 理解Viewport、em、rem的原理和用法,分辨率、px、ppi、dpi、dp的区别和实际应用
  • 移动端页面适配解决方案、不同机型适配方案
  • 掌握一种JavaScript移动客户端开发技术,如React Native:可以搭建React Native开发环境,熟练进行开发,可理解React Native的运作原理,不同端适配
  • 掌握一种JavaScript PC客户端开发技术,如Electron:可搭建Electron开发环境,熟练进行开发,可理解Electron的运作原理
  • 掌握一种小程序开发框架或原生小程序开发
  • 理解多端框架的内部实现原理,至少了解一个多端框架的使用

数据流管理

  • 掌握React和Vue传统的跨组件通信方案,对比采用数据流管理框架的异同
  • 熟练使用Redux管理数据流,并理解其实现原理,中间件实现原理
  • 熟练使用Mobx管理数据流,并理解其实现原理,相比Redux有什么优势
  • 熟练使用Vuex管理数据流,并理解其实现原理
  • 以上数据流方案的异同和优缺点,不情况下的技术选型

实用库

  • 至少掌握一种UI组件框架,如antd design,理解其设计理念、底层实现
  • 掌握一种图表绘制框架,如Echart,理解其设计理念、底层实现,可以自己实现图表
  • 掌握一种GIS开发框架,如百度地图API
  • 掌握一种可视化开发框架,如Three.js、D3
  • 工具函数库,如lodash、underscore、moment等,理解使用的工具类或工具函数的具体实现原理

开发和调试

  • 熟练使用各浏览器提供的调试工具
  • 熟练使用一种代理工具实现请求代理、抓包,如charls
  • 可以使用Android、IOS模拟器进行调试,并掌握一种真机调试方案
  • 了解Vue、React等框架调试工具的使用

前端工程

项目构建

  • 理解npm、yarn依赖包管理的原理,两者的区别
  • 可以使用npm运行自定义脚本
  • 理解Babel、ESLint、webpack等工具在项目中承担的作用
  • ESLint规则检测原理,常用的ESLint配置
  • Babel的核心原理,可以自己编写一个Babel插件
  • 可以配置一种前端代码兼容方案,如Polyfill
  • Webpack的编译原理、构建流程、热更新原理,chunk、bundle和module的区别和应用
  • 可熟练配置已有的loaders和plugins解决问题,可以自己编写loaders和plugins

nginx

  • 正向代理与反向代理的特点和实例
  • 可手动搭建一个简单的nginx服务器、
  • 熟练应用常用的nginx内置变量,掌握常用的匹配规则写法
  • 可以用nginx实现请求过滤、配置gzip、负载均衡等,并能解释其内部原理

开发提速

  • 熟练掌握一种接口管理、接口mock工具的使用,如yapi
  • 掌握一种高效的日志埋点方案,可快速使用日志查询工具定位线上问题
  • 理解TDD与BDD模式,至少会使用一种前端单元测试框架

版本控制

  • 理解Git的核心原理、工作流程、和SVN的区别
  • 熟练使用常规的Git命令、git rebase、git stash等进阶命令
  • 可以快速解决线上分支回滚、线上分支错误合并等复杂问题

持续集成

  • 理解CI/CD技术的意义,至少熟练掌握一种CI/CD工具的使用,如Jenkins
  • 可以独自完成架构设计、技术选型、环境搭建、全流程开发、部署上线等一套完整的开发流程(包括Web应用、移动客户端应用、PC客户端应用、小程序、H5等等)

项目和业务

  • 了解后端的开发方式,在应用程序中的作用,至少会使用一种后端语言
  • 掌握数据最终在数据库中是如何落地存储的,能看懂表结构设计、表之间的关联,至少会使用一种数据库

性能优化

  • 了解前端性能衡量指标、性能监控要点,掌握一种前端性能监控方案
  • 了解常见的Web、App性能优化方案
  • SEO排名规则、SEO优化方案、前后端分离的SEO
  • SSR实现方案、优缺点、及其性能优化
  • Webpack的性能优化方案
  • Canvas性能优化方案
  • React、Vue等框架使用性能优化方案

前端安全

  • XSS攻击的原理、分类、具体案例,前端如何防御
  • CSRF攻击的原理、具体案例,前端如何防御
  • HTTP劫持、页面劫持的原理、防御措施

业务相关

  • 能理解所开发项目的整体业务形态、业务目标、业务架构,可以快速定位线上业务问题
  • 能理解所开发项目整体的技术架构、能快读的根据新需求进行开发规划、能快速根据业务报警、线上日志等定位并解决线上技术问题
  • 可以将自己的想法或新技术在业务中落地实践,尽量在团队中拥有一定的不可替代性

资源

转载
作者:ConardLi
链接:https://juejin.cn/post/6844903830887366670
来源:稀土掘金