前端八股文思维导图
2023-08-24 17:38:25 0 举报AI智能生成
登录查看完整内容
前端八股文知识点汇总，学无止境，祝早日上岸、跳槽提薪
作者其他创作
大纲/内容
前端八股文
选择器
权重
布局
动画
变量
预处理器
CSS整体认知
流动模型（Normal flow）
浮动（Floats）
定位（Positioning）
Flexbox
网格（Grids）
布局方式
content box（内容区域）
padding box（内边距区域）
border box（边框区域）
margin box（外边距区域）
盒子模型
BFC（块级格式化上下文）
兼容性处理
transition（过渡）
animation（动画）
HTML&CSS
Boolean： 布尔类型，值为 true 或 false
Null： 空类型，只有一个值 null
Undefined：未定义类型，只有一个值 undefined
Number： 数字类型，如 1， 1.5
String： 字符串类型，如 'this is a string'
Symbol： 符号类型，由 Symbol 创建
原始类型（Primitive Data Types）
对象（Object）
数组（Array）
函数（Function）
日期（Date）
对象类型（Object Data Types）
数据类型
原型（Prototype）：JavaScript的所有对象都会从原型中继承属性和方法。原型也是一个对象
原型链：原型对象也有自己的原型，因此形成了一个“原型链”：对象有原型，原型也有原型，一直延续至 null
原型 & 原型链
闭包
this指向
Promise 是一种处理异步操作的方法，它代表了一个异步操作的最终结果
async/await 是ES7引入的新的处理异步的方法，它们可以使异步代码看起来更像同步代码，使得代码的可读性更强
异步
ES6（ECMAScript 2015）引入了许多改进和新特性，如let/const、箭头函数、模块化、类、解构赋值、Promise等
TypeScript是JavaScript的超集，引入了静态类型检查，更丰富的语法特性和工具支持
ES6/TypeScript
JavaScript 全局
HTTP 协议
WebSocket
TCP/IP 模型，包含网络接口层，网络层，传输层，应用层
OSI七层模型，包含物理层，数据链路层，网络层，传输层，会话层，表示层，应用层
TCP/IP、四层/七层模型
缓存策略
1xx - 信息响应，表示接收到请求并且继续处理
2xx - 成功，表示操作被成功接收并处理
3xx - 重定向，要完成请求必须进行更进一步的操作
4xx - 客户端错误，请求包含语法错误或无法完成请求
5xx - 服务器错误，服务器在处理请求的过程中发生错误
HTTP 状态码
跨域问题及解决
网 络
减少 HTTP 请求：通过合并文件、图片精灵等方式
使用 CDN：通过网络分发服务来分发提供接近用户的网络节点，从而加快用户加载网页的速度
启用压缩：如开启 Gzip，可以大幅度减少因为 HTTP 响应所导致的数据传输时间
移除未使用的 CSS 和 JS：代码的轻量化能够加快页面的加载速度
异步加载资源：JavaScript 应在页面加载完成后再加载和执行，以不阻断 HTML 和 CSS 的加载
利用浏览器缓存：通过设置 Cache-Control，ETag 等 HTTP Header 来实现
网站性能优化
利用 SplitChunksPlugin 做代码分割
利用 tree shaking 和 Scope Hoisting 消除无用代码
对文件进行压缩，如 UglifyJsPlugin
对图片或者较大文件用 base64 进行转换
使用 Happypack 实现多线程来加速代码构建font color=\"#c9d1d9\" face=\
DLL 动态链接库方式进行打包
Webpack 的优化
根据实际需要选择正确的图片格式，例如，对于图标和简单的图像，使用 PNG 会比 JPEG 要好
对图片进行合理的压缩
使用图片懒加载，只在需要显示图片时再进行加载
对图片进行灰度化，降低图片的质量等
图片的优化
性能优化
Vue：易学易用且强大，学习曲线平缓，文档齐全，社区活跃，API 设计友好，易上手
React：Facebook 开源的 JS 库，主张组件化开发和响应式UI，引入更多的概念和学习成本
Angular：Google 开发和维护，提供了比 Vue 和 React 更加完整的开箱即用的解决方案，其中包含了大量的工具和功能，需要时间学习和适应
三大主流框架
组件化、虚拟 DOM
Model(数据模型)、View(界面视图)、Controller(控制器)
MVC (Model-View-Controller)
Model(数据源)、View(用户界面)、Presenter(它决定何时去处理用户操作)
MVP (Model-View-Presenter)
Model(用户的数据模型)、View(用户看到的UI视图)、ViewModel(负责转换模型信息，操作视图)
MVVM (Model-View-ViewModel)
MV*模式
框 架
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 条评论
回复 删除
下一页
