最近找工作阶段,总结了不少前人的面经,总想整理的特别特别好再发出来,但是发现如果一直等等等的话,就不知道等到猴年马月了,先发一些吧,持续更新!!!

答案自己去整理吧,整理的过程也是学习的过程~~~

格式没有统一看着很尴尬啊,以后有时间再弄吧emmm

 

基础

 

简单介绍一下自己,为什么选择做前端?

介绍下你最近的项目?

说出你觉得自己身上最优秀的能力?

说出你未来的规划?

你最近有没有什么想要学习的技术?

你有什么要问我的?

HTML、CSS篇以及布局相关

  • 说下你常用的几种布局方式,集中往盒模型、flex布局说(至于grid布局,这个我看过没有用到过)
  • position的值有哪些?
  • css选择器有哪些?选择器的优先级?
  • CSS属性选择器和伪类选择器的优先级?
  • 使用css实现一个持续的动画效果
  • animate和translate有没有用过,一些常见的属性说下?
  • CSS实现宽度自适应100%,宽高16:9的比例的矩形。
  • 如何实现左边两栏一定比例,左栏高度随右栏高度自适应?
  • css有哪些垂直水平居中方式?
  • 右边宽度固定,左边自适应怎么布局?
  • Flex布局用的多吗?
  • 移动端适配怎么做的?
  • 你用到了Flex,请问flex怎么设置垂直水平居中?

JavaScript篇(重要)

  • 变量提升遇到的一些简单code题
  • 说一下对闭包的理解,以及你在什么场景下会用到闭包?
  • 说一下你对原型与原型链的了解度,有几种方式可以实现继承,用原型实现继承有什么缺点,怎么解决?
  • iframe的缺点有哪些? 
  • Ajax的原生写法
  • 为什么会有同源策略?
  • 前端处理跨域有没有遇到过,处理跨域的方式有哪几种方式去解决
  • 怎么判断两个对象是否相等
  • 代码实现一个对象的深拷贝
  • 从发送一个url地址到返回页面,中间发生了什么
  • 说下工作中你做过的一些性能优化处理
  •  js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
  •  如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
  • Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
  • * JS常见的dom操作api
  • * 解释一下事件冒泡和事件捕获
  • * 事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
  • * 对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
  • * this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
  • * call,apply,bind
  • * 显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
  • * 创建对象的多种方式
  • * 实现继承的多种方式和优缺点
  • * new 一个对象具体做了什么
  • * 手写Ajax,XMLHttpRequest
  • * 变量提升
  • * 举例说明一个匿名函数的典型用例
  • * 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
  • * attribute和property的区别
  • * document load和document DOMContentLoaded两个事件的区别
  • * === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
  • * typeof能够得到哪些值
  • * 什么是“use strict”,好处和坏处
  • * 函数的作用域是什么?js 的作用域有几种?
  • * JS如何实现重载和多态
  • * 常用的数组api,字符串api
  • * 原生事件绑定(跨浏览器),dom0和dom2的区别?
  • * 给定一个元素获取它相对于视图窗口的坐标
  • * 如何实现图片滚动懒加载
  • * js 的字符串类型有哪些方法? 正则表达式的函数怎么使用?
  • * 深拷贝
  • * 编写一个通用的事件监听函数
  • * web端cookie的设置和获取
  • * setTimeout和promise的执行顺序
  • * JavaScript 的事件流模型都有什么?
  • * navigator对象,location和history
  • * js的垃圾回收机制
  • * 内存泄漏的原因和场景
  • * DOM事件的绑定的几种方式
  • * DOM事件中target和currentTarget的区别
  • * typeof 和 instanceof 区别,instanceof原理
  • * js动画和css3动画比较
  • * JavaScript 倒计时(setTimeout)
  • * js处理异常
  • * js的设计模式知道那些
  • * 轮播图的实现,以及轮播图组件开发,轮播10000张图片过程
  • * websocket的工作原理和机制。
  • * 手指点击可以触控的屏幕时,是什么事件?
  • * 什么是函数柯里化?以及说一下JS的API有哪些应用到了函数柯里化的实现?(函数柯里化一些了解,以及在函数式编程的应用,最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。)
  • * JS代码调试

 

ES6篇(引导篇,相对重要)

 

这块面试官主要是问你哪块用的比较多,你可以引导性地把面试官往你会的地方说

  • 谈一谈 promise
  • 如何实现一个promise,promise的原理,以及它的两个参数是什么?
  • promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的,分别这么写有什么区别,什么情况下会两个都同时用到?
  • 所有的 ES6 特性你都知道吗?如果遇到一个东西不知道是 ES6 还是 ES5, 你该怎么区分它
  • es6的继承和es5的继承有什么区别
  • promise封装ajax
  • let const的优点
  •  es6 generator 是什么,async/await 实现原理
  • ES6和node的commonjs模块化规范区别
  • 箭头函数,以及它的this
  • map和set有没有用过,如何实现一个数组去重,map数据结构有什么优点?

 

Vue相关知识点 (框架之一重要)

因为我简历上主要写的是会vue啦,其实也不是精通,因为边学边开发,主要是实践的项目不是特别复杂,不过常见的一些坑点还是有遇到的啦,这个是看你会的框架问相应的知识点

  1. Vue是如何实现双向绑定的?看过Vue源码吗?
  2. 简单阐述一下vue的生命周期
  3. 如何实现一个自定义组件,不同组件之间如何通信的?
  4. 父子组件如何通信的?
  5. 前端路由有没有用过,你在项目中怎么实现路由的嵌套?
  6. nextTick和Vuex两个有没有用过,分为什么情况下用到?
  7. Vue的响应式原理你知道是怎么实现的吗?你觉得订阅者-发布者模式和观察者模式有区别吗?有的话,说一下它们的区别。
  8. CommonJS 中的 require/exports 和 ES6 中的 import/export 区别?

构建(工程化&模块化)

工程化

  • 对webpack,gulp,grunt等有没有了解?对比。
  • webpack的入口文件怎么配置,多个入口怎么分割。
  • webpack的loader和plugins的区别
  • gulp的具体使用。
  • 前端工程化的理解、如何自己实现一个文件打包,比如一个JS文件里同时又ES5 和ES6写的代码,如何编译兼容他们

模块化

  • 对AMD,CMD,CommonJS有没有了解?
  • 为什么要模块化?不用的时候和用RequireJs的时候代码大概怎么写?
  • 说说有哪些模块化的库,有了解过模块化的发展的历史吗?
  • 分别说说同步和异步模块化的应用场景,说下AMD异步模块化实现的原理?
  • 如何将项目里面的所有的require的模块语法换成import的ES6的语法?
  • 使用模块化加载时,模块加载的顺序是怎样的,如果不知道,根据已有的知识,你觉得顺序应该是怎么样的?

计算机网络篇(相对重要)

  • http、https、以及websocket的区别
  • http常见的状态码,400,401,403状态码分别代表什么?
  • 协商缓存和强缓存的区别
  • 说下计算机网络的相关协议?
  • HTTP协议头含有哪些重要的部分,HTTP状态码
  • 网络url输入到输出怎么做?
  • 性能优化为什么要减少 HTTP 访问次数?
  • Http请求的过程与原理
  • https(对是https)有几次握手和挥手?https的原理。
  • http有几次挥手和握手?TLS的中文名?TLS在哪一网络层?
  • TCP连接的特点,TCP连接如何保证安全可靠的?
  • 为什么TCP连接需要三次握手,两次不可以吗,为什么
  • 为什么tcp要三次握手四次挥手?
  • tcp的三次握手和四次挥手画图(当场画写ack 和 seq的值)?
  • tcp与udp的区别
  • get和post的区别?什么情况下用到?
  • http2 与http1 的区别?
  • websocket
  • 什么是tcp流,什么是http流
  • babel是如何将es6代码编译成es5的
  • http2的持久连接和管线化
  • 域名解析时是tcp还是udp
  • 域名发散和域名收敛
  • Post一个file的时候file放在哪的?
  • HTTP Response的Header里面都有些啥?

其他

  • 正则表达式
  • 前端渲染和后端渲染的优缺点
  • 数据库的四大特性,什么是原子性,表的关系
  • 你觉得前端体系应该是怎样的?
  • 一个静态资源要上线,里面有各种资源依赖,你如何平稳上线
  • 如果要你去实现一个前端模板引擎,你会怎么做
  • 知道流媒体查询吗?
  • SEO
  • mysql 和 mongoDB 有什么区别?
  • restful的method解释
  • 数据库知识、操作系统知识
  • click在ios上有300ms延迟,原因及如何解决
  • 移动端的适配,rem+媒体查询/meta头设置
  • 移动端的手势和事件;
  • unicode,utf8,gbk编码的了解,乱码的解决

浏览器相关(兼容性,跨域等等)

因为我的工作主要还在专注在web端,所以浏览器兼容性的问题没有少碰到过,因主要是兼容IE8以上以及其他各个浏览器,这个就当做总结一下吧(在被问到这一块的时候其实我是有加分的,因为回答的比较多2333)

  • 使用meta标签来调节浏览器的渲染方式,告诉浏览器用哪种内核渲染,360双核浏览器就是在ie和chrome之间来回切换,现在使用meta标签来强制使用最新的内核渲染页面
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • rgba不支持IE8 解决:用opacity
  • CSS3前缀
  1. -webkit- webkit渲染引擎 chrome/safari
  2. -moz gecko引擎  firefox
  3. -ms- trident渲染引擎 IE
  4. -o-  opeck渲染引擎 opera
  • 过渡不兼容IE8,可以用JS动画实现
  • background-size不支持IE8,可以用img
  • 使用PIE.htc让IE6/7/8支持CSS3部分属性,像CSS3的border-radius,box-shadow,css backgrounds(-pie-background),Gradients,RGBA属性
  1. .border-radius {
  2. border-radius: 10px;
  3. -webkit-border-radius: 10px;
  4. -moz-border-radius: 10px;
  5. background: #abcdef;
  6. behavior: url(css/PIE.htc);
  7. }
  • 用css hack
  1. IE6: _
  2. IE7/7: *
  3. IE7/Firefox: !important
  4. IE7: *+
  5. IE6/7/8: 9
  6. IE8:
  • :IE浮动margin产生的双倍距离,通常使用float:left来实现,浏览器存在兼容性问题,导致图片与 后面的内容存在margin不一致的问题,解决方法就是给图片添加diaplay:inline即可
  • ie8不支持nth-child,但支持first-child和last-child,可以通过转化写法来处理问题,span:nth-child(2)可以转换为span:first-child+span,可以使ie8显示该内容,last-child可以自定义一个class类兼容ie8写法
  • IE8下不支持HTML5属性placeholder,解决问题的js插件挺多的,常用的使用jquery.JPlaceholder.js插件处理问题
  • 识别HTML5元素,IE中可能无法识别nav/footer,使用html5shiv
  • 火狐下表单阻止表单默认提交事件:在form中添加 action="javascript:",秒杀上述所有默认行为;
  • 始终为按钮button添加type属性,IE下的默认类型是button,其他浏览器下的默认类型是submit
  • IE下删除所有不必要的console语句,IE下当遇到console时不识别之后报错,代码不会执行,或者全局自定义一个window.console方法
  • IE浏览器下由于参数过长导致通过GET请求下载文件方法报错,解决改为POST请求
  • IE浏览器下iframe弹窗中输入框光标丢失(无法输入)问题,解决清一下frame
  • 兼容IE8 new Date()返回NaN问题,解决自定义方法
  1. function parseISO8601(dateStringInRange) {
  2. var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,
  3.  date = new Date(NaN), month,
  4.  parts = isoExp.exec(dateStringInRange);
  5. if(parts) {
  6.  month = +parts[2];
  7.  date.setFullYear(parts[1], month - 1, parts[3]);
  8.  if(month != date.getMonth() + 1) {
  9.    date.setTime(NaN);
  10.  }
  11. }
  12. return date;
  13. }

 

  • 跨域,为什么JS会对跨域做出限制
  • 前端安全:xss,csrf...
  • 浏览器怎么加载页面的?script脚本阻塞有什么解决方法?defer和async的区别?
  • 浏览器强缓存和协商缓存
  • 浏览器的全局变量有哪些
  • 浏览器同一时间能够从一个域名下载多少资源
  • 按需加载,不同页面的元素判断标准
  • web存储、cookies、localstroge等的使用和区别
  • 浏览器的内核
  • 如何实现缓存机制?(从200缓存,到cache到etag再到)
  • 说一下200和304的理解和区别
  • 什么是预加载、懒加载
  • 一个 XMLHttpRequest 实例有多少种状态?
  • dns解析原理,输入网址后如何查找服务器
  • 服务器如何知道你?
  • 浏览器渲染过程
  • ie的某些兼容性问题
  • session
  • 拖拽实现
  • 拆解url的各部分

 

 

 

 

 

 


 

 

 

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐