前端常见面试题（8，不可思议

用户33914928060
65 阅读6分钟

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

Vue部分截图

开源分享：docs.qq.com/doc/DSmRnRG…

BFC、IFC、GFC、FFC

BFC块级格式上下文，页面中一块区域容器其子元素不会在布局上影响到外面的元素

如何产生：

  1. float不为none

  2. overflow不为visible

  3. position不为relative和static，脱离文档流

  4. display为table-cell、table-caption、inline-block等

  5. 是body根元素

BFC的应用：

  1. 垂直方向的外边距重叠，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准

  2. 清除浮动，计算子级浮动元素的高度

  3. 阻止元素覆盖，形成两栏布局，左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化

  4. 解除文字环绕

IFC内联格式化上下文，框线高度由最高的实际高度为准，垂直方向的margin和padding不会影响

image-20200801143014761

GFC网格布局上下文，display为gird

FFC为自适应格式上下文，display为flex或者inline-flex的时候

div水平垂直居中

  1. absolute定位，配合transform（不知道子元素大小）

  2. absolute定位，配合负margin（知道子元素大小）

  3. absolute定位，margin:auto(不知道子元素大小)

  4. flex布局，justify-content和align-items都为center(不知道子元素大小)

  5. display为table-cell，vertial-align为middle，text-align为center(不知道子元素大小)

  6. absolute定位，使用calc（）计算位置（知道父、子元素大小）

display_none,visibility_hidden,opacity_0区别

display:none不会被渲染（会重排），不能触发事件，不能被继承属性，不支持transition动画

visibility:hidden会被渲染（会重绘），不会被触发事件，会被子元素继承，显示不支持隐藏支持动画

opacity:0会被渲染（不会重绘），会触发事件。会被子元素继承且不能取消，可以支持动画

CSS优先级

image-20200801150512491

css优先级计算Specificity累加

id选择器 0，0，1，0，0

类选择器、属性选择器、伪类 0，0，0，1，0

元素和伪元素 0，0，0，0，1

通配符为 0，0，0，0，0

行内样式 0，1，0，0，0

！important 1，0，0，0，0

移动端1px边框的问题

移动端中css的1px不等于移动设备的1px，比如我们pc中模拟看到的iphone为375但是实际是750

边框变粗的原因：移动端和pc端的像素密度不同，通常移动端为devicePixelRatio2

  1. 部分移动端支持border-width：0.5px

  2. 使用border-image、background-image结合图片像素透明实现

  3. image-20200801151909074

  4. 使用box-shadow模拟边框

  5. viewport+rem实现

blog.csdn.net/qq_38735649…

  1. 使用伪类+transform：scale（0.5）

map和parseInt

image-20200801153319061

函数节流和函数防抖

节流指的是一定时间内只会执行一次函数，先触发

防抖指的是任务触发的间隔超过一定时间才能执行，后触发

总的来说节流和防抖都是避免频繁调用函数的方法

Document

Set、Map、WeakSet、WeakMap的区别

image-20200801212902289

重点是遍历和弱引用

判断数组的方法

  1. Object.prototype.toString.call(arr)->"[object Array]"

image-20200801214420147

  1. arr instanceof Array ->true,去找原型链prototype

  2. Array.isArray(arr) ->true，ES5新增的方法，推荐使用

ES6的class有哪些特性

  1. class会变量提升（类似let、const）但是不会初始化赋值，会出现暂时性死区

  2. class内部使用严格模式

  3. class的所有方法（静态方法或实例方法）都是不可枚举的

  4. class的所有方法都没有原型对象prototype，也不能使用new

  5. 必须使用new来调用class

  6. class内部无法重写类名

全局const和let的获取

全局的const和let声明的变量不在window

image-20200801215650526

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

avatar
文章
阅读
粉丝