前端面试总结（转）

旧城等待， 2021-11-19 13:08 342阅读 0赞

# [前端面试总结（转）][Link 1] #

## 面试知识点 ##

在面两个大公司和一个小公司的时候，尤其是一个传统行业的大型公司时，也有可能是我年限的问题，尤其注意基础，无论是笔试还是技术主管面试的时候都集中在这块，像原生JS、原生Ajax等，，(这些虽然我在工作中用的也不是很多ennnn,原生的是用的不多，但是我自己很注重)，说下面试碰到的吧(一些记不住了，想起来我可能也来不及补了，我懒哦~)。

## HTML以及CSS篇，集中在CSS(CSS重要重要重要！) ##

1.  说下你常用的几种布局方式  
    集中往盒模型、flex布局说(至于grid布局，这个我看过没有用到过)
2.  实现水平居中的几种方法？
3.  animate和translate有没有用过，一些常见的属性说下？
4.  CSS实现宽度自适应100%，宽高16:9的比例的矩形。
5.  如何实现左边两栏一定比例，左栏高度随右栏高度自适应？

## JavaScript篇(重要) ##

1.  变量提升遇到的一些简单code题
2.  说一下对闭包的理解，以及你在什么场景下会用到闭包？
3.  说一下你对原型与原型链的了解度，有几种方式可以实现继承，用原型实现继承有什么缺点，怎么解决？
4.  iframe的缺点有哪些？
5.  Ajax的原生写法
6.  为什么会有同源策略？
7.  前端处理跨域有没有遇到过，处理跨域的方式有哪几种方式去解决
8.  怎么判断两个对象是否相等
9.  代码实现一个对象的深拷贝
10. 从发送一个url地址到返回页面，中间发生了什么
11. 说下工作中你做过的一些性能优化处理

## ES6篇(引导篇，相对重要) ##

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

1.  箭头函数中的this指向谁？
2.  如何实现一个promise，promise的原理，以及它的两个参数是什么？
3.  promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的，分别这么写有什么区别，什么情况下会两个都同时用到？
4.  map和set有没有用过，如何实现一个数组去重，map数据结构有什么优点？

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

emmmm(之前我在sf上打的是ennnn，一个小伙伴给我纠结了一下那我这里就纠正一哈),因为我专业是网络工程的，在华三和另一家公司面试的时候没有被少问这些问题  
PS:其实我内心很奔溃啊，大学我没有很认真听课哒，哭哭哭哭哭

![1][]

1.  http、https、以及websocket的区别
2.  http常见的状态码，400,401,403状态码分别代表什么？
3.  协商缓存和强缓存的区别
4.  说下计算机网络的相关协议？

## 浏览器兼容性问题 ##

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

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

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

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

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

## 构建相关 ##

因为项目还在前后端未分离的时候，我研究的gulp比较多，像grunt、fis3也有了解过，webpack打包工具在用vue的时候肯定也接触到啦，但是研究不深，只能算入门阶级(别吐槽，实践确实不多)，所以我就直接很诚实地和面试官说了，面试官好像也能理解也就没有这么问(心里暗自开心哈哈哈哈)，不过我觉得还是有必要都去熟悉或者实践一下，多知道一点不会死哒！

## Other ##

**有一些技术主管会考量一下你除了前端之外的技术能力，例如你熟悉的后端语言，sql会不会**，还有人问我Linux命令会不会的(我内心:不会不会不会====),哈哈哈，不过node多多少少都有在用，这个也是前端应该要会的啦(but技术小白我不会，只是用到一点点~)  
PS：对啦，忘记说啦，还有版本控制工具svn和git，大部分会问你git会不会，这个用了github的肯定都会啦，我之前公司代码的控制工具都是svn啦，不过git我现在也很自信地说会啦，毕竟入职一周了唉唉唉~

作者：Qin菇凉～  
链接：https://juejin.im/post/5af99678f265da0b8e7f881e  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Tony联系方式 qq：1436182350

转载于:https://www.cnblogs.com/LiZhongZhongY/p/11189773.html

[Link 1]: https://www.cnblogs.com/kkdn/p/9041087.html
[1]: https://user-gold-cdn.xitu.io/2018/5/14/1635f21630008b26?imageView2/0/w/1280/h/960/format/webp/ignore-error/1