说好的总结面试题,现在就来更新了,争取今年做到每天更新吧.(梦想还是要有的,万一实现了呢).经过这段时间的实战经验,和听取他人的建议,发现常用的面试题最多不超过50个.基本能应对中小型公司吧.比较出名的大厂,考察的各有不同,有的是注重你源码的能力,还有思路.有的是注重你底层的实现,还有的是算法,大部分前端算法都有那么一点点的渣,嗯,我也是渣中本渣.只有很少的大厂是看你的实战经验的,只要你算法学的好,首先要去尝试的大概就是字节跳动.如果你框架源码和实现思路好,你应该去滴滴验证一下.美团一面主要是基础知识,二面主要是底层实现和原理.废话大概就说这么多吧,21年希望我能坚持住更新.
自我介绍
HTML
CSS
你实际项目中遇到的问题
js new操作符的时候发生了什么
深拷贝和浅拷贝
promise 的实现原理和事件循环(浏览器和node)
前端工程化(webpack,gulp,roll)
打开页面很慢,有哪些优化方式
react 和vue中的虚拟dom了解多少
讲解一下redux 或者vuex的原理
跨域是什么?怎样解决?
cookie 、session、web storage的区别
call 、apply、bind之间的区别
MVC和MVVM之间的区别
vue的双向数据绑定是如何实现的
vue中v-if和v-show的区别
单页应用如何在浏览器中实现的,有何优缺点
浏览器缓存策略
面向对象的三大特征,js是如何实现继承的.
你了解的设计模式有哪些,尝试写一下
浏览器中输入网址后发生了什么
宏任务和微任务
http与https
ajax
es6
前端性能优化
浏览器兼容问题
模块化开发
混合开发
文件上传之断点续传
排序算法
数组及数组对象的去重
链表反转
队列和栈的算法应用
动态规划
树
网络安全
移动端
动手实现打包工具
动手实现插件
源码阅读与分析.
现在能想到的就这些了,初步计划,每天更新一些,具体更新几个得看时间和题目的复杂度,打算每一个题的答案理论和我实践结合一下.会把代码贴在里面.写完后会同步到.
part one:
基本介绍:
之前看过一个公众号的关于大厂喜欢的简历,我也是从那得出的经验改的.
第一部分: 基本信息,这里主要是交代清楚你的姓名、工作年限、毕业院校、专业、联系方式就好.
第二部分: 个人技能,就是说你都掌握了哪些技术,一般人事筛选简历的时候会去比对关键字,主要的模块就是这里了.还有技术面试的时候,尤其是一面,会根据你写的问你.以下是我写的,每个人的情况不一样,具体问题需要具体分析,但是大的模块目前就这些.
第一条需要写你的主要技术栈,现在主流的技术栈是vue或者react只要你其中一个比较熟练或者精通就差不多是可以过的,我发现现在很多公司都在渐渐的从react中向vue扩展.当然你要是什么都会,就更好了,但是大多数公司的技术栈都是单一的.
第二条我写的是熟悉数据结构和算法,我觉得除了项目应用到的框架,其次重要的就是基础了,也就是数据结构和算法.
第三条写的关于性能优化的.
第四条说的是你会的其他技术,但是实用的️不是很多的.
下面写了打包工具,网络协议,这个对于前端来说,还是比较重要的.浏览器兼容问题,现在的兼容问题其实不是很多,但是很多公司还是会问,主要是看你项目的实践能力,有没有做过,知识面的广度.
还有node一般公司不写后台的话,问的基本就是事件循环机制,还有启动服务之类的.最后一点就是好的沟通能力和解决问题的能力.
第三部分就是你的工作经历,工作经历写清楚时间(自己一定要记住自己写的时间).还有写工作描述的时候,只要写清楚这家公司主要是做什么的,什么类型的项目,你主要负责什么,还有你的技术栈.
第四部分就是项目了,项目要选择不同类型的,有特色的,不需要把所有做过的都写上.可以分类型写.写上项目属于哪家公司的东西.类似这样.项目名称.公司名称.这样能给人很清晰的感觉.
主要的就这些了,一般只有应届毕业生才会写自己的爱好啥的,还有在学校获得了什么,那都是过去,对于工作了几年的你,写上去给人的感觉就是没经验,嗯,对就是感觉你是刚毕业的,还有那写简历上面都是线,框,图的,还有简历一共就一页的.感觉至少得是2页,不超过4页.
一、HTML
关于html的面试题,大概分为以下几类吧.
1.1 的作用,如何区分严格模式和混杂模式,这个前几年的时候很多人喜欢问,现在很少有人问了,毕竟现在大家问的都是html5的.这个就是告诉浏览器用什么文档类型来解析这个文档,不存在类型或者不正确都可能造成文案混乱.
1.2 常用的标签,嗯,这个现在也不常用了,要说html5的标签.
, 用于定义页面的头部信息.
用于定义页面的导航信息
1.3 html、css、js 的关系.
html是网页的载体,也就是骨骼,css相当于人的衣服和化妆师,js主要用来实现特效和交互.
1.4 语义化的理解
(1) 在去掉css的时候能够让页面呈现出清晰的结构
(2) 有利于seo的抓取.
(3) 其他设备的解析(屏幕阅读器、盲人阅读器、移动设备)以有意义的方式渲染.
(4) 团队开发和维护,更具有可读性,减少不同人员编写代码的差异性.
二.CSS
2.1 css选择器的权重
!important>style(内联样式) > ID > class(类选择器) > 属性选择器 > 伪类选择器 > 元素选择器 > 伪元素选择器 > 通配符选择器
2.2 浮动引起的问题和解决方案
(1) 父元素的高度无法被撑开,影响与父元素统计的元素
(2) 与元素同级的非浮动元素会紧随其后
(3) 如果一个元素浮动,则该元素之前的元素也需要浮动;否则.会影响页面的显示
解决方案:
(1) 给父盒子设置高度
(2) 父盒子设置overflow:hidden
(3) 外墙法,在父元素外层,设置clear:both
(4) 内墙法,底部添加新标签,clear:both
(5) 使用双伪元素法
2.3 css中哪些是可以继承的
与字体有关的样式可以继承
2.4 如何居中一个div?如何居中一个浮动元素
这个题首先要分为块容器和行内块容器,比如单行字体居中.
块级元素有以下几种方式
(1) 确定宽高的盒子margin:0px auto。
(2) 不需要知道宽高
css:
#wrap{
width: 200px;
height: 200px;
background: orange;
position: absolute/fixed;
top:0;bottom:0;left: 0;right: 0;margin:auto;
}
html:
position:absolute top:50%,left:50% transform:translate(-50%，-50%)
(3) 弹性盒居中 justify-content:center align-items:center
居中浮动元素
css:
.outerbox {
float: left;
position: relative;
left: 50%;
}
.innerbox {
float: left;
position: relative;
right: 50%;
}
html:
让定位元素居中
css:
.center{
position: absolute; /*绝对定位*/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略，且为0*/
right: 0; /*此处不能省略，且为0*/
}
html:
2.5 谈谈你对BFC规范的理解
BFC指块级格式化上下文,即创建了新的bBFC的盒子是独立布局的,盒子里面的子元素的样式不会受到外面的影响.在同一个BFC中,两个相邻的盒子垂直方向上的margin是会重合的.
能够触发BFC的条件:
(1) body 就是一个外层BFC的容器
(2) float 属性除了none
(3)position不为relative和static（position的值为absolute或者fixed）
(4) display 的inline-block、inline-flex、flex、flow-root、table-caption、table-cell
(5) overflow 的auto、scroll和hidden（overflow的值不为visible）
2.6 伪元素和伪类的区别
伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等.
伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active
2.7 常见的兼容性问题有哪些
(1) png24 位在ie6 出现悲剧,可以实用png8
(2) 不同浏览器的默认样式不同,所以要进行初始化
(3) IE6 双边距bug指是float后,又️横向的margin时,在IE6中显示的margin比设置的大.
(4) 图片与图片之间会存在3像素边距
(5) 盒模型不同,标准模型和IE模型
2.8 css中,自适应的单位有哪些?
(1) 百分比
(2) vw、 vh、vm
(3) em 相对于父元素字体大小
(4) rem 相对于根元素字体大小
今天的内容就到这了,下面的下次更新.
2021.1.2
刚刚看到新闻说国家卫建委估计在工作地过年,搞不好真的可能要留在北京过年了.今天更新三个题吧,想了一下,决定把这些题全都放在一篇文章里.
第四题 你实际项目中遇到的问题,这个题一般面试官是想考察你有没有实际项目经验,还有在实际工作中你有没有留心观察,遇到问题会不会总结,还有如何解决问题的吧.但是也有的公司巨坑,比如某度,你说一些遇到的小问题,然后面试官会和你说,这种小问题没办法体现你,工作这么多年的能力,让你说一个能表现你能力的问题,嗯,还真不知道什么问题能体现出你工作几年的能力.当然大神可能有,比如你写了一个什么插件,让多少人使用了,或者你写了个框架啥的.不过一般的公司都只是想考察你的实际工作经验,你可以准备一些,包括框架的,还有浏览器兼容的,移动端兼容的,还有就是使用一些插件遇到的问题,尤其是你简历上写了的.一定也要清楚这个插件框架有哪些坑.
第五题js new操作符的时候发生了什么
var Fun = function () {};
var func = new Fun ();
1、创建一个空对象
var obj = new Object();
2、设置原型链
obj.__proto__= Func.prototype;
3、让Fun中的this指向obj，并执行Fun的函数体
var result =Func.call(obj);
4、判断Fun的返回值类型：
如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象
if(typeof(result) =="object"){
func
=result;
}
else{
func
=obj;;
}
第六题 深拷贝和浅拷贝
提到这个问题就要先说一下,js的数据类型,主要分为基本类型,和引用类型
基本数据类型有哪些，number，string，boolean，null，undefined，symbol以及未来ES10新增的BigInt(任意精度整数)七类。
引用数据类型(Object类)有常规名值对的无序对象{a:1}，数组[1,2,3]，以及函数等。
基本数据类型是不需要深拷贝的.这个问题主要是针对引用类型.基本类型是存储在栈里的,而引用类型栈区内存保存变量标识符和指向堆内存中该对象的指针，也可以说是该对象在堆内存的地址。当我们直接赋值给另一个变量的时候,指向的是同一个地址,当改变新的变量时,会更改原来的值.所以为了不影响原有的值,就要进行深拷贝.
这个问题被问了两次,一次是美团二面,题目是有一个多层嵌套的数组,用递归实现深拷贝.
//对象深拷贝
functiondeepClone(origin,target){
//target是否存在如果不存在创建空对象
let tar = target ||{},
//判断是否为引用数据类型
toStr =Object.prototype.toString,
arrType
='[object Array]';
for(let keyinorigin){
//剥离原型链的数据
if(origin.hasOwnProperty(key)){
//判断是否为引用数据类型 对象或数组
if(typeof(origin[key]) === 'object' && origin[key] !==null){
if(toStr.call(origin[key]) ===arrType ){
tar[key]
=[];
}
else{
tar[key]
={};
}
deepClone(origin[key],tar[key]);
}
else{
tar[key]
=origin[key];
}
}
}
returntar;
}
方法二:JSON.stringify和JSON.parse
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
方法三:Object.assign(target, [source1, source2, ...])
这个方法查了一些资料,都说这个方法没办法进行深拷贝,但是测试了一下,这个没办法进行深拷贝说的是引用类型嵌套引用类型的时候.就像下面这个这样子
let target = {a: 123};
let source1 = {b: 456};
let source2 = {c: 789, d: {e: 'lovely'}}; let obj = Object.assign(target, source1, source2); source2.d.e = 'peaceful'; console.log(obj);
source2的d里面的值会发生改变.
但是还有一种比较简单的情况下,let a = {a:1} l;et b =Object.assign({},a);b.a = 2;此时a的值不会发生改变.
方法四:js的slice函数截取数据,生产新的数据,不会影响原数组
方法五:js的concat方法
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
arrayObject.concat(arrayX,arrayX,......,arrayX)
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。
原文链接 异格: https://mp.weixin.qq.com/s/zmnF2-cEkf1PsbRhf589Ow