当前位置：首页 > news >正文

金三银四季节前端面试题复习来了

news 2025/9/18 16:51:14

vue3和vue2的区别有哪些

Diff算法的改进+Tree Sharing优化主要的API
双向绑定改为es6的proxy
原生支持ts
composition API
移除令人头疼的this

说说CSS选择器以及这些选择器的优先级

!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）

什么是BFC

BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围，把它理解成是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干。

触发BFC条件

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素
弹性盒（flex或inline-flex）
display: flow-root
column-span: all

跨域的解决方案

jsonp
Nginx反向代理
postMessage
document.domain
脚手架代理

HTTP2和HTTP1有什么区别

HTTP2支持二进制传送（实现方便且健壮），
HTTP1.x是字符串传送
HTTP2支持多路复用
HTTP2采用HPACK压缩算法压缩头部，减小了传输的体积
HTTP2支持服务端推送

首屏加载优化

Vue-Router路由懒加载（利用Webpack的代码切割）
使用CDN加速，将通用的库从vendor进行抽离
Nginx的gzip压缩
Vue异步组件
服务端渲染SSR
如果使用了一些UI库，采用按需加载
Webpack开启gzip压缩
如果首屏为登录页，可以做成多入口
Service Worker缓存文件处理
使用link标签的rel属性设置 prefetch（这段资源将会在未来某个导航或者功能-要用到，但是本资源的下载顺序权重比较低，prefetch通常用于加速下一次导航）、preload（preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度）

避免回流和重绘

何时发生回流

添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
页面一开始渲染的时候（这肯定避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

如何避免

CSS：

避免使用table布局。
尽可能在DOM树的最末端改变class。
避免设置多层内联样式。
将动画效果应用到position属性为absolute或fixed`的元素上
避免使用CSS表达式（例如：calc()）
CSS3硬件加速（GPU加速）

JavaScript：

避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中
也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流

持续更新中。。。

如果有需要，可以关注我的转转(跳剑舞的刽子手）, 更多相关详情+面试资源