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