Skip to content

Latest commit

 

History

History
244 lines (158 loc) · 3.61 KB

前端知识体系.md

File metadata and controls

244 lines (158 loc) · 3.61 KB
Raw

前端知识体系

前端框架

Vue

React

Angular

前端工程化

项目初始化

代码规范

数据 Mock

模块管理

分支管理

自动化测试

部署

错误与性能监控

前端安全监控

前端未来

优化

安全

XSS

CSRF

CSP

运行环境

浏览器

  • 浏览器API

  • 浏览器工作原理

    • HTTP 请求过程
    • 浏览器缓存
    • 浏览器渲染机制
    • 导航流程

Node

设计模式

单例模式

装饰器模式

代理模式

数据结构和算法

JavaScript编码能力

手动实现前端轮子

数据结构

算法

计算机原理

  • 编译原理
  • 网络协议

前端基础知识

HTML + CSS

  • HTML

    • html 元素

      • head中的标签

        • title 添加页面的标题

        • meta

          • charset='utf-8' 指定字符的编码

          • 作者和描述

            • name="author" content="Chris Mills"
            • name="description" content="The MDN"

        • favicons

        • 设置文档主语言 lang= 'en-US'

        • 在HTML中应用CSS和JavaScript

          • link
          • script

      • 语义化

      • 超链接

        • 统一资源定位符 (Uniform Resource Locator) URL

          • 相对路径
          • 绝对路径

        • 连接到�特定的文档片段(锚点)

        • 路径 (path)

        • 电子邮件链接

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

    • htm5新特性

      • 增强型表单
      • DOM扩展
      • 原生拖放
      • 媒体元素 (和
      • Web Storage (localStorage和sessionStorage)
      • Web Sockets
      • 地理位置
      • Canvas绘图

    • DOM

      • 什么是DOM

      • Node 节点

      • Node 接口

        • 属性
        • 方法

      • Document 接口

        • 属性
        • 方法

      • Element 接口

        • 属性
        • 方法

  • CSS

    • 盒模型

      • W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

      • css 外边距合并（叠加）

      • box-sizing

        • 标准：box-sizing: content-box;
        • IE： box-sizing: border-box;

      • JS获取盒模型对应宽高

        • dom.offsetWidth/offsetHeight

    • 块格式化上下文（Block Formatting Context，BFC）

      • BFC基本概念
      • BFC原理（渲染规则|布局规则）
      • CSS在什么情况下会创建出BFC（即脱离文档流）
      • BFC作用（使用场景）

    • IFC

      • IFC基本概念
      • IFC原理（渲染规则|布局规则）

    • 选择器

      • 选择器语法
      • 优先级
      • 继承
      • 级联

    • 布局

      • 常用居中方法

        • 水平居中
        • 垂直居中

      • 单列布局

      • 二列 & 三列布局

    • 层叠上下文

    • 简写属性

    • CSS 弹性盒子布局(CSS Flexble Box Layout)

    • CSS 网格布局(Grid Layout)

    • 定位

      • position
      • float

    • 媒体查询

    • 动画

    • CSS3 新特性

    • 浏览器兼容

JS

  • JavaScript 基础知识

    • JavaScript 类型

      • 7种原始类型
      • Object

    • JavaScript 对象的底层数据结构

    • Symbol 类型在实际开发中的应用

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

    • 基本类型对应的内置对象，以及他们之间的装箱拆箱操作

    • 理解值类型和引用类型

    • null和undefined的区别

    • 可能发生隐式类型转换的场景以及转换原则，应如何避免或巧妙应用

    • 出现小数精度丢失的原因

  • 控制流与错误处理

  • 循环与迭代

  • 函数

  • 表达式与运算符

  • 数字与日期

  • 索引集合

  • 文本格式化

  • 带键集合

  • 处理对象

  • JavaScript 对象以及继承

  • Promise

  • 迭代器与生成器

  • 元编程

  • JavaScript 模块

  • 正则表达式

  • JavaScript 应用

  • Ajax

XMind - Trial Version