前端知识库
2021-10-01 14:28:59 41 举报前端知识库是一个包含各种前端技术、工具和资源的综合性平台。它涵盖了HTML、CSS、JavaScript等基础语言，以及React、Vue、Angular等主流框架的使用教程和实战案例。此外，还包括了Web性能优化、响应式设计、跨浏览器兼容性等方面的知识。前端知识库旨在帮助开发者快速掌握前端开发技能，提高开发效率，实现优秀的用户体验。通过学习前端知识库，开发者可以不断提升自己的技术水平，为互联网行业的发展做出贡献。
作者其他创作
大纲/内容
浏览器
从输入url到页面显示发生了什么
网络篇
渲染篇
v8引擎工作原理
数据存储
栈空间
堆空间
垃圾回收机制
栈空间回收
堆空间回收
老生代 主垃圾回收器
新生代 副垃圾回收器
增量标记
js执行机制
生成AST
生成字节码
通过编译器和解释器 执行代码
eventLoop
事件循环和消息队列
宏任务和微任务
异步
浏览器缓存
强缓存
协商缓存
代理缓存
本地存储
cookie
sessionStorage
localStorage
安全
同源策略
跨域
CORS
JSONP
Nginx
xss攻击
CSRF攻击
安全沙箱
https
经典问题
performance面板
首屏时间计算
白屏问题分析
重绘和回流
防抖和节流
懒加载
网络
网络模型
OSI七层模型
TCP/IP四层模型
HTTP报文结构
起始行
头部
空行
实体
URI和URL
HTTP请求方法
哪些请求方法
GET和POST的区别
HTTP状态码
Accept系列字段
cookie字段
数据传输
定长数据和不定长数据
大文件数据
表单数据的提交
队头阻塞
并发连接
域名分片
HTTP代理
HTTP缓存
HTTP特点及缺点
HTTP/1
HTTP/2
头部压缩
多路复用
设置请求优先级
服务端推送
HTTP/3
HTTPS
握手过程
加密算法
签名验证
UDP
TCP 和 UDP 的区别
TCP/IP
TCP三次握手和四次挥手
流量控制
拥塞控制
数据结构与算法
设计模式
创建型
构造器模式
工厂模式
单例模式
原型模式
结构型
装饰器模式
适配器模式
代理模式
行为型
策略模式
状态模式
观察者模式
迭代器模式
性能优化
性能指标
优化策略
网络层面
构建策略
图像策略
分发策略
缓存策略
渲染层面
CSS策略
DOM策略
js阻塞策略
回流重绘策略
异步更新策略
Node.js
扩展技术
Nginx
docker
前沿技术
html
meta标签
src和href的区别
script标签defer和async区别
css
单位
盒模型
Bfc
Flex
float
position
布局
居中
js
数据类型
类型
检测
转换
this指向
闭包
作用域链
js为什么会有闭包
闭包怎么实现的
闭包与内存管理
面向对象
原型和原型链
创建对象
继承
模块化
commonjs
amd
cmd
es6 module
异步
回调函数
Promise
Generator
协程
async+await
Promise+Generator
事件
DOM
BOM
正则
高阶函数
ajax
websocket
vue
数据驱动
new Vue 发生了什么
Virtual DOM
组件化
patch
组件注册
异步组件
深入响应式原理
响应式对象
依赖收集
派发更新
nextTick异步更新Dom 类似MutationObserver
编译
性能优化
keep-alive组件利用LRU缓存淘汰
cache函数，利用闭包缓存
extend函数
编译阶段
cleanupDeps,剔除上一次存在但本次渲染不存在的依赖
traverse,深度观测数据解除循环引用
编译优化阶段，标记静态节点
对象层级不要过深，否则性能就会差
不需要响应式的数据不要放到 data 中（可以用 Object.freeze() 冻结数据）
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if
大数据列表和表格性能优化-虚拟列表/虚拟表格
防止内部泄漏，组件销毁后把全局变量和事件销毁
第三方插件的按需引入
路由懒加载
适当采用 keep-alive 缓存组件
服务端渲染 SSR or 预渲染
图片懒加载
防抖、节流运用
Vue Router
Vuex
webpack
构建配置
loader
plugin
性能优化手段 vue ui
打包时间
指标：speed-measure-webpack-plugin
缩小范围 vue-cli4
exclude 在loader中声明 缩小loader对文件的搜索范围
resolve，声明别名
多线程打包优化
HappyPack(作者不在维护)
thread-loader,webpack内置
并行压缩
parallel-webpack-plugin
■ webpack-parallel-uglify-plugin
■ uglifyjs-webpack-plugin
预编译
DllPlugin和DllReferencePlugin
webpack v4+已不推荐使用该配置，因为其版本迭代带来的性能提升足以忽略DllPlugin所带来的效益
缓存副本 没配置
babel-loader?cacheDirectory=true
TerserPlugin({cache:true})
HardSourcWebpackPlugin
打包体积
指标：webpack-bundle-analyzer
作用域提升
生产环境自动生效 分析模块间依赖关系，把打包好的模块合并到一个函数中
摇树优化Tree-Shaking
生产环境就能让摇树优化生效，摇树优化只对ESM规范生效，对其他模块规范失效。摇树优化针对静态结构分析，只有import/export才能提供静态的导入/导出功能。因此在编写业务代码时必须使用ESM规范才能让摇树优化移除重复代码和未使用代码
ESModule
■ uglifyjs-webpack-plugin
css
purgecss-webpack-plugin
vue-cli4 mini-css-extract-plugin
去除生产环境sourceMap
去除console.log打印及注释
分割代码
webpack v4使用splitChunks替代CommonsChunksPlugin
分割各个模块代码，提取相同部分代码，好处是减少重复代码的出现频率
按需加载
import()
魔术注解命名切割模块import( /* webpackChunkName: "login" */ "../../views/login")
const OmBook = () => import(/* webpackChunkName: "om" */ '@/views/om/book')
压缩资源
uglifyjs-webpack-plugin
动态垫片 没用
polyfill
打包原理 启动和构建流程
热更新原理
devServer.proxy本地代理解决跨域的原理
0 条评论
下一页
