Web前端面试技术点

系统管理员 2021-03-29 14:42 569阅读 0赞

**一般来说会问如下几方面的问题：**

1.  做过最满意的项目是什么？
2.  项目背景
3.  为什么要做这件事情？
4.  最终达到什么效果？
5.  你处于什么样的角色，起到了什么方面的作用？
6.  在项目中遇到什么技术问题？具体是如何解决的？
7.  如果再做这个项目，你会在哪些方面进行改善？

**技术二面主要判断技术深度及广度**

1.  你最擅长的技术是什么？
2.  你觉得你在这个技术上的水平到什么程度了？你觉得最高级别应该是怎样的？
3.  浏览器及性能
4.  一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？越详细越好  
    （这个问既考察技术深度又考察技术广度，其实要答好是相当难的，注意越详细越好）
5.  谈一下你所知道的页面性能优化方法？
6.  这些优化方法背后的原理是什么？
7.  除了这些常规的，你还了解什么最新的方法么？
8.  如何分析页面性能？
9.  其它
10. 除了前端以外还了解什么其它技术么？
11. 对计算机基础的了解情况，比如常见数据结构、编译原理等

--------------------

## 技术点沟通： ##

**HTML+CSS**

> 1、盒子模型，块级元素和行内元素特性与区别。  
> 2、行内块的使用，兼容性解决。  
> 3、清除浮动的方式以及各自的优劣。  
> 4、文档流的概念、定位的理解以及z-index计算规则&浏览器差异性。  
> 5、CSS选择器以及优先级计算。  
> 6、常用的CSS hack。  
> 7、遇到的兼容性问题与解决方法。  
> 8、垂直水平居中的实现方式。  
> 9、常用布局的实现（两列布局、三列适应布局，两列等高适应布局等）。

--------------------

**Javascript**

> 1、犀牛书封面的犀牛属于神马品种？（蛋逼活跃气氛用。。。）  
> 2、常用的浏览器内核。  
> 3、常用的DOM操作，新建、添加、删除、移动、查找等。  
> 4、String于Array常用方法。  
> 5、设备与平台监测。  
> 6、DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。  
> 7、jQuery的bind、live、on、delegate的区别（考察点与上一条重叠，切入点不同）。  
> 8、JS变量提升、匿名函数、原型继承、作用域、闭包机制等。  
> 9、对HTTP协议的理解。  
> 10、Ajax的常用操作，JS跨域的实现原理。

--------------------

**HTML:**

1.  语义标签
2.  语义化

--------------------

**CSS:**

> 1.  动态居中
> 2.  动画
> 3.  Bootstrap 样式类
> 4.  Preprocessor
> 5.  兼容性 Hack与特征检测
> 6.  CSS3属性与性能

--------------------

**JS:**

> 1.  Name hoisting
> 2.  Prototype
> 3.  Closure
> 4.  Main loop
> 5.  Promise
> 6.  Delegation
> 7.  Cross domain

--------------------

**Mobile:**

> 1.  渐进增强
> 2.  移动端交互
> 3.  兼容性问题
> 4.  Debug工具 方法

--------------------

1.  主体是看简历发挥，对方写什么就问什么为主：框架、库、浏览器工作原理、NLP、算法、HTTP... 
2.  辅助问题几乎是我个人必备的问题：为什么做前端，学习前端过程。

> 1、跟什么人在一起工作  
> 2、过去项目的挑战  
> 3、自学的途径

3个问题基本上就知道这个人的能力水平和瓶颈了，人的很多局限都是被环境限制的，通过闲聊中夹杂的不经意的问题，候选人的画像就已经很鲜明了。处于当前的环境多长时间，有没有突破环境限制的行动，就能评估出潜力和眼界。

**什么浏览器兼容、作用域、框架等等的东西不会，不记得都可以学，要不了多长时间，关键还是有没有潜力、有没有好的习惯。**

--------------------

## 在能力方面： ##

> 1.  对 HTML / CSS / JavaScript 具有专家级别的知识；
> 2.  有较熟练使用 AngularJS / Ember.js / jQuery 或者其它类库的经验；
> 3.  较熟悉第三方组件（插件）生态环境及具体案例；
> 4.  有较熟练使用 Jade / Swig / Handlebars / Mustache 或者其它模板引擎的经验；
> 5.  有较熟练使用 SASS 或者其它 CSS 预处理器的经验；
> 6.  有较熟练使用 CoffeeScript 的经验；
> 7.  对 CSS / JavaScript 设计模式有很好的认识及应用；
> 8.  对常用数据结构和算法熟悉；
> 9.  有使用 GruntJS / GulpJS 任务运行器的经验；
> 10. 有使用 Yeoman 生成器的经验；
> 11. 有诸如 Bower / Volo / JSPM 等前端静态资源包管理器使用经验；
> 12. 熟悉本地及远程（甄姬）调试操作；
> 13. 有 Git 的使用经验；

--------------------

## Q：简单介绍下 React / Vue 的生命周期 ##

> A：几个钩子函数基本能报出来（如果不讲究按顺序、按挂载/更新区分、能把单词用英文念出来并且念对的话），稍微深入一点问下各个阶段都做了什么，一半以上就“不太清楚”了。更有甚者我问  
> React，对方回答 created、mounted，提醒之后还觉得自己没错的。

## Q：【React】定义一个组件时候，如何决定要用 Functional 还是 Class？ ##

> A：简单的用 Function，复杂的用 Class。（不能算错吧……但也不能算答到点子上）追问怎么界定“复杂”，答不上来。

## Q：【React】HOC、（非）受控组件、shouldComponentUpdate、React 16 的变化 ##

> A：不清楚、没接触过。

## Q：【Vue】介绍一下计算属性，和 data、methods、watch 的异同 ##

> A：基本都能巴拉一些，说的大部分都对，但就是说不到最关键的“当且仅当计算属性依赖的 data 改变时才会自动计算”。

## Q：【Vue】为什么 SFC 里的 data 必须是一个函数返回的对象，而不能就只是一个对象？ ##

> A：我承认这个问题有点小难，有一定的区分度，不是每个人都有关注过，但是官方文档有说明这一点，但凡看过的肯定有印象。即便没完整看过文档，在初次学习的过程中难道就不觉得奇怪吗？“学而不思”的人和“学而思”的人，区别还是挺大的。

## Q：CSS 选择器的权重 ##