高频面试题 - 持续更新

匆_匆
295 阅读8分钟

这几天项目组在招人，由于大佬们都在忙业务，于是就派小弟来对求职者先进行一轮技术初面。除了会问一些项目、规划相关的问题外，我顺手总结了眼下前端面试出现的高频问题，慢慢但持续更新中；

基础面试题

网络与服务

常见的状态码

  • 2XX 成功
    • 200 OK，表示从客户端发来的请求在服务器端被正确处理
    • 204 No content，表示请求成功，但响应报文不含实体的主体部分
    • 206 Partial Content，进行范围请求
  • 3XX 重定向
    • 301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
    • 302 found，临时性重定向，表示资源临时被分配了新的 URL
    • 303 see other，表示资源存在着另一个 URL，应使用 GET 方法丁香获取资源
    • 304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
    • 307 temporary redirect，临时重定向，和302含义相同
  • 4XX 客户端错误
    • 400 bad request，请求报文存在语法错误
    • 401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
    • 403 forbidden，表示对请求资源的访问被服务器拒绝
    • 404 not found，表示在服务器上没有找到请求的资源
  • 5XX 服务器错误
    • 500 internal sever error，表示服务器端在执行请求时发生了错误
    • 503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求

常用的首部字段

《图解 HTTP》这一书直观易懂，推荐大家都去读一下。下面是我的一些笔记；

hzxshark.github.io/http_note/

浏览器相关

输入url到页面渲染的过程

DNS 解析
TCP 三次握手
发送请求，分析 url，设置请求报文(头，主体)
服务器返回请求的文件 (html)
浏览器渲染
    HTML parser --> DOM Tree
        标记化算法，进行元素状态的标记
        dom 树构建
    CSS parser --> Style Tree
        解析 css 代码，生成样式树
    attachment --> Render Tree
        结合 dom树 与 style树，生成渲染树
    layout: 布局
    GPU painting: 像素绘制页面

css

盒模型

一般来说 盒子模型分为两种： 一种是W3c标准的盒子模型（标准盒模型）一种IE标准的盒子模型（怪异盒模型） 实现：

box-sizing:content-box 为标准盒模型
标准盒模型下盒子的大小 = content + border + padding + margin
box-sizing:border-box 为怪异盒模型
怪异盒模型下盒子的大小 = width（content + border + padding） + margin

就我个人来说使用的怪异盒模型的时候多一点，因为包括组件在内的一些border懒得去计算。

Flex布局

Flex布局也是经常会问的一个点，因为现在的页面对于浏览器的兼容需求已经不是很迫切了，Flex布局实现灵活。具体的Flex布局相关知识请移步 Flex布局教程

CSS动画

css动画用的比较少，但是在使用过程中也发现两个问题，偶尔也会问一下；

第一个问题是transform实现垂直水平居中的时候

.container {
    height: 200px;
    background-color: #333;
    position: relative;
}
.centent {
    background-color: #eee;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}
上面的这段代码可以实现子元素的垂直水平居中但是会有一个问题，
如果子元素的高度为奇数的时候会出现字体模糊的情况；
解决办法很简单，就是设置为偶数；
如果是高度自适应的元素不建议使用此方法来实现居中；

第二个问题是性能问题

使用Css3的这两个新属性会开启GPU硬件加速模式，来提高渲染性能；但是也不能滥用，否则会造成内存占用过大等问题； 这篇文章讲的比较清楚 CSS(GPU)动画优化

transform:transition3d(0,0,0)
transform:translateZ(0);，

js

基本数据类型，怎么判断一个值的类型，如何判断一个变量是否为一个数组？

js的基本数据类型

五种简单的数据类型：String，Number，Boolean，Null，undefined

一种复杂的数据类型：Object

es6新增数据类型：Symbol

判断方法

  • typeof：此方法应该能满足大部分的使用场景；

  • instanceof：此方法能够进一步判断数据类型，判断是否为某个构造函数的实例；

  • Object.prototype.toString： 这个方法使用的比较少，但是也可以准确的判断数据类型；

  • duck type：你会鸭子叫，你会鸭子游泳，你就是鸭子，描述的不太准确，就是这个意思

  • 还有一个各个类型特有的判断方法，比如说isArray来判断是否为数组，isNaN来判断是否为NaN;

框架相关

react中的setState 与 useState

首先说一下setState, setState的实现方式非常巧妙，有很多人也会问一下setState后发生了什么。

简单来说就是setState之后，会经对state进行diff，判断是否有改变，然后去diff dom决定是否要更新UI。并且React会将state的改变压入栈中，在合适的时机，批量更新state和视图，达到提高性能的效果。如果想拿到setState之后的最新值可以给setState 传入一个回调函数；

hashRouter与browserRouter 的区别

HashRouter在路径中包含了#，相当于HTML的锚点定位。 BrowserRouter使用的是HTML5的新特性History BrowseRouter使用HTML5的history API，保证UI界面和URL同步。HashRouter使用URL的哈希部分来保持UI和URL的同步。

哈希历史记录不支持location.key和location.state。页面回退或者刷新会导致参数获取不到，所以慢慢的废弃掉了。官方也不建议使用了；

HashRouter相当于锚点定位，因此不论#后面的路径怎么变化，请求的都相当于是#之前的那个页面 BrowserRouter模式下请求的链接都是ip地址:端口/xxxx/xxxx，因此相当于每个URL都会访问一个不同的后端地址，如果后端没有覆盖到路由就会产生404错误。

后端交互问

·

前端安全

xss

什么是xss攻击？

Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。 具体表现

csrf

新技术的了解

hook

Concurrent模式

必问问题

简单的自我介绍

技术不多讲，多讲下最近做的项目，大多数人对你的经历比较感兴趣。

你在项目中遇到过哪些难点，痛点，最后是怎么解决的？

一般情况是在面试的时候如果不提前准备，多半会吞吞吐吐，即使你遇到的是一些难缠的问题，解决方案也非常优雅；这个就需要平时多积累了，解决痛点难点后多总结，多思考，多记录。

你做过的项目中有哪些比较亮眼的点？

这种我认为是考察你对团队的贡献度或者说你有没有做出超出你岗位职责的事情

技术层面上，比如可以这样回答，我们这边做的是一些财税类的报表，各种报表和图表分析，我结合我们的业务需求和复用的角度实现了一批复用性高引用简单的业务组件；

业务层面上，负责搭建了前端埋点分析系统，通过流量，用户行为的分析。更好的优化了产品，提升用户体验。

你有什么问题想要问我的？

这个我之前听到一个回答特别的中听，我对这个面试者的好感度飙升。我问完这个问题的时候他想了一会然后对我说：“如果有幸入职咱们公司，那这边的技术栈还有常用工具方便告诉我下吗？我想提前熟悉一下。”

还有一次是对面问我，在面试过程中我还能提高的点在哪里，因为自己可能感受不出来，面试官的感受会强烈一点；

这样的回答我觉得就挺完美的，遗憾的是我作为一个喽啰并不能决定他的去留；

一些建议

写简历的时候如果不是有非常大的把握就不要去写精通。因为很有可能这两个字像我这种人就会去google一些这方面的知识打破砂锅问到底，总会问到让你难堪的时候。

还有一个是在面试的时候尽量不要出现长时间的沉默，即便你对这些问题理解的不深刻也应该把自己知道的展现出来然后说下面补充一下这方面的知识。

这都是我个人的一些体会与总结，大家看的时候注意结合自身的情况

avatar
文章
阅读
粉丝