前端开发知识体系
2019-02-25 13:39:36 49 举报AI智能生成
前端开发知识体系包括HTML、CSS和JavaScript等技术，以及React、Vue等主流框架。HTML是网页的结构语言，CSS用于美化网页样式，JavaScript用于实现网页交互功能。React和Vue是流行的前端框架，它们可以帮助开发者更高效地构建复杂的单页应用。此外，前端开发还需要了解浏览器的工作原理、网络协议、性能优化等方面的知识。总之，前端开发知识体系涵盖了从基础技能到高级应用的各个方面，是成为一名优秀前端工程师必备的知识储备。
作者其他创作
大纲/内容
前端知识体系
底层知识、基础原理
网络
网络协议
UDP
特点
不可靠性
无连接
不可靠
没有拥塞机制
高效
头部
端口号
数据报文长度
数据报文检验和（可选）IPV4
传输方式
一对一
一对多
多对一
多对多
TCP
状态机
建立连接3次握手
断开连接4次握手
序列号 Sequence number
Acknowledgement Number
数据窗口大小 Window size
标识符
子主题
ARQ
停止等待ARQ
连续ARQ
滑动窗口
拥塞处理
HTTP
基础
客户端请求
请求行
请求方法
GET
POST
...
POST和GET的区别
副作用和幂等
缓存
安全
数据传递request body
URL长度限制
编码和数据类型
URL
协议版本
请求头
空行
请求正文 Body
服务端响应
状态行
状态码
响应头
响应正文 Body
常见响应状态码
1XX 消息
2XX 成功
200 OK
204 No Content
205 Reset Content
206 Partial Content
3XX 重定向
301 Moved Permanetly
302 Found
303 See Other
304 Not Modified
307 Temporary Redirect
4XX 客户端错误
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
5XX 服务器错误
500 Internal Server Error
501 Not Implemented
503 Service Unavailable
常见头字段
通用头
正文头
代理 Proxies
底层协议
HTTPS
TLS加密
对称加密
非对称加密
公钥
私钥
TLS4次握手
SSL加密
HTTP/1.0
HTTP2/HTTP3
HTTP 2.0
二进制传输
多路复用
帧 frame
流 stream
header压缩
HPACK压缩
服务端Push
QUIK
DNS
输入URL到页面加载完成的过程
AJAX readyState
0 未初始化
1 启动
2 发送
3 接收
4 完成
websocket
什么是websocket
双向通信
应用层协议
基于TCP传输协议
复用HTTP进行握手
websocket的优点
双向通信，更加灵活
更好的二进制支持
较少的控制开销
支持扩展
websocket需要掌握的技术
如何建立websocket连接
如何进行双向通信
数据帧格式
如何维持websocket连接
Node中的websocket封装
ws
socket.io
原理
建立webSocket连接(ws握手)
客户端发起协议升级请求
服务端响应协议升级
Set-Websocket-Accept值的计算
数据帧 格式/原理
什么是数据帧
数据帧格式与规范
ws.send()
掩码算法
websocket数据通信
数据分片
连接保持/心跳
websocket安全防范
反向代理
XSS攻击
转义字符
CSP
CSRF
SameSite
验证Referer
Token
点面劫持
X-FRAME-OPTIONS
JS防御
中间人攻击
Restful API
微服务
进制转换
二进制转十进制
十进制转二进制
数据结构与算法
数据结构
线性表
定义
线性表的抽象数据类型
ADT list
数据对象
数据关系
基本操作
结构化初始操作
结构销毁操作
引用型操作
加工型操作
线性表的简单操作-合并线性表
存储方式
链式存储
顺序存储
应用
栈
队列
树
图
算法
查找
顺序查找
二分查找
索引查找
哈希查找
排序
插入排序
选择排序
交换排序
冒泡排序
快速排序
基数排序
外部排序
递归分治
尾递归优化
贪心算法
动态规划
背包问题
设计模式
浏览器机制
渲染
性能优化
网络相关优化
渲染过程相关优化
文件优化
其他优化
webpack优化
监控
requesyAnimation渲染庞大数据量
Git
提交新分支到远程分支
https://www.cnblogs.com/ydxblog/p/7988317.html
Git不再跟踪文件/文件夹（eg node_modules）
通过Git同步VsCode
git修改远程库
可视化
D3
简介
所有方法链式调用
属性修改
.attr()
.data()
dom操作
d3.selectAll()
d3.select()
.append()
.remove()
进入退出
.enter()
.exit()
转换
.transition()
.duration()
.delay()
事件处理
.on() 原生事件
方法分类
数据处理
DOM处理
其他
Echarts
Canvas
初始化
设置宽高
html标签上设置
js设置
css设置（不推荐，会糊，css设置会按比例缩放）
SVG
WebGL
概览
标准接口
扩展接口
事件
常量与类型
WebGL2(最新版本)
WebGL入门
WebGL context WebGL上下文
绘制场景 scene
shader 着色器
Vertex shader 顶点着色器
Fragment shader 片段着色器
buffer 缓冲器
IDE
vscode
重构代码
找到所有引用 shift+F12
重命名所有关联部分 F2
代码标签打开
https://www.v2ex.com/t/399867
配置代码自动格式化
setting
默认配置
用户配置
工作区配置
同步setting
常用快捷键
vscode 命令行 ctrl+shift+p
文件查找 ctrl+p
在所有文件中查找 ctrl+shift+F
在当前文件中查找 ctrl+F
代码格式化 shift+alt+F
JavaScript
ECMA规范
基本概念
关键字和保留字
变量
数据类型
基本类型
string
字符字面量
+ concat()
转换为字符串
.toString()
String()
ACCII码转换
str.charCodeAt()
String.fromChartCode(charcode)
number
浮点数
数值范围
NaN
数值转换
Number()
parseInt()
parseFloat()
toString(n)
包装类型 new Number()
重写的 valueOf() toLocaleString() 和toString()
boolean
包装类型 new Boolean()
重写的 valueOf()
Undefined
Null
引用类型
Object
Object.entries()
Object.fromEntries()
Object.values()
Object.keys()
删除对象属性
delete someObj.name
Array
数组基本操作
创建
new Array()
数组字面量 []
访问
方括号访问索引 arr[idx]
length属性 可读可写
检测数组
arr instanceOf Array
isArray(arr)
安全的类型检查
转换方法
对象基本方法
valueOf()
toString()
toLocaleString()
join()
ES6 Array.from()
ES6 Array.of()
栈方法 LIFO 和 队列方法 FIFO
push()
pop()
shift()
unshift()
重排序方法
reverse()
sort()
操作方法
concat()
slice()
splice()
位置方法
indexOf()
lastIndexOf()
迭代方法
forEach()
filter()
map()
数组中的项是否满足某条件
every()
some()
ES6 find() findIndex()
归并方法
reduce()
reduceRight()
ES6+数组方法
扩展运算符 ...
替代函数的 .apply()方法
数组浅拷贝
合并数组
与结构赋值结合使用
字符串转数组
Iterator对象转数组
Map和Set
gernerator
Array.from
类数组对象转数组
iterable对象转数组
Array.of()
arr.copyWithin()
arr.find() arr.findIndex()
arr.fill()
arr.entries() arr.keys() arr.values()
arr.includes()
arr.flat() arr.flatMap()
数组的空位
RegExp
Function
rest参数和arguments
Date
根据毫秒数返回日期
new Date()
+操作符
返回日期毫秒数
Date.parse()
Date.now()
Date.UTC()
继承的对象方法
格式化方法
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
toUTCString()
直接取得和设置日期值中特定部分的方法
getTime()
setTime()
getMonth()
getYear()
内置对象
Global
Math
操作符
&& ||
编码
https://www.cnblogs.com/xianyulaodi/p/6052334.html
结构控制语句
函数
ES6 解构赋值
数组 解构赋值
对象 解构赋值
字符 解构赋值
数值和布尔值 解构赋值
函数参数 解构赋值
圆括号问题
应用场景
交换变量的值
提取数据
取 (函数return) 对象的值
提取JSON数据
函数参数
函数参数的定义
函数参数的默认值
遍历 Map结构/ Object.entries() /Array.from()
ES6 proxy
example
面向对象
对象基础
创建对象
对象字面量 { }
从构造函数中实例化对象 new SomeObject()
对象成员
名字
值
属性
方法
访问/设置对象的属性和方法
点表示法
括号表示法
小技巧
深入了解对象属性
对象的属性
数据属性
特性
[[Configurable]]
[[Enumerable]]
[[Writeble]]
[[Value]]
访问器属性
[[Get]]
[[Set]]
对像属性的操作
定义/修改属性的特性
Object.defineProperty()
Object.defineProperties()
读取属性的特性
Object.getOwnPropertyDescriptor()
对象的遍历
for of
for in
创建对象实例
创建对象基础
工厂模式
构造函数模式
普通构造函数模式
new操作符
构造函数创建对象实例的问题
原型模式
理解原型对象
原型对象
普通原型模式
内置对象的原型
原型模式创建对象实例的问题
组合使用构造函数和原型模式
更多创建对象实例的方式
动态原型模式
寄生构造函数模式
稳妥构造函数模式
继承
原型链
基于原型链的继承
基于构造函数的继承
组合继承
其他继承方式
原型式继承 Object.Creat()
寄生式继承
寄生式组合继承
ES6 class继承
class基本语法
类中this的指向
默认指向类实例
类方法单独使用时，遵循this指针的指向规则
使类方法this保持指向类实例的解决方法
静态方法 static
取值函数get和存值函数set
set methodName() {}
get methonName() {}
类方法名表达式 [变量]() { }
类名表达式
私有方法和私有属性
class继承
extends关键字
super关键字
mixin模式实现
变量、作用域、闭包、this、内存
作用域
Js编译器原理
编译步骤
分词/词法分析
解析/语法分析
代码生成
理解作用域
处理涉及模块
引擎
工作流程
编译器
LHS
RHS
变量未声明
作用域嵌套（作用域链）
工作模型
词法作用域（Js）
修改作用域
eval
with
try/catch
let
动态作用域（Perl、Bash等，作为了解）
函数作用域和块作用域
提升
闭包
作用域和闭包
setTimeout()
闭包函数导致Js不会对其进行垃圾收集，因还有引用
事件监听函数
只要使用了回调函数，实际上就产生了闭包
实际问题
循环和闭包
块级作用域
this
箭头函数
bind() 更好的解决方案
隐式传递对象引用
ES6/7/8 新基础特性
let、const
不存在变量提升
暂时性死区
不允许重复声明
const
原型继承和Class继承
模块化
浏览器模型 BOM
浏览器缓存机制
缓存位置
缓存策略
强缓存
协商缓存
网页模型 DOM
Node-节点
12种Node类型 someNode.nodeType
Document类型
Element类型
Node属性
nodeType
nodeName
nodeValue
childNode
childNode[idx]
childNode.item(idx)
.length
nodeList转数组
firstChild
lastChild
parentNode
nextSibling
previousSilbling
节点关系
父子节点
兄弟节点
Node节点方法
someNode.appendChild( Node)
someNode.cloneNode( true/false) 深拷贝（含子节点）/浅拷贝（不含子节点）
DOM操作常见问题
原生拖放dragable https://segmentfault.com/a/1190000019554950
缩放 https://segmentfault.com/q/1010000016883342
Element
.scrollIntoView(true/false)
宽高
client
Element.clientHeight
Element.clientWidth
Element.clientLeft
Element.clientTop
scroll
Element.scrollHeight 只读
Element.scrollWidth 只读
Element.scrollLeft 可读可写
Element.scrollTop 可读可写
offset
offsetTop
offsetWidth
offsetHeight
offsetLeft
HTML事件模型
事件委托
事件绑定常见问题
非表单元素绑定 键盘事件
tabindex属性
contenteditable属性
模拟事件
模拟鼠标hover
Js图形
Svg
three.js
原生WebGL
JSON
网络编程
fetch
常用头字段
网络通讯数据类型
异步编程
EventLoop
调用堆栈 the call stack
消息队列 message queue
Heap
事件循环
宏任务与微任务
Promise是微任务
setTimeout是宏任务
回调函数
回调地狱
事件监听
发布/订阅
Promise 异步操作状态机
对象的状态不受外界影响
一旦状态改变，就不会再变
优点
缺点
无法取消Promise
如果Promise没有回调函数，内部的异常不能捕获到
pending状态时无法得知Promise的进展
代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆then，原来的语义变得很不清楚。
Promise新建后就会立即执行
Promise会吃掉错误
Promise实例基本用法
创建Promise
指定回调函数 Promise.prototype.then()
捕获异常 Promise.prototype.catch()
ES2018 Promise.prototype.finally()
Promise对象用法
Promise.all()
Promise.race()
Promise.resolve() 将对象/function封装为一个Promise
参数是Promise实例
参数是一个thenable对象
参数不是具有then方法对象，或者根本不是对象
无参数
Promise.reject()
参数直接会作为rejected的返回值
提案 Promise.try()
async实现
new Promise实现立即执行的匿名函数
promise封装异步加载图片
promise封装AJAX操作
resolve的也是Promise对象的情况
generator与Promise结合
Iterator 迭代器
.next()
for...of
其他遍历方比较
for...in
forEach
for()
Generator 可遍历状态机
创建generator
调用Genrator函数
调用指针.next()
yield表达式
yield 函数，则交出当前函数的执行权给yield跟的函数（即暂停执行）
没有yield的generator函数
普通yield
yield *
执行另一个Generator
遍历iterator
遍历数组
遍历字符串
遍历二叉树
.next()无参数
next()带参数
generator实例方法
Generator.prototype.throw()
Generator.prototype.return()
g.next() g.return() g.throw()区别
G中的this new
协程
上下文
异步操作同步化表述
控制流管理
封装Iterator接口
for...of遍历generator
斐波那契数列
作为数据结构
Thunk
Async/Await
调用Async
await
返回的值是后面跟的异步操作返回的值
后面跟promise，返回类似.then()方法接收的参数
await等到promise对象状态改变，才继续执行
实现原理
自动执行的generator
并发
嵌套Async函数
async函数执行返回的是一个Promise对象，所以直接调用其是异步的操作
并发和并行
《你不知道的JavaScirpt》
console.log()也可能被异步化，解决是使用Debuuger
竞态条件（并发时 race）
并发协作
响应大批量数据时候阻塞UI、界面操作的解决方案
事件循环（宏任务）和任务队列（微任务）
离线应用（PWA）与客户端存储
WebWorker
注意点
同源限制
DOM限制
全局对象限制
通信限制
脚本限制
文本限制
主线程 main.js
新建worker线程
消息通信
发送 woker.postMessage()
响应
成功响应 worker.onmessage()
错误响应 worker.onError()
关闭 worker.teminate()
worker线程 woker.js
监听主线程事件
self.addEventListener()
加载脚本
importScripts()
关闭 self.close()
数据生命周期
数据存储大小
与服务端通信
CMD规范 nodeJS
导出
module.exports 和 exports变量
引入
require()
require只能在Node端使用动态（变量）加载
浏览器端require只能根据webpack的规则进行动态（变量）加载，即'文件路径+文件名变量' 的方式
require.resolve()
AMD规范 客户端JS
define()
UMD兼容AMD和CMD
ES6 规范（ES Moudle）ESM
导出
export命令
export 普通输出
export default 默认输出
普通输出和默认同时输出
导入
import命令
import anyName from 'export-default.js'
import * as somename from 'filenaem.xx'
import 'lodash'
导入导出复合写法
模块的继承
跨模块常量
import( ).then( ) 函数
按需加载
条件加载
前端框架
MVVM原理
概念
View 页面
Model 数据模型
ViewModel View和Model之间的媒介
核心
数据绑定
单向绑定
双向绑定
主流框架的实现
Angular 脏数据检测
Vue 数据劫持
路由原理
hash实现模式
history实现模式
Virtual Dom
JS模拟创建DOM对象
判断差异
比较差异的算法
判断属性的差异
判断数组的差异
渲染差异
遍历树
局部更新DOM
React
HelloWorld
JSX表达式
使用时候的注意点
属性值
“ 字符串”
{ 变量/表达式 }
无值的属性 默认为True
展开属性 { ...多个属性构成的对象}
属性名
class => className
tabindex => tabIndex
JSX嵌套
嵌套JSX
嵌套React组件
JSX防注入攻击
react元素语法糖方法 React.creatElement()
JSX点表示法
Fragment <></>
元素渲染
vitualDOM
组件
定义组件必须首字母大写
class 定义 首字母大写
function 定义 首字母大写
组件渲染到页面
组件嵌套
定义中的this.props.属性名对应 => 组件实例中自定义属性
自顶而下编写模式
自底而上编写模式
生命周期
constructor
getDefaultProps
getInitialState
componentWillMount
componentDidMount
shouldComponetUpdate
componentWillUnMount
class constructor中需绑定onClick的回调函数this，以使得其this生效
onReact合成事件= { JS表达式}
条件渲染
JS写if else渲染条件
&&运算符
三元运算符？:
不渲染 return null
列表（循环）渲染和key属性
JSX中嵌入map
表单
双向绑定的实现
状态提升
深入React
类型检查 'prop-types'
比较完整的验证器实例
限制只能传递单个子代
为属性制定默认值
‘defaultProps’
static defaultPros = { } 提案
静态类型检查
flow
typescript
非受控组件
高阶组件
React-Router
安装
<Router></Router>
导航
Link
to=
NavLink
activeClassName=
<Redirect />
<Route />
exact
path=
component=
render=
传参 props
children=
<Switch> 排他性路由
<Fade >
Router Hook
<ScrollTop />组件
默认路由
嵌入HTML
懒加载/代码分割
切换动画
react-transition-group
CSSTransition
css-class
in
timeout
unMountonExit
classNames
asyncComponent
配合router
import()
webpack 代码分隔
快照 reactSnapShot
常见问题
批量加载图片
map
src={require('./'+imgName+'.png')}
setState什么时候是同步的什么时候是异步的
生命周期的Update更新机制，非想象中那样
DOM操作
ref
DOM选择限制在当前组件作用域中(当有复用的组件时候，优势就显现了)
使用ref
React.creatRef()
回调ref
document 选择器（不推荐）
和普通DOM一样
数据模型总结
单向数据流 props
只读性
状态数据流 state
setState()
反向数据流
input
value
onChange
子组件input绑定onChange事件为父组件props传来的回调函数，
父组件通过props向子组件传递处理数据改变的回调函数，state在父组件中定义和改变
跨层级反向数据流context
跨层级数据流
context
const contextName=React.createContext( defaultValue )
父组件传值 ContextName.Provider
任意层级子组件接收 ContextName.Consumer
refs
使用场景
处理焦点、文本选择或媒体控制。
触发强制动画。
集成第三方 DOM 库
复杂数据通讯
Redux
什么情况下需要用到Redux
mobx
diff算法
key
React Hook
使用React Hook的动机
组件状态逻辑复用
优化复杂组件可读性
拥抱函数式编程的优点
可与Class组件共存
state Hook
基础Hook
useState
useEffect
useContext
特殊Hook
useReducer
useContext+useReducer 实现Redux/mox
useCallback
useMemo
useRef
自定义Hook ：复用状态逻辑
useXXX
理解useEffect
使用useEffect模拟componentDidMount
class中的心智模型 mount/update/unmount
如何在useEffect中正确地请求数据
[]
setXXX的处理
注意useState中的闭包
上一次的effect会在重新渲染后被清除
effect中mount和update皆为渲染
effect心智模型
清除(上次)渲染
告诉React去比对你的Effects
依赖数组参数[deps]
只在某个useState改变时候使用effect
关于依赖项不要对React撒谎
让Effects自给自足 setXXX(xxx=>xxx+1)
React-redux
store
reducer
action
connect()
store.dispatch()
action对象/action创建函数
React工程配置（徒手）
项目目录指南
babel
依赖包
babel-core
babel-cli
preset-env
preset-react
@babel/plugin-proposal-class-properties
@babel/plugin-syntax-dynamic-import
webpack
webpack-cli
webpack-dev-server
style-loader
css-loader
babel-loader
react
react-dom
less
less
less-loader
配置指南
antd
redux
React源码阅读
.fixtures
.pakages
npm/
src/
index.js
pakage.json
readme.md
.scripts
Vue
Vue基础
基础知识
Vue实例
创建一个Vue实例 new Vue()
Vue选项对象
DOM选项
el
templete
render
renderError
数据/方法选项
data
props
propsData
computed
method
watch
生命周期钩子选项
实例的生命周期
new Vue()
beforeCreate()
Created()
beforeMount()
Mounted()
BeforeUpdate()
Updated()
Activied
Deactivied
beforeDestroy()
Destroyed()
errorCaptured
资源选项
directive
filters
component
组合选项
其他选项
Vue对象内置方法
Vue.extend
Vue.nextTick
Vue.set
Vue.use
Vue实例的数据、属性与方法
响应式数据
实例属性
vm.$data
vm.$props
vm.$el
vm.$options
vm.$parent
vm.$root
vm.$children
vm.$slots
vm.$scopedSlots
vm.$refs
vm.$isServer
vm.$attrs
vm.$listners
实例方法
数据方法
vm.$on
vm.$once
vm.$off
vm.$emit
事件方法
vm.$mount
vm.$forceUpdate
vm.$nextTick
vm.$destroy
Vue选项对象中的内置属性
Vue计算属性 computed
getter
setter
Vue方法 method
Vue监听属性 watch
Vue语法
数据绑定的语法
Mustache写法 {{ }}
指令 v-
v-for
v-if
v-show
v-else
v-else-if
v-on 缩写 @
v-bind 缩写 :
v-model
Vue组件
组件注册
全局注册Vue.component
局部注册
单文件组件
模块系统
组件通信
父子组件通信
父>子
子>父
$emit
v-on
$event
自定义输入组件v-model
兄弟组件通信
查找父组件中的子组件
跨多级组件通信
provide/inject
任意组件通信
Vuex
插槽slot
动态组件
is属性
生命周期钩子函数
props emit v-model
$emit的使用
子组件 this.$emit( )
父组件
v-on:emitEvnet/@emitEvnet=\
computed和Watch的区别
computed()
computed传参
keep-alive组件有什么用
v-show和v-if的区别
组件中的data什么时候可以使用对象？
extend能做什么
mixin和mixins的区别
vue原理
响应式原理
object.defineProperty的缺陷
编译过程
NextTick原理
服务端渲染SSR
react next.js
vue nuxt.js
多媒体
音频 audio
视频
动画
帧动画 window.reqyestAnimationFrame( func )
其他常考知识点
call、apply、bind
手写call、apply、bind
区别
call()、apply()
bind()
new的原理
instanceof的原理
数据计算精度问题？怎么解决
垃圾回收机制
Js工具库
Lodash深拷贝
markdown 解析
remarkble
markdown-it
Js动画
utils
根据userAgent判断访问平台
<ScreenScroll> react移动端滚屏组件
函数重载
ECMA规范阅读计划
Statement and Declaration 定义和声明
Statement 语句
BlockStatement 块
VariableStatement 变量
EmptyStatement 空
ExpressionStatement 表达式
IfStatement if语句
BreakbleStatement break语句
IterationStatement 迭代器
SwitchStatement Switch
CountinueStatement countinue语句
ReturnStateMent return语句
WithStateMent with语句
LablledStateMent 标记性语句
ThrowStatement 抛出异常语句
TrySatement try语句
DebuggerStatement debugger语句
Decalaration 声明
HoistableDeclaration 可撤销声明
FunctionDeclaration 函数声明
GeneratorDeclaration Generator声明
AsyncFunctionDeclaration Async函数声明
AsyncGeneratorDeclaration Async-Generator声明
ClassDeclaration 类声明
LexicalDeclaration 词汇声明
Functions and Classes 函数和类
Function Definitions 函数的定义
Syntax 语法
如何高效阅读懂ECMA规范？
TypeScript
什么是TypeScript
安装TypeScript
HelloTypeScript
Babel
转换JSX
语法兼容编译
兼容语法特性Polyfill
代码压缩
跨平台开发
移动端
禁用设备旋转
JS根据设备高度宽度比例动态判断
使用vmax、vmin单位解决高度宽度问题
整屏滚动
transform
touchstart touchmove touchend
https://www.jianshu.com/p/3f7dfa92f044
轮播图
移动端点击(tap touch)高亮
浏览器兼容样式
浏览器前缀
小程序
下拉刷新
https://blog.csdn.net/ruffaim/article/details/78839214
html标签使用
容器
div - view
包装元素
block
渲染html元素
<rich-text node=\"{{html}}\"></rich-text>
swiper
不能随内容自适应高度，只有Js计算出子元素高度 做数据绑定或者设置overflow
尺寸单位
rpx
{{ }}
api
wx.showloading
wx.makecall
wx.clipboard
滚动问题
微信小程序
配置
路由
wx.redirectTo
wx.navigateTo
提示
wx.showLoading
wx.toast
基础使用
wx:for循环
事件类型
传参
绑定传参数据 data-dataName
获取传参数据 (事件处理函数中)
使用组件
组件定义
tagName.js
Component API
Compoenent Doc
tagName.json
tagName.wxml
tagName.wxss
组件引用
parent.json
父组件>子组件
子组件>父组件
监听事件
子组件触发事件
组件生命周期
BUG
小程序中margin问题
ios Date.parse()失效问题
Chrome插件
入口文件-manifest.json
插件窗口页面-popup.html
插件窗口逻辑-popup.js
font color=\
《深入浅出NodeJs》
Node简介
诞生历程
2009 Ryan Dahl(C/C++)
起源
V8
Node的特点
异步I/O
事件与回调函数
单线程
Node的应用场景
I/O密集型
不擅长CPU密集型？No，诀窍是合理调度
和遗留系统和平共处
分布式应用
Node使用者
为了前后端编程环境统一
高性能I/O实时应用
并行I/O高效利用分布式环境
并行I/O抛弃同步式顺序任务
云计算平台提供Node的支持
游戏开发
工具类应用
Node模块机制
Js的变迁
工具类库 > 组件库 > 前端框架 > 前端应用
commonJS规范
模块规范
模块引用
模块导出
模块标识
Node的模块实现原理
Node原生核心模块
编写供Node使用的C/C++模块
模块调用栈
包与NPM
包结构
package.json
bin
lib
doc
test
包描述文件和npm
name
description
version
keywords
maintainers
contributors
bugs
licences
dependencies
hompage
os
cpu
engine
builtin
directories
implements
scripts
前后端公用模块
AMD规范
CMD规范
同步/异步 阻塞/非阻塞
为什么要用异步I/O
用户体验
资源分配
多线程
异步I/O实现现状
异步I/O和非阻塞I/O
操作系统内核对于I/O的调用方式
轮询
轮询技术
read模式-最原始、性能最低
select模式-在read上改进
poll
epoll-Linux下效率最高的轮询方式
kqueue-FreeBSD下的epoll
IOCP-windows下近似理想的异步I/O
理想的非阻塞异步I/O
真实的非阻塞异步I/O
Node采用了libv作为抽象封装层，使得在各平台中的异步I/O模式可以兼容
Node是单线程？No!
Node的异步I/O
Tick
事件循环原理
观察者（生产者/消费者模型）
请求对象
执行回调
模型
(执行中的) 主线程
（Node内核操作中的）线程池 （I/O线程）
异步调用操作
非I/O的异步API
定时器
process.nextTick()
setImmediate()
事件循环中的观察者是有优先级的
事件驱动的高性能服务器
函数式编程
高阶函数
eg
数组函数forEach()、map()等
函数中封装Promise return new Promise()
偏函数用法
异步编程的优势与难点
传统模式
同步I/O，使用多线程
问题
多线程的上下文切换开销
线程锁
编写C/C++调用系统底层接口，自己实现异步I/O
可以达到很高的性能，但是调试和开发门槛太高，花费大量精力
Node的优势
基于事件驱动的非阻塞I/O模型
并行
分布式计算
云
异步编程的难点/解决
异常处理
Promise
事件发布/订阅模式
难以阻塞代码
Async/Await + Promise
多线程编程
child_process
cluster
异步编程解决方案
Promise/Deffered模式
generator
异步并发控制
内存控制
V8垃圾回收机制
高效使用内存
作用域/作用域链
内存泄漏
慎将内存用作缓存
关注队列状态
内存泄漏排查
大内存应用
理解Buffer
构建TCP服务
构建UDP服务
创建HTTP服务
HTTP报文
tcp握手 3次握手/4次握手
http/https模块
http模块
事件驱动模式
http模块原理
ServerRequest和ServerResponse对象
二进制模块http_parser
HTTP请求与响应
请求
HTTP服务的事件
connection
request
close
checkContinue
connect
upgrate
clientError
HTTP客户端
代理
构建webSocket服务
Node使用websocket的优势
websocket中事件的模式和Node事件模型几乎无差
websocket实现了客户端与服务器的长连接，而Node擅长与大量客户端保持高并发连接
websokect与传统http服务相比的优势
基本使用
客户端
服务端
通过http发起websokect请求
网络服务安全
构建Web应用
基础功能
数据上传
restful
页面渲染
玩转进程
服务模型的变迁
多进程
核心概念
版本管理 nvm
repl 命令行环境
包管理 npm
Node命令
异步操作
全局对象和全局变量
全局对象
global
process
console
全局函数
clearTimeout()
setInterval()
clearInterval()
Buffer()
全局变量
_filename
_dirname
CommonJS规范
事件-Events模块
Node原生模块
path
__dirname
path.resolve()
path.join()
http
clientRequest
abort
continue
information
response
socket
upgrade
server
checkExpectation
serverResponse
finish
incomingMessage
aborted
.exec()
发出请求
http.get() 发送get请求
fs
Node包管理
npm
官网
npm CLI命令行
基本命令
安装/卸载 npm install/uninstall
pakage.json保存位置
-P 默认
-D
-E
-O
--no-save
-B
包保存位置
项目目录安装 无参数
全局安装 -g
更新 npm update
搜索 npm search
依赖 dependencies
pakage.json & pakage.lock.json
生成pakege.json-npm init
淘宝镜像cnpm
registry
yarn
Node自动化测试/爬虫
selenium-webdriver 【测试老手】
drivers
Chrome
IE
edge
Firefox
Safari
useAge
builder() 浏览器实例
浏览器实例配置
.forBrowser( 'browserName')
.setChromeOptions()
.usingServer()
（最终调用）.build() 实例化
.get( url ) 异步
.findElement( By.css('') )
.getText()
getAttribute(\"innerHTML\")
.wait( )
.sendKeys( )
.quit( )
BY() 选择器
Key 封装键鼠事件
until 等待模块
API文档
chromeOption
puppteer 【Chrome官方 新】
Node多进程开发
Node Cluster原理-Taobao FED
利用所有的CPU内核 nodebestpractices-github
Cluster
PM2
cluster多进程运行原理
主进程
cluster 主进程
工作进程
worker 工作进程
process 当前进程
Node服务器框架
http服务器
.get()
.request()
创建服务器实例
const server=new http.server()
request对象
.url
.method
.headers
.setEncoding(\"utf8\")
.addListener()
\"data\"
\"end\"
处理异步操作
response对象
writeHead()
write()
end()
.listen()-启动服务器实例，并指定监听端口、IP
https
自制证书
openSSL
创建https
express
koa
创建koa服务器
const Koa=require('koa')
const app=new Koa()
中间件
app.use()
常用组件
路由 koa-router
异步、同步组件
koa-mongo
context ctx
ctx.req
ctx.res
ctx.request
ctx.response
ctx.state
ctx.app
.listen()
单页应用路由路径rewrite
nginx rewirte
websocket服务器
http-proxy代理服务器
使用
Node-开发C/C++模块
Node封装小工具
log单行输出
https://segmentfault.com/a/1190000009152318
vscode js输出https://www.jianshu.com/p/2a2df9c73fee
apidoc
数据库操作
MongoDB
前端工程化
entry 入口
output 出口
filename
loader 处理非Js文件
use
plugin 定制打包任务
mode dev/prod环境
resolve 定制模块路径解析(Module resolution)
devServer
historyApiFallback: true 使用router时候...
配置文件
webpack.config.js
webpack.dev.config.js
webpack.prod.config.js
安装webpack
配置config
编译
Loader:管理(非Js)资源
样式依赖
loader基本使用
常见loader
file-loader
csv-loader
xml-loader
markdown-loader
输出控制 output
mode
sourceMap
inline-source-map
打包模式
build模式
watch模式
dev模式
resolve
.alias
plugins
html-webpack-plugin
代码拆分
entry手动拆分
SplitChunksPlugin （optimization中-去重插件）
chunks
动态入口
借助ES6 import
output/chunkFilename
打包分析
source-map-explorer
webpack-bundle-analyzer
target:'node' 打包Node
external: 不打包某些依赖
项目目录生成md
mddir
生成项目目录
HTML
C
C Primer Plus(第六版)
1 初识C语言
2 C语言概述
#include <studio.h> 模块预处理
变量申明
short
int
long
unsigned
char
float
double
_Bool
_Comples
_imaginary
void
int main() 函数申明
3 数据和C
数据类型申明关键字
K & R
C90
signed
C99
_Bool 布尔型
_Complex 复数
_Imaginary 虚数
位、字节和字
整数和浮点数、数据精度
进制
sizeof()
字符串
转义
scanf()
4 字符串和格式化输入/输出
strlen()
常量
#define
常量 #define TAXRATE 0.015
格式化输入/输出
printf()
%d
5 运算符、表达式和语句
while
typedef
运算符
运算符优先级
表达式和语句
复合语句、自动类型、强制类型转换
6 7控制语句
循环
分支与跳转
8 字符输入/输出验证
9 函数
10 数组和指针
11 字符串和字符串函数
12 存储类别、连接和内存管理
13 文件输入/输出
14 结构和其他数据形式
15 位操作
16 C预处理器和C库
17 高级数据表述
链表
ADT
队列ADT
二叉树ADT
C和指针
1 快速上手
2 基本概念
3 数据类型
4 控制语句
5 操作符和表达式
6 指针
7 函数
8 数组
9 字符串、字符和字节
10 结构和联合
11 动态内存分配
12 使用结构和指针
13 高级指针话题
14 预处理器
15 输入输出函数 I/O
16 标准库函数
17 经典抽象数据类型
18 运行时环境
Learn C
Basic
变量和数据类型 Variables and Types
使用数据类型申明
#define关键字 申明常量
const 关键字申明常量
数组 Arrays
Multidimensional Arrays
Conditions
Strings
For loops
While loops
Functions
Static
Advance
指针 Pointers
Structures
Function arguments by reference
Dynamic allocation
Arrays and Pointers
递归 Recursion
链表 Linked lists
二叉树 Binary trees
Unions
Pointer Arithmetics
Function Pointers
vim
小结
指针
数组操作
普通数组
指向数组的指针
寄存器
多文件
代码格式化 clangformat
设置编码（中文乱码问题）
Go
标准库
math
.Abs()
子库
math/rand
重学 Python
基本数据类型
str 字符串
.split(' ')
list 列表(数组)
解构赋值
队列 deque
CSS
语法
选择器
值和单位
盒模型
外边距 margin
简写属性 margin
margin-left
margin-top
margin-buttom
margin-right
边框 border
内边距 padding
内容区域 content
outline
BFC 块级格式化上下文
属性详细
背景 backgrounds
盒模型相关 box model
轮廓 outline
盒子边框 border
content
文字 text
颜色 color
位置 text-align
下划线 text-decoration
大小写变换 text-transform
字间距
首行缩进 text-indent
字母间距（中文汉字间距）letter spacing
单词间距（词语间的空格长度）word spacing
行高 line-height
文字方向 text-direction
文字阴影 text-shadow
字体 fonts
字体 font-family
字体大小 font-size
字体风格 font-style
font-variant
字体粗细 font-weight
简写属性 font
图标 icon
link 引入图标库
<i class=\"iconName\">
链接样式 :link
:link
:visited
:hover
:active
列表 list-style-
列表前缀样式 list-style-type
列表前缀图标 list-style-image
列表前缀位置 list-style-position
简写属性 list-style
表格 tables
表格边框 border
表格宽高 width和height
水平位置 text-align
垂直位置 vertical-align
表格内边距 padding
表格聚焦 :hover
交叉样式 :nth-child()
颜色 background-color和color
自适应表格 overflow
更多
display
max-width
position
overflow
inline-block
align
combinators
CSS布局
层叠上下文 z-index
居中布局
水平居中
通用方法 被居中元素高度未知
css3 transform
flex
常规文档流中
内联元素
text-align
块元素
margin
display改为内联元素
float文档流
绝对定位元素 position:absolute/fixed
垂直居中
通用方法 被居中元素宽高未知
被居中元素为单行文本
已知元素宽高
水平垂直居中
绝对定位元素 position:absolute/fixed
负边距
table-cell
font-size配合vertical-align
文本内容
display:table-cell
table-cell的妙用
absolute模拟绝对定位fixed
grid布局
CSS动画
transition
@keyframe
CSS文字排版
连字符换行
hyphens: auto
文字换行
行尾元素::after{ content:'\\A'; white-space: pre }
white-space
pre-line
pre
pre-wrap
文本行斑马条纹
:nth-child(even)
调整tab宽度
tab-size: 2;
连字
文字溢出
text-overflow
overflow:hidden
width
nowrap
wrap
div文字单行显示
不换行
不换行多余文字显示点
多行文字显示省略号
换行
文字设置不能选中
溢出
去除浮动影响，防止父级高度塌陷
link与@import的区别
CSS预处理器（Sass/Less/Postcss）
https://blog.csdn.net/u012302552/article/details/77923348
input placeholder样式
微信小程序placeholder样式
input 选中的outline
input 密码圆点格式
<a />
链接样式定制
移动端布局
《精通CSS》
相邻元素border重叠变宽
相邻选项边框
https://juejin.im/post/5d75adfbe51d4561e84fcc9c
scroll-snap-*
overscroll-behavior 阻止滚动传播
scroll-behavior: smooth;
阻止事件冒泡
touchmouve
滚动条定制
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-thum
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-corner
::-webkit-resizer
BEM命名规范
容器 组件 状态
webpack限制CSS作用域
参考资料合集（主要部分）
MDN文档
《JavaScript高级编程》
《你不知道的JavaScript系列》
阮一峰博客系列
Js入门
ES6入门
掘金
《前端面试之道》
WIKI
《剑指offer》
面试的流程
面试的基础知识
编程语言
高质量的代码
解决面试题的思路
优化时间和空间效率
面试中的各项能力
流程
环节
行为面试 5~10min
技术面试 90%
基础知识是否扎实
能否写出高质量的代码
思路是否清晰
是否有优化效率的能力
学习能力、沟通能力等综合素质
面试者提问
禁忌
别问面试结果
别问薪水
别问和自己职位不相干的问题
推荐的问题：
与应聘职位或者项目相关的问题
让面试官对自己提供一些技术上建议
重新回答刚才没有答好的问题
项目
聊天室ChatRoom Vue+nodeJs+mogoDB
PC端
功能
注册/登陆
先使用JSON做注册登陆的增删该查
页面
首页
登陆/注册页面
注册页面
注册信息
基本信息入库
头像上传
登陆验证
工具
nginx
nodeJS
todoList
记录代办事项完成情况
架构
https://carbon.now.sh/
线性表-数据结构关系
操作限制
节点变化
线性表的变型
维数扩展
数组
数据元素扩展
广义表
数据元素限制
串
前驱后继数
0 条评论
下一页
为你推荐
查看更多
