这是我在自学前端的第37天，对着一个简单的HTML页面卡了整整一下午。

不是逻辑错误，不是语法问题，只是我不知道为什么，一个 div 死活居中不了。

那时候的我，以为前端就是写写页面、调调样式，直到后来才发现，前端远不止“看得见”的那部分。

从 HTML 到 CSS，从 JavaScript 到 Webpack、ESLint、Git 规范、组件封装……我一步步踩坑、一步步成长。

今天我把这一路上整理的资料、笔记、学习路径都整理了出来，希望能帮到和当初我一样迷茫的你。

这不是速成班，也不是速成指南，而是一份真实前端成长路上的必备资料包。

有需要的小宝可以自取【资料】

简述内容

八股文

高频场景题

简历

看视频高效刷题(精品233问)

大厂名师公开课合集(每周更新)

前端推荐书单

常用工具/辅助内容/优秀源码拓展

优秀开源项目分享 等~

1.JavaScript(323题)

1.不会冒泡的事件有哪些?

参考答案:

在JavaScript和浏览器中，绝大多数事件都会按照DOM事件流模型冒泡，即事件会从目标元素开始向上冒泡到它的父元素，并最终到达文档元素。然而，也有一些事件是不会冒泡的。这些事件通常直接在目标元素上触发，并不会向上传播。

以下是一些不会冒泡的事件的示例:

1.焦点:当元素获得焦点时触发，例如通过键盘或鼠标点击。这是一个不会冒泡的事件。

2.模糊:当元素失去焦点时触发。这也是一个不会冒泡的事件。等~

2.mouseEnter 和 mouseOver 有什么区别?

3.MessageChannel 是什么，有什么使用场景?

4.async、await 实现原理

5.Proxy 能够监听到对象中的对象的引用吗?

6.如何让 var [a, b]= {a: 1,b: 2} 解构赋值成..

7.下面代码会输出什么?

8.描述下列代码的执行结果

9.什么是作用域链?

10.bind、call、apply 有什么区别?如何实现-...

2.Css(61题)

1.css 中的 animation、transition、 transform ...

参考答案:

在 CSS 中，

transition 和 transform 是用来创建动画效果的关键属性，它们各自具有不同的animation

作用和特点。

animation :

1.transition :

transition 属性用于指定在元素状态改变时，要以何种方式过渡到新状态。通过指定过渡的属 性、持续时间、动画方式(timing function)、延迟时间等来控制过渡效果。。

transition 属性适用于元素从一种状态平滑过渡到另一种状态，例如颜色、大小、位置等属性的变化。

2.transform :

• transform 属性用于对元素进行变形，例如平移、旋转、缩放、倾斜等通过
• transform 属性，可以改变元素的变形属性来创建动画效果。。
• transform 属性通常与 transition 或 animation 结合使用，使得变形动画更加平滑

总结:

animation 属性用于创建复杂的动画序列

transition 属性用于在状态变化时平滑过渡

transform 属性用于对元素进行变形

2.怎么做移动端的样式适配?

3.相邻的两个inline-block节点为什么会出现间.

4. grid网格布局是什么?

5.CSS3新增了哪些特性?

6.怎么使发已尸亿已尸有画?

7.怎么理解回流跟重绘?什么场景下会触发?8.什么是响应式设计?响应式设计的基本原理,

9.如果使用CSS提高页面性能?

10.如何实现单行/多行文本溢出的省略样式?

3.Typescript(46题)

1.说说对 TypeScript 中命名空间与模块的理解.

参考答案:

模块

TypeScript与ECMAScript 2015 一样，任何包含顶级 import 或者 export 的文件都被当成一个模块相反地，如果一个文件不带有顶级的 import 或者 export 声明，那么它的内容被视为全局可见的例如我们在在一个 TypeScript 工程下建立一个文件 1.ts，声明一个变量a，如下:

const a=1

然后在另一个文件同样声明一个变量 a这时候会出现错误信息

2.说说你对 typescript 的理解?与 javascript 的..

3.Typescript中泛型是什么?

4. TypeScript中有哪些声明变量的方式?

5.什么是Typescript的方法重载?

6.请实现下面的 sleep 方法

7. typescript 中的 is 关键字有什么用?

8.TypeScript支持的访问修饰符有哪些?

9.请实现下面的 myMap 方法

10.请实现下面的 treePath 方法

4.React(83题)

1.下面代码中，点击“+3”按钮后，age 的值是..

import{useState }from'react'
export default function Counter(){const [age,setAge]=useState(42);function increment(){setAge(age + 1);
return
<h1>Your age:{age}</h1><button onClick={()=>{
increment();increment();increment();
}}>+3</button>
);

参考答案:

点击 +3 时，可能只更新为 43。

这是因为 setAge(age + 1)即使多次调用，也不会立即更新组件状态，而是会进行合并，最终只触发一次重新渲染。

如果要实现调用三次就增加3，可以将increment 改为函数式更新:

function increment()f1
setAge(a=>a+1);//函数式更新
}

2. React Portals 有什么用?

3.react 和 react-dom 是什么关系?

4.React 中为什么不直接使用 requestIdleCallba...

5.为什么 react 需要 fiber 架构，而 Vue 却不需,

6.子组件是一个 Portal，发生点击事件能冒泡...

7. React 为什么要废弃 componentwillMount、c..

8.说说React render方法的原理?在什么时候会..

9.说说React事件和原生事件的执行顺序

10.说说对受控组件和非受控组件的理解，以及...

图片题

有需要的小伙伴可以点此资料获取完整版PDF

总结

前端这条路，说难不难，说简单也不简单。
从那个连 div 都居中不了的小白，到现在能独立搭建项目、优化工程化流程，我走了不少弯路，也收获了很多成长。

如果你现在也正站在前端学习的起点，别怕慢，也别怕笨，只要坚持下去，总有一天你会感谢现在努力的自己。

希望这份资料能成为你前行路上的一盏小灯，帮你少踩几个坑，多一点方向。

如果你觉得有帮助，欢迎收藏 + 关注，也欢迎在评论区和我交流你的学习经历。
你的一句“有用”，就是我继续分享的动力

有需要的小伙伴可以点此资料获取完整版PDF