前端自学到哪就可以去找工作了
自学前端想找到好的工作，就一定要清楚面试过程中的高频知识点
想自学前端的话可以看看下面资料适不适合你https://pan.baidu.com/s/1XV8WJ-QovSYhNbpWO9-YKw 提取码:841k
难度A：
Flex布局
W3cschool
在线网页编辑器
学习CSS布局
CSS Battle
2、JavaScript：这个是重中之重，推荐红宝书-《JavaScript高级程序设计》，书中自有黄金屋，看的时候你会发现有很多东西是看网页或者视频会漏掉的！同样推荐一些同学链接，我的建议是都可以看着学习一遍，一个是巩固然后就是查漏补缺了~
难度B：
阮一峰
廖雪峰
3、前端框架：Vue和React，如果是前端初学者并且时间有限可以阅读一下官方文档，熟悉其中原理（好应付面试），时间充裕的朋友可以先看官方文档然后跟着视频一起动手试试（仅个人建议，因为我就是看了官方文档以后没多久就忘了~血的教训，可能还是我太菜了）
难度C：
Vue
React
想看相关视频的话，可以去学习(B)之站，多得是选择~
4、计算机基础：计算机网络是每次必问的，也是我每次跪下的地方，大家要引起重视。然后还有基础的操作系统问题
5、然后就是NodeJs，数据可视化方法等等
6、还有重中之重的算法，记得每天都刷题多刷题，去LeetCode每天坚持就好了
个人认为，学到这里并且都能掌握，已经可以找一个蛮8错测工作了~
总结的面经
这里提供一下我从各个渠道总结的面试可能会问的，还有我认为比较重要的一些知识点（可能会有错误的地方，看到的朋友可以评论区指正嘻嘻嘻）
HTML+CSS
1、页面渲染流程
2、为什么CSS要放在头部，js要放在body底部
3、js设置为 async 和 defer 的区别
async：立即下载
defer：等文档解析并显示完后再下载
4、为什么js是单线程的
因为多线程的复杂性，多线程操作需要加锁，编码的复杂性会增高。
如果同时操作 DOM ，在多线程不加锁的情况下，最终会导致 DOM 渲染的结果不可预期。
5、自适应布局:使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。
两栏布局左边固定，右侧自适应，两列等高
两栏布局，左右均自适应，两列等高
三栏布局多种写法:圣杯、双飞翼
水平居中和垂直居中的方式，越多越好
6、BFC块级上下文
块级格式化上下文，是一个独立的容器，子元素不会影响到外面
计算高度时，浮动元素也会被计算
产生条件：float不为none；position为fixed和absolute；display为inline-block，table-caption，flex，inline-flex；overflow不为visible
可用于清除浮动，解决margin重叠
7、margin重叠
外边距塌陷：上面盒子margin-bottom和下面盒子margin-top
父元素没有border以及padding-top，则父元素的margin-top会和子元素的margin-top重叠
解决办法：给父元素设置border或者padding-top；给父元素添加overflow:hidden
8、html5和CSS3的新特性
9、响应式布局：一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本，需要了解设备像素比dpr以及vm/vh
10、设置文字大小为6px
font-size: 12px;
transform: scale(0.5);
11、CSS优先级计算
!importent: 无穷
行间样式：1000
id： 100
class/属性/伪类：10
标签/伪元素：1
12、对盒模型的理解：box-sizing: border-box|content-box; 要会利用该属性画三角形、菱形、平行四边形等
13、清除浮动的几种方式
14、display: none, visibility: hidden, opacity: 0 的区别
15、块级元素、行内元素、行内块级元素的区别
JS
1、DOM绑定事件的几种方式及区别
标签上绑定：onClick=“change”
btn.onClick = function(){} //会覆盖
btn.addEventListener(type, handle, true) //true表示捕获，可以注册多个listener，不会覆盖
2、基本数据类型和引用类型 及 其几种判别方式
基本数据类型：null, undefined, number, boolean, string, symbol；存储在栈中
引用数据类型：object, array, function, Boolean, Number, String；存储在堆中
JS的字符串是不能更改的，最大长度2^53 - 1
- typeof 可判断undefined, number, boolean, string, symbol, function且返回值为对应字符串；null, Array, object返回值为Object
- new Number(2) instanceOf Number; 不能判断null和undefined；返回值为bool类型
- Object.prototype.toString.call(obj) === ‘[object Object]’ 都可判别
3、const、let和var的区别
4、null和undefined的区别
5、JS闭包应用及其场景
概念：内部函数引用外部函数的参数和局部变量
应用场景：节流；防抖；封装私有变量；将多参数函数变为单参数
缺点：内存泄漏，根据垃圾回收机制被另一个作用与引用的变量不会被回收，所以在退出函数之前将不使用的局部变量全部删除
6、原型链原理
7、继承的几种方式：对象冒充、原型链继承、组合式继承、寄生组合继承、ES6 需要会写代码
//组合式继承
function ClassW(sColor){
this.color = sColor;
}
ClassW.prototype.sayColor = function(){
alert(this.color);
}
function ClassJ(sColor, sName){
ClassW.call(this, sColor);
this.name = sName;
}
ClassJ.prototype = new ClassW();
//校正构造函数
ClassJ.prototype.constructor = ClassJ;
ClassJ.prototype.sayName = function () {
alert(this.name);
};
//寄生组合式
//ES6
class Parent{
constructor(name){
this.name = name;
}
getName(){
return this.name;
}
}
class Child extends Parent{
constructor(name, age){
super(name);
this.age = age;
}
getAge(){
return this.age;
}
}
8、事件循环的概念：任务执行顺序
9、事件流：事件捕获，处于目标，事件冒泡
10、事件代理/事件委托：指不在事件的触发目标上设置监听，而是在其父元素设置，通过冒泡机制，父元素可以监听到子元素上事件的触发。
11、箭头函数的作用
12、异步实现方式：Ajax请求、回调、Promise等等，及其各自优缺点
13、防抖节流原理及实现
14、跨域的几种方式：JSONP、WebSocket、CORS、代理
15、forEach、for…in、for…of的区别
16、几种常见的设计模式
17、模块加载方案比较：CommonJS 与 ES6
Vue
1、对渐进式的理解：看官网首页
2、对MVVM的理解
3、响应式原理
4、Proxy和Object.defineProperty的区别
proxy可以直接监听对象而非属性
proxy拦截方法较多，如：has,apply,construct,ownkeys
proxy返回值为对象实例，而object.property只能遍历对象属性直接修改
5、为什么要有虚拟DOM
6、讲解生命周期：官网超级详细
7、Vue-router原理
8、父子组件通信
使用组件标签时，在组件内定义props属性
vue自定义事件：子组件绑定监听事件，父组件通过$emit接收
发布订阅库
slot插槽
Vuex
9、Vue组件中的data为什么需要是函数
data不能为对象，因为对象是引用类型，组件是可复用的可能会被多个实例同时引用；所以其中一个组件改变data值其他组件也会被影响
data为函数，返回为对象的靠背，这样每个组件实例都有自己独立的对象，实例之间互不影响。
10、Vue2.0和Vue3.0的区别
11、Computed和watch的区别
12、v-if和v-show的区别
使用v-if的时候，如果值为false，则页面将不会有这个html标签生成，切换时会触发组件的销毁和挂载
v-show值为false时，html标签存在，只是隐藏而已，在dispaly:none和display:block之间切换，适合频繁切换的场景
13、Vue+Webpack构建具体过程
14、webpack优化
计算机网络
15、讲解浏览器输入url到显示过程
16、DNS解析
17、TCP三次握手原理及为什么是三次
18、握手失败如何处理
19、TCP四次挥手原理及为什么是四次
20、http和https的区别
21、TCP和UDP的区别
22、对称加密和非对称加密
23、常用状态码
24、CSRF和XSS攻击
25、Cookie、localstorage、sessionStorage
26、http请求方法
27、GET: 获取资源
POST: 传输实体的主体
PUT: 更新资源，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。
DELETE: 删除文件
HEAD: 获取报文首部，HEAD和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头部信息，例如url的有效性以及更新的日期时间。
OPTIONs: 请求web服务器告知其支持的各种功能。可以询问服务器通常支持哪些方法，或者对某些特殊资源支持哪些方法。
TRACE: 追踪路径，将之前的请求通信返回给客户端
CONNECT: 要求用隧道协议连接代理，一般为 TLS和SSL
28、Get和Post的区别
操作系统
1、进程和线程的区别
进程是系统进行资源分配和调度的一个独立单位
线程是CPU调度的基本单位
区别：
a. 进程有独立的地址空间，一个进程崩溃后不会对其他进程产生影响。
b. 线程有自己的堆栈和局部变量，但没有独立的地址空间。
c. 一个程序至少有一个进程，一个进程至少有一个线程
d. 两者都可以并发执行
2、进程的状态
进程状态有就绪，运行，阻塞这三种
就绪即一个进程获得了所需资源，一旦得到处理机便可运行
阻塞即一个进程正在等待某一事件发生而暂时停止运行
运行转为就绪，比如时间片到；运行转为阻塞，比如等待IO请求的返回；阻塞转为就绪，比如IO结束
3、进程调度算法的特点
短作业优先，运行时间最短的优先
先来先服务，即先来先运行
时间片轮转，即每次一个进程运行一个时间片，不断切换
优先级，即按优先级运行
高响应比，即优先级随着等待时间的增长而提高，抢占式
4、死锁：死锁是指一组争用系统资源或相互通信的进程被阻塞的现象。
产生死锁的四个必要条件：
互斥条件：一个资源每次只能被一个进程使用。
请求与保持条件：一个进程因请求资源而阻塞时，对已获得的资源保持不放。
不剥夺条件:进程已获得的资源，在末使用完之前，不能强行剥夺。自学前端想找到好的工作，就一定要清楚面试过程中的高频知识点有哪些，针对这些知识点逐个突破，可以很大程度上提升自己的面试通过率。这里分享一篇牛客大佬的前端开发-个人面经高频知识点整理(校招)，帮助大家快速掌握前端开发常考面试知识点。
一名菜鸡前端的实习+秋招面经
罗里吧嗦的自我介绍：楼主前端方向，在毕业之前有幸稍微稍微地接触了一下，那个时候觉得前端不就写写页面能有多难，当开始找实习找工作的时候真是脸疼~整个过程还是慢慢成长的，从2020年3月初开始系统的学习，作为一名科研狗也是得益于疫情才能稍微自由地在家从头学习。经过漫长的游击战最后加入了字节这个大家庭，这里真的要感谢字节温柔的hr小姐姐还有牛客网小伙伴们分享的经验贴。刚好有空整理下实习+秋招阶段自己的学习笔记，希望能够帮助到其他前端小伙伴。
前端必须掌握的知识结构
1、HTML+CSS：这方面建议多动手练习，了解其中原理，这里推荐一些还不错的网站可以在线练习，根据个人认为的训练难易程度排序
难度A：
Flex布局
W3cschool
在线网页编辑器
学习CSS布局
CSS Battle
2、JavaScript：这个是重中之重，推荐红宝书-《JavaScript高级程序设计》，书中自有黄金屋，看的时候你会发现有很多东西是看网页或者视频会漏掉的！同样推荐一些同学链接，我的建议是都可以看着学习一遍，一个是巩固然后就是查漏补缺了~
难度B：
阮一峰
廖雪峰
3、前端框架：Vue和React，如果是前端初学者并且时间有限可以阅读一下官方文档，熟悉其中原理（好应付面试），时间充裕的朋友可以先看官方文档然后跟着视频一起动手试试（仅个人建议，因为我就是看了官方文档以后没多久就忘了~血的教训，可能还是我太菜了）
难度C：
Vue
React
想看相关视频的话，可以去学习(B)之站，多得是选择~
4、计算机基础：计算机网络是每次必问的，也是我每次跪下的地方，大家要引起重视。然后还有基础的操作系统问题
5、然后就是NodeJs，数据可视化方法等等
6、还有重中之重的算法，记得每天都刷题多刷题，去LeetCode每天坚持就好了
个人认为，学到这里并且都能掌握，已经可以找一个蛮8错测工作了~
总结的面经
这里提供一下我从各个渠道总结的面试可能会问的，还有我认为比较重要的一些知识点（可能会有错误的地方，看到的朋友可以评论区指正嘻嘻嘻）
HTML+CSS
1、页面渲染流程
2、为什么CSS要放在头部，js要放在body底部
3、js设置为 async 和 defer 的区别
async：立即下载
defer：等文档解析并显示完后再下载
4、为什么js是单线程的
因为多线程的复杂性，多线程操作需要加锁，编码的复杂性会增高。
如果同时操作 DOM ，在多线程不加锁的情况下，最终会导致 DOM 渲染的结果不可预期。
5、自适应布局:使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。
两栏布局左边固定，右侧自适应，两列等高
两栏布局，左右均自适应，两列等高
三栏布局多种写法:圣杯、双飞翼
水平居中和垂直居中的方式，越多越好
6、BFC块级上下文
块级格式化上下文，是一个独立的容器，子元素不会影响到外面
计算高度时，浮动元素也会被计算
产生条件：float不为none；position为fixed和absolute；display为inline-block，table-caption，flex，inline-flex；overflow不为visible
可用于清除浮动，解决margin重叠
7、margin重叠
外边距塌陷：上面盒子margin-bottom和下面盒子margin-top
父元素没有border以及padding-top，则父元素的margin-top会和子元素的margin-top重叠
解决办法：给父元素设置border或者padding-top；给父元素添加overflow:hidden
8、html5和CSS3的新特性
9、响应式布局：一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本，需要了解设备像素比dpr以及vm/vh
10、设置文字大小为6px
font-size: 12px;
transform: scale(0.5);
11、CSS优先级计算
!importent: 无穷
行间样式：1000
id： 100
class/属性/伪类：10
标签/伪元素：1
12、对盒模型的理解：box-sizing: border-box|content-box; 要会利用该属性画三角形、菱形、平行四边形等
13、清除浮动的几种方式
14、display: none, visibility: hidden, opacity: 0 的区别
15、块级元素、行内元素、行内块级元素的区别
JS
1、DOM绑定事件的几种方式及区别
标签上绑定：onClick=“change”
btn.onClick = function(){} //会覆盖
btn.addEventListener(type, handle, true) //true表示捕获，可以注册多个listener，不会覆盖
2、基本数据类型和引用类型 及 其几种判别方式
基本数据类型：null, undefined, number, boolean, string, symbol；存储在栈中
引用数据类型：object, array, function, Boolean, Number, String；存储在堆中
JS的字符串是不能更改的，最大长度2^53 - 1
- typeof 可判断undefined, number, boolean, string, symbol, function且返回值为对应字符串；null, Array, object返回值为Object
- new Number(2) instanceOf Number; 不能判断null和undefined；返回值为bool类型
- Object.prototype.toString.call(obj) === ‘[object Object]’ 都可判别
3、const、let和var的区别
4、null和undefined的区别
5、JS闭包应用及其场景
概念：内部函数引用外部函数的参数和局部变量
应用场景：节流；防抖；封装私有变量；将多参数函数变为单参数
缺点：内存泄漏，根据垃圾回收机制被另一个作用与引用的变量不会被回收，所以在退出函数之前将不使用的局部变量全部删除
6、原型链原理
7、继承的几种方式：对象冒充、原型链继承、组合式继承、寄生组合继承、ES6 需要会写代码
//组合式继承
function ClassW(sColor){
this.color = sColor;
}
ClassW.prototype.sayColor = function(){
alert(this.color);
}
function ClassJ(sColor, sName){
ClassW.call(this, sColor);
this.name = sName;
}
ClassJ.prototype = new ClassW();
//校正构造函数
ClassJ.prototype.constructor = ClassJ;
ClassJ.prototype.sayName = function () {
alert(this.name);
};
//寄生组合式
//ES6
class Parent{
constructor(name){
this.name = name;
}
getName(){
return this.name;
}
}
class Child extends Parent{
constructor(name, age){
super(name);
this.age = age;
}
getAge(){
return this.age;
}
}
8、事件循环的概念：任务执行顺序
9、事件流：事件捕获，处于目标，事件冒泡
10、事件代理/事件委托：指不在事件的触发目标上设置监听，而是在其父元素设置，通过冒泡机制，父元素可以监听到子元素上事件的触发。
11、箭头函数的作用
12、异步实现方式：Ajax请求、回调、Promise等等，及其各自优缺点
13、防抖节流原理及实现
14、跨域的几种方式：JSONP、WebSocket、CORS、代理
15、forEach、for…in、for…of的区别
16、几种常见的设计模式
17、模块加载方案比较：CommonJS 与 ES6
Vue
1、对渐进式的理解：看官网首页
2、对MVVM的理解
3、响应式原理
4、Proxy和Object.defineProperty的区别
proxy可以直接监听对象而非属性
proxy拦截方法较多，如：has,apply,construct,ownkeys
proxy返回值为对象实例，而object.property只能遍历对象属性直接修改
5、为什么要有虚拟DOM
6、讲解生命周期：官网超级详细
7、Vue-router原理
8、父子组件通信
使用组件标签时，在组件内定义props属性
vue自定义事件：子组件绑定监听事件，父组件通过$emit接收
发布订阅库
slot插槽
Vuex
9、Vue组件中的data为什么需要是函数
data不能为对象，因为对象是引用类型，组件是可复用的可能会被多个实例同时引用；所以其中一个组件改变data值其他组件也会被影响
data为函数，返回为对象的靠背，这样每个组件实例都有自己独立的对象，实例之间互不影响。
10、Vue2.0和Vue3.0的区别
11、Computed和watch的区别
12、v-if和v-show的区别
使用v-if的时候，如果值为false，则页面将不会有这个html标签生成，切换时会触发组件的销毁和挂载
v-show值为false时，html标签存在，只是隐藏而已，在dispaly:none和display:block之间切换，适合频繁切换的场景
13、Vue+Webpack构建具体过程
14、webpack优化
计算机网络
15、讲解浏览器输入url到显示过程
16、DNS解析
17、TCP三次握手原理及为什么是三次
18、握手失败如何处理
19、TCP四次挥手原理及为什么是四次
20、http和https的区别
21、TCP和UDP的区别
22、对称加密和非对称加密
23、常用状态码
24、CSRF和XSS攻击
25、Cookie、localstorage、sessionStorage
26、http请求方法
27、GET: 获取资源
POST: 传输实体的主体
PUT: 更新资源，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。
DELETE: 删除文件
HEAD: 获取报文首部，HEAD和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头部信息，例如url的有效性以及更新的日期时间。
OPTIONs: 请求web服务器告知其支持的各种功能。可以询问服务器通常支持哪些方法，或者对某些特殊资源支持哪些方法。
TRACE: 追踪路径，将之前的请求通信返回给客户端
CONNECT: 要求用隧道协议连接代理，一般为 TLS和SSL
28、Get和Post的区别
操作系统
1、进程和线程的区别
进程是系统进行资源分配和调度的一个独立单位
线程是CPU调度的基本单位
区别：
a. 进程有独立的地址空间，一个进程崩溃后不会对其他进程产生影响。
b. 线程有自己的堆栈和局部变量，但没有独立的地址空间。
c. 一个程序至少有一个进程，一个进程至少有一个线程
d. 两者都可以并发执行
2、进程的状态
进程状态有就绪，运行，阻塞这三种
就绪即一个进程获得了所需资源，一旦得到处理机便可运行
阻塞即一个进程正在等待某一事件发生而暂时停止运行
运行转为就绪，比如时间片到；运行转为阻塞，比如等待IO请求的返回；阻塞转为就绪，比如IO结束
3、进程调度算法的特点
短作业优先，运行时间最短的优先
先来先服务，即先来先运行
时间片轮转，即每次一个进程运行一个时间片，不断切换
优先级，即按优先级运行
高响应比，即优先级随着等待时间的增长而提高，抢占式
4、死锁：死锁是指一组争用系统资源或相互通信的进程被阻塞的现象。
产生死锁的四个必要条件：
互斥条件：一个资源每次只能被一个进程使用。
请求与保持条件：一个进程因请求资源而阻塞时，对已获得的资源保持不放。
不剥夺条件:进程已获得的资源，在末使用完之前，不能强行剥夺。
循环等待条件:若干进程之间形成一种头尾相接的循环等待资源关系。
循环等待条件:若干进程之间形成一种头尾相接的循环等待资源关系。
1790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
