2023面试题

前端小白0v0
142 阅读8分钟

HTML + CSS

1. 讲一下盒模型，普通盒模型和怪异盒模型有什么区别？

  1. 块元素和行内元素区别是什么？常见块元素和行内元素有哪些？
  • 块级元素width height 都能修改
  • 块级元素占一整行
  • 块级元素能设置padding top 和 bottom margin top 和 bottom
  • 块级元素：h标签,p,li,form,div,hr,ul,ol,table,td,th
  • 行内元素：a,br,input,img,span,button
  1. HTML语义化标签 有哪些？
  • header:定义页面的展示区域,通常包含logo,导航,搜索框等
  • nav:定义页面的导航链接区域
  • main:定义页面的主要内容区域,一个页面用一次
  • acticle:定义页面的独立内容区域,可以有自己的header,sections,footer等
  • section:用于标记文档的各个部分,如长表单文章的章节或主要部分
  • aside:一般用于侧边栏
  • footer:文档的底部信息
  • small:小号字体效果
  • strong:强调文本
  1. 伪类和伪元素的区别是什么？
  • s3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素，比如::before和::after等伪元素使用双冒号（::），:hover和:active伪类使用单冒号（:）。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。
  1. CSS如何实现垂直居中？
  • 子绝父相各减自身的一半
  • 子绝父相transfrom translet各减 -50% -50%
  • flex 布局 justContent:center item-align:center
  1. CSS常见的选择器有哪些？
  • id选择器
  • 类选择器
  • 伪类选择器
  • 全局选择器
  1. CSS的优先级如何计算？
  • CSS中，权重用数字衡量
  • 元素选择器的权重为: 1
  • class选择器的权重为: 10
  • ID选择器的权重为: 100
  • 内联样式的权重为: 1000
  • 优先级从高到低：内联样式 > ID选择器 > 类选择器 > 元素选择器>全局选择器
  1. 长度单位px、em和rem的区别是什么？
  • px是基于屏幕像素来确定的
  • em是基于父元素的字体大小，1em就是一个字节
  • rem是基于根元素的字体大小,12px 1rem=12px
  1. 讲一下flex弹性盒布局？
  • flex 也叫弹性布局布局分为主轴和侧轴
  • 常用属性
  • flex-direction 设置主轴
  • flex-wrap 是否展示一行
  • flex-flow 方向向哪边延伸
  • justify-content 主轴对齐方式
  • align-items 侧轴对齐方式
  • align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
  1. 浮动塌陷问题解决方法是什么？
  • 原因：子盒子在浮动的情况下，父盒子并未浮动，且子盒子无法根据父盒子来位置，从而造成塌陷
  • 解决：
  • overflow:hidden
  • 让父元素本身也浮动float：left;
  • 清除浮动
.father{
  width: 1000px;
  min-height: 100px;
  background: yellow;
  border: 1px solid yellow;
  zoom: 1;
}
.father:after {
  content: ""; /*生成内容作为最后一个元素，至于content里面是什么没有影响*/
  display: block; /*使生成的元素以块级元素显示，占满剩余空间*/
  height: 0; /*避免生成的内容破坏原有空间的高度*/
  clear: both; /*闭合浮动*/
  visibility: hidden; /*使生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/

}
  1. position属性的值有哪些？各个值是什么含义？
  • 绝对定位 absolute
  • 静态定位 static
  • 相对定位 relative
  • 粘性定位 fixed
  1. BFC、IFC是什么？
  • BFC块级格式化上下文

其容器内排列规则如下

  • 纵向一个挨着一个排列
  • 两个盒子的纵向间距由margin属性决定,相邻盒子的margin会有重叠现象,此时间距值取较大的margin

BFC可以看作一个独立的布局环境,容器内的元素和容器外的元素布局互不影响

BFC可以包含浮动元素

清除浮动效果;BFC会排斥外部浮动元素,让浮动元素和块级元素不再有重叠

  • IFC行内格式化上下文

布局规则

  • 水平方向,子元素从左到右排列,空间不够时换到下一行
  • 垂直方向,子元素按不同形式对齐
  • 子元素只会计算横向样式空间,不会计算垂直方向样式空间(padding,border,margin)
  • 能把一行上的框都包含进去的矩形区域称为该行的行框(line box),其宽度是由包含块和其中的浮动决定的
  • IFC中的line box左右边一般紧贴其包含块,但有float元素优先排列

当行框内的行内元素没有占满整行的空间时，他们在水平方向的位置会受到text-align属性的影响。

而当行内元素太长时，会被分割为多行，也就是说这个元素内产生了多个行框排列在一起。此时margin、border、padding都不会在断裂处生效。

满足一下条件时，行框会被当作高度为0的盒子处理：

  • 不含文字
  • 非white-space: pre | pre-wrap | pre-line
  • 不含margin、padding、border值不为零的元素
  • 不含在常规流中的元素，如图片、表格之类

JavaScript

  1. 谈谈对原型链的理解。 image.png
  • 首先每个钩子函数都有自己的原型，通过portotype找到自己的原型，其原型有自己的原型，并且原型有自己的实例对象通过_proto_找到自己的实例，像这样一层一层关系嵌套就叫原型链
  1. js如何实现继承？
  • 原型继承
  • 构造函数继承
  • 原型链继承
  • 寄生式继承
  • 寄生组合式继承
  1. js有哪些判断类型的方法？
  • typeof
  • instanceof
  • constructor
  • Object.prototype.toString.call()
  1. 如何判断一个变量是否数组？
  • Array.isArray()
  • arr.proto==Array.prototype
  • intanceof
  • Object.prototype.toString.call()
  1. Null 和 undefined 的区别？ Null代表空 undefined代表未定义

null转数字是0 undefined转数字是NaN

使用typeof null 为 object undefined 为 undefined 6. call bind apply的区别？ 7. 防抖节流的概念？实现防抖和节流。 8. 深拷贝、浅拷贝的区别？如何实现深拷贝和浅拷贝？ 9. 对比 一下var、const、let。 10. ES next新特性有哪些？ 11. 箭头函数和普通函数区别是什么？ 12. 使用new创建对象的过程是什么样的？ 13. this指向系列问题。 14. 手写bind方法。 15. 谈谈对闭包的理解？什么是闭包？闭包有哪些应用场景？闭包有什么缺点？如何避免闭包？ 16. 谈谈对js事件循环的理解？ 17. 谈谈对promise理解？ 18. 手写 Promise。 19. 实现 Promise.all方法。 20. Typescript中type和interface的区别是什么？ 21. 讲讲Typescript中的泛型？ 22. Typescript如何实现一个函数的重载？ 23. CmmonJS和ESM区别？ 24. 柯里化是什么？有什么用？怎么实现？ 25. 讲讲js垃圾回收机制。 26. 实现一个发布订阅。 27. 如何实现数组怕平？ 28. 如何实现数组去重？

Vue

1. 讲讲Vuex的使用方法。

  1. 讲讲Vue双向绑定原理。
  2. mvvm和mvc区别是什么？
  3. Vue组件间通信方式有哪些？
  4. computed和watch区别是什么？
  5. v-for和v-if同时使用有问题吗？
  6. 讲讲前端路由原理。比较一下history和hash这两种路由。
  7. 讲讲Vue的虚拟DOM，原理，好处是什么？相对于手动操作DOM，性能更好吗？
  8. 说说Vue的keep-alive使用及原理。
  9. Vue父子组件生命周期触发顺序是怎样的？
  10. Vue.nextTick的实现？
  11. 讲讲Vue diff算法。

React

1. 讲讲React diff算法。

  1. React组件复用方式有哪几种？
  2. React fiber是什么？有什么用？
  3. React生命周期有哪些？React16废弃了哪些？为什么要废弃？新增的生命周期钩子有哪些？有什么作用？
  4. 如何对React性能优化？
  5. React的setState是同步的还是异步的？
  6. 讲讲React事件绑定原理。
  7. 讲讲React的hooks，有什么好处？有哪些常用的hook？
  8. 讲讲Reactkey的作用。
  9. 谈谈React的类组件和函数式组件的区别。

工程化

1. webpack性能优化有哪些方法？

  1. webpack的loader和plugin区别是什么？常用的plugin和loader有哪些？
  2. webpack构建流程是什么？
  3. 讲讲tree-shaking原理。

性能优化

1. 前端页面性能如何优化？

  1. 讲讲回流和重绘的区别，如何避免回流和重绘？

安全

1. 网络攻击有哪些？如何防御？

计算机基础

1. 进程与线程区别是什么？

  1. 讲讲TCP三次握手、四次挥手，为什么要三次握手、四次挥手？
  2. TCP和UDP区别是什么？

网络通信

1. 说说从输入url到页面展示出来的整个过程。

  1. 什么是跨域？为什么会出现跨域？如何解决跨域问题？jsonp原理 是什么？
  2. http各版本的改进都是什么？
  3. https原理是什么？为什么可以保证安全性？
  4. http常见状态码有哪些？
  5. http有哪些方法？
  6. get和post区别是什么？
  7. 讲讲http缓存机制。
  8. cdn是什么？它的原理是什么？
  9. 讲讲304协商缓存过程。
  10. 浏览器有哪些缓存？localStorage、sessionStorage、cookie的、session的区别是什么？
avatar
文章
阅读
粉丝