说好的总结面试题,现在就来更新了,争取今年做到每天更新吧.(梦想还是要有的,万一实现了呢).经过这段时间的实战经验,和听取他人的建议,发现常用的面试题最多不超过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的标签.
, 用于定义页面的头部信息.
用于定义页面的导航信息
<section> 用于定义文档中的模块,就是部分的意思
<article> 用于定义独立文档其他部分的内容
<footer> 用于定义底部信息
<aside> 用于定义页面的额外组成部分.如广告栏,侧边栏和相关的引用信息
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:
<div id="wrap"</div>
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:
<div class="outerbox">
<div class="innerbox">我是浮动的</div>
</div>
让定位元素居中
css:
.center{
position: absolute; /*绝对定位*/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略，且为0*/
right: 0; /*此处不能省略，且为0*/
}
html:
<div class="center"></div>
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
