前端八股文思维导图
2023-08-24 17:38:25 0 举报AI智能生成
前端八股文知识点汇总，学无止境，祝早日上岸、跳槽提薪
作者其他创作
大纲/内容
HTML&CSS
CSS整体认知
选择器
权重
布局
动画
变量
预处理器
布局方式
流动模型（Normal flow）
浮动（Floats）
定位（Positioning）
Flexbox
网格（Grids）
盒子模型
content box（内容区域）
padding box（内边距区域）
border box（边框区域）
margin box（外边距区域）
BFC（块级格式化上下文）
兼容性处理
动画
transition（过渡）
animation（动画）
JavaScript 全局
数据类型
原始类型（Primitive Data Types）
Boolean： 布尔类型，值为 true 或 false
Null： 空类型，只有一个值 null
Undefined：未定义类型，只有一个值 undefined
Number： 数字类型，如 1， 1.5
String： 字符串类型，如 'this is a string'
Symbol： 符号类型，由 Symbol 创建
对象类型（Object Data Types）
对象（Object）
数组（Array）
函数（Function）
日期（Date）
原型 & 原型链
原型（Prototype）：JavaScript的所有对象都会从原型中继承属性和方法。原型也是一个对象
原型链：原型对象也有自己的原型，因此形成了一个“原型链”：对象有原型，原型也有原型，一直延续至 null
闭包
this指向
异步
Promise 是一种处理异步操作的方法，它代表了一个异步操作的最终结果
async/await 是ES7引入的新的处理异步的方法，它们可以使异步代码看起来更像同步代码，使得代码的可读性更强
ES6/TypeScript
ES6（ECMAScript 2015）引入了许多改进和新特性，如let/const、箭头函数、模块化、类、解构赋值、Promise等
TypeScript是JavaScript的超集，引入了静态类型检查，更丰富的语法特性和工具支持
网 络
HTTP 协议
WebSocket
TCP/IP、四层/七层模型
TCP/IP 模型，包含网络接口层，网络层，传输层，应用层
OSI七层模型，包含物理层，数据链路层，网络层，传输层，会话层，表示层，应用层
缓存策略
HTTP 状态码
1xx - 信息响应，表示接收到请求并且继续处理
2xx - 成功，表示操作被成功接收并处理
3xx - 重定向，要完成请求必须进行更进一步的操作
4xx - 客户端错误，请求包含语法错误或无法完成请求
5xx - 服务器错误，服务器在处理请求的过程中发生错误
跨域问题及解决
性能优化
网站性能优化
减少 HTTP 请求：通过合并文件、图片精灵等方式
使用 CDN：通过网络分发服务来分发提供接近用户的网络节点，从而加快用户加载网页的速度
启用压缩：如开启 Gzip，可以大幅度减少因为 HTTP 响应所导致的数据传输时间
移除未使用的 CSS 和 JS：代码的轻量化能够加快页面的加载速度
异步加载资源：JavaScript 应在页面加载完成后再加载和执行，以不阻断 HTML 和 CSS 的加载
利用浏览器缓存：通过设置 Cache-Control，ETag 等 HTTP Header 来实现
Webpack 的优化
利用 SplitChunksPlugin 做代码分割
利用 tree shaking 和 Scope Hoisting 消除无用代码
对文件进行压缩，如 UglifyJsPlugin
对图片或者较大文件用 base64 进行转换
使用 Happypack 实现多线程来加速代码构建
DLL 动态链接库方式进行打包
图片的优化
根据实际需要选择正确的图片格式，例如，对于图标和简单的图像，使用 PNG 会比 JPEG 要好
对图片进行合理的压缩
使用图片懒加载，只在需要显示图片时再进行加载
对图片进行灰度化，降低图片的质量等
框 架
三大主流框架
Vue：易学易用且强大，学习曲线平缓，文档齐全，社区活跃，API 设计友好，易上手
React：Facebook 开源的 JS 库，主张组件化开发和响应式UI，引入更多的概念和学习成本
Angular：Google 开发和维护，提供了比 Vue 和 React 更加完整的开箱即用的解决方案，其中包含了大量的工具和功能，需要时间学习和适应
MV*模式
MVC (Model-View-Controller)
Model(数据模型)、View(界面视图)、Controller(控制器)
MVP (Model-View-Presenter)
Model(数据源)、View(用户界面)、Presenter(它决定何时去处理用户操作)
MVVM (Model-View-ViewModel)
Model(用户的数据模型)、View(用户看到的UI视图)、ViewModel(负责转换模型信息，操作视图)
工 程 化
Webpack 是当前最常用的模块打包工具，它可以将许多独立的模块按照依赖关系组合在一起，输出为静态资源。了解其工作原理、常用配置以及loader和plugin机制是非常必要的
Babel 是一个 JS 编译器，主要用于将 ES6 及其以上版本的 JS 代码转化为 ES5 甚至 ES3，以实现对旧浏览器的兼容
Linting：通过工具检查代码中的错误和不规范的地方，常见的有 ESLint，stylelint 等。
单元测试：对软件中的最小可测试单元进行检查和验证。对于前端来说，通常是对 JS 函数或者组件进行的测试，常见的测试框架有 Mocha，Jest 等。
Git：版本控制是工程化的重要一环。Git是最流行的版本控制工具，掌握基本的Git操作和工作流程是开发者必备的技能。
持续集成（CI）/持续部署（CD）：CI/CD 是现代化开发流程中非常重要的一环，它可以帮助我们自动化构建、测试、部署等步骤，提升工作效率。
代码规范：通过工具（如ESLint，Prettier等）和规范（如Airbnb JavaScript Style Guide）来保证团队的代码风格一致。
算 法
排序算法：冒泡排序，选择排序，插入排序，归并排序，快速排序等。
查找算法：处理大量数据，常见的如二分查找，深度优先搜索，广度优先搜索等。
图算法：常见的图算法如深度优先搜索（DFS），广度优先搜索（BFS）， Dijkstra 算法等。
动态规划：求解决策过程最优化的常用方法，它将问题分解为相互关联的子问题，在确定当前选择时，会根据子问题的解，选择最优解。
数据结构：数据结构指相互之间存在一种或多种特定关系的数据元素的集合。常见的数据结构有数组，栈，队列，链表，树，图等。
其 他
错误处理
Nginx 的部署
PWA
GIT 的使用
0 条评论
下一页
