

首页  思维导图  详情



前端技术图谱

2021-11-11 17:46:27   48  举报





AI智能生成

前端技术图

前端流程图

模版推荐

作者其他创作

大纲/内容

浏览器

浏览器安全

XSS

存储型

反射型

文档型

防范措施

千万不要信任用户的输入

CSP

HTTPOnly

CSRF

自动发送GET请求

自动发送POST请求

诱导点击发送GET请求

防范措施

Cookie的SameSite属性

验证来源站点

CSRF Token

浏览器缓存

强缓存

不需要发请求

字段

HTTP1.0

Expires

HTTP1.1

Cache Control

协商缓存

Last Modified

Etag

缓存的位置

Serivce Worker

Memory Cache

Disk Cache

Push Cache

浏览器事件机制

浏览器本地存储

WebStorage

localStorage

sessionStorage

IndexedDB

V8垃圾回收

跨域问题

算法

贪心

动态规划

回溯

二分

排序

二叉树

位运算

双指针

栈和队列

哈希表

字符串

链表

滑动窗口

Node.js

express

koa

模块化

path

中间件

npm

微信小程序

uniapp

登录的流程

获取用户的微信账号信息

原生微信小程序开发

Vue

Vue基础

Vue的双向绑定

Object.defineProperty

Proxy

Reflact

MVC,MVVM,MVP的区别

computed和watch的区别

filter的作用

保存当前页面的状态

常见的事件修饰符以及作用

v-if和v-show的区别

为什么data是一个函数不是对象

Vue.nextTick()

Vue.set和Vue.delete

Vue的数组的响应式原理

Vue的响应式渲染

Vue.directive

Vue的单向数据流

VueRouter

懒加载实现

hash和history的区别

$route和$router的区别

VueRouter的路由卫士

路由的跳转

动态路由的定义以及传参

Vuex

Vuex的工作流程图

Vuex的各种属性

action和mutation的区别

Vuex和localStorage的区别

mutation为何不能处理异步事件

批量使用Vuex的getter

重复使用Vuex的mutation

组件

组件间通信

props & $emit

$parent & $children

$atrrs & $listeners

递归子组件

生命周期

生命周期的各个过程以及所做到事

子组件和父组件的生命周期顺序

Diff算法

Diff算法的流程

为什么不能用数组的下标做为key

性能优化

Compostion API

Vue3的响应式原理

Vue3的ref属性

webpack

webpack的基础架构

webpack的构建流程

常见的Loader

常见的Plugin

Loader和Plugin的区别

自己开发Loader，Plugin

HMR

source map

babel原理

优化webpack的构建速度

计算机网络

HTTP

HTTP报文格式

HTTP的状态码

1XX

2XX

3XX

4XX

HTTP的方法

GET

POST

DELETE

PUT

OPTION

HTTP不同版本的区别

HTTP1.1

HTTP2.0

HTTP优点和缺点

HTTP缓存

HTTPS

HTTP和HTTPS的区别

HTTPS握手过程

TCP/IP

TCP和UDP的区别

TCP报文首部

三次握手

四次挥手

TCP的拥塞控制

TCP流量控制

DNS

根DNS

顶级DNS

权威DNS

域名的IP地址寻找过程

Vite

JavaScript

基本的数据类型

Number

String

Null

Undefined

Symbol

Object

Boolean

BigInt

类型的判断

typeof

instanceof

constructor

Object.prototype.toString.call

作用域

闭包

this

垃圾回收机制

函数

普通函数

箭头函数

call

bind

apply

数组

常见的方法

改变原数组的方法

push

pop

shift

unshift

splice

sort

常用操作

concat

map

filter

reduce

slice

forEach

every

some

indexOf

join

类

原型和原型链

继承

原型链继承

构造函数继承

组合式继承

原型式继承

寄生式继承

寄生组合继承

new

new 中间的过程

手写实现new

class

JavaScript的运行机制

同步代码

异步代码

ES6

var,let,const

rest参数

拓展运算符

数组和对象的解构

模板字符串

异步编程

setTimeout

setInterval

requestAnimationFrame

Promise

async,await

DOM

BOM

CSS

CSS基础

css选择器(按优先级排序)

!important

行内样式

ID选择器

类，伪类和属性选择器

元素和伪元素

继承

通配符

盒模型

标准盒模型

width=内容宽度

height=内容高度

IE盒模型

width=border+padding+内容宽度

height=border+padding+内容高度

动画效果

display

CSS3

布局

布局单位

rem,em

vh,vw

两栏布局

三栏布局

水平垂直居中

已知宽高

绝对定位+负margin

绝对定位+left+right+top+bottom+margin

flex布局

不定宽高

绝对定位+tranform

flex布局

Flex布局

flex-direction

justify-content

align-items

Grid布局

响应式布局

定位和浮动

清除浮动

添加额外标签，设置其样式clear:both

父级元素添加overflow:hidden，或者设置高度

建立伪元素，设置clear:both

外边距重叠

BFC

实际案例

单行，多行文本溢出处理

实现一个三角形

判断元素是否可视

HTML

行内元素

块级元素

HTML5

script标签的async和defer

跨域请求

同源策略

JSONP

CORS

简单请求

Origin中的源不在允许的范围之内，服务器就返回一个正常的HTTP响应 服务端检测没有Access-Control-Allow-Origin,就知道出错了

在允许的范围中，服务器就会返回Access-Control-Allow-Origin 他表示接受那些域名的请求

非简单请求

预检成功

预检失败

Node正向代理

Nginx反向代理

 Collect

Get Started

前端技术图谱

 Collect

Get Started

知识图谱构建技术架构

 Collect

Get Started

前端技术图谱

 Collect

Get Started

前端技术图谱2.5





0 条评论

下一页