前端技术图谱
2021-11-11 17:46:27 48 举报AI智能生成
前端技术图
作者其他创作
大纲/内容
浏览器
浏览器安全
XSS
存储型<br>
反射型
文档型
防范措施
千万不要信任用户的输入
CSP
HTTPOnly<br>
CSRF
自动发送GET请求
自动发送POST请求
诱导点击发送GET请求<br>
防范措施
Cookie的SameSite属性<br>
验证来源站点<br>
CSRF Token<br>
浏览器缓存
强缓存<br>
不需要发请求
字段<br>
HTTP1.0
Expires<br>
HTTP1.1
Cache Control<br>
协商缓存
Last Modified<br>
Etag
缓存的位置
Serivce Worker<br>
Memory Cache<br>
Disk Cache<br>
Push Cache<br>
浏览器事件机制
浏览器本地存储<br>
Cookie
WebStorage
localStorage
sessionStorage<br>
IndexedDB<br>
V8垃圾回收<br>
跨域问题<br>
算法
贪心
动态规划<br>
回溯
二分
排序
二叉树
位运算
双指针
栈和队列
哈希表
字符串
链表
滑动窗口
Node.js<br>
express
koa
fs
模块化<br>
path
中间件
npm
微信小程序
uniapp
登录的流程
获取用户的微信账号信息
原生微信小程序开发
Vue
Vue基础
Vue的双向绑定<br>
Vue2
Object.defineProperty
Vue3
Proxy
Reflact
MVC,MVVM,MVP的区别
computed和watch的区别<br>
filter的作用
保存当前页面的状态<br>
常见的事件修饰符以及作用<br>
v-if和v-show的区别<br>
为什么data是一个函数不是对象
Vue.nextTick()<br>
Vue.set和Vue.delete
Vue的数组的响应式原理
Vue的响应式渲染
Vue.directive
Vue的单向数据流<br>
VueRouter<br>
懒加载实现<br>
hash和history的区别
$route和$router的区别<br>
VueRouter的路由卫士
路由的跳转
动态路由的定义以及传参
Vuex
Vuex的工作流程图<br>
Vuex的各种属性<br>
action和mutation的区别
Vuex和localStorage的区别
mutation为何不能处理异步事件
批量使用Vuex的getter
重复使用Vuex的mutation
组件
组件间通信
props & $emit<br>
$parent & $children<br>
$atrrs & $listeners<br>
递归子组件
生命周期
生命周期的各个过程以及所做到事
子组件和父组件的生命周期顺序
Diff算法
Diff算法的流程
为什么不能用数组的下标做为key
性能优化
Vue3.0
Compostion API
Vue3的响应式原理<br>
Vue3的ref属性
webpack
webpack的基础架构
webpack的构建流程
常见的Loader
常见的Plugin
Loader和Plugin的区别
自己开发Loader，Plugin<br>
HMR<br>
source map<br>
babel原理
优化webpack的构建速度
计算机网络
HTTP
HTTP报文格式
HTTP的状态码<br>
1XX
2XX
3XX
4XX
HTTP的方法
GET
POST<br>
DELETE
PUT<br>
OPTION
HTTP不同版本的区别
HTTP1.1
HTTP2.0
HTTP优点和缺点
HTTP缓存
HTTPS
HTTP和HTTPS的区别
HTTPS握手过程<br>
TCP/IP
TCP和UDP的区别
TCP报文首部
三次握手
四次挥手
TCP的拥塞控制
TCP流量控制
DNS<br>
根DNS
顶级DNS
权威DNS
域名的IP地址寻找过程<br>
Vite
JavaScript
基本的数据类型
Number
String
Null
Undefined
Symbol
Object
Boolean
BigInt
类型的判断
typeof
instanceof
constructor
Object.prototype.toString.call
作用域<br>
闭包
this
垃圾回收机制
函数
普通函数
箭头函数
call
bind
apply
数组<br>
常见的方法
改变原数组的方法
push
pop
shift
unshift
splice
sort
常用操作
concat
map
filter
reduce
slice
forEach
every
some
indexOf
join
类
原型和原型链
继承
原型链继承
构造函数继承
组合式继承
原型式继承
寄生式继承
寄生组合继承
new
new 中间的过程<br>
手写实现new
class
JavaScript的运行机制<br>
同步代码
异步代码
ES6
var,let,const<br>
rest参数
拓展运算符
数组和对象的解构 <br>
模板字符串
异步编程
setTimeout
setInterval
requestAnimationFrame
Promise<br>
async,await<br>
DOM
BOM<br>
CSS
CSS基础<br>
css选择器(按优先级排序)
!important<br>
行内样式<br>
ID选择器
类，伪类和属性选择器
元素和伪元素<br>
继承
通配符
盒模型
标准盒模型
width=内容宽度<br>
height=内容高度<br>
IE盒模型
width=border+padding+内容宽度
height=border+padding+内容高度
动画效果
display
CSS3<br>
布局
布局单位<br>
px
rem,em
%
vh,vw
两栏布局<br>
三栏布局
水平垂直居中
已知宽高<br>
绝对定位+负margin<br>
绝对定位+left+right+top+bottom+margin<br>
flex布局
不定宽高
绝对定位+tranform
flex布局
Flex布局
flex-direction
justify-content
align-items<br>
Grid布局
响应式布局
定位和浮动
清除浮动<br>
添加额外标签，设置其样式clear:both<br>
父级元素添加overflow:hidden，或者设置高度<br>
建立伪元素，设置clear:both
外边距重叠<br>
BFC
实际案例<br>
单行，多行文本溢出处理
实现一个三角形<br>
判断元素是否可视
HTML
行内元素
块级元素
HTML5
script标签的async和defer
跨域请求<br>
同源策略
JSONP
CORS<br>
简单请求
Origin中的源不在允许的范围之内，服务器就返回一个正常的HTTP响应<br>服务端检测没有Access-Control-Allow-Origin,就知道出错了<br>
在允许的范围中，服务器就会返回Access-Control-Allow-Origin<br>他表示接受那些域名的请求<br>
非简单请求<br>
预检成功
预检失败
Node正向代理
Nginx反向代理<br>
0 条评论
下一页
