快速学习前端开发-前端知识体系
2024-09-24 10:10:25 5 举报AI智能生成
如何学习前端开发？有一个系统的体系能带你不走偏快速学习前端开发
作者其他创作
大纲/内容
js
基础知识
基础
原型，原型链
闭包
事件循环
作用域，作用域链
提升
异步
js异步解决方案发展和优缺点
异步方案
promise
async/await
类型判断
Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()
继承
es5、es6继承除了写法外有什么区别？
this
this的绑定规则和优先级
call 和 apply 的区别是什么，哪个性能更好一些
setInterval
上下文
堆和栈的区别？是数据结构还是内存？
Set、Map、WeakSet、WeakMap
new
全局作用域中，const、let不在window，在哪里？如何获取？实现原理
==转换规则
箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？
a.b.c.d 和 a['b']['c']['d']，哪个性能更高
ES6 代码转成 ES5 代码的实现思路是什么
为什么普通 for 循环的性能远远高于 forEach 的性能，请解释其中的原因。
数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少
正则
进阶
柯里化
算法
排序算法
冒泡排序
时间复杂度
改进
复杂度
洗牌算法
设计模式
观察者模式
订阅者模式
其他
setTimeout、promise、aync/await区别
数据结构
哈希表
实现
写一个单向链数据结构的 js 实现并标注复杂度
手写实现
算法实现
深度遍历，广度遍历
来个对象克隆函数？
基础实现
防抖节流
扁平化数组
new
promise
promise.finally
Promise.all 使用、原理实现及错误处理
race
限制最大并发请求数
使用迭代的方式实现 flatten 函数
a == 1 && a == 2 && a == 3，a？
实现一个 sleep 函数
比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现
call、apply、bind
其他功能实现
LazyMan类
LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food
Proxy 实现简单的数据绑定
css
实现
div 水平垂直居中
<img src="1.jpg" style="width:480px!important;”>，此代码不改如何让宽度是300px？几种方式？
无缝轮播
如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性
基础
介绍下 BFC、IFC、GFC 和 FFC
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。
html
标签
网络
http(s)
http2多路复用
https
https握手过程
HTTPS 握手过程中，客户端如何验证证书的合法性
中间人攻击
介绍下 http1.0、1.1、2.0 协议的区别？
为什么 HTTP1.1 不能实现多路复用
dns
cdn
tcp
三次握手四次挥手
udp
websocket
五层结构
跨域
状态码
缓存
cookie、session、token
为什么要减少请求
重定向
定义
目的
场景
方案
状态码
301
302
对seo的影响
替代方案
参考https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/241
浏览器
重绘重排
是什么
如何优化
输入url到页面渲染出来的过程
V8垃圾回收机制
浏览器缓存读取规则
可以分成 Service Worker、Memory Cache、Disk Cache 和 Push Cache，那请求的时候 from memory cache 和 from disk cache 的依据是什么，哪些数据什么时候存放在 Memory Cache 和 Disk Cache中？
SEO
永久性重定向（301）和临时性重定向（302）对 SEO 有什么影响
工程化
对前端工程化的理解？
构建工具
webpack
搭建本地mock服务
引入代码检查工具
请求代理？
构建
图片压缩
自动生成雪碧图
资源内联
根据浏览器构建
根据环境构建
构建性能（速度）优化
构建体积优化
引入单元测试
引入e2e测试
其他插件
pxtorem
热更新原理
webpack 中 loader 和 plugin 的区别是什么
babel 怎么把字符串解析成 AST，是怎么进行词法/语法分析的
前后端分离
如何进行前后端分离开发
mockjs
mockjs实践
mockjs请求拦截原理
模块化
对模块化的理解？模块化的目的是什么？
js模块化发展史？可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、<script type="module"> 这几个角度考虑。
css模块化
组件化
框架
Vue
key的作用
vuex
原理
mutation 为什么不能异步
双向绑定和 vuex 是否冲突
问题集
v-if、v-show、v-html 的原理是什么，它是如何封装的
Vue 中的 computed 和 watch 的区别在哪里
Vue 中的 computed 是如何实现的
nextTick 的原理
Vue 的父组件和子组件生命周期钩子执行顺序是什么
为什么子组件不可以修改父组件prop？修改了，vue是如何监控并警告的？
双向绑定原理（Model和View如何双向修改）
React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
flutter
拓展
组件开发
vdom
vdom的理解？是什么？为什么？
比原生DOM快？
项目设计
如何开始一个或设计一个项目？考虑什么？
前端路由实现
前端路由权限
埋点
埋点目的
方案
为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
登录机制
解决移动端 Retina 屏 1px 像素问题
移动端屏幕适配
如何处理中文输入（输入匹配）
骨架屏
ssr
性能优化
性能指标
vue 渲染大量数据时应该怎么优化？
1.按需加载局部数据, 虚拟列表，无限下拉刷新
2.js运行异步处理：分割任务，实现时间切片处理, 类似react fiber, 每次执行记录时间, 超过一定执行时间则settimeout或requestAnimation推迟到下一个时间片,一般一个时间片为16ms
3.大量纯展示的数据,不需要追踪变化的 用object.freeze冻结
vue 如何优化首页的加载速度？vue 首页白屏是什么问题引起的？如何解决呢？
解决办法：
1.优化 webpack 减少模块打包体积，code-split 按需加载
2.服务端渲染，在服务端事先拼装好首页所需的 html
3.首页加 loading 或 骨架屏 （仅仅是优化体验）
4.关联页提前加载基础包prefetch
5.cdn
6.缓存
7.合理使用web worker优化一些计算？？？
8.常规操作。cdn、减少请求、雪碧图、gzip、浏览器缓存什么的就不多说了，合理使用resource hint，即preload，prefetch, dns-connect等。9.图片方面，像淘宝，会优先使用webp，如果不支持再用jpg，以及，小图采用base64编码，雪碧图等
10.前端渲染上。使用raf渲染，不阻塞主线程。react里面已使用异步渲染？？
如何在 H5 和小程序项目中计算白屏时间和首屏时间，说说你的思路
前端项目如何找出性能瓶颈
安全
登录页加密
反爬虫
xss和csrf
异常捕获
实现 token 加密
介绍下前端加密的常见场景和方法
接口如何防刷
开发问题
在输入框中如何判断输入的是一个正确的网址
0 条评论
下一页
