2022最新web前端开发工程师面试题(web前端开发工程师面试题及答案)

随着网络的快速发展，用户越来越注重视觉感受，web前端平台用户体验度逐渐提升，因此企业对前端开发技术要求不断提高，需求量也不断增加。web前端开发工程师也越来越受到大家喜爱，但如果想要成为一名web前端工程师，在公司的实践也必不可少。因此，本文就给大家分享2022最新web前端开发工程师面试题。

display:none; 和visibility:hidden;

display:none; 彻底消失，释放空间。可能引发页面的reflow回流（重排）。

visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不会引发页面回流。

你做的页面在哪些浏览器内核中测试过

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核 ；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核

CSS 选择器权重如何计算

就近原则：直接选中的，一定比继承的权重大。

一样近，比权重：id是100，class是10，标签是1， 总数权重一样谁写在下面听谁的。

行内 > 内嵌 = 外联 > 导入 !important能够提升权限，但是不能提升继承的 class="a b c" 和挂载顺序无关，看写的顺序

web 前端开发，如何提高页面性能优化（常问）

1.减少http请求次数

2.从用户的角度讲，静态资源（图片，css，js）都使用cdn，cdn就是一组分布在不同地方的web服务器，用户离服务器更近，请求的时间就更短

3.讲css放在文件头部，js文件放在底部（资源加载是，自上而下的，先加载css会让用户感觉页面加载更快）

4.尽可能使用iconfont代替图片图标

5.善用缓存，不重复加载相同的资源（数据如果要重复使用，就可以使用缓存，不要重复请求）

6.图片懒加载（当滚动条，滚动到一定值的时候，再加载），

• 不要缩放图片（例如你要50*50的图片，就不要拿500乘以500的大图片，影响加载）
• 降低图片质量
• 尽可能用css来代替图片（例如渐变，阴影）
• 使用webp格式图片

什么叫优雅降级和渐进渐强

优雅降级和渐进渐强 是浏览器兼容的两种方案。

1、优雅降级： 能力检测，如果能力有用新的；如果能力没有，用旧的。（先从高级功能实现，后面在逐级降低）

2、渐进渐强： 低端浏览器仅实现基本功能，高级浏览器实现额外功能。 （先实现基本功能。然后在实现高级功能）

比如上传文件，低端浏览器就给它提供上传按钮，高端浏览器增加外部拖拽文件上传。

如何形成 BFC

BFC是块级格式化上下文。

理论上讲，页面上所有的盒子必须都装到BFC盒子中，页面渲染才快。

BFC的形成：

① 有明确宽度、高度的盒子。

② overflow:hidden；

③ 定位的、浮动的

④ display ：inline-block，

BFC的性质： 内部有浮动，能清除这些浮动，能为浮动元素撑高。

CSS 的盒模型

1、标准盒模型：

范围：margin、border、padding、content

在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

标准盒模型下盒子的大小 = content + border + padding + margin

2、IE盒子模型（怪异盒模型）中

范围：margin、border、padding、content都有，但是不同是content包含border、padding

width 和 height 指的是content+border+padding的宽度和高度。

怪异盒模型下盒子的大小=width（content + border + padding） + margin

3、盒模型的选择

可以为box-sizing赋三个值：

content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)

border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型

padding-box：将padding算入width范围

当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

如何垂直水平居中一个元素（常问）

1、弹性布局：display:flex; justify‐content: center; align‐items: center;

2、定位

3、display:inline-block配合text-align:center

对单位px、em、rem、vh、vw的理解

px物理像素，绝对值；

em相对于父级的大小，相对值；

rem相对于html的大小，相对 值；

vh相对于屏幕的高度，相对值；vw相对于屏幕的宽度，相对值

以上就是“2022最新web前端开发工程师面试题(web前端开发工程师面试题及答案)”的详细内容，想要了解更多web前端教程欢迎持续关注编程学习网