前端知识点梳理

JavaScript

  • 语法
  • 设计模式
  • 函数式
  • 底层
  • 框架和类库
  • 发展

语法

基础

  • 数据类型
    基本类型: String Number Boolean undefined null
    引用类型: Object Array Function (Date Math RegExp)
  • 声明
    变量声明:var let const symbol
    函数声明:function
    类声明:class
  • 运算符
    算术运算符: + = * / % ++ –
    赋值运算符: = += -=
  • 循环语句
    if else while switch case
  • 内置属性与方法

高级

  • this
    动态作用域,谁调用指向谁,默认词法作用域的对象
  • 闭包
    在词法作用域之外调用
  • 深浅拷贝
    浅拷贝: Object.assign 深拷贝: JSON.parse(JSON.stringify(obj)) 递归
  • 继承
    构造函数继承 原型继承 组合继承 关联继承 类继承
  • 单线程和异步
    js单线程, 使用异步解决代码阻塞 事件队列 task micro task promise async await

设计模式

  • 单例模式
  • 工厂模式
  • 观察者模式(发布订阅模式)
  • 模板模式
  • 代理模式
  • 外观模式

参考: 常用设计模式

函数式

纯函数,高阶函数,柯里化

底层

  • js解析原理
    js -> 词法分析 -> 有意义代码块 –> 语法分析 –> AST –> 执行
  • V8引擎
    webkit技术内幕

框架和类库

  • jquery
    双构造函数共享原型实现无new操作,利用原型添加on, css, html等方法
  • vue
    响应式: Object.defineProperty
    模板: 本质字符串
    虚拟DOM: snabbdom diff算法
    vue-router: hash history
    vuex原理

发展

ES8 typescript

HTML&&CSS

  • H5的语义化
  • H5的新属性
  • C3动画

开发与调试

  • 规范
  • 构建
  • 调试
  • 协同
  • 测试
  • 性能

规范

  • 前端代码规范
    变量函数命名规则,css命令规则,注释

构建

  • webpack
    功能强大,配置复杂
  • parcel
    配置简单,构建速度快

调试

  • chrome
    debug 性能调试
  • fiddler
    抓包
  • eruda
    移动端调试

协同

  • svn
  • git

测试

  • mocha

性能

  • 渲染
    css+html –> css rules + DOM Tree –> Render Tree –> layout回流 –>point重绘 –> 显示页面
  • 回流和重绘
    减少DOM操作 使用translate替代top 将频繁重绘元素独立一个图层

安全

  • 跨域脚本攻击 xss
    标签过滤 转义
  • 跨域请求伪造 xsrf
    token验证
  • 分布式拒绝服务 DDOS
    cdn

监控

  • 前端日志
    原理: (new Image).src = url?ua=${ua}&err=${err}

业务场景

PC端

移动端

细分场景

  • 静态页面
  • 企业后台
  • H5活动
  • H5动画
  • canvas
  • 游戏
  • 3D场景

软实力

  • 数据结构与算法
  • http
  • 后端和数据库
  • Linux和docker

数据结构与算法

  • 冒泡排序
  • 选择排序
  • 插入排序
  • 快速排序
  • 希尔排序
  • 归并排序

参考:ES6-sort

http

  • 报文
    报文行 报文头 空行 报文体
  • 请求
    Host: 服务器域名
    User-Agent: 客户端代理
    Cookie: 身份验证
    Connection: 长连接
    If-Modified-Since+If-None-Match: 缓存检测
  • 响应
    Last-Modified + ETag 缓存检测
    Cache-Control: 缓存规则设置
    Server: 服务器名称

  • https
    加密传输

  • http2
    多路复用 头部压缩 全双工

后端和数据库

  • node
  • python
  • nginx
  • mongodb
    insert find update remove
  • redis
    get set hget hset lpush rpop

Linux和docker

  • Linux包管理
    Ubuntu:apt-get
    centos:yum
  • Linux常用命令
    ls cd mdkir touch cp rm
  • docker常用命令
    docker images docker ps docker run docker exec

面试

  • 试题积累
  • 项目积累
  • 思考积累
  • 提问
  • 获取学习资源
  • 总结和前瞻

参考: 写给自己,梳理一下我现在对前端知识结构的理解

猜你喜欢

转载自blog.csdn.net/qq_33988065/article/details/80531782